本章将介绍 jQuery 中最核心的基本选择器，包括如下五种选择器：
#id：ID选择器
element：元素/标签选择器
.class：类选择器
*：通配符选择器
selector1,selector2,selectorN：并集选择器，一次写多个选择器
下面将逐一详细介绍每种选择器。
根据元素的 id 属性值，选中页面中唯一的那个元素（HTML 规范要求 id 全局唯一）。
注意，ID选择器的查找速度最快（基于原生 document.getElementById()），优先用于精准选中单个元素。
语法：
$("#id名称")注意事项：
不要给 id 加空格、特殊字符（仅允许字母、数字、下划线、短横线，且不能以数字开头）；
避免重复 id，否则会导致选择器行为不可控；
语法中 # 必须紧跟 id 名称，不能有空格（如 $("# content") 会选中 id 包含空格的元素，而非 id 为 content 的元素）。
用于选中页面中所有指定标签的元素，如 $("div") 选中所有 div，$("p") 选中所有 p。
注意，该选择器基于原生 document.getElementsByTagName()，适合批量选中同类型标签。
语法：
$("标签名")注意事项：
标签名小写即可（如 $("P") 和 $("p") 效果一致），符合 HTML 规范；
若页面无该标签，返回空的 jQuery 对象（不会报错），如 $("h5").length 输出 0；
适合批量操作同类型元素，但若只需操作单个元素，优先用 ID 选择器（效率更高）；
用于选中页面中所有拥有该类名的元素，一个元素可拥有多个类，只要包含目标类名就会被选中。
注意，该选择器基于原生 document.getElementsByClassName()，适合批量选中不同标签但同样式 / 行为的元素。
语法：
$(".类名")注意事项：
类名不能以数字开头，多个类名用空格分隔（如 class="box highlight"）；
语法中 . 必须紧跟类名，不能有空格（如 $(". box") 会选中类名包含空格的元素，而非类为 box 的元素）；
一个元素可被多个类选择器匹配（如同时匹配 .box 和 .highlight）；
用于选中页面中所有的 DOM 元素（包括 html、body、div、p 等所有标签）。
该选择器范围最广，但效率最低（遍历所有元素），尽量少用。
语法：
$("*")注意事项：
全局使用 $("*") 会严重影响性能（遍历所有元素），仅在特殊场景下使用；
建议结合上下文使用（如 $("div *") 只选 div 下的所有子元素），缩小选择范围；
不要用于大规模样式修改，优先用更精准的选择器。
用于同时选中多个不同选择器匹配的元素（相当于“或”的逻辑，只要匹配其中一个选择器就会被选中）。
该选择器灵活组合多种选择器，批量操作不同类型的元素。
语法：
$("选择器1, 选择器2, 选择器N")注意事项：
多个选择器之间用英文逗号分隔，逗号后可加空格（如 $("#title, .content") 和 $("#title,.content") 效果一致）；
并集选择器的效率取决于其中最慢的那个选择器（如包含 * 则效率低）；
可任意组合基本选择器（ID、类、标签、通配符），满足多元素批量操作需求。
下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程：选择器</title>
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body > div { margin:20px; }
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px;}
ul li { margin: 3px 0;}
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<!-- 注意：下面的 < 和 > 是对 < 和 > 的实体编码 -->
<div class="app">
<h3>最基本的选择器，也是最常用的选择器，必须掌握</h3>
<div id="idSelector">div id="idSelector" </div>
<p class="classSelector classSelector2">p class="classSelector classSelector2" </p>
<p>p</p>
</div>
<div>
<!-- * 选择所有元素 -->
<button type="button" onclick="
reset();
// 选择所有的元素，然后添加边框
$('*').addClass('myClass');
// 仅选择 class='app' 下面的所有元素
// $('*', $('.app')).css('border', 'solid 2px red');
">* 所有元素</button>
<!-- #id 根据ID选择 -->
<button type="button" onclick="
reset();
// 选择ID为idSelector的元素，然后添加边框
$('#idSelector').addClass('myClass');
">#idSelector</button>
<!-- .class 根据类名选择 -->
<button type="button" onclick="
reset();
// 选择class为classSelector2的元素，然后添加边框
$('.classSelector2').addClass('myClass');
">.classSelector2</button>
<!-- element 根据标签名称选择 -->
<button type="button" onclick="
reset();
// 选择标签为p的元素，然后添加边框
$('p').addClass('myClass');
">p</button>
<!-- selector1,selector2,selectorN 选择多个元素 -->
<button type="button" onclick="
reset();
// 选择多个元素，然后添加边框
$('#idSelector,.classSelector').addClass('myClass');
">#idSelector,.classSelector</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>运行示例，效果如下图：
上图是点击“#idSelector,.classSelector”按钮后的效果，选中了一个 <div> 和 <p> 标签，即添加红色边框的元素。
更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098