jquery从零开始-2.3 结构选择器(二)

╰半橙微兮° 2023-07-08 02:55 55阅读 0赞

接上一节 [ jquery从零开始-2.2 结构选择器(一)][jquery_-2.2]

接着上面继续讲结构选择器。

**6、属性选择器**

属性选择器主要根据元素的属性及其属性值作为过滤的条件，来匹配对应的 DOM 元素。属性选择 器都是以中括号作为起止分界符，如［attribute］，与伪类选择器特征都比较明显。 jQue可定义了 7 类属性 选择器.

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 名称 </td> 
 <td style="vertical-align:top;"> 说明 </td> 
 <td style="vertical-align:top;"> 举例 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute] </td> 
 <td style="vertical-align:top;"> 匹配包含给定属性的元素 </td> 
 <td style="vertical-align:top;"> 查找所有含有 id 属性的 div 元素: $("div[id]") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute=value] </td> 
 <td style="vertical-align:top;"> 匹配给定的属性是某个特定值的元素 </td> 
 <td style="vertical-align:top;"> 查找所有 name 属性是 newsletter 的 input 元素: $("input[name='newsletter']").attr("checked", true); </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute!=value] </td> 
 <td style="vertical-align:top;"> 匹配给定的属性是不包含某个特定值的元素 </td> 
 <td style="vertical-align:top;"> 查找所有 name 属性不是 newsletter 的 input 元素: $("input[name!='newsletter']").attr("checked", true); </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute^=value] </td> 
 <td style="vertical-align:top;"> 匹配给定的属性是以某些值开始的元素 </td> 
 <td style="vertical-align:top;"> $("input[name^='news']") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute$=value] </td> 
 <td style="vertical-align:top;"> 匹配给定的属性是以某些值结尾的元素 </td> 
 <td style="vertical-align:top;"> 查找所有 name 以 'letter' 结尾的 input 元素: $("input[name$='letter']") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attribute*=value] </td> 
 <td style="vertical-align:top;"> 匹配给定的属性是以包含某些值的元素 </td> 
 <td style="vertical-align:top;"> 查找所有 name 包含 'man' 的 input 元素: $("input[name*='man']") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> [attributeFilter1][attributeFilter2][attributeFilterN] </td> 
 <td style="vertical-align:top;"> 复合属性选择器，需要同时满足多个条件时使用。 </td> 
 <td style="vertical-align:top;"> 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']") </td> 
 </tr> 
 </tbody> 
</table>

用法大同小异，直接上代码。

<body>
 <a href="http://www.baidu.com">我是百度</a>
 <img src="1.jpg" alt="">
 <a href="funs.pdf">我是funs.pdf</a>
 <a href="http://www.htmlfuns.cn">我是FUNS社区</a>
 <div class="box" id="demo">我是box</div>
 <script>
     $(function () {
         $("a[href]").css("color","green");//匹配所有href属性的元素字体变绿
         $("div[class='box']").css("color","red");//匹配className为box的元素字体颜色变红
         $("a[href!='funs.pdf']").css("color","blue");//匹配href属性不是funs.pdf的元素字体变蓝
         $("a[href^='http']").css("color", "orange");//匹配属性href以http开头的元素字体颜色为橘黄色
         $("a[href$='.cn']").css("background", "pink");//匹配属性href以.cn结尾的元素背景色为粉色
         $("a[href*='www']").css("background", "yellow");//匹配属性href包含www内容的元素背景色为黄色
         $("div[id][class$='box']").css("font-size","50px");//匹配含有id属性且class是以box结尾的元素字体大小为50像素
     })
 </script>
 </body>

**7、表单选择器**

写到表单选择器就要说到题外话，有人肯定好奇，哎呀，大师兄，这么多选择器，感觉很多重复的啊。漂亮，Jquery为了提高开发效率，减少代码量，提供了非常多的选择器，但是，并不是所有的都要用，也并不是所有的都有用。仁者见仁智者见智，大师兄多年的开发经验告诉小白同学们，别看它多，基本的选择器已经可以满足大多数的元素查找。要怎么样，什么时候用，这个讲究的是经验，代码是没有标准答案的，俗话说不管白猫黑猫，能抓住老鼠的就是好猫。这里，不管你怎么用，只要找到了元素，达到了你的预期，实现了功能，就OK了。至于优化的工作，那就交给时间把，交给将来会成长成大神的你们。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> 名称 </td> 
 <td style="vertical-align:top;"> 说明 </td> 
 <td style="vertical-align:top;"> 解释 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :input </td> 
 <td style="vertical-align:top;"> 匹配所有 input, textarea, select 和 button 元素 </td> 
 <td style="vertical-align:top;"> 查找所有的input元素: $(":input") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :text </td> 
 <td style="vertical-align:top;"> 匹配所有的文本框 </td> 
 <td style="vertical-align:top;"> 查找所有文本框: $(":text") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :password </td> 
 <td style="vertical-align:top;"> 匹配所有密码框 </td> 
 <td style="vertical-align:top;"> 查找所有密码框: $(":password") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :radio </td> 
 <td style="vertical-align:top;"> 匹配所有单选按钮 </td> 
 <td style="vertical-align:top;"> 查找所有单选按钮 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :checkbox </td> 
 <td style="vertical-align:top;"> 匹配所有复选框 </td> 
 <td style="vertical-align:top;"> 查找所有复选框: $(":checkbox") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :submit </td> 
 <td style="vertical-align:top;"> 匹配所有提交按钮 </td> 
 <td style="vertical-align:top;"> 查找所有提交按钮: $(":submit") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :image </td> 
 <td style="vertical-align:top;"> 匹配所有图像域 </td> 
 <td style="vertical-align:top;"> 匹配所有图像域: $(":image") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :reset </td> 
 <td style="vertical-align:top;"> 匹配所有重置按钮 </td> 
 <td style="vertical-align:top;"> 查找所有重置按钮: $(":reset") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :button </td> 
 <td style="vertical-align:top;"> 匹配所有按钮 </td> 
 <td style="vertical-align:top;"> 查找所有按钮: $(":button") </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> :file </td> 
 <td style="vertical-align:top;"> 匹配所有文件域 </td> 
 <td style="vertical-align:top;"> 查找所有文件域: $(":file") </td> 
 </tr> 
 </tbody> 
</table>

上代码

<body>
 <form id="test" action='' method="get">
     <input name="" type="text" value="文本域"> 
     <input name="" type="password" value="密码城"> 
     <input name="" type="checkbox" value="复选框">复选框 
     <input name="" type="radio" value="单选按钮" >单选按钮 
     <input name="" type="image" value="图像域" src="images/btn.png" /> 
     <input name="" type="hidden" value="隐藏城"> 
     <input name="" type="button" value="普通按钮"> 
     <input name="" type="submit"  value="提交按钮"> 
     <input name="" type="reset" value="重置按钮"> 
 </form>
 <script>
     $(function () {
         $("#test :text").val("修改后的文本城");
         $("#test :password").val("修改后的密码城");
         $("#test :checkbox").val("修改后的复选框");
         $("#test :radio").val("修改后的单选按钮");
         $("#test :image").val("修改后的图像域");
         $("#test :hidden").val("修改后的隐藏域");
         $("#test :button").val("修改后的普通按钮");
         $("#test :submit").val("修改后的提交按钮");
         $("#test :reset").val("修改后的重置按钮");
     })
 </script>
 </body>

**8、高级表单选择器**

jQuery 根据表单域特有的特性定义了 4 个表单属性选择器， 这些选择器与基本表单选择器不同， 它们可以选择任何类型的表单域，因为它主要根据表单属性来进行选择。

代码走你。

<body>
 <form id="test" action='' method="get">
     <input name="" type="text" value="文本域"disabled> 
     <input name="" type="password" value="密码城"> 
     <input name="" type="checkbox" value="复选框" checked>复选框 
     <input name="" type="radio" value="单选按钮">单选按钮 
     <input name="" type="image" value="图像域" src="images/btn.png"/> 
     <input name="" type="hidden" value="隐藏城"> 
     <input name="" type="button" value="普通按钮"> 
     <input name="" type="submit" value="提交按钮"> 
     <input name="" type="reset" value="重置按钮"> 
     <select name="">
         <option value="l" >1</option>
         <option value="1">2</option>
         <option value="1" selected="selected">3</option>
     </select>
 </form>
 <script>
     $(function () {
         $("＃test :disabled").val("不可用");
         $("#test :enabled").val("可用");
         $("#test :checked").removeAttr("checked");
     })
 </script>
 </body>

**写在最后**

终于写完了，jquery的选择器讲的算是比较细了，每一个都配有案例，小白同学们以你们的智商，应该随便那么看一眼就会了。对不对~~~

好了，现在来做个总结，这么多选择器，背不住怎么办。背？为什么要背，千万不要去背代码，练就完了，天天写，天天用，最后记住了什么，就转化成你的经验了。我们先看一下这些选择器的使用频率。

<table> 
 <tbody> 
 <tr> 
 <th style="width:439px;"> 选择器 </th> 
 <th style="width:441px;"> 统计频率 </th> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #ID </td> 
 <td style="width:441px;"> 51.290% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> .class </td> 
 <td style="width:441px;"> 13.082% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> Tag </td> 
 <td style="width:441px;"> 6.416% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> tag.class </td> 
 <td style="width:441px;"> 3.978% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id tag </td> 
 <td style="width:441px;"> 18.151% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> tag#id </td> 
 <td style="width:441px;"> 1.935% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id:visible </td> 
 <td style="width:441px;"> 1.577% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id .class </td> 
 <td style="width:441px;"> 1.434% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> .class.class </td> 
 <td style="width:441px;"> 1.183% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> * </td> 
 <td style="width:441px;"> 0.968% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id tag.class </td> 
 <td style="width:441px;"> 0.932% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id:hidden </td> 
 <td style="width:441px;"> 0.789% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> tag[name=value] </td> 
 <td style="width:441px;"> 0.645% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> .class tag </td> 
 <td style="width:441px;"> 0.573% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> [name=value] </td> 
 <td style="width:441px;"> 0.538% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> tag tag </td> 
 <td style="width:441px;"> 0.502% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id #id </td> 
 <td style="width:441px;"> 0.430% </td> 
 </tr> 
 <tr> 
 <td style="width:439px;"> #id tag tag </td> 
 <td style="width:441px;"> 0.358% </td> 
 </tr> 
 </tbody> 
</table>

Class 选择器在文档中使用频率靠前， 这无疑会增加系统的负担， 因为每一次使用 Class 选择器，整 个文档就会被解析一遍，并遍历每个节点。 因此，建议大家在使用 jQuery 选择器时， 应该注意几个问题。

** 第一， 多用 ID 选择器。**

多用ID选择器， 这是一个明智的选择，即使不存在ID 选择器，也可以从父级元素中添加一个 ID选择器，这样就会缩短节点访问的路程。

**第二，少直接使用 Class 选择器。**

可以使用复合选择器，例如，使用 tag.class 代替.class 虽然文挡的标签是有限的，但是类可以拓展 标签的语义，那么大部分情况下，使用同一个类的标签也是相同的。 当然，应该摒除表达式中的冗余部分，对于不必要的复合表达式就应该进行简化， 例如，＃id2 \#id1或 者 tag\#id1表达式，直接使用＃id1l即可，因为 id 选择器是唯一的，执行速度最快。使用复合选择器，反 而会增加负担。

**第三， 多用父子关系，少用嵌套关系。 **

例如，使用 parent>child 代替 parent child。因为">"是 child 选择器，只从子节点里匹配，不递归。 而 ””是后代选择器，递归匹配所有子节点及子节点的子节点，即后代节点。

第四，缓存 jQuery 对象。

如果选出结果不发生变化的话，不妨缓存jQuery 对象，这样就可以提高系统性能，养成缓存jQuery 对象的习惯可以让用户在不经意间就能够完成主要的性能优化。那什么是缓存对象呢，其实就像用变量接住查找到的元素。明白了吗。。。打完收工。

选择器到此结束了，还是那句话，怎么用，仁者见仁智者见智，以结果为导向，不要死背代码哦。转眼晚上10点20了，写的有点久了，准备睡觉了。明天见！

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

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_-2.2]: https://blog.csdn.net/zd8693476/article/details/104487195
[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