🎬 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%。

选择器的使用原则

1. 先选中元素，再进行操作：jQuery 的核心思想是先选择元素，再对选中的元素进行操作
2. 选择器越具体，效率越高：避免使用过于宽泛的选择器（如 $("*")）
3. 组合使用选择器：可以组合使用多种选择器提高选择的精确度

jQuery 选择器的丰富性和灵活性使开发者能够轻松地定位到需要操作的 DOM 元素，进行样式修改、事件绑定等操作，极大地提高了开发效率。掌握这些选择器是成为 jQuery 专家的基础。

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙