• jquery选择器之属性选择器


      [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="nan">
                    女:<input type="checkbox" value="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="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>
    

      

  • 相关阅读:
    Html table 内容超出显示省略号
    [已解决] odoo12 菜单不显示,安装后多出菜单
    js display, visible 区别
    on() 和 click() 的区别
    jquery $.proxy使用
    阿里云ECS服务器部署HADOOP集群(六):Flume 安装
    阿里云ECS服务器部署HADOOP集群(七):Sqoop 安装
    阿里云ECS服务器部署HADOOP集群(三):ZooKeeper 完全分布式集群搭建
    阿里云ECS服务器部署HADOOP集群(五):Pig 安装
    阿里云ECS服务器部署HADOOP集群(四):Hive本地模式的安装
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6193547.html
Copyright © 2020-2023  润新知