关于each()、find()、filter()遍历节点的操作方法

each语法：

each(fn)  ;

返回值：jQuery

fn：代表对于每个匹配元素所要执行的函数

each（）方法共有三种形式

第一种(不带参数)：

$('img').each(function(){

$(this).toggleClass("example");

});

注意：此时的this代指的是DOM对象而不是jQuery对象

如果想得到jQuery对象，可以使用$(this)函数

第二种（带一个参数）：

$('img').each(function(i){

   this.src="test"+i+"jpg";

});

第三种（带两个参数）：

$('img').each(function(i，element){

this.src="test"+i+"jpg";

// element.src="test"+i+"jpg";

});

概述：以每一个匹配元素作为上下文来执行一个函数

每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）.而且在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合总所处的位置的数字值作为参数（从0开始的整型）。返回‘false’将停止循环（就像在普通的循环中使用‘break’）。返回‘true’跳至下一个循环（就像在普通循环中使用‘continue’）。

最常用的形式是第二种，接下来我们写一个示例

<title>关于each</title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("[type=button]").click(function () {

                var hobby = "";

                $(":checkbox:checked").each(function (i,element) {

                    //$(element).val();

                    hobby += (++i) +"." + $(this).val()+"<br/>";

                });

                $("#hobby").html(hobby);

            });

        });

    </script>

</head>

<body>

    <div>请选择您的爱好</div>

    <ul>

        <li><input  type="checkbox" value="登山" /> 登山</li>

        <li> <input  type="checkbox" value="游泳" /> 游泳</li>

        <li><input  type="checkbox" value="跳高"/> 跳高</li>

        <li><input  type="checkbox" value="弹吉他"/> 弹吉他</li>

        <li><input  type="checkbox" value="小提琴"/> 小提琴</li>

        <li><input  type="checkbox" value="葫芦丝"/> 葫芦丝</li>

    </ul>

    <hr />

    <input  type="button" value="查看我的爱好"/>

    <div id="hobby"></div>

</body>

</html>

查找方法--------------------------------find（）

搜索所有与指定表达式匹配的元素

示例：

$('p').find('span');     //在所有p元素的后代节点中查找span元素

注意：find（）是不允许空参的（即必须要跟一个选择器）

情景：如果我就想拿p标签里的所有后代，那应该怎么办？

解决方案：那就用到了我们之前学习的全局选择器（*）  一般情况不会用到

----------------------------------------filter（）

筛选出与指定表达式匹配的元素集合

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

示例如下：

关于each()、find()、filter()遍历节点的操作方法的更多相关文章

  1. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

  2. jq的遍历节点

    1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...

  3. mysql7笔记----遍历节点所有子节点

    mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...

  4. jaxp的dom方式操作（查找、添加、修改、删除、遍历节点）

    package cn.itcast.jaxptest; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;imp ...

  5. [ActionScript 3.0] as3处理xml的功能和遍历节点

    as3比as2处理xml的功能增强了N倍,获取或遍历节点非常之方便,类似于json对像的处理方式. XML 的一个强大功能是它能够通过文本字符的线性字符串提供复杂的嵌套数据.将数据加载到 XML 对象 ...

  6. jQuery中each()、find()、filter()等节点操作方法

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元 ...

  7. jQuery遍历节点方法汇总

    1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...

  8. 在Delphi7中JSON遍历节点不支持使用IN处理方法

    相关资料:http://www.cnblogs.com/del/archive/2009/10/23/1588690.html Delphi2007源代码: procedure TForm1.Butt ...

  9. jQuery_DOM学习之------遍历节点

    一.children()方法 例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

随机推荐

  1. php-安装与配置-未完待续2

    一,准备工作 在入门指引中,我们已经知道PHP的3个应用领域,不同的场景,需要安装的东西是不同的.具体如下: 服务器端脚本,在通常情况下,需要三样东西:PHP 自身.一个 web 服务器和一个 web ...

  2. gcc常用语法

    1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. g ...

  3. linux select用法

    select 是linux i/o 复用技术之一 man 2 select #include <sys/select.h> /* According to earlier standard ...

  4. 笔记-python-多线程-深入-1

    笔记-python-多线程-深入-1 1.      线程池 1.1.    线程池:控制同时存在的线程数量 threading没有线程池,只能自己控制线程数量. 基本有两种方式: 每间隔一段时间创建 ...

  5. TouTiao开源项目 分析笔记5

    1.深入理解RxJava 1.1.基本上现在的APP都会有请求网络,然后处理回调的业务吧. 如果请求的数据很多,业务越来越复杂,怎么处理呢? 这里我用到了RxJava来帮我处理业务. RxJava主要 ...

  6. Diycode开源项目 如何解决InputMethodManager造成的内存泄漏问题

    1.内存泄漏的状况及原因 1.1.利用LeakCanary查看内存泄漏的状况 1.2.内存泄漏怎么产生的呢? InputMethodManager.mServicedView持有一个最后聚焦View的 ...

  7. Web性能测试问题,mysql分析之一

    在做性能测试执行中,发现性能很慢,顺藤摸瓜找一下是什么问题? 并发40个用XXX场景 1.运行过程中监控mysql数据库的CPU过高,达到65%: %CPU   %Mem  %Disk   %Net ...

  8. BZOJ 2907: 拜访神犇

    设最优策略为第一步向左走 那么肯定是走到最左边最优 需要补一些步数 一种是最右边的连着选,多出一倍代价 一种是不连着选,多出两倍代价 #include<cstdio> #include&l ...

  9. dex2oat 加载多次

    我是一个做插件开发的人员,插件就是动态加载dex文件. 然后4.4以后,Android dalvik虚拟机,和ART. art运行的必须要把dex转换为oat elf文件. 然后,这个dex2oat需 ...

  10. 什么是App加壳，以及App加壳的利与弊

    非著名程序员涩郎 非著名程序员,字耿左直右,号涩郎,爱搞机,爱编程,是爬行在移动互联网中的一名码匠!个人微信号:loonggg,微博:涩郎,专注于移动互联网的开发和研究,本号致力于分享IT技术和程序猿 ...