页面上经常会创建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以后所有的元素。