前面的話

　　屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素，對(duì)應(yīng)于CSS中的屬性選擇器。屬性過濾選擇器可分為簡(jiǎn)單屬性選擇器、具體屬性選擇器和條件屬性選擇器三種。本文將詳細(xì)該部分內(nèi)容

?

簡(jiǎn)單屬性選擇器

[attribute]

　　[attribute]選擇器選擇擁有該屬性的元素，返回集合元素

//選擇擁有title屬性的所有元素 $('[title]') //選擇擁有title屬性的所有span元素 $('span[title]') //選擇同時(shí)擁有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屬性的所有元素，結(jié)果是span0、span2、i0、span3 btn1.onclick = function(){$('[title]').css('color','red');}//選擇擁有title屬性的所有span元素，結(jié)果是span0、span2、span3 btn2.onclick = function(){$('span[title]').css('color','blue');}//選擇同時(shí)擁有title屬性和id屬性的所有span元素，結(jié)果是span3 btn3.onclick = function(){$('span[id][title]').css('color','green');} </script>

　　對(duì)應(yīng)于CSS的簡(jiǎn)單屬性選擇器?

[title]{color:red;}span[title]{color:blue;}span[id][title]{color:green;}

　　如果使用javascript實(shí)現(xiàn)類似$('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"]')

嚴(yán)格匹配

　　[注意]具體屬性選擇器的匹配屬于嚴(yán)格匹配

　　【1】$('[class="test"]')匹配class屬性只有test值的情況；而class="test test1"將不會(huì)被匹配

　　【2】[class="a1 a2"]和[class="a2 a1"]并不相同，它們分別只嚴(yán)格匹配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'的所有元素，結(jié)果是span0、i0 btn1.onclick = function(){$('[class="test"]').css('color','red');}//選擇class屬性只是'test'的所有span元素，結(jié)果是span0 btn2.onclick = function(){$('span[class="test"]').css('color','blue');}//選擇class屬性是'test span'的所有span元素，結(jié)果是span3 btn3.onclick = function(){$('span[class="test span"]').css('color','green');}//選擇class屬性是'span test'的所有span元素，結(jié)果是span2 btn4.onclick = function(){$('span[class="span test"]').css('color','pink');} </script>

　　對(duì)應(yīng)于CSS選擇器的具體屬性選擇器

[class="test"]{color:red;}span[class="test"]{color:blue;}span[class="test span"]{color:green;}span[class="span test"]{color:pink;}

　　如果使用javascript實(shí)現(xiàn)類似$('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屬性選擇器并不相同，因?yàn)樗鼈兊膬?yōu)先級(jí)不同。而jQuery選擇器，并沒有優(yōu)先級(jí)的概念，如果兩個(gè)選擇器對(duì)相同id屬性同時(shí)設(shè)置，則后面覆蓋前面

<button id="btn1">$('#test')在后</button> <button id="btn2">$('[id="test"]')在后</button> <button id="reset">還原</button> <div id="test" style="height:20px;">測(cè)試內(nèi)容</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>

條件屬性選擇器

　　條件屬性選擇器共包括6種，其中[attribute!=value]選擇器是jQuery自己拓展的選擇器

[attribute!=value]

　　[attribute!=value]選擇器選擇屬性值不等于value的元素，返回集合元素

　　[注意]class="test test1"的元素也符合$('[class!="test"]')的情況，因?yàn)閷傩赃x擇器的嚴(yán)格匹配機(jī)制

[attribute^=value]

　　[attribute^=value]選擇器選擇屬性值以value開始的元素，返回集合元素

[attribute$=value]

　　[attribute$=value]選擇器選擇屬性值以value結(jié)束的元素，返回集合元素

[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'的所有元素，結(jié)果是1、3、4、5、6 btn1.onclick = function(){$('div [class!="test"]').css('color','red');}//選擇class屬性以'test'開始的所有元素，結(jié)果是2、3、5、6 btn2.onclick = function(){$('div [class^="test"]').css('color','blue');}//選擇class屬性以'test'結(jié)束的所有元素，結(jié)果是2、4 btn3.onclick = function(){$('div [class$="test"]').css('color','green');}//選擇class屬性包含'test'的所有元素，結(jié)果是2、3、4、5、6 btn4.onclick = function(){$('div [class*="test"]').css('color','pink');}//選擇class屬性等于'test'或以'test-'開頭的所有元素，結(jié)果是2、6 btn5.onclick = function(){$('div [class|="test"]').css('color','gray');}//選擇class屬性在用空格分隔的值包含'test'的所有元素，結(jié)果是2、5 btn6.onclick = function(){$('div [class~="test"]').css('color','orange');} </script>

　　對(duì)應(yīng)于CSS選擇器中的部分屬性選擇器

　　[注意]由于[attribute!=value]是jQuery自己拓展的，所以并沒有對(duì)應(yīng)的CSS選擇器

[class^="test"]{color:blue;}[class$="test"]{color:green;}[class*="test"]{color:pink;}[class!="test"]{color:gray;}[class~="test"]{color:orange;}

　　如果使用javascript實(shí)現(xiàn)類似$('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';} }

?

最后

　　屬性選擇器的功能十分強(qiáng)大，特別是條件屬性選擇器，基本覆蓋屬性值的各種情況。但在實(shí)際中，使用屬性選擇器卻寥寥，可能是因?yàn)槭褂胘avascript或jQuery多用于改變?cè)貙傩灾?#xff0c;所以使用屬性值作為選擇標(biāo)準(zhǔn)并不穩(wěn)定

　　歡迎交流

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/5809206.html

總結(jié)

以上是生活随笔為你收集整理的深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。