jQuery基础教程之DOM操作-遍历节点-filter()方法

.filter(selector)
此方法用于在匹配元素中按照选择器表达式进行筛选。
记住：使用此方法必须得传入选择器表达式参数，不然会报错“’nodeType’ 为空或不是对象”

另外请注意这个filter方法和jquery中的find方法的区别:
filter方法是对匹配元素进行筛选，而find方法是对匹配元素的后代元素进行筛选。

从jquery1.4版本开始，filter方法又添加了两个新的用法，现在一共有四种用法了。
下面来具体看看这四种用法：

• .filter(selector)
  这种用法是在已匹配的元素中按照给定的selector参数（jquery选择器表达式）进行筛选，然后将匹配的元素包装成jquery元素集合返回。这个方法是用来缩小匹配范围的，selector参数可以是多个表达式用逗号连接起来。
  来看例子：
  HTML代码：
  01<ul>

  02    <li>11111</li>

  03    <li class="item">22222</li>

  04    <li>33333</li>

  05    <li>44444</li>

  06    <li>55555</li>

  07    <li>66666</li>

  08    <li>77777</li>

  09</ul>

  10        

  Jquery代码：

  1$("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色

  2        

  上面的jquery代码和下面的jquery代码效果是一样的

  1$("ul>li:even").css("color","red");//将索引为偶数的li背景变为红色

  2        

  再来看一下选择器表达式用逗号连接起来的用法：

  1$("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色

  2        
  
• .filter( function(index) )
  这种使用方法是对匹配的元素进行遍历，如果function(index)返回的值为true的话，那么这个元素就被选中，如果返回值为false的话，那么这个元素就不被选中
  index参数是当前的匹配元素在原来的元素集合中的索引。
  如果您对上面的解释不清楚的话（本人表达能力有点欠缺~^_^），可以好好看看下面的例子：
  HTML代码：
  1<div id="first"></div>

  2<div id="second"></div>

  3<div id="third"></div>

  4<div id="fourth"></div>

  5<div id="fifth"></div>

  6<div id="sixth"></div>

  7        

  jquery代码：

  1$("div").filter(function(index) {

  2    return index == 1 || $(this).attr("id") == "fourth";

  3}).css("border", "5px double blue");

  4        

  上面代码的结果是 第二个div元素和 id为“fourth”的div元素的边框变成了双线颜色为蓝色

  
• .filter( element )
  element参数为DOM对象，如果element DOM对象和匹配的元素是同一个元素的话，那么这个元素会被匹配。这种用法是1.4版本新加的，我还没想出来有什么用处
  看例子吧：
  还是对上面的HTML代码，看jquery代码：
  1$("div").filter(document.getElementById("third")).css("border", "5px double blue");

  2        

  结果是id为third的div元素边框有变化。
  这个例子举得很鸡肋，大家会说何必这么麻烦呢？还不如直接:

  1$("#third").css("border", "5px double blue");

  2        

  的确，我也是这样想的，但是既然是1.4版本新加的，那肯定会是有用到的地方的，不会是鸡肋的，只是我的jquery水平还太低，还没发现而已，如果哪位看官有想到用处的话，还望赐教！

  
• .filter(jQuery object)
  这个用法和上面的.filter( element )的用法差不多，只是一个参数为DOM对象，一个参数为jquery对象，我还是感觉比较鸡肋。
  看例子：
  同样是对上面的HTML代码，看jquery代码：
  1$("div").filter($("#third")).css("border", "5px double blue");

  2        

  结果是id为third的div元素边框有变化。
  同样直接用下面的jquery代码会更好：

  1$("#third").css("border", "5px double blue");

  2        

  我实在想不出来，会在什么地方用到这样的用法~~hoho~~期待以后来完善这个教程~~呵呵~~