关于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='/images/loading.gif' data-original="test"+i+"jpg";

});

第三种（带两个参数）：

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

this.src='/images/loading.gif' data-original="test"+i+"jpg";

// element.src='/images/loading.gif' data-original="test"+i+"jpg";

});

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

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

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

<title>关于each</title>  <script src='/images/loading.gif' data-original="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（）

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

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

示例如下：