jQuery属性筛选选择器

2019独角兽企业重金招聘Python工程师标准>>>

代码一

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

转载于:https://my.oschina.net/bob1900/blog/731783