用示例说明filter()与find()的用法以及children()与find()的区别分析

jquery的find()方法与filter()方法对于初学者来说容易混淆，在这里对这两个方法通过一个小例子来进行比较和说明。旨在了解这两种方法的区别。

html代码


代码如下:

<div class="css">
     <p class="rain">测试1</p>
</div>
<div class="rain">
     <p>测试2</p>
</div>

先看看find()方法


代码如下:

$("div").find(".rain").css('color', '#FF0000');
//等价于：$("div .rain").css('color','#ff0000');
//也等价于：$(".rain","div").css('color','#ff0000');

显示结果：

问题：这里为什么“测试2”不变为红色？

find() 方法定义：它是获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

find()方法要注意的地方：find()方法是在当前元素集合内部查找。不包括自己。

上面例子中$("div")包含两个元素。第一个元素符合要求。但第二个元素div本身的class虽然是"rain"，但其内部没有class=rain。所以不符合。

下面使用filter()方法看看有什么新玩意

$("div").filter(".rain").css('color', '#FF0000');

显示结果：


filter()方法定义：filter() 方法将匹配元素集合缩减为指定选择器的元素。

意思就是对匹配元素的集合，用选择器测试每个元素本身（不是后代），符合选择器的元素包含在集合中，不符合的去掉（选择器就是起过滤作用）。形成一个新的结果集。

在上面例子中：find()会在div元素内部（后代）寻找 class为rain 的元素。而filter()则是筛选div的class为rain的元素。一个是对它的子集操作，一个是对自身集合元素筛选。

在看两个filter()方法的例子：例一  例二

使用filter()方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。

看一下下面的例子：

代码如下:

---------------------------
来自网页的消息
---------------------------
The code is in your clipboard now
---------------------------
确定  
---------------------------

代码如下:

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');


结果如下：

这里在顺便说一下find()方法和children()方法的区别

find()方法上面已经说过了，在此不在熬述，下面说一下children()方法。

children，表面意思就是：孩子，儿童，子女的意思。我一般这里理解为子女或儿子。为什么这样理解？下面先看一下children的定义吧

children()方法定义：它是获得匹配元素集合中每个元素的所有子元素。（不包括自己，只能在儿子辈(第一层)查找）

find() 方法定义：       它是获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

我理解是children是匹配集合中每个元素的“儿子辈”的子元素。find()除了儿子辈，还包括孙子辈。即只要是它的后代就行。

下面通过一个例子来看看：


代码如下:

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<style>
  body {font-size:16px; font-weight:bolder;}
  p {margin:5px 0;}
</style>
</head>
<body>
  <div>
    <span>Hello</span>
    <span>
      <p class="selected">test</p>
    </span>
    <p>And One Last Time</p>
    <p class="selected">again</p>
  </div>
  <p class="selected">Hello Again</p>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>

结果如下图所示：

赞 (0)

相关推荐

  • 基于jquery中children()与find()的区别介绍

    基于jquery中children()与find()的区别介绍

    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

  • childNodes.length与children.length的区别

    因为childNodes包含的不仅仅只有html节点,所有属性,文本等都包含在childNodes里面,你可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才使元素节点,2是属性节点,3是文本节点.而children.length只计算节点的数量.包括进行节点长度的计算,节点的移动时都要注意这一点.要获得一个元素的文本,比如要获得一个P节点的文本,有的人喜欢使用innerHTML,更改也是一样,其实这不太好,因为使用innerHTML浏览器会认为你要插入的东西是一段标

  • Js中parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • js parentElement和offsetParent之间的区别

    首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性. 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下. 要明白 offsetParent 属性,要先明白"已定位元素" 这个名字,所谓&

  • 用示例说明filter()与find()的用法以及children()与find()的区别分析

    用示例说明filter()与find()的用法以及children()与find()的区别分析

    jquery的find()方法与filter()方法对于初学者来说容易混淆,在这里对这两个方法通过一个小例子来进行比较和说明.旨在了解这两种方法的区别. html代码 复制代码 代码如下: <div class="css">     <p class="rain">测试1</p></div><div class="rain">     <p>测试2</p><

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • C语言示例讲解if else语句的用法

    C语言示例讲解if else语句的用法

    目录 1.前言 2.if语句的语法结构 3.关于if else语句的示例 4.if else 书写形式的对比 5.例子 1.前言 (1)C语言是结构化的程序设计语言.C语言的三种基本程序结构分别是: 顺序结构:按照程序顺序执行 选择结构:根据判断结果选择分支方向 循环结构:指有一个循环体,可以根据判断条件决定循环多少次 (2)分支语句(选择语句)和循环语句 (3)什么是语句? C语言中由一个分号(;)隔开的就是一条语句. 2.if语句的语法结构 大致分为三种: if(表达式)    语句; if

  • C语言示例讲解switch分支语句的用法

    C语言示例讲解switch分支语句的用法

    目录 1.了解switch分支语句 2.示例 3.default子句 4.练习 1.了解switch分支语句 switch语句也是一种分支语句,常常用于多分支的情况. 比如: 输入1,就会输出星期一 输入2,就会输出星期二 … 输入7,就会输出星期七 对于这样的代码需求,如果用if .else if.else的形式就会显得太复杂.如何用switch语句实现该功能呢?switch语句的结构又是怎样的呢? switch(整型表达式){    语句项;} 其中,整型表达式必须为整型,且为常量(字符也可

  • C语言示例讲解while循环语句的用法

    C语言示例讲解while循环语句的用法

    目录 1.while语句结构 2.代码示例 在学习和回顾该知识前,已经掌握了if语句的结构和用法. if (条件)    语句; 当条件满足的情况下,if结构中的语句执行,且只执行一次:条件不满足则不执行.但是生活中常常需要将一件事情完成很多次,这时候就要用到while语句来实现循环了. 1.while语句结构 while (表达式)    循环语句; 例子:利用循环结构打印1-10 #include <stdio.h> int main() { int i = 0; while(i <

  • 详解AngularJS Filter（过滤器）用法

    详解AngularJS Filter（过滤器）用法

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr

  • vue filter的四种用法小结

    目录 filter的用法小结 filter的基本用法 filter的用法小结 使用计算属性app.js var app5 = new Vue({     el: '#app5',     data: {         shoppingList: [             "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pe

  • php中静态类与静态变量用法的区别分析

    本文实例分析了php中静态类与静态变量用法的区别.分享给大家供大家参考.具体分析如下: static是定义一个静态对象或静态变量,关于static 定义的变量或类方法有什么特性我们看完本文章的相关实例后就见分晓了. 1. 创建对象$object = new Class(),然后使用"->"调用:$object->attribute/function,前提是该变量/方法可访问. 2. 直接调用类方法/变量:class::attribute/function,无论是静态/非静态

  • C#中StringBuilder用法以及和String的区别分析

    String类有不可改变性.每次执行字符操作时,都会创建一个新的String对象. StringBuilder 类解决了对字符串进行重复修改的过程中创建大量对象的问题.初始化一个StringBuilder 之后,它会自动申请一个默认的StringBuilder 容量(默认值是16),这个容量是由Capacity来控制的.并且允许,我们根据需要来控制Capacity的大小,也可以通过Length来获取或设置StringBuilder 的长度. 举例: 用String类这么写 复制代码 代码如下:

  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

随机推荐