【jQuery】管理包装集

来源:互联网 发布:网络上说表妹什么意思 编辑:程序博客网 时间:2024/05/16 19:41

1、确定包装集的大小
size()——返回包装集中元素的个数
例:$(#someDiv).html($(‘a’).size()+’links on this page.’);
2、从包装集中获取元素
(1)索引
[]——数组下标,var imgElement=$(‘img[alt]’)[0];
get(index)——获取包装集中的一个或全部匹配元素。如果不指定参数,则整个集合以数组形式返回。var imgElemnt=$(‘img[alt]’).get(0);
eq(index)——获取包装集中与index参数相对应的元素,并返回只包含此元素的新包装集。
first()、last()
(2)以数组形式获取所有元素
toArray()——将包装集里的所有元素作为DOM元素数组返回
(3)获取元素的索引
index(element)——在包装集中查找传入的元素,返回其下标。var n=$(‘img’).index(‘img#findMe’);
3、分解元素包装集
(1)添加
add(expression,context)——创建包装集的副本并向其中添加由expression参数指定的元素。expression可以是选择器、HTML片段、DOM元素或DOM元素数组。返回所添加元素的原始包装集副本。
例:对所有拥有alt特性的<img>元素应用粗边框,然后对所有拥有alt或title特性的<img>元素应用透明效果。

$(‘img[alt]’).addClass(‘thickBorder’).add(‘img[title]’).addClass(‘seeThrough’); 

(2)整理
not(expression)——创建包装集的副本,从中删除与expression参数值指定的标准匹配的元素。
例:$(‘img’).not(function(){return !$(this).hasClass(‘keepMe’);})
filter(expression)——创建包装集的副本,从中删除与expression参数值指定的标准不匹配的元素集合。
例:$(‘td’).filter(function(){return this.innerHTML.match(/^\d+$/);})
(3)子集
slice(begin,end)——创建并返回新包装集,此包装集包含匹配集中一个连续的部分。从0开始计数。end省略,则扩展到最后一个元素。
例:$(‘div’).has(‘img[alt]’)
(4)转换包装集中的元素
map(callback)——为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象实例中。
例:

var allIds=$(‘div’).map(function(){         return (this.id==undefined) ? null:this.id;}).get();

(5)遍历包装集中的元素
each(iterator)——遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数。
例:

$(‘img’).each(function(n){         this.alt=’this is image[‘+n+’] whith an id of ’+this.id;})

4、使用关系获取包装集
根据与HTML DOM中其他元素的关系获取新包装集的方法
方法 描述
Children([selector]) 返回由每个包装元素所有的子节点(不包含重复)组成的包装集
Closest([selector]) 返回由与传入参数匹配的单个邻近祖先元素组成的包装集
Contents() 返回由每个元素的内容组成的包装集,包括文本节点
next([selector]) 返回由每个包装元素后面下一个同级元素(不包含重复)组成的包装集
nextAll([selector]) 返回由每个包装元素后面所有的同级元素组成的包装集
nextUntil([selector]) 返回由每个包装元素后面所有的同级元素组成的包装集,直至遇到与选择器相匹配的元素,但不包括此元素。
offsetParent() 返回由包装集中离第一个元素最近的,使用相对或者绝对定位的祖先元素组成的包装集
parent([selector]) 返回由每个包装元素的直接父元素(不包含重复)组成的包装集
parents([selector]) 返回由每个包装元素所有的祖先元素(不包含重复)组成的包装集。
parentsUntil([selector]) 返回由每个包装元素所有的祖先元素(不包含重复)组成的包装集,直至遇到与选择器相匹配的元素,但不包括此元素。
prev([selector]) 返回由每个包装元素前面紧邻的同级元素(不包含重复)组成的包装集
prevAll([selector]) 返回由每个包装元素前面所有的同级元素组成的包装集
prevUntil([selector]) 返回由每个包装元素前面所有的同级元素组成的包装集,直至遇到与选择器相匹配的元素,但不包括此元素。
Siblings([selector]) 返回由每个包装元素的所有同级元素(不包含重复)组成的包装集
find(selector)——返回新的包装集,包含原始包装集中与传入的选择器表达式相匹配的元素的所有后代元素
is(selector)——确定包装集中是否存在与传入的选择器表达式相匹配的元素
end()——在jQuery方法链中用来将当前的包装集回滚到前一个返回的包装集
例:$(‘img’).filter(‘[title]’).hide().end().addClass(‘anImage’);
对包含所有<img>元素的包装集应用了addClass方法。
andSelf()——合并方法链中的前两个包装集
例:

$(‘div’)       .addClass(‘a’)       .find(‘img’)       .addClass(‘b’)       .andSelf()       .addClass(‘c’);

选择有所的<div>元素并向其添加CSS类a,然后创建一个由这些<div>元素后代中所有的<img>语速组成的新包装集,并向这些<img>元素添加CSS类b,最后创建第三个包装集,它是<div>元素和其后代中的<img>元素的并集,并向这些元素添加CSS类c。

0 0