• jquery筛选器


      1、过滤

        eq(index|-index)  获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始。

      first 获取当前链式操作中第1个jquery对象

      last 获取当前链式操作中最后一个jquery对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>this is a test</p>
        <p>so it is</p>
        <p>this just a test</p>
        <div class="div"></div>
        <script src="jquery-3.1.0.js"></script>
        <script type="text/javascript">
    //        获取所有返回的p元素中第一个和第-2个元素
            $("p").eq(1).text()
            $("p").eq(-2).text()
            $("p").first()
            $("p").last()
            console.log(objs)
        </script>
    </body>
    </html>
    

      2、查找

      children([expre])  所选元素下的所有子元素,

      find(e|o|e) 搜索所有与指定表达式匹配的元素,包括子元素、孙元素等

      next(expr) 所有匹配的元素紧临的下一个同辈元素的集合

      nextAll([expr]) 所有匹配元素后面紧临的所有同辈元素的集合

      prev([expr]) 所有匹配的元素紧临的前一个同辈元素的集合

      prevAll([expr]) 所有匹配元素前面紧临的所有同辈元素的集合

      parent([expr])  所有匹配元素的唯一父元素,即上一级元素,而不包括上上级元素

      siblings([expr]) 所有匹配元素的前后同辈元素集合

    示例代码

    <!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>
                <div class="ul_div"></div>
                <li class="lizi_ws_fruit" name="zhuang_guo">
                    <div class="test">test</div>
                    梨</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>
    
    
        <!--jquery区域-->
        <script src="jquery-3.1.0.js"></script>
        <script>
    //        匹配id为electronic元素的所有子元素,即下一级元素,孙元素不包括在内
            $("#electronic").children()
            $("#electronic").children("[class$=screen]")
    //        匹配所有ul标签下的所有div标签,包括子元素及孙元素等
            $("ul").find("div")
    //        匹配id为firstScreen的元素的下一个同辈元素,即ul元素
            $("#firstScreen").next()
    //        匹配span标签的下一个同辈元素中属性为chr的元素
            $("span").next(".chr")
    //        匹配id为firstScreen的元素后面的所有紧临同辈元素
            $("#firstScreen").nextAll()
    //        匹配div标签中class值为test的父元素
            $("div .test").parent()
    //        匹配class属性名为switch的前一个同辈元素
            $(".ui-switch-next").prev()
    //        匹配class属性名为switch的前面所有同辈元素
            $(".ui-switch-sub").prevAll()
    //        匹配class值为ui-switch-next的元素前后所有同辈元素
            $(".ui-switch-next").siblings()
    //        匹配class值为categorys的元素的前后所有同辈元素中,span标签元素
            $(".categorys").siblings("span")
            console.log(objs)
        </script>
    </body>
    </html>
    

      

      

  • 相关阅读:
    03.友盟项目--原始日志数据生成(改进版)---redis存储 用户设备的信息
    Java中的字符集
    时间复杂度
    Hive建模
    08、Spark常用RDD变换
    06、部署Spark程序到集群上运行
    05、Spark
    04、Spark Standalone集群搭建
    02、体验Spark shell下RDD编程
    03、IDEA下Spark API编程
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6194299.html
Copyright © 2020-2023  润新知