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

页面上经常会创建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。如果没有元素符合,或者表达式无效,则返回falsefilter内部实际也是在调用这个函数,所以,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元素中删除带有selectID元素

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以后所有的元素。

原文地址:https://www.cnblogs.com/tomkillua/p/2630889.html