zoukankan      html  css  js  c++  java
  • jquery中的筛选

    1.过滤

    1.1 eq 查找元素从0开始

    <script type="text/javascript" src="../jquery-1.7.2.min.js">
    </script>
    <script type="text/javascript">
    $(function(){

    $("li").eq(1).css("background","red");//注意此处css的写法

    })

    </script>
    </head>

    <body>
    <ul>
    <li>00000000</li>
    <li>11111111</li>
    </ul>
    </body>

    1.2  first()和 last()  选取第一个和最后一个元素   $("div").first()

    1.3 filter(expr),筛选有该类的第一个节点,例如:  alert($("p").filter(".selected ).html());   (记住:expr 包括:标签名 ,类名 , id)

    1.3 has(expr)同筛选

    1.4  hasClass(类名)  检查当前的元素是否含有某个特定的类,如果有,则返回true。

    1.5 is(expr)  

    用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

    $("input[type='checkbox']").parent().is("form")

    如果没有元素符合,或者表达式无效,都返回'false'。 

    1.6  map(function(){} ) 

    将一组元素转换成其他数组(不论是否是元素数组)  (补充:get(),取得所有匹配的 DOM 元素集合。  

    选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 $("img").get().reverse())

    $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

    1.7 not(expr)
    删除与指定表达式匹配的元素
    1.8 slice() (js 用于字符串和数组 slice(index,-1)或者-1省略,表示到结尾)
    slice(index1,index2) 选取的是index1-----(index2-1)的节点
    2.查找
    2.1 children() parent() prev()[找到每个段落紧邻的前一个同辈元素。] next() offsetParent() siblings()[找到该元素的所有同辈元素] parents()找到所有的祖先元素
    2.2 nextUntil() prevUntil() parentUntil()

    <script>
    $(function(){
    $('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');

    })
    </script>
    </head>

    <body>
    <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
    <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
    <ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    </ul>
    </li>
    <li class="item-c">C</li>
    </ul>
    </li>
    <li class="item-iii">III</li>
    </ul>

    2.3  find()  用于查找某个节点  $("p span")这样写可以

    2.4 closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。

          事件委托


    $(function(){

    $(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
    });
    })

    3.串联

     3.1  end()  

    回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。

    3.2  andself()

    选取所有div以及内部的p,并加上border类

    $("div").find("p").andSelf().addClass("border");

    <div class="border">
        <p class="border">First Paragraph</p>
        <p class="border">Second Paragraph</p>
    </div>
    3.3 contents()

    查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

    $("iframe").contents().find("body")
      .append("I'm in an iframe!");

  • 相关阅读:
    macOS下查看端口是否被占用命令
    macOS下安装tomcat服务器
    unittest 知识问答题-也许面试会有用-欢迎补充
    python.unittest中常用断言方法
    如何在命令行terminal中运行pycharm项目
    如何保证 软件测试覆盖率
    如何衡量 测试覆盖率
    软件测试全流程 总结
    接口测试对传统测试模型的改进
    关于http/https协议
  • 原文地址:https://www.cnblogs.com/wenyan/p/4439716.html
Copyright © 2011-2022 走看看