jquery从零开始-2.1 jQuery 选择器基础

末蓝、 2023-07-07 14:58 54阅读 0赞

接上一节 [ jquery从零开始-1.3jQuery实战案例][jquery_-1.3jQuery]

选择器是 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＞标签，返回 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 代码。

与 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 ("*");

jQuery 定义了通配选择器，该选择器能够匹配指定上下文中所有元素。用法如下：

$("*")

6、**分组选择器**

jQuery 支持 css 的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强 jQuery 选择 器引擎的应用能力。 选择多组元素可以通过逗号分隔符（，和css的分组选择器一样）来分隔多个不同的选择器，这些选择器可以是任意类型的，也可以是复合选择器。用法如下：

$("select1,select2,select3")

以上内容就是jquery的基础选择器，用法比较简单。下一章我们开始讲比较高级的结构选择器。其实也贼TM简单。

# **老铁，要不点个赞再走可好？么么哒** #

1、点个赞呗，可以让更多的人看到这篇文章，顺便激励下我。

2、老铁们，关注我的原创微信公众号「FUNS社区」，还可访问[FUNS在线社区http://www.htmlfuns.cn][FUNS_http_www.htmlfuns.cn]，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1][]

**作者简介**

作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。

期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！

> **转载说明：未获得授权，禁止转载**

[jquery_-1.3jQuery]: https://blog.csdn.net/zd8693476/article/details/104437267
[image.png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jvb2suaHRtbGZ1bnMuY24vdXBsb2FkL2ltYWdlLzIwMjAwMjIxLzE1ODIzMDA3MjkxMTMyNTUucG5n?x-oss-process=image/format,png
[FUNS_http_www.htmlfuns.cn]: http://www.htmlfuns.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225111127939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225114905261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pkODY5MzQ3Ng==,size_16,color_FFFFFF,t_70