认识达内从这里开始

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素，对应于CSS中的属性选择器。属性过滤选择器可分为简单属性选择器、具体属性选择器和条件属性选择器三种。本文将详细该部分内容

简单属性选择器[attribute]

[attribute]选择器选择拥有该属性的元素，返回集合元素

//选择拥有title属性的所有元素

$('[title]')

//选择拥有title属性的所有span元素

$('span[title]')

//选择同时拥有title属性和id属性的所有span元素

$('span[id][title]')

span0

span1

span2

i0

span3

i1

对应于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"的元素

span0

span1

span2

i0

span3

i1

对应于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属性同时设置，则后面覆盖前面

测试内容

条件属性选择器　　条件属性选择器共包括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"的元素的情况

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