首页 > 代码库 > 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
目录
[1]简单属性 [2]具体属性 [3]条件属性前面的话
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素，对应于CSS中的属性选择器。属性过滤选择器可分为简单属性选择器、具体属性选择器和条件属性选择器三种。本文将详细该部分内容
简单属性选择器
[attribute]
[attribute]选择器选择拥有该属性的元素，返回集合元素
//选择拥有title属性的所有元素$(‘[title]‘)//选择拥有title属性的所有span元素$(‘span[title]‘)//选择同时拥有title属性和id属性的所有span元素$(‘span[id][title]‘)
<button id="btn1" style="color: red;">$(‘[title]‘)</button><button id="btn2" style="color: blue;">$(‘span[title]‘)</button><button id="btn3" style="color: green;">$(‘span[id][title]‘)</button><button id="reset">还原</button><div> <span title="span0">span0</span> <span>span1</span> <span title="span2">span2</span> <i title="i0">i0</i> <span id="span3" title="span3">span3</span> <i>i1</i></div><script>reset.onclick = function(){history.go();}//选择拥有title属性的所有元素，结果是span0、span2、i0、span3btn1.onclick = function(){$(‘[title]‘).css(‘color‘,‘red‘);}//选择拥有title属性的所有span元素，结果是span0、span2、span3btn2.onclick = function(){$(‘span[title]‘).css(‘color‘,‘blue‘);}//选择同时拥有title属性和id属性的所有span元素，结果是span3btn3.onclick = function(){$(‘span[id][title]‘).css(‘color‘,‘green‘);}</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/ltk7i4ab" frameborder="0" width="320" height="240"></iframe>
对应于CSS的简单属性选择器
[title]{color:red;}span[title]{color:blue;}span[id][title]{color:green;}
如果使用javascript实现类似$(‘span[id][title]‘).css(‘color‘,‘green‘)的效果
var spans = document.getElementsByTagName(‘span‘);for(var i = 0; i < spans.length; i++){ if((spans[i].id != ‘‘) && (spans[i].title != ‘‘)){ spans[i].style.color = ‘green‘; }}
具体属性选择器
[attribute=value]
[attribute=value]选择器选择属性值为value的元素，返回集合元素
//选择class值为test的元素$(‘[class="test"]‘)//选择class值为test的span元素$(‘span[class="test"]‘)//选择class值为test span的span元素$(‘span[class="test span"]‘)//选择class值为span test的span元素$(‘span[class="span test"]‘)
严格匹配
[注意]具体属性选择器的匹配属于严格匹配
【1】$(‘[class="test"]‘)匹配class属性只有test值的情况；而class="test test1"将不会被匹配
【2】[class="a1 a2"]和[class="a2 a1"]并不相同，它们分别只严格匹配class="a1 a2"和class="a2 a1"的元素
<button id="btn1" style="color: red;">$(‘[class="test"]‘)</button><button id="btn2" style="color: blue;">$(‘span[class="test"]‘)</button><button id="btn3" style="color: green;">$(‘span[class="test span"]‘)</button><button id="btn4" style="color: pink;" >$(‘span[class="span test"]‘)</button><button id="reset">还原</button><div> <span class="test">span0</span> <span>span1</span> <span class="span test">span2</span> <i class="test">i0</i> <span class="test span">span3</span> <i>i1</i></div><script>reset.onclick = function(){history.go();}//选择class属性只是‘test‘的所有元素，结果是span0、i0btn1.onclick = function(){$(‘[class="test"]‘).css(‘color‘,‘red‘);}//选择class属性只是‘test‘的所有span元素，结果是span0btn2.onclick = function(){$(‘span[class="test"]‘).css(‘color‘,‘blue‘);}//选择class属性是‘test span‘的所有span元素，结果是span3btn3.onclick = function(){$(‘span[class="test span"]‘).css(‘color‘,‘green‘);}//选择class属性是‘span test‘的所有span元素，结果是span2btn4.onclick = function(){$(‘span[class="span test"]‘).css(‘color‘,‘pink‘);}</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/fjurrngp" frameborder="0" width="320" height="240"></iframe>
对应于CSS选择器的具体属性选择器
[class="test"]{color:red;}span[class="test"]{color:blue;}span[class="test span"]{color:green;}span[class="span test"]{color:pink;}
如果使用javascript实现类似$(‘span[class="span test"]‘).css(‘color‘,‘pink‘)的功能
var spans = document.getElementsByTagName(‘span‘);for(var i = 0; i < spans.length; i++){ if(spans[i].className == ‘span test‘){ spans[i].style.color = ‘pink‘; }}
id选择器
在CSS选择器，id选择器和id属性选择器并不相同，因为它们的优先级不同。而jQuery选择器，并没有优先级的概念，如果两个选择器对相同id属性同时设置，则后面覆盖前面
<button id="btn1">$(‘#test‘)在后</button><button id="btn2">$(‘[id="test"]‘)在后</button><button id="reset">还原</button><div id="test" style="height:20px;">测试内容</div><script>reset.onclick = function(){history.go();}btn1.onclick = function(){ $(‘[id="test"]‘).css(‘color‘,‘blue‘); $(‘#test‘).css(‘color‘,‘red‘);}btn2.onclick = function(){ $(‘#test‘).css(‘color‘,‘red‘); $(‘[id="test"]‘).css(‘color‘,‘blue‘); }</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/p9yjyo4b" frameborder="0" width="320" height="240"></iframe>
条件属性选择器
条件属性选择器共包括6种，其中[attribute!=value]选择器是jQuery自己拓展的选择器
[attribute!=value]
[attribute!=value]选择器选择属性值不等于value的元素，返回集合元素
[注意]class="test test1"的元素也符合$(‘[class!="test"]‘)的情况，因为属性选择器的严格匹配机制
[attribute^=value]
[attribute^=value]选择器选择属性值以value开始的元素，返回集合元素
[attribute$=value]
[attribute$=value]选择器选择属性值以value结束的元素，返回集合元素
[attribute*=value]
[attribute*=value]选择器选择属性值包含value的元素，返回集合元素
[attribute|=value]
[attribute|=value]选择器选择属性值等于value或以value-开头的元素，返回集合元素
[attribute~=value]
[attribute~=value]选择器选择属性值用空格分隔的值中包含value的元素，返回集合元素
[注意]$(‘[class~="test"]‘)选择器包含class="test"的元素的情况
<button id="btn1" style="color: red;">!=</button><button id="btn2" style="color: blue;">^=</button><button id="btn3" style="color: green;">$=</button><button id="btn4" style="color: pink;" >*=</button><button id="btn5" style="color: gray;" >|=</button><button id="btn6" style="color: orange;" >~=</button><button id="reset">还原</button><div> <span>1</span> <span class="test">2</span> <span class="test1">3</span> <span class="is-test">4</span> <span class="test test1">5</span> <span class="test-1">6</span></div><script>reset.onclick = function(){history.go();}//选择class属性不是‘test‘的所有元素，结果是1、3、4、5、6btn1.onclick = function(){$(‘div [class!="test"]‘).css(‘color‘,‘red‘);}//选择class属性以‘test‘开始的所有元素，结果是2、3、5、6btn2.onclick = function(){$(‘div [class^="test"]‘).css(‘color‘,‘blue‘);}//选择class属性以‘test‘结束的所有元素，结果是2、4btn3.onclick = function(){$(‘div [class$="test"]‘).css(‘color‘,‘green‘);}//选择class属性包含‘test‘的所有元素，结果是2、3、4、5、6btn4.onclick = function(){$(‘div [class*="test"]‘).css(‘color‘,‘pink‘);}//选择class属性等于‘test‘或以‘test-‘开头的所有元素，结果是2、6btn5.onclick = function(){$(‘div [class|="test"]‘).css(‘color‘,‘gray‘);}//选择class属性在用空格分隔的值包含‘test‘的所有元素，结果是2、5btn6.onclick = function(){$(‘div [class~="test"]‘).css(‘color‘,‘orange‘);}</script>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/piu87mgx" frameborder="0" width="320" height="240"></iframe>
对应于CSS选择器中的部分属性选择器
[注意]由于[attribute!=value]是jQuery自己拓展的，所以并没有对应的CSS选择器
[class^="test"]{color:blue;}[class$="test"]{color:green;}[class*="test"]{color:pink;}[class!="test"]{color:gray;}[class~="test"]{color:orange;}
如果使用javascript实现类似$(‘span[class~="test"]‘).css(‘color‘,‘orange‘)的功能
var spans = document.getElementsByTagName(‘span‘);for(var i = 0; i < spans.length; i++){ if(/^test\s|\stest\s|\stest$|^test$/.test(spans[i].className)){ spans[i].style.color = ‘orange‘; }}
最后
属性选择器的功能十分强大，特别是条件属性选择器，基本覆盖属性值的各种情况。但在实际中，使用属性选择器却寥寥，可能是因为使用javascript或jQuery多用于改变元素属性值，所以使用属性值作为选择标准并不稳定
欢迎交流
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script>深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器