jquery选择器

jQuery 选择器基础语法

jQuery 选择器基于 CSS 选择器语法扩展，用于快速定位 DOM 元素。基本语法为 $("selector") 或 jQuery("selector")，返回一个包含匹配元素的 jQuery 对象。

// 示例：选择所有段落元素
$("p").css("color", "red");

常用选择器类型

元素选择器
通过标签名选择元素：

$("div") // 选择所有 <div> 元素

ID 选择器
通过 id 属性选择唯一元素：

$("#header") // 选择 id="header" 的元素

类选择器
通过 class 属性选择元素：

$(".active") // 选择 class="active" 的所有元素

属性选择器
通过属性匹配元素：

$("[type='text']") // 选择 type="text" 的元素
$("[href^='https']") // 选择 href 以 https 开头的元素

层级与组合选择器

后代选择器
选择嵌套关系的元素：

$("ul li") // 选择 <ul> 内所有 <li>

子元素选择器
选择直接子元素：

$("div > p") // 选择 <div> 的直接子级 <p>

并集选择器
同时匹配多个选择器：

$("h1, h2, h3") // 选择所有 <h1>, <h2>, <h3>

过滤选择器

基本过滤
通过位置或状态筛选：

$("li:first")    // 第一个 <li>
$("li:even")     // 偶数索引 <li>
$("input:checked") // 被选中的输入框

内容过滤
根据元素内容匹配：

$("p:contains('Hello')") // 包含文本 "Hello" 的 <p>
$("td:empty")            // 内容为空的 <td>

表单相关选择器

表单元素选择
快速定位表单控件：

$(":input")      // 所有输入元素（input, select, textarea 等）
$(":text")       // type="text" 的输入框
$(":submit")     // 提交按钮

动态筛选方法

jQuery 提供链式方法进一步筛选结果：

$("li").filter(".active")   // 从结果中筛选 class="active" 的 <li>
$("div").find("span")      // 在 <div> 内查找所有 <span>
$("ul").children()         // 获取 <ul> 的直接子元素

性能优化建议

• 优先使用 ID 选择器（#id），效率最高。
• 避免过度复杂的层级选择（如 $("body div ul li a")）。
• 缓存重复使用的选择器结果：

  const $elements = $(".items");
  $elements.hide();

版本兼容性

• jQuery 1.x 支持 CSS1-3 和部分自定义选择器。
• jQuery 3.x 移除了部分废弃的选择器（如 :eq() 建议用 .eq(index) 方法替代）。

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