当使用JS对网页元素赋值或取值时，需要先定位到该元素，即获取该元素的DOM对象。在JS中一般使用getElementById()方法获得元素的DOM对象。jQuery提供了更便捷的方式，可以快速批量或单选网页元素，这个功能称为选择器。
jQuery选择器允许通过标签名、属性名或内容批量或单选网页元素，而且兼容各类浏览器，然后再通过jQuery提供的各类方法完成网页元素属性和行为的处理。
选择器的基本语法如下：
$(“expression”)
expression是选择器表达式，它完全支持CSS选择器语法，但两者的作用不同，CSS选择器找到元素后主要是对样式进行操作，而jQuery选择器找到元素后是对元素的行为和属性进行操作。
jQuery选择器分为基本选择器、基本选择器、层次选择器、过滤选择器和表单选择器。
1、 基本选择器
基本选择器是开发者常用的选择器，它主要是通过元素的id、名称、样式、匹配符等来定位和查找网页内的元素，通过匹配符、样式和名称可以批量选择元素，但id只能单选一个元素。
基本选择器说明如下表所示：
注释（1）
返回与id值匹配的元素。语法如下：
$("#id")其中id是待匹配元素的id值。案例代码：
$("#id_btn").click(function(){
JS代码;
});$("#id_btn")返回id值为id_btn的DOM对象，并为DOM对象添加click事件。
注释（2）
返回与class样式名称相同的元素集合。语法如下：
$(".myclass").click(function(){
JS代码;
});$(".myclass")返回class样式名称为myclass的DOM对象集合，并为集合内的所有DOM对象添加click事件。
注释（3）
返回标签名称与tag相同的元素集合。语法如下：
$("div").click(function(){
JS代码;
});$("div")返回标签名称为div的DOM对象集合，并为集合内的所有DOM对象添加click事件。
注释（4）
jQuery允许一次选择可以使用多个选择器，每个选择器用英文逗号分隔，匹配的元素要满足所有列出的选择器。语法如下：
$("#id,.myclass").click(function(){
JS代码;
});$("#id,.myclass")返回与id和myclass同时匹配的DOM对象集合，并为集合内的所有DOM对象添加click事件。
2、 层次选择器
DOM元素（也称为DOM对象）是层级结构，jQuery选择器也支持按层级选择DOM元素。可以选择当前DOM元素的子元素、后代元素、兄弟元素等。
层次选择器说明如下表所示：
注释（1）
用于选取指定元素的后代元素，包括元素的子节点、及后代节点。ancestor是指定的元素（可以通过元素名称来指定元素，也可以通过基本选择器选择元素），descendant是ancestor后代元素，descendant可以通过元素名称来指定元素，也可以通过基本选择器选择元素。选择器返回DOM集合对象。
例如：
$("div p").click(function(){
JS代码;
});$("div p")返回div内所有的p元素，并为返回集合内的所有DOM对象添加click事件。
注释（2）
用于选取指定元素的子元素，不包括后代元素。parent是当前元素，child是子元素。选择器返回DOM集合对象。
例如：
$("div>p").click(function(){
JS代码;
});$("div>p")返回div内子元素名称为p的DOM集合对象，并为返回集合内的所有DOM对象添加click事件。
注释（3）
用于选取紧跟在指定元素的下一个元素，且元素为next。选择器返回DOM集合对象。
例如：
$("div+p").click(function(){
JS代码;
});$(" div+next ")返回紧跟在div元素后面的下一个p元素。
注释（4）
用于选取与指定元素同一层级的所有兄弟元素。选择器返回DOM集合对象。
例如：
$("div~p").click(function(){
JS代码;
});$("div~p")返回与div同层级的所有p元素。
3、 过滤选择器
过滤选择器主要是通过传入特定的过滤规则来选取DOM元素，过滤规则使用英文冒号“:”开头，冒号前面的是通过基本选择器或层次选择器选取的元素集合，冒号后面是过滤规则，用于过滤冒号前面的集合元素。
按照过滤规则的作用，过滤选择器可分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素过滤选择器。
基本过滤选择器
基本过滤器是常用的过滤器，基本过滤选择器说明如下表所示：
内容过滤选择器
内容过滤选择器主要通过元素的文本内容或子元素进行过滤，内容过滤选择器说明如下表所示：
可见性过滤选择器
可见性过滤选择器主要是通过元素的可见性来选取元素，可见性过滤选择器说明如下表所示：
属性过滤选择器
属性过滤选择器主要是通过元素的属性来选取元素，属性表达式包含在[]内，属性过滤选择器说明如下表所示：
子元素过滤选择器
子元素过滤选择器主要是通过定位子元素来选取元素，子元素过滤选择器说明如下表所示：
表单元素过滤选择器
表单元素过滤选择器主要是通过表单元素的属性值来选取元素，表单元素过滤选择器说明如下表所示：
4、 表单选择器
表单选择器主要用于选择表单元素，表单选择器说明如下表所示：
5、 案例代码
案例2：jQuery选择器案例代码（案例代码见unit4\case2.html）
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 基本选择器
$("#id_btn1").click(function(){
var temp;
// 通过id选择元素
temp = $("#id_title").html()
// 通过class选择元素
temp += $(".paraleft").html()
// 通过tag选择元素,返回集合元素
obj = $("h5")
// 遍历集合元素
$.each(obj,function(index, ele) {
temp += $(ele).html()
})
$("#text_count").html(temp)
});
// 层次选择器
$("#id_btn2").click(function(){
var temp = "";
//选取div元素的后代元素p,返回集合元素
obj = $("div p")
$.each(obj,function(index, ele) {
temp += $(ele).html()
})
$("#text_count").html(temp)
//选取紧跟div元素的下一个元素p，返回单个元素
$("#text_count").html($("div p").html())
});
// 过滤选择器
$("#id_btn3").click(function(){
var temp = "";
//选取第一个P元素
$("#text_count").html($("p:first").html())
//选取最后一个P元素
$("#text_count").html($("h5:last").html())
//选取指定索引号的元素
$("#text_count").html($("p:eq(2)").html())
//选取包含内容包含"收获节"的元素
$("#text_count").html($("p:contains('收获节')").html())
//选取元素属性值等于指定值的元素
$("#text_count").html($("h1[id=id_title]").html())
//选取每个父元素的第一个子元素
obj = $("div:first-child")
$.each(obj,function(index, ele) {
temp += $(ele).html()
})
$("#text_count").html(temp)
});
});
</script>
<style type="text/css">
.content{width:100%; height:300px;}
.paraleft{float:right; width:45%;}
</style>
</head>
<body>
<h3>jQuery选择器案例2</h3>
<div>
<div style="float:left; width:45%;">
<h1>落花生</h1>
<h5>许地山</h5>
<hr>
<p>
我们家的后园有半亩空地。母亲说：“让它荒着怪可惜的，你们那么爱吃花生，就开辟出来种花生吧。”我们姐弟几个都很高兴，买种，翻地，播种，浇水，没过几个月，居然收获了。
</p>
<p>
母亲说：“今晚我们过一个收获节，请你们的父亲也来尝尝我们的新花生，好不好？”母亲把花生做成了好几样食品，还咐附就在后园的茅亭里过这个节。
</div>
<div>
<h1 id="id_title">济南的冬天</h1>
<h5>老舍</h5>
<hr>
<p>
对于一个在北平住惯的人，像我，冬天要是不刮风，便觉得是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的人，像我，冬天要能看得见日光，便觉得是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。
</p>
设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？
<p>
</div>
</div>
<div style="both:clear">
<p>
<input type="button" id="id_btn1" value="基本选择器"/>
<input type="button" id="id_btn2" value="层次选择器"/>
<input type="button" id="id_btn3" value="过滤选择器"/>
</p>
<p><span id="text_count"></span></p>
<div>
</body>
<html>