十四、过滤函数-筛选对象集合

页面上经常会创建DOM元素、删除DOM元素。因为jQuery对象是以集合的形式存在的，所以还要执行将DOM对象添加到jQuery对象集合、从jQuery对象集合中删除等操作。jQuery官网将管理jQuery对象集合的函数放在了"Traversing"分类中。Traversing分类下主要包括三个子类：Filtering,Finding,Chaining分别是过滤，查找，链式操作。

 

过滤函数的作用是：在已经选定的集合中，将匹配过滤函数的元素保留，将不符合的去除。列表如下：

 

名称	说明	举例
eq(index)	返回集合中指定索引index的元素，从0开始计算	$(“p”).eq(1) 获取匹配的第二个元素
filter(expr)	筛选出与指定表达式匹配的元素集合	$(“p”).filter(“.selected”) 保留带有selected类的元素
filter(fn)	筛选出与指定函数返回值匹配的元素集合，这个函数内部将对每个对象计算一次（正如’$.each’）。如果调用的函数返回false则这个元素被删除，否则就会被保留	$(“div”).filter(function(index){return $(“ol”,this).size()=0;}); 保留子元素中不含有ol的元素
is(expr) 注意：这个函数返回的不是jQuery包装集而是Boolean值	用一个表达式检查当前选择的元素集合，如果 其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，则返回false。filter内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。	$(“input[type=’checkbox’]”).parent().is(“form”) 由于input元素的父元素是一个表单元素，所以返回true。
map(callback)	将一组元素转换成其他数组（不论是否是数组元素）可以用这个函数建立一个列表，不论是值、属性还是css样式，或者其他特别形式，都可以用”$.map()”来方便的建立	$(“p”).append($(“input”).map(function(){ return $(this).val(); }).get().join(“,”)); 把form中的每个input元素的值简历一个列表
not(expr)	删除与指定表达式匹配的元素	$(“p”).not($(“#selected”)[0]) 从P元素中删除带有select的ID元素
slice()	选取一个匹配的子集	$(“p”).slice(0,1); 选择第一个P元素

 

过滤函数要点

1.eq（）函数

如果index超出了集合则返回一个空集合，而不会返回null。

2.filter()函数与find()函数

filter()函数支持选择器表达式和fn()函数两种类型的参数，是最常使用的过滤函数。但是初学者常常分不清filter()函数和后面即将讲到的find()函数。jQuery后台选择器时已经在内部使用过find()函数：

jQuery("div .className");等同于jQuery("div").find(".className");

使用filter()和find()都要首先使用选择器获得一个jQuery对象集合。

filter()函数是作用在集合的每一个对象上，即在"jQuery("div")"选取的集合上过滤，将匹配表达式或者函数的对象保留。

find()函数是在每一个对象内部查找匹配表达式的子元素，即作用在"jQuery("div")"集合的每个子元素上。

3.is()函数

返回的是true或者false。只要jQuery对象集合中有一个元素满足表达式的条件就返回true。比如：$("div").is(".testClass");只要有一个div应用了testClass的样式就返回true。

4.map()函数

map()函数会改变jQuery对象集合，比如：

$("div").map(function(){return this.innerHtml;})

5.slice()函数

slice()函数的行为与javascript数组的slice()函数相同。即参数start表示其元素的索引，从0开始。end参数不传入则表示选取从start以后所有的元素。