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 以选中或排除元素.

Jquery中的has、find、filter方法区别的更多相关文章

  1. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  2. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  3. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  4. jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象)

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

  5. js进阶 10-3 jquery中为什么用document.ready方法

    js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...

  6. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  7. 前端开发入门到进阶附录一【JQuery中parent(),parents(),parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  8. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  9. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  10. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

随机推荐

  1. c/c++获取系统时间函数

    参考:http://blog.sina.com.cn/s/blog_6f2caee40100uu41.html   Coordinated Universal Time(UTC): 协调世界时,又称为 ...

  2. NET Framework 4.0无法安装!

    win7旗舰版无法安装CAD2012,安装NET Framework 4.0的时候就出现错误,安装NET Framework 4.0单独版也无法安装出现错误. 解决方法: 1.点击电脑桌面右下角的“开 ...

  3. Python 3 并发编程多进程之进程池与回调函数

    Python 3 进程池与回调函数 一.进程池 在利用Python进行系统管理的时候,特别是同时操作多个文件目录,或者远程控制多台主机,并行操作可以节约大量的时间.多进程是实现并发的手段之一,需要注意 ...

  4. Github 上传代码的两种方式

    上传本地代码/文件->Github 折腾了半天时间... Github前期准备部分 1)登录github,新建一个 repository 2)repository 命名 3)Github是一个托 ...

  5. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  6. Ubuntu下录制屏幕并转换成gif【转】

    本文转载自:https://blog.csdn.net/u012964944/article/details/50464263 *录制屏幕 1)打开Ubuntu软件中心,安装RecordMyDeskt ...

  7. POJ - 1463 Strategic game (树状动态规划)

    这题做的心塞... 整个思路非常清晰,d[i][0]表示第i个结点不设置监察的情况下至少需要的数量:d[i][1]表示第i个结点设置检查的情况下的最小需要的数量. 状态转移方程见代码. 但是万万没想到 ...

  8. python 列表嵌套

    >>> a = ['a', 'b', 'c'] >>> n = [, , ] >>> x = [a, n] >>> x [[, ...

  9. Android中的代理模式

    代理的概念:为某个对象提供一个代理,以控制对这个对象的访问. 代理类和委托类有共同的父类或父接口,这样在任何使用委托类对象的地方都可以用代理对象替代.代理类负责请求的预处理.过滤.将请求分派给委托类处 ...

  10. WPF资源

    在WPF中.有着两种资源, 一种是组件资源:又被称为程序集资源,以二进制存在编译后的程序集中,通常用于存放图片或其他音频文件. 第二种是对象资源:通常放于xaml中.比如WPF的样式和数据绑定特性. ...