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. php时间戳函数mktime()

    在项目开发中,偶尔会遇到跨周期.跨月的的时间操作.PHP为我们提供了一个很方便的函数->mktime,可以很简单的获取制定日期的时间戳了. mktime(hour,minute,second,m ...

  2. 【bzoj2721】[Violet 5]樱花

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=2721 好久没做数学题了,感觉有些思想僵化,走火入魔了. 这道题就是求方程$ \frac ...

  3. 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象

    前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...

  4. 【eclipse】svn在线安装

    Subclipse1.8 http://subclipse.tigris.org/update_1.8.x

  5. NOI导刊 2009 提高二

    开灯 题目大意 对编号为\([i \times a]\)的灯进行操作,找出操作数为奇数的那一个 题目分析 难度: 入门 因为看到操作数为奇数,因此直接进行位运算,做亦或和 打砖块 题目分析 第一眼看上 ...

  6. BZOJ 2005: [Noi2010]能量采集（莫比乌斯反演）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2005 题意:   思路: 首先要知道一点是,某个坐标(x,y)与(0,0)之间的整数点的个数为gcd ...

  7. Nginx 正则匹配

    目录 Nginx 正则表达式之匹配操作符 过期缓存 针对浏览器 针对文件类型 针对文件夹 判断文件,文件夹 设置某些类型文件的浏览器缓存时间 匹配到所有uri 全局变量 常用正则 Nginx 正则表达 ...

  8. Kolakoski数列

    2018-04-16 15:40:16 Kolakoski序列是一个仅由1和2组成的无限数列,是一种通过“自描述”来定义的数列.他在整数数列大全网站上排名第二位,足见该数列在组合数学界中的重要性. K ...

  9. HTML字符转码

    以下是HTML特殊字符的编码表: 标记 编码 实际名称 ™ ™ € € Space   ! ! " " " # # $ $ % % & & & ' ...

  10. lvs+keepalived+bind实现负载均衡高可用智能dns【转】

    转:https://www.cnblogs.com/mikeluwen/p/7068356.html 整体架构: 1.IP地址规划: Dns1:172.28.0.54 Dns2:172.28.0.55 ...