，# jQuery选择器全解析，从菜鸟到大神的必备技能，jQuery的核心优势之一，便是其强大且灵活的选择器功能，选择器是jQuery操作DOM元素的基础，它允许开发者以简洁、高效的方式定位和操作网页中的各种元素，从最基础的ID、类、标签选择器，到功能强大的属性、表单、可见性选择器，再到能够精准定位特定元素位置的子元素、兄弟元素选择器，jQuery提供了丰富多样的选择器语法，掌握这些选择器，不仅能让你快速选取目标元素，还能结合:not(),:first,:last,:even,:odd等伪类选择器以及:contains(),:empty,:parent等过滤选择器，实现更复杂、更精确的选择逻辑，动态生成的选择器（如[attribute=value]）和强大的上下文选择器（:visible,:hidden,:enabled,:disabled）更是处理实际页面元素状态的关键，熟练运用jQuery选择器，是提升前端开发效率、编写优雅简洁代码的必备技能，是每一位从入门到精通的前端开发者必须打下的坚实基础。
本文目录导读：
什么是jQuery选择器？
我们得搞清楚一个问题：jQuery选择器到底是个啥？
jQuery选择器就是用来查找和操作HTML元素的工具，它模仿了CSS选择器的语法，但功能更强大，你可以把它想象成一个“魔法师的咒语”，念对了咒语,HTML文档中的元素就会乖乖听你的命令。
举个栗子：
<div class="container">
<p>这是一段文字</p>
<p>这是第二段文字</p>
</div>
用jQuery选择器,我们可以轻松找到这两个段落：
$("p") // 找到所有段落
$("#container") // 找到ID为container的元素
$(".container") // 找到类名为container的元素
是不是感觉像在写CSS？没错，jQuery选择器就是基于CSS选择器的,但比它更灵活！
基本选择器（万丈高楼从地起）
基本选择器是最常用的，也是最基础的，它们就像选择器家族的“元老”,我们先来认识一下：
元素选择器
语法： $("tag")
作用： 选择所有指定标签名的元素。
示例：
$("div") // 所有div元素
$("button") // 所有按钮元素
ID选择器
语法： $("#id")
作用： 选择指定ID的元素。
示例：
$("#header") // ID为header的元素
类选择器
语法： $(".class")
作用： 选择所有指定类名的元素。
示例：
$(".btn") // 所有class为btn的元素
通配符选择器
语法：
作用： 选择所有元素。
示例：
$("*") // 所有元素
多选择器
语法： $(selector1, selector2, ...)
作用： 合并多个选择器的结果。
示例：
$("div, p, a") // 所有div、p和a元素
表格总结：
| 选择器类型 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 元素选择器 | $("tag") |
$("div") |
选择所有指定标签 |
| ID选择器 | $("#id") |
$("#header") |
选择指定ID的元素 |
| 类选择器 | $(".class") |
$(".btn") |
选择所有指定类 |
| 通配符选择器 | 选择所有元素 | ||
| 多选择器 | $(selector1, selector2, ...) |
$("div, p, a") |
合并多个选择器 |
属性选择器（精准定位，无往不利）
我们不仅要知道元素是什么，还要知道它有什么属性,这时候属性选择器就派上用场了！
[attribute]
语法： $("[attribute]")
作用： 选择所有带有指定属性的元素。
示例：
$("[href]") // 所有带有href属性的元素
[attribute=value]
语法： $("[attribute=value]")
作用： 选择所有属性值等于指定值的元素。
示例：
$("[href='https://example.com']") // href属性值为https://example.com的元素
[attribute^=value]
语法： $("[attribute^=value]")
作用： 选择所有属性值以指定值开头的元素。
示例：
$("[href^='https://']") // href属性值以https://开头的元素
[attribute$=value]
语法： $("[attribute$=value]")
作用： 选择所有属性值以指定值结尾的元素。
示例：
$("[href$='.com']") // href属性值以.com结尾的元素
[attribute*=value]
语法： $("[attribute*=value]")
作用： 选择所有属性值包含指定值的元素。
示例：
$("[href*='example']") // href属性值包含example的元素
层级选择器（从上到下，层层递进）
我们不仅要知道元素是什么，还要知道它在页面中的位置,层级选择器就是用来解决这个问题的！
后代选择器
语法： $(selector1 selector2)
作用： 选择所有selector2是selector1的后代的元素。
示例：
$("#container p") // ID为container内的所有p元素
子元素选择器
语法： $(selector1 > selector2)
作用： 选择所有selector2是selector1的直接子元素的元素。
示例：
$("#container > div") // ID为container下的直接子div元素
兄弟选择器（相邻和后续）
语法：
$(selector1 + selector2)// 相邻兄弟$(selector1 ~ selector2)// 后续兄弟
作用： 选择与selector1相邻或后续的selector2元素。
示例：
$(".box + .highlight") // box元素后的第一个.highlight元素
$(".box ~ .highlight") // box元素后的所有.highlight元素
过滤选择器（锦上添花，精益求精）
我们找到了一组元素，但只想其中一部分,过滤选择器就是用来干这个的！
:first
语法： $(selector:first)
作用： 选择匹配元素中的第一个元素。
示例：
$("li:first") // 第一个li元素
:last
语法： $(selector:last)
作用： 选择匹配元素中的最后一个元素。
示例：
$("li:last") // 最后一个li元素
:not(selector)
语法： $(selector:not(selector))
作用： 排除匹配的元素。
示例：
$("div:not(.hidden)") // 所有div元素，除了class为hidden的
:even
语法： $(selector:even)
作用： 选择索引为偶数的元素。
示例：
$("li:even") // 索引为偶数的li元素（索引从0开始）
:odd
语法： $(selector:odd)
作用： 选择索引为奇数的元素。
示例：
$("li:odd") // 索引为奇数的li元素
表单选择器（表单控件，一键搞定）
jQuery还提供了专门的表单选择器,方便我们操作表单元素：
:input
语法： $(":input")
作用： 选择所有表单控件。
示例：
$(":input") // 所有表单控件
:text
语法： $(":text")
作用： 选择所有文本输入框。
示例：
$(":text") // 所有文本输入框
:checkbox
语法： $(":checkbox")
作用： 选择所有复选框。
示例：
$(":checkbox") // 所有复选框
问答时间（解惑答疑，不留死角）
Q1：ID选择器和类选择器有什么区别？
A： ID选择器用开头，每个元素只能有一个ID；类选择器用开头,一个元素可以有多个类。
Q2：属性选择器和基本选择器有什么区别？
A： 基本选择器是根据标签、ID、类等选择元素；属性选择器是根据元素的属性来选择元素,更灵活也更强大。
Q3：层级选择器中的后代选择器和子元素选择器有什么区别？
A： 后代选择器选择所有后代元素（包括子元素、孙元素等）；子元素选择器只选择直接子元素。
实战案例（理论联系实际，学以致用）
下面是一个简单的案例,展示如何使用jQuery选择器来操作页面元素：
<!DOCTYPE html>
<html>
<head>jQuery选择器案例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div class="container">
<h1>jQuery选择器案例</h1>
<p class="highlight">这是第一段</p>
<p>这是第二段</p>
<p class="highlight">这是第三段</p>
<button id="highlightBtn">高亮段落</button>
</div>
<script>
$(document).ready(function() {
$("#highlightBtn").click(function() {
// 高亮所有class为highlight的段落
$("p.highlight").addClass("highlight");
// 移除其他段落的高亮
$("p").not(".highlight").removeClass("highlight");
});
});
</script>
</body>
</html>
在这个案例中，点击按钮会高亮所有class为highlight的段落,同时移除其他段落的高亮效果。
学无止境，持续进步）
jQuery选择器是前端开发中不可或缺的工具，它帮助我们快速、准确地定位和操作HTML元素，通过本文，你应该已经掌握了基本选择器、属性选择器、层级选择器、过滤选择器、表单选择器等常用选择器的用法。
学习jQuery选择器不是一蹴而就的，多练习、多思考、多总结，你一定能成为选择器大师！如果你有任何问题，欢迎在评论区留言,我们一起讨论！
字数统计：约1800字
表格数量：1个
问答数量：3个
案例数量：1个
希望这篇文章能帮助你更好地理解和使用jQuery选择器！如果你觉得有用,记得点赞收藏哦！
知识扩展阅读
jQuery 是一款非常流行的 JavaScript 库，它简化了 DOM 操作和事件处理，使得前端开发变得更加高效，而 jQuery 的强大之处在于其丰富的选择器功能,这些选择器允许开发者轻松地定位页面中的元素。
基本选择器
标签选择器
标签选择器是最简单的选择器之一，用于选择特定类型的 HTML 元素。
$("div") // 选择所有 div 元素
类选择器
类选择器用于选择具有特定类的元素。
$(".class-name") // 选择所有 class 为 "class-name" 的元素
ID 选择器
ID 选择器用于选择具有特定 ID 的元素，由于每个元素的 ID 在文档中是唯一的，因此使用 ID 选择器可以精确地选中特定的元素。
$("#id-value") // 选择具有 id="id-value" 的元素
属性选择器
属性选择器可以根据元素的属性值来选择元素。
$("[href]") // 选择所有带有 href 属性的元素
群组选择器
群组选择器可以将多个选择器组合在一起,以便同时匹配多个元素。
$("p, h1") // 选择所有 p 和 h1 元素
复合选择器
后代选择器
后代选择器用于选择某个元素的后代元素。
$("div p") // 选择所有位于 div 元素内的 p 元素
子选择器
子选择器用于选择直接子元素。
$("div > p") // 选择所有直接位于 div 元素下的 p 元素
并集选择器
并集选择器用于选择多个不同类型的选择器所匹配的所有元素。
$("h1, p, a") // 选择所有 h1、p 和 a 元素
相邻兄弟选择器
相邻兄弟选择器用于选择紧挨着另一个元素后的元素。
$("p + span") // 选择所有紧跟在 p 元素后面的 span 元素
通用相邻兄弟选择器
通用相邻兄弟选择器用于选择紧挨着另一个元素后的任意元素。
$("p ~ span") // 选择所有紧挨在 p 元素之后的 span 元素（无论中间有多少个其他元素）
过滤选择器
空元素选择器
空元素选择器用于选择没有任何子元素的元素。
$("div:empty") // 选择所有没有子元素的 div 元素
包含文本的选择器
包含文本的选择器用于选择含有指定文本的元素。
$("div:contains('Hello World')") // 选择所有包含文本 "Hello World" 的 div 元素
不等于选择器
不等于选择器用于排除某些元素。
$("input:not([type='text'])") // 选择所有 type 不是 'text' 的 input 元素
首选选择器
首选选择器用于选择第一个满足条件的元素。
$("li:first-child") // 选择列表中第一个 li 元素
最后选择器
最后选择器用于选择最后一个满足条件的元素。
$("li:last-child") // 选择列表中最后一个 li 元素
偶数/奇数选择器
偶数选择器和奇数选择器分别用于选择列表中第偶数或奇数的元素。
$("li:nth-child(odd)") // 选择列表中第奇数位置的 li 元素
案例说明
假设我们有一个简单的 HTML 页面如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">jQuery 选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<span>Span element</span>
<a href="#">Link</a>
</div>
<script>
$(document).ready(function(){
// 使用标签选择器获取所有的 div 元素
var $divs = $("div");
console.log($divs);
// 使用类选择器相关的知识点：
