HoRain云--jQuery选择器全解析：高效定位DOM元素
🎬 HoRain 云小助手：个人主页
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
目录
⛳️ 推荐
jQuery 选择器详解
基本概念
选择器类型
1. 基本选择器
2. 层级选择器
3. 过滤选择器
4. 属性选择器
选择器使用示例
Sizzle 引擎工作原理
选择器的使用原则
jQuery 选择器详解
jQuery 选择器是 jQuery 框架的核心功能之一，它极大地简化了 DOM 元素的选择和操作。jQuery 选择器允许开发者对 HTML 元素组或单个元素进行操作，基于元素的 ID、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
基本概念
- 所有选择器都以美元符号开头：
$ - 基于 CSS 选择器：jQuery 选择器基于已有的 CSS 选择器语法，但进行了扩展
- Sizzle 引擎：jQuery 使用 Sizzle 作为选择器引擎，这是一个纯 JavaScript CSS 选择器引擎，采用 Right To Left 匹配模式（先匹配最右侧元素，再验证父节点）
选择器类型
1. 基本选择器
| 选择器类型 | 示例 | 说明 |
|---|---|---|
| ID 选择器 | $("#test") | 选取 id 为 test 的唯一元素 |
| 类选择器 | $(".test") | 选取 class 为 test 的所有元素 |
| 标签选择器 | $("p") | 选取所有 元素 |
| 通配符选择器 | $("*") | 选取所有元素（慎用） |
| 并集选择器 | $("p, div, #myButton") | 同时选取所有 p、div 和 id 为 myButton 的元素 |
2. 层级选择器
| 选择器类型 | 示例 | 说明 |
|---|---|---|
| 后代选择器 | $("div p") | 选取 div 内部的所有 p 元素（包括子、孙元素） |
| 子选择器 | $("div > p") | 选取 div 的直接子元素 p |
| 相邻兄弟选择器 | $("div + p") | 选取 div 后面紧邻的 p 元素 |
| 后续兄弟选择器 | $("div ~ p") | 选取 div 后面所有的 p 元素 |
3. 过滤选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| :first | $("p:first") | 选取第一个 p 元素 |
| :last | $("p:last") | 选取最后一个 p 元素 |
| :even | $("p:even") | 选取索引为偶数的 p 元素 |
| :odd | $("p:odd") | 选取索引为奇数的 p 元素 |
| :eq(n) | $("p:eq(1)") | 选取索引为 1 的 p 元素 |
| :not(selector) | $("p:not(.myClass)") | 选取 class 不为 myClass 的 p 元素 |
| :gt(n) | $("p:gt(2)") | 选取索引大于 2 的 p 元素 |
| :lt(n) | $("p:lt(2)") | 选取索引小于 2 的 p 元素 |
4. 属性选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| [attribute] | $("[href]") | 选取所有具有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 选取 href 属性值为 # 的元素 |
| [attribute!=value] | $("[href!='#']") | 选取 href 属性值不为 # 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 选取 href 属性值以 .jpg 结尾的元素 |
选择器使用示例
// 选取所有段落元素 $("p").css("color", "red"); // 选取 id 为 "myDiv" 的元素 $("#myDiv").hide(); // 选取 class 为 "highlight" 的所有元素 $(".highlight").css("background", "#eee"); // 选取 div 内的所有 p 元素 $("div p").addClass("highlight"); // 选取 class 为 "test" 的第一个元素 $(".test:first").css("font-weight", "bold");Sizzle 引擎工作原理
Sizzle 选择器引擎采用 Right To Left 匹配模式，与传统匹配方式不同：
- 传统方式：先匹配 div，再在 div 下匹配 span
- Sizzle 方式：先匹配所有 span，再验证其父节点是否为 div
这种设计通过原生 DOM 查询提升了效率，支持 30 余种 CSS3 选择器语法，压缩后体积约 3KB，在复杂表达式处理中速度较传统引擎提升 200%-300%。
选择器的使用原则
- 先选中元素，再进行操作：jQuery 的核心思想是先选择元素，再对选中的元素进行操作
- 选择器越具体，效率越高：避免使用过于宽泛的选择器（如
$("*")） - 组合使用选择器：可以组合使用多种选择器提高选择的精确度
jQuery 选择器的丰富性和灵活性使开发者能够轻松地定位到需要操作的 DOM 元素，进行样式修改、事件绑定等操作，极大地提高了开发效率。掌握这些选择器是成为 jQuery 专家的基础。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙