基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件，检索该条件在每个元素的后代中是否存在，将符合条件的的元素构成新的结果集。

下面举一个例子：


代码如下:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

代码如下:

$('li').has('span').css('background-color', 'red');

得到的结果如下：

这个例子可以看出：在匹配li时，要检查该li的后代元素中是否包含了span，如果包含，则该元素包含在结果中。如果不包含，那么就排除。

注意：has只起判断作用。以has参数中的选择器或DOM元素做为条件，检测原结果集中的元素是否符合。去掉不符合的元素，将符合的元素构成一个新结果集。

这与find()方法不同，find()方法是获得在当前结果集中每个元素的后代。参数（选择器、jquery集合或DOM元素）做为过滤条件，满足过滤条件的则保留，保留的是后代。而has()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。

$('li').find('span').css('background-color', 'red');

结果为：


filter()方法与has()方法中的参数，都是过滤条件。不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。

以下面的例子为例：filter()方法中，条件作用于自身li，has()方法条件是作用于li的后代元素


代码如下:

<ul>
  <li class="a">list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

代码如下:

$('li').filter('.a').css('background-color', 'red');

结果为：

赞 (0)

相关推荐

  • jQuery中each()、find()和filter()等节点操作方法详解(推荐)

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'

  • jQuery里filter()函数与find()函数用法分析

    本文实例讲述了jQuery里filter()函数与find()函数用法.分享给大家供大家参考.具体分析如下: $("div .cont"); 等价于$("div").find(".cont") filter()函数是作用在集合的每一个对象($(这里是什么得到的就是什么))上, find()函数是在每一个对象内部查找匹配表达式的子元素 例子: <div class="cont"><p class="c

  • jQuery中filter()和find()的区别深入了解

    一直不是很清楚filter()方法和find()方法的区别,今天在看jQuery Cookbook一书中,终于算是搞清楚了. filter()过滤DOM元素包装集,是指操作当前元素集,删除不匹配的元素,得到一个新的集合 复制代码 代码如下: $('div').filter('.div1');//选择div标签中class属性为div1的div元素 find()在当前选中元素的上下文中找到符合条件的后代,返回的是子元素 复制代码 代码如下: $('div').find('em');//选择div标

  • Jquery find与filter函数区别 说明

    find()会在div元素内 寻找 class为classname的元素. filter()则是筛选div的class为classname的元素. 基本是find子元素找,filter是平级找 ·find 函数是在当前对象集合的子元素中进行查询; ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围; ·find 函数的参数是 jQuery 选择器表达式; ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系); ·filter 的参数也可以是个函

  • jQuery基础知识filter()和find()实例说明

    jQuery基础知识filter()和find()实例说明

    首先 我们看.find()方法: 现在有一个页面,里面HTML代码为; 复制代码 代码如下: <div class="css"> <p class="rain">测试1</p> </div> <div class="rain"> <p>测试2</p> </div> 如果我们使用find()方法: var $find = $("div"

  • 基于Java的打包jar、war、ear包的作用与区别详解

    以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.class文件,每个文件中的功能与作用,同样可以得到他们希望的结果.除jar以外对于J2EE来说还有war和ear.区别见下表: JAR WAR EAR 英文 Java Archive file Web Archive file Enterprise Archive file 包含内容 class.properties文件,是文件封装的最小单元:包含Java类的普通库.资源(resources).辅助文件(auxi

  • js监听键盘事件的方法_原生和jquery的区别详解

    经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的

  • 基于js 字符串indexof与search方法的区别(详解)

    基于js 字符串indexof与search方法的区别(详解)

    1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法: 注意:有可选的参数(即设置开始的检索位置). 2.search方法 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 注意:search方法可以根据正则表达式查找指定字符串(可以忽略大小写,并且不执行全局检索),同时没有可选参数(即设置开始的检索位置). 以上这篇基于js 字符串indexof与search方法的区别(详解)就是小编分享给大家的全部

  • 基于js 各种排序方法和sort方法的区别(详解)

    今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

  • 基于jquery的on和click的区别详解

    使用jQuery写js时,有些用on写行为函数,有些用click,弄清二者区别很重要. 以下是用于测试二者区别的HTML代码. <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="h

  • 基于DOM节点删除之empty和remove的区别(详解)

    要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello"><p>这是p标签</p></

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

  • 基于Python __dict__与dir()的区别详解

    Python下一切皆对象,每个对象都有多个属性(attribute),Python对属性有一套统一的管理方案. __dict__与dir()的区别: dir()是一个函数,返回的是list: __dict__是一个字典,键为属性名,值为属性值: dir()用来寻找一个对象的所有属性,包括__dict__中的属性,__dict__是dir()的子集: 并不是所有对象都拥有__dict__属性.许多内建类型就没有__dict__属性,如list,此时就需要用dir()来列出对象的所有属性. __di

随机推荐