代码一

    <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>