jquery选择器

jQuery 选择器基础

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

常见选择器类型

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

组合与层级选择器

多条件组合
使用逗号分隔多个选择器：
$("div, p, .class") 选取所有 <div>、<p> 和 class="class" 的元素。

层级关系

• 后代选择器：$("div p") 选取 <div> 内所有 <p> 后代。
• 子元素选择器：$("div > p") 仅选取 <div> 的直接子 <p> 元素。

过滤选择器

基本过滤

• :first：$("p:first") 选取第一个 <p>。
• :last：$("p:last") 选取最后一个 <p>。
• :even/:odd：选取偶数或奇数索引元素（从 0 开始）。

内容过滤

• :contains(text)：$("p:contains('Hello')") 选取内容包含 "Hello" 的 <p>。
• :empty：选取无子元素或文本的元素。

表单相关选择器

• :input：选取所有表单元素（<input>, <select>, <textarea> 等）。
• :checked：选取被选中的复选框或单选按钮。
• :selected：选取被选中的 <option> 元素。

示例代码

// 修改所有 class 为 "highlight" 的元素背景色
$(".highlight").css("background-color", "yellow");

// 隐藏所有 type="text" 的 input 元素
$("input[type='text']").hide();

// 为表格的奇数行添加样式
$("tr:odd").addClass("striped");

性能优化建议

• 优先使用 ID 选择器，效率最高。
• 避免过度嵌套（如 $("body div ul li a")），改用直接路径或上下文查找。
• 缓存重复使用的选择器结果：

  var $elements = $(".myClass");
  $elements.hide();
  $elements.addClass("processed");

jQuery 选择器支持链式操作，可结合方法如 .find()、.filter() 进一步细化匹配。