zoukankan      html  css  js  c++  java
  • jquery选择器之内容选择器

    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>
                <div class="u_c" lang="en-us"></div>
                <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>
            <div class="secord_screen">
                <div></div>
            </div>
            <div class="third_screen"></div>
        </div>
    </body>
    </html>
    

      1、contains:  包含选择器,匹配包含给定文本的元素

      2、empty:  空元素选择器,匹配所有不包含子元素或文本的空元素

      3、parent: 内容选择器,匹配所有含有子元素或文本的元素

      4、has(selector): 匹配含有选择器所匹配的元素的元素

        <!--jquery区域-->
        <script src="jquery-3.1.0.js"></script>
        <script>
    //        包含'家用'文本的所有div标签及其其父标签
            $("div:contains('家用')")
    //        匹配所有不包含子元素且空文本的div元素,官网说这是或的关系
            $("div:empty")
    //        匹配所有包含子元素或文本的div标签
            $("div:parent")
    //        给含有div标签的ul标签添加一个test类
            $("ul:has('div')").addClass('test')
        </script>
    

      

  • 相关阅读:
    1031.查询-集合操作
    1030.查询-select子句
    1029.查询-复杂分组grouping子句
    1028.查询-group by和having子句
    1027.查询-where子句
    1026.查询-from子句2
    1025.查询-from子句
    1024.查询-概述
    1023.表-数据操作
    图片隐写之stegsolve使用(转载)
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6188063.html
Copyright © 2011-2022 走看看