JQuery之二: 管理选定的element set

上节列举了很多种获取element set的方法。这节介绍如何在这些elemen set上继续筛选、切割。

获取element set大小

两种方法:

1. 将element set当作array,使用length属性

如:$("#divid").length 获取特定id为divid的div组的数目。

2. 使用size()方法

如:$("#divid").size() 跟上面效果一样。

从element set中获取元素

也有两种方法:

1. 像数组一样操作

如:$("a[href*=cnblogs.com]")[1] 获取地址中包含cnblogs.com的所有链接中第二个链接。

2. 使用get()方法

如:$("a[href=*=cnblogs.com]").get(1) 效果同上

get(index)方法详解:

如果没有index参数则返回一个包含所有元素的普通Javascript数组;如果有index参数则返回相应的元素。

获取element set中某元素的序号

作为get()方法的逆运算,使用index()方法返回element set中指定元素在element set中的位置。

如:$("div").index($("div#divid"))  获取id为divid的div元素在所有div元素集合众的位置序号。

index(element)方法详解:

返回element set中指定element的序号。如果element不存在,则返回-1.

在element set上添加另外一个element set

1. 使用强大的JQuery seleoctors语法可以获取这样的效果

如:$("img[alt], img[title]")  选择了包含alt属性或者title属性的所有img元素

2. 使用add()方法

如:$("img[alt]").add("img[title]") 跟上面效果一样。

 add(expression)方法详解:

注意参数是一个expression,而不是一个wrapped set。这个expression可以是selector,HTML fragment,一个DOM element,或者一个DOM element数组。

使用add()方法比JQuery selector有优势,可以利用JQuery的连续操作特性在一个element set上进行一个操作,然后再添加另外一个element set,对合集进行另外一个操作。如:$("img[alt]").addClass("thickBorder").add('img[title]').addClass('seeThough'),先给包含alt属性的img元素设置一个thick border,然后再给包含alt以及包含title的所有img元素设置透明特征。

另外,如果add()方法的expression参数为HTML fragment,并不能真的向DOM中添加新元素,要想添加新元素还要使用append()方法,这样会添加包含新元素在内的所有element set到DOM。

在element set上去除另外一个element set

1. 使用JQuery filter

如:$('img[title]'):not('[title*=puppy]') 包含title属性的img元素集合中去除title值中包含puppy字串的img元素集合。

2. 使用not()方法

如:$('img[title]').not('[title*=puppy]') 效果一样,看起来也只是冒号和点的区别,其实不然。我们知道JQuery filter只能传入filter expression,而不能操作element set。而not()方法就可以,所以上面的表达式还可以写成:

$('img[title]').not($('img[title*=puppy]')) 其中$('img[title*=puppy]')就是一个element set,需要注意的是not()方法不能传入JQuery selector如img[title*=puppy],只能是filter expression,如上[title*=puppy].(怎么这么绕,没关系,出错的时候就知道什么意思了)

not(expression)方法详解:

主要是expression的取值,可以是(string|element|array) ,即一个filter expression,或者一个元素,或者一个元素数组。

 3. 使用更灵活的filter()方法

可以传递给filter()一个函数作为参数,在函数体内使用this关键字来遍历element set中的所有元素。

如:$('td').filter(function(){ this.innerHTML.match(/^\d+$/) }); 获取表格中所有为数字的表项。像这样的任务是不能用JQuery的表达式完成的,good job.

filter(expression)方法详解:

expression可以使一个JQuery selector用于选择被保留的元素;或者是一个函数,使用this来表示遍历到的每个元素,函数返回false的元素会被去除

获取element set的子集

使用slice(begin, end)方法获取从begin(包含)到end(不包含)的元素组成的集合。如果end不指定,则获取从begin开始的所有元素。

如:$('div').slice(0, 4) 获取所有div中的前4个。

使用关系获取子集

可以使用的关系操作方法如下图所示:

 

所有这些方法(除了contents以外) 都可以传入一个selector expression来在原有element set中进一步选取。

并且所传入的expression会作用于原集合的每一个元素上,中文描述一下:

Method                          Description

 

children()                        返回包含满足条件的并为原来wrapped set孩子的元素集合

contents()                      返回一个包含所有元素的wrapped set,甚至包含text nodes。通常用来获取<iframe>元素内容。
next()                            返回下一个兄弟元素的集合。
nextAll()                         返回之后所有兄弟元素的集合.
parent()                         返回直接父元素的集合.
parents()                        返回所有父元素的集合,包括祖父等等,但不包括document根元素。
prev()                            返回上一个兄弟元素的集合。
prevAll()                         返回前面所有兄弟元素的集合。
siblings()                        返回所有兄弟元素的集合。

举几个例子说明一下:

下面的例子都采用这样的html片断:

<ul id='firstUl'>
    
<li>1</li>
    
<li>2</li>
    
<li>3</li>
    
<li>4</li>
</ul>
<ul id='secondUl'>
    
<li>1</li>
    
<li>2</li>
    
<li>3</li>
    
<li>4</li>
</ul>

1. $('ul:first').next().fadeOut();

    $('ul:eq(1)').fadeOut();

这两个表达式是同一个意思 : 将第二个ul进行fadeOut()操作。

2. $('ul').contents()

 这个可就热闹了,会选取两个ul中的所有内容,从fireBug的监视中可以看到:

 

 真是内容不分巨细,全拿出来了。

3. $('ul').slice(0, 1).children(':eq(1)').siblings().fadeOut();

将把第一个ul下的内容为1,3,4的 li 项fadeOut(),注意[1]数组操作符或get(1)方法都不能得到wrapped set,而只能得到DOM 数组,是不能调用fadeOut()方法的。

其它操作element set的方法

1. find(selector)

在已有wrapped set中查找符合selector expression的元素集合。

2. contains(text)

在已有wrapped set中包含text字符串的元素的集合。

3. is(expression)

判断是否已有wrapped set元素中至少有一个元素符合expression。返回true | false。

如:$("*").is('div') 判断页面中是否有div元素。

4. end()

在JQuery命令链中使用,返回最初的wrapped set。

如:$('img').clone().appendTo('#somewhere') .end().addClass('beenCloned');

将在原来的$('img') 上addClasss()。

5. andSelf()

返回最后一次操作结果wrapped set以及原来的wrapped set。

将上面的例子该成:$('img').clone().appendTo('#somewhere') .andSelf().addClass('beenCloned');

则原来的$('img') 和clone()出来的所有img元素都执行addClass()。

 

至此 ,所有选择wrapped set的方法都有了。多实践找出最简单有效的方式选择element set。

posted @ 2008-10-22 22:26  sayo.net  阅读(...)  评论(...编辑  收藏