接着上面继续讲结构选择器。
6、属性选择器
属性选择器主要根据元素的属性及其属性值作为过滤的条件，来匹配对应的 DOM 元素。属性选择 器都是以中括号作为起止分界符，如［attribute］，与伪类选择器特征都比较明显。 jQue可定义了 7 类属性 选择器.
| 名称 |
说明 |
举例 |
| [attribute] |
匹配包含给定属性的元素 |
查找所有含有 id 属性的 div 元素: |
| [attribute=value] |
匹配给定的属性是某个特定值的元素 |
查找所有 name 属性是 newsletter 的 input 元素: |
| [attribute!=value] |
匹配给定的属性是不包含某个特定值的元素 |
查找所有 name 属性不是 newsletter 的 input 元素: |
| [attribute^=value] |
匹配给定的属性是以某些值开始的元素 |
$("input[name^='news']") |
| [attribute$=value] |
匹配给定的属性是以某些值结尾的元素 |
查找所有 name 以 'letter' 结尾的 input 元素: |
| [attribute*=value] |
匹配给定的属性是以包含某些值的元素 |
查找所有 name 包含 'man' 的 input 元素: |
| [attributeFilter1][attributeFilter2][attributeFilterN] |
复合属性选择器，需要同时满足多个条件时使用。 |
找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: |
用法大同小异，直接上代码。
<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了。至于优化的工作，那就交给时间把，交给将来会成长成大神的你们。
| 名称 |
说明 |
解释 |
| :input |
匹配所有 input, textarea, select 和 button 元素 |
查找所有的input元素: |
| :text |
匹配所有的文本框 |
查找所有文本框: |
| :password |
匹配所有密码框 |
查找所有密码框: |
| :radio |
匹配所有单选按钮 |
查找所有单选按钮 |
| :checkbox |
匹配所有复选框 |
查找所有复选框: |
| :submit |
匹配所有提交按钮 |
查找所有提交按钮: |
| :image |
匹配所有图像域 |
匹配所有图像域: |
| :reset |
匹配所有重置按钮 |
查找所有重置按钮: |
| :button |
匹配所有按钮 |
查找所有按钮: |
| :file |
匹配所有文件域 |
查找所有文件域: |
上代码
<body>
<form id="test" action='' method="get">
<input name="" type="text" value="文本域"><br/>
<input name="" type="password" value="密码城"><br/>
<input name="" type="checkbox" value="复选框">复选框<br/>
<input name="" type="radio" value="单选按钮" >单选按钮<br/>
<input name="" type="image" value="图像域" src="images/btn.png" /><br/>
<input name="" type="hidden" value="隐藏城"><br/>
<input name="" type="button" value="普通按钮"><br/>
<input name="" type="submit" value="提交按钮"><br/>
<input name="" type="reset" value="重置按钮"><br/>
</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 个表单属性选择器， 这些选择器与基本表单选择器不同， 它们可以选择任何类型的表单域，因为它主要根据表单属性来进行选择。
| 名称 |
说明 |
解释 |
| :enabled |
匹配所有可用元素 |
查找所有可用的input元素: |
| :disabled |
匹配所有不可用元素 |
查找所有不可用的input元素: |
| :checked |
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
查找所有选中的复选框元素: |
| :selected |
匹配所有选中的option元素 |
查找所有选中的选项元素: |
代码走你。
<body>
<form id="test" action='' method="get">
<input name="" type="text" value="文本域"disabled><br/>
<input name="" type="password" value="密码城"><br/>
<input name="" type="checkbox" value="复选框" checked>复选框<br/>
<input name="" type="radio" value="单选按钮">单选按钮<br/>
<input name="" type="image" value="图像域" src="images/btn.png"/><br/>
<input name="" type="hidden" value="隐藏城"><br/>
<input name="" type="button" value="普通按钮"><br/>
<input name="" type="submit" value="提交按钮"><br/>
<input name="" type="reset" value="重置按钮"><br/>
<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的选择器讲的算是比较细了，每一个都配有案例，小白同学们以你们的智商，应该随便那么看一眼就会了。对不对~~~
好了，现在来做个总结，这么多选择器，背不住怎么办。背？为什么要背，千万不要去背代码，练就完了，天天写，天天用，最后记住了什么，就转化成你的经验了。我们先看一下这些选择器的使用频率。
| 选择器 |
统计频率 |
|---|---|
| #ID |
51.290% |
| .class |
13.082% |
| Tag |
6.416% |
| tag.class |
3.978% |
| #id tag |
18.151% |
| tag#id |
1.935% |
| #id:visible |
1.577% |
| #id .class |
1.434% |
| .class.class |
1.183% |
| * |
0.968% |
| #id tag.class |
0.932% |
| #id:hidden |
0.789% |
| tag[name=value] |
0.645% |
| .class tag |
0.573% |
| [name=value] |
0.538% |
| tag tag |
0.502% |
| #id #id |
0.430% |
| #id tag tag |
0.358% |
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，专注小白从零开始系列。包括HTML5、css3、javascript、vue涵盖所有前端知识体系，保证让你看完有所收获，不信你打我。后台回复『学习资料』送你一份2020年最新技术资料（超2000G！）现在全部免费给你！包含各类技能的优质学习视频。
作者简介
作者：大家好，我是FUNS大师兄，工作至今，从一个小白成长为大厂的技术总监，一直想写点什么，种种原因不知什么时候开始，也不知道怎么下手。一路走来，见证了很多Programmer的大起大落，其实程序员这个行业，坚持到最后的才是真大神。我们身处在一个浮躁的社会，不仅爱情如此，连程序开发也是这样。大家都习惯了喜新厌旧，忘记了当初选择的初心。我觉得我是幸运的，当年带我的导师是阿里出来的，本应风光无限，可惜她热爱午后的斜阳，去开了一家咖啡店，听说后来经营不善未果。最好的时光错过了最好的机遇吧。
期间碰到过一些学弟找我，大家都很迷茫，后来我才发现，迷茫这个东西跟你年龄没什么关系，迷茫说到底没有安全感，我们的薪资、家庭、未来等等都是安全感的一部分。我在此也不是为了教导种种，只是分享自己的一路走来的坑，我一直相信一句话，我们所羡慕的生活背后都有我们吃不了的苦。其次是写点自己想写的代码，让自己开心一些吧！
转载说明：未获得授权，禁止转载
