首页 > 代码库 > jquery选择器之属性选择器

jquery选择器之属性选择器

2024-08-27 20:08:23   223人阅读

　　[attribute]   匹配指定属性名的所有元素

　　[attribute=value] 匹配给定的属性名是某个特定值的属性

　　[attribute!=value] 匹配给定的属性名不是某个特定值的属性

　　[attribute^=value] 以开头

　　[attribute$=value] 以结尾

　　[attribue*=value] 给定的属性包含某些值的元素

　　[selector1][selector2][selectorN] 复合选择器，需要同是满足所有条件

　　

　　

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <h1>第一个标题</h1>
    <div class="nav-2014">
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt">家用电器分类</div>
                <div class="dp">家用电器价格</div>
            </div>
            <span class="hr"></span>
            <div class="navitems-2014">
                <div id="treasure"></div>
                <span class="clr"></span>
                <span class="chr"></span>
                男：<input type="checkbox" checked="checked" value="http://www.mamicode.com/nan">
                女:<input type="checkbox" value="http://www.mamicode.com/nv">
            </div>
        </div>
    </div>
    <h2>第二个标题</h2>
    <div id="electronic">
        <div id="firstScreen">1
            <div class="w">2</div>
        </div>
        <ul>
            <li class="ui-switch-curr">第一</li>
            <li class="ui-switch-item"></li>
            <li class="ui-switch-next">第三</li>
            <li class="ui-switch-sub">第四</li>
        </ul>
        <ul>
            <li class="lizi_ws_fruit" name="zhuang_guo">梨</li>
            <li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li>
            <li id="elpsq" name="zhuang_dang"></li>
        </ul>
        <div class="secord_screen">
            <div></div>
        </div>
        <div class="third_screen"></div>
    </div>


</body>
</html>

　　jquery代码

    <script src="http://www.mamicode.com/jquery-3.1.0.js"></script>
    <script>
//        匹配所有包含id属性的div标签
        $("div[id]")
//        在所有div标签中查找id属性为electronic的元素
        $("div[id=electronic]")
        $("div[id!=electronic]")
//        查找所有li标签中属性class值以ui-swithc开头的元素
        $("li[class^=ui-switch]")
//        查找所有li标签中属性class的值以fruit结尾的元素
        $("li[class$=fruit]")
//        查找所有li标签中属性class的值包含ws的元素
        $("li[class*=ws]")
//        查找所有li标签中属性中有id且有name，且name的值以guo结尾的元素
        $("li[class][name$=guo]")
        console.log(objs)
    </script>

　　

 

jquery选择器之属性选择器


联系
我们