前方的说话

  属性过滤选择器的过滤规则是通过元素的特性来得到相应的素,对诺给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>
    span0
    span1
    span2
    <i title="i0">i0</i>
    span3
    <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>
    span0
    span1
    span2
    <i class="test">i0</i>
    span3
    <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>
    1
    2
    3
    4
    5
    6
</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多用于转移元素属性值,所以利用属性值作为精选规范并无平静

  欢迎交流

相关文章

网站地图xml地图