zoukankan      html  css  js  c++  java
  • Jquery中的has、find、filter方法区别

    find方法

    find返回的是匹配结果集,作用于后代$(‘li’).find(‘.a’).css(‘background-color’, ‘red’);在li下面查找元素是否有class=a的元素,返回class=a的元素的集合。比如如下例子:

    <!DOCTYPE html>
    <html>
    <head>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
      <p><span>Hello</span>, how are you?</p>
      <p>Me? I'm <span>good</span>.</p>
    <script>
      $("p").find("span").css('color','red');
    </script>
    </body>
    </html>

    Hello, how are you? 
    Me? I’m good
    find方法返回的结果集是后面的结果集。即结果集。

    has方法

    has返回的是赛选结果集,作用于后代 has判断是否有,如果有则选中 
    $(‘li’).has(‘span’).css(‘background-color’, ‘red’);在li下面查找元素是否有has下面的元素,如果有,则返回赛选的集合。即返回所有满足条件的li(li下面有span的li),例子:

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        .full { border: 1px solid red; }
      </style>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    <body>
    <ul><li>Does the UL contain an LI?</li></ul>
    <script>
      $("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
      $("ul").has("li").addClass("full");
    </script>
    </body>
    </html>

    这里写图片描述 
    上面的效果就是查找ul下面是否有li,如果li则在赛选的ul中append一个li 
    标签。

    filter方法

    $('li'). filter('.a').css('background-color' , 'red');
    不同的是filter()方法,条件作用于自身;has()方法条件是作用于它的后代元素中。
    has和filter的作用范围不同而已,$("li").has(".topLine"), $("li").filter(".topLine");相同的是has返回的是后代满足class=topLine的自身li对象,filter则返回的是自身li 为class=topLine的元素。
    • 1
    • 2
    • 3

    filter对自身的过滤。相当于$(‘li.a’)

    find()会在div元素内 寻找 class为classname的元素。

    filter()则是筛选div的class为classname的元素。

    基本是find子元素找,filter是平级找

    ·find 函数是在当前对象集合的子元素中进行查询;
    ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
    ·find 函数的参数是 jQuery 选择器表达式;
    ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
    ·filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.

  • 相关阅读:
    Selector + 线程池 遇到的问题
    【转】Android TabActivity无法正常bindService解决方法
    Android 中的 Service 全面总结
    【转】IT 圈里有哪些经常被读错的词?
    【转】线程的7种状态及相互转换
    【eoeandroid 特刊】第117期打包网盘下载地址
    使用 Android 自带的 proguard 混淆源码
    Google+ 连接不上的解决办法
    【转】AsyncTask的用法
    winForm简单数据绑定
  • 原文地址:https://www.cnblogs.com/linkenpark/p/7550281.html
Copyright © 2011-2022 走看看