深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

Posted 2020-08-04 小火柴的蓝色理想

[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、span3
btn1.onclick = function(){$(\'[title]\').css(\'color\',\'red\');}

//选择拥有title属性的所有span元素，结果是span0、span2、span3
btn2.onclick = function(){$(\'span[title]\').css(\'color\',\'blue\');}

//选择同时拥有title属性和id属性的所有span元素，结果是span3
btn3.onclick = function(){$(\'span[id][title]\').css(\'color\',\'green\');}
</script>

　　对应于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、i0
btn1.onclick = function(){$(\'[class="test"]\').css(\'color\',\'red\');}

//选择class属性只是\'test\'的所有span元素，结果是span0
btn2.onclick = function(){$(\'span[class="test"]\').css(\'color\',\'blue\');}

//选择class属性是\'test span\'的所有span元素，结果是span3
btn3.onclick = function(){$(\'span[class="test span"]\').css(\'color\',\'green\');}

//选择class属性是\'span test\'的所有span元素，结果是span2
btn4.onclick = function(){$(\'span[class="span test"]\').css(\'color\',\'pink\');}
</script>

　　对应于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>

条件属性选择器

　　条件属性选择器共包括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、6
btn1.onclick = function(){$(\'div [class!="test"]\').css(\'color\',\'red\');}

//选择class属性以\'test\'开始的所有元素，结果是2、3、5、6
btn2.onclick = function(){$(\'div [class^="test"]\').css(\'color\',\'blue\');}

//选择class属性以\'test\'结束的所有元素，结果是2、4
btn3.onclick = function(){$(\'div [class$="test"]\').css(\'color\',\'green\');}

//选择class属性包含\'test\'的所有元素，结果是2、3、4、5、6
btn4.onclick = function(){$(\'div [class*="test"]\').css(\'color\',\'pink\');}

//选择class属性等于\'test\'或以\'test-\'开头的所有元素，结果是2、6
btn5.onclick = function(){$(\'div [class|="test"]\').css(\'color\',\'gray\');}

//选择class属性在用空格分隔的值包含\'test\'的所有元素，结果是2、5
btn6.onclick = function(){$(\'div [class~="test"]\').css(\'color\',\'orange\');}
</script>

　　对应于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多用于改变元素属性值，所以使用属性值作为选择标准并不稳定

　　欢迎交流