jquery 选择

jQuery 选择器基础

jQuery 选择器用于选取 HTML 元素，语法基于 CSS 选择器，并扩展了更多功能。通过 $() 或 jQuery() 函数调用选择器，返回匹配元素的集合。

常见选择器类型：

• 元素选择器：$("p") 选取所有 <p> 元素。
• ID 选择器：$("#myId") 选取 ID 为 myId 的元素。
• 类选择器：$(".myClass") 选取所有 class="myClass" 的元素。
• 属性选择器：$("[href]") 选取所有带 href 属性的元素。

组合与层级选择器

组合选择器通过逗号分隔多个选择器，匹配任意一个条件：

$("div, p, .class") // 选取所有 div、p 或 class="class" 的元素

层级选择器基于 DOM 结构：

• 后代选择器：$("div p") 选取 div 内所有 p 元素。
• 子元素选择器：$("ul > li") 仅选取 ul 的直接子元素 li。
• 相邻兄弟选择器：$("h1 + p") 选取紧接在 h1 后的第一个 p。
• 通用兄弟选择器：$("h1 ~ p") 选取 h1 之后的所有同级 p。

过滤选择器

基本过滤器：

• :first 和 :last：$("p:first") 选取第一个 p。
• :even 和 :odd：$("tr:even") 选取偶数行表格行。
• :eq(n)：$("li:eq(2)") 选取索引为 2 的 li（从 0 开始）。

内容过滤器：

• :contains(text)：$("p:contains('Hello')") 选取包含文本 "Hello" 的 p。
• :empty 和 :parent：$("div:empty") 选取无子元素的 div。

可见性过滤器：

• :visible 和 :hidden：$("div:hidden") 选取隐藏的 div。

表单选择器

针对表单元素的专用选择器：

• :input：选取所有 input、textarea、select 和 button。
• :text、:password、:radio 等：按类型筛选，如 $(":checkbox") 选取所有复选框。
• :checked：$("input:checked") 选取所有被选中的复选框或单选按钮。
• :selected：$("option:selected") 选取所有被选中的下拉选项。

方法链与筛选

jQuery 支持链式调用，通过方法进一步筛选结果：

$("div").find("p").css("color", "red"); // 在 div 内查找 p 并设置样式

常用筛选方法：

• .find(selector)：在子元素中搜索。
• .filter(selector)：从当前集合中筛选匹配项。
• .not(selector)：排除匹配项。
• .has(selector)：保留包含特定子元素的项。

性能优化建议

• 缓存选择器结果：避免重复查询 DOM。

  var $elements = $(".myClass"); // 缓存结果

• 优先使用 ID 选择器：ID 选择速度最快。
• 缩小上下文范围：在已知父元素时指定上下文。

  $(".child", "#parent"); // 仅在 #parent 内查找 .child

通过合理组合选择器和方法，可以高效操作 DOM 元素。