代碼一

    <h2>屬性篩選選擇器</h2><h3>[att=val]、[att]、[att|=val]、[att~=val]</h3><div class="left" testattr="true" ><div class="div" testattr="true" name='p1'><a>[att=val]</a></div><div class="div" testattr="true" p2><a>[att]</a></div><div class="div" testattr="true" name="en"><a>[att|=val]</a></div><div class="div" testattr="true" name="en-cn"><a>[att|=val]</a></div><div class="div" testattr="true" name="one two"><a>[att~=val]</a></div></div>

###1、[attr=val]，篩選屬性attr=val的元素 $('div[name=p1]')選擇了代碼一中的

        <div class="div" testattr="true" name='p1'><a>[att=val]</a></div>

2、[attr]，篩選包含屬性attr的元素

$('div[p2]')選擇了代碼一中的

        <div class="div" testattr="true" p2><a>[att]</a></div>

3、[attr|=val]，篩選屬性attr的值為'val'或以'val-'開頭的元素

$('div[name|="en"]')選擇了代碼一中的

        <div class="div" testattr="true" name="en"><a>[att|=val]</a></div><div class="div" testattr="true" name="en-cn"><a>[att|=val]</a></div>

4、[attr~=val]，篩選屬性attr的值包含單詞val的元素

$('div[name~="one"]')選擇了代碼一中的

        <div class="div" testattr="true" name="one two"><a>[att~=val]</a></div>

代碼二

    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3><div class="left" testattr="true" ><div class="div" testattr="true"  name='imooc-aaorn'><a>[att^=val]</a></div><div class="div" testattr="true"  name='aaorn-imooc'><a>[att$=val]</a></div><div class="div" testattr="true"  name="attr-test-selector"><a>[att*=val]</a></div><div class="div" name="a b"><a>[att!=val]</a></div></div>

5、[attr^=val]，篩選屬性attr的值以val開頭的元素

$('div[name^=imooc]')選擇了代碼二中的

        <div class="div" testattr="true"  name='imooc-aaorn'><a>[att^=val]</a></div>

6、[attr$=val]，篩選屬性attr的值以val結尾的元素

$('div[name$=imooc]')選擇了代碼二中的

        <div class="div" testattr="true"  name='aaorn-imooc'><a>[att$=val]</a></div>

7、[attr*=val]，篩選屬性attr的值包含val的元素

$('div[name*="test"]')選擇了代碼二中的

        <div class="div" testattr="true"  name="attr-test-selector"><a>[att*=val]</a></div>

8、[attr!=val]，篩選沒有屬性attr或屬性attr的值不等于val的元素

$('div[testattr!="true"]')選擇了代碼二中的

        <div class="div" name="a b"><a>[att!=val]</a></div>