选择器是 jQuery 的根基。 在 jQuery 中 ，边历 DOM、事件处理、 css 控制、动画设计和 Ajax 操作都 依赖于选择器．如果熟练使用选择器，不仅能简化代码， 而且可以达到事半功倍的效果。
jQuery 选择器采用 css 和 Xpath 选择器语法规范，能够满足用户在 DOM 中快速匹配元素或元素集 合。 jQuery 选择器解决了两个难题：
第一，支持 css 1、 css 2、 css 3 不同版本的所有选择器，而很多早期浏览器并没有完全支持 css 3 版本的选择器。
第二，支持不同类型的主流浏览器， 因此使用 jQue可 选择文档对象时，就不用考虑浏览器的兼容 性问题。
简单地说， jQuery 选择器具有如下优势：
**简化代码书写。 **
完善的支持。支持 css 不同版本选择器， 同时也支持不同类型浏览器。
完善的处理机制。 jQuery 选择器的核心依然依靠 JavaScript 的原生方法，如 getElementByid() 和 getElementsByTagName()等方法， 但是它封装了原生方法的使用，简化了代码书写又避免了易错问题。
jQuery 选择器返回值均是一个伪数组对象，如果没有匹配元素，则会返回一个空的伪数组对象。 因此，判断一个 jQuery 对象是否存在，不能够使用如下语句：
if($ ("tr")){
//处理代码
})
而应该使用数组长度来判断，例如：
if($("tr").length>0){
//处理代码
})
jQuery 选择器分为基本选择器、结构选择器、过滤选择器、 属性选择器以及表单选择器等， 下面分 别讲解每类选择器的使用。
PS:JQUERY的开发者特别喜欢CSS选择器，所以，jquery的选择器和css很像，基本上上掌握了css3的同学，学习选择器会发现很easy。
1、基本选择器
基本选择器主要包括 5 种类型： ID 选择器、类型选择器、 类选择器、通配选择器、分组选择器，这与 css 基本选择器类型相一致，详细说明如表 2.1 所示。
image.png
2、ID 选择器
JavaScript 提供了原生的方法 getElementById()，实现在 DOM 中选择指定 D 值的元素。用法如下：
var element = document .getElementByid ("id" ) ;
该方法返回值为所匹配元素的对象，参数值为字符串型 ID 值，该值在 HTML 标签中通过 id 特性 设置。 jQuery 简化了 JavaScript 原生方法的操作，通过一个简单的“＃”标识前缀快速匹配指定 ID 的元素 对象。用法如下：
$("#id");
参数 id 为字符串 ， 表示标签的 id 属性值。 返回值为包含匹配 id 的元素的 jQuery 对象。 【示例 1 】 在本示例中，使用 jQuery 匹配文档中 id 值为“div1”的元素，并设置其背景色为 红色。
<body>
<div id="div1">背景变色</div>
<script>
$ ("#divl") . css ("background","red");
</script>
</body>
在上面代码中，$（"#divl”）函数包含的“#div1”参数就表示 ID 选择器， jQuery 构造器能够根据这个选 择器，准确定位到 DOM 中该元素的位置，并返回包含该元素引用的 jQuery 对象。 从本质上分析， JavaScript 与 jQuery 在选择 ID 元素时是异曲同工， jQuery 只不过是包装 了 getElementByld()方法。但是，从执行效率来分析，两者的差距还是很大的。由于jQuery 需要对参数字符 串进行解析，井匹配出所传递的参数值是 由 值，然后再调用 getElementByld()方法获取该 由 元素，所 以所花费的时间一定会成倍地增加。因此，在不是很必须的前提下，可以考虑直接使用 Document 对象 的 getElementById()方法获取ID元素。
在 ID 选择器中，如果选择器中包含特殊字符，可以在 jQuery 中使用两个斜杠对特殊字符进行转义。 【示例 2】 在本示例中，页面包含 3 个＜div＞标签，它们的 id 属性值都包含了特殊的字符。如果不 进行处理， jQuery 在解析时会误解而不能够达到目的。此时，可以使用如下方法来实现准确选择，即为 这些 ID选择器字符串添加双斜杠前缀，以便对这些特殊的字符进行转义。
<body>
<div id="a.b">div1</div>
<div id="a:b">div2</div>
<div id="[div]">div3</div>
<script>
$(function () {
$("#a\\.b").css("color", "red");
$("#a\\:b").css("color", "red");
$("#\\[div\\]").css("color", "red");
})
</script>
</body>
在执行jQuery()函数时， jQuery 使用正则表达式来匹配参数值，并判断当前参数是否为 ID 值。而正则表达式对于特殊字符是敏感的，要避免正则表达式被误解，就考虑进行字符转义，在正则表 达式字符串中一般都通过双斜杠来转义特殊字符。如果直接使用 JavaScript 的原生方法 getElementById()就不用顾虑这个问题。 【示例 3 ] 示例 2 代码可以改写为如下写法。
<body>
<div id="a.b">div1</div>
<div id="a:b">div2</div>
<div id="[div]">div3</div>
<script>
$(function () {
document.getElementById("a.b").style.color="red";
document.getElementById("a:b").style.color="red";
document.getElementById("[div]").style.color="red";
})
</script>
</body>
3、类型选择器
JavaScript 提供了一个原生方法 getElementsByTagName()，用来在 DOM 中选择指定类型的元素。用 法如下：
var elements= document.getElementsByTagName ('element ');
该方法返回值为所选择类型元素的集合，参数值为字符串型 HTML 标签名称。 jQuery匹配指定标签的方法比较简单，直接在jQuery（）构造函数中指定标签名称即可。用法如下：
var elements= $('element ');
参数 element 为字符串 ，表示标签的名称。返回值为包含匹配标签的 jQuery 对象。与 ID 选择器 不同，类型选择器的字符串不需要附加标识前缀("#")。
【示例 4】 在本示例中，使用 jQuery 构造器匹配文档中所有的＜div＞标签，并定义它们的字体颜色 为红色。
$("div") . css ("color","red") ;
<div>标题栏</div>
<div>内容栏</div>
<div>页脚栏</div>
$（”div’”）构造函数表示匹配文档中所有的＜div＞标签，返回 jQuery 对象，然后调用 jQuery 的 css（）方法， 为所有匹配的＜div＞标签定义红色字体。
【示例 5】 如果直接使用 JavaScript 原生方getElementsByTagName（）方法匹配文档中的＜div＞标 签，并设置它们的前景色为红色，则需要使用循环语句遍历返回的元素集合，并逐一设置每个元素的字 体样式。实现代码如下：
$(function () {
var divs= document . getElementsByTagName ("div");//返回 div 元素集合
for(var i=0;i<divs.length;i++) { //遍历 div 元素集合
divs[i].style.color = "red"; //设置， div 元素的前景色为红色
}
})
此时$（”div”）与 document.getElementsByTagName（"div”）的运行结果是一样的，都返回一个元素集 合对象。
【示例 6】 用户还可以混合使用 jQuery 代码和 JavaScript 代码。
<script>
$(function () {
var divs= $("div");//返回 div 元素集合
for(var i=0;i<divs.length;i++) { //遍历 div 元素集合
divs[i].style.color = "red"; //设置， div 元素的前景色为红色
}
})
</script>
与 id 选择器一样， jQuery 的类型选择器也存在效率低下的问题。这不仅仅是因为 jQuery 需要使用 正则表达式匹配选择器类型，过滤出参数值为标签名字符串，另外，由于 jQuery（）函数需要对第一个参 数执行多路判断（即多分支条件判断〉，而对于标签字符串的判断位于队列的后面，不像 ID 选择器第一 个就被匹配判断（即第一条件分支〉，所以这就耗费掉一点时间。
从执行效率的角度考虑，应多使用 JavaScript 原生的 getElementsByTagName（）方法来选择同 类型的元素。即使在复杂的 jQuery 编程环境中，嵌入使用 getElementsByTagName（）方法也要比 直接使用$（）方法高效。
4、类选择器
HTML5 新增了 getElementsByClassName（）方法，使用该方法可以选择指定类名的元素。该方法可以 接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，返回带有指定类的所 有元素的集合。支持的浏览器包括 IE9+、 Firefox 3.0＋、 Safari 3＋、 Chrom巳和 Opera 9.5＋。
【示例 7】 本示例使用 document.getElementsByClassName（”red＂）方法选择文档中所有包含 red 类的 元素。
<body>
<div class="red">红盒子</div>
<div class="blue red">蓝盒子</div>
<div class="green red">绿盒子</div>
<script>
$(function () {
var divs= document.getElementsByClassName("red");//返回 div 元素集合
for(var i=0;i<divs.length;i++) { //遍历 div 元素集合
console.log(divs[i])
}
})
</script>
</body>
【示例 8】 本示例使用 document.getElernentByld（”box＂）方法先获取<div id＝"box">，然后在它下面 使用 getElernentsByClassName(”blue red”）选择同时包含 red 和 blue 类的元素。
<body>
<div id="box">
<div class="blue red green">blue red green</div>
</div>
<script>
$(function () {
var divs= document .getElementById ("box").getElementsByClassName("blue red");
for(var i=0;i<divs.length;i++) { //遍历 div 元素集合
console.log(divs[i])
}
})
</script>
</body>
在 jQuery 中， 类选择器的字符串需要附加标识前缀（．)。用法如下： jQuery (’'. className”); 参数 className 为字符串，表示标签的 class 属性值，前缀符号“．”表示该选择器为类选择器。返回 值为包含匹配 className 的元素的 jQuery 对象。
【示例 9】 在本示例中，使用 jQuery 构造器匹配文档中所有类名为 red 的标签，并定义它们的字体颜色为红色。
<body>
<div class="red">红盒子</div>
<div class="blue red">蓝盒子</div>
<div class="green red">绿盒子</div>
<script>
$(function () {
$(".red") . css ("color","red")
})
</script>
</body>
jquery的基本选择器使用都比较简单，用法都同上面一样，在此就不多举例，后面出现不一样的内容我会专门说明。
5、通配选择器
在 JavaScript 中，如果把特殊字符串”＊”传递给 getElementsByTagNam()方法，它将返回文档中所有 元素的列表，元素排列的顺序就是它们在文档中的顺序。用法如下：
var elements = document.getElementsByTagName ("*");
[图片上传中...(image-487aab-1582683731571-7)]
jQuery 定义了通配选择器，该选择器能够匹配指定上下文中所有元素。用法如下：
$("*")
[图片上传中...(image-875362-1582683731571-6)]
6、分组选择器
jQuery 支持 css 的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强 jQuery 选择 器引擎的应用能力。 选择多组元素可以通过逗号分隔符（，和css的分组选择器一样）来分隔多个不同的选择器，这些选择器可以是任意类型的，也可以是复合选择器。用法如下：
$("select1,select2,select3")
[图片上传中...(image-621c66-1582683731570-5)]
以上内容就是jquery的基础选择器，用法比较简单。下一章我们开始讲比较高级的结构选择器。其实也贼TM简单。
老铁，要不点个赞再走可好？
1、点个赞呗，可以让更多的人看到这篇文章，顺便激励下我。
2、老铁们，关注我的原创微信公众号「FUNS社区」，还可访问FUNS在线社区http://www.htmlfuns.cn，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获。
介绍r.png
作者简介
作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。
期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！
转载说明：未获得授权，禁止转载
网友评论