jQuery学习系列笔记(二)(续)

接着上一篇继续,今天学习对元素包装集进行精简,扩展或取子集的多种途径。

<强>一、管理包装元素集合

不知道大家对这个词有没有概念,其实就是我们用jQuery选择器或筛选器最终得到的一个或一组符合条件的集合。

<强> :$ ();它的包装集就是所有包含& lt; a>元素的& lt; li>元素的集合。所以包装集就是我们最终想对它操作的一个或一类,本篇讲的内容全是跟包装集有关,大家千万别把思路停留在一些选择器的语法上,而是在宏观上稍微提升点,我们做的是对集合的操作。这是为了能让你今后更好的运用jQuery链。


<强> 1,确定包装集的大小

通常包装集是一个javascript数组,而在javascript中有长度属性去获得数组的长度,jQuery中也有类似的东西,不过不是属性,而是方法。

$ (" # myDiv ")。html(“有”+“$ (“a”) .size ()+”>“img (alt)”) [0];匹配所有带有alt属性的& lt; img>元素集合中的第一个元素。同样,jQuery也为我们准备了类似的方法去达到相同的效果。

美元(“img (alt)”) . get (0);& lt;==比;$ (“img (alt)”) [0];

如果不指定参数的话,就是以javascript数组形式返回。

 var allImgWithAlt=$ (“img (alt)”) . get ();

此外,如果我们已知某元素,想知道它在某包装集里的下标,我们有另一个方法。

<强> :得到带有类铁人的& lt; img>元素集合中第五个元素在所有& lt; img>里的位置。

的var pos=$ (img) .index ($ (" img.ironman] ") . get (4));

<强> 3,筛选元素包装集

有时候我们需要对现有的包装集进行添加元素。

包含alt属性的& lt; img>元素和包含标题属性的& lt; img>的集合。

美元阀门(“img (alt)”) (“img[标题]”);

大家可能会想,这个不用添加()也可以实现啊~ 

$("img[alt], img[title]");

这么写我们不是更熟悉吗？对，没错，这样写也可以，但是想到如果我们要充分利用到jQuery链的话，也许前者更好些。同样的效果用前者可以这样实现

$("img[alt]").addClass("RedBorder").add("img[title]").addClass("Bigger");

但是用后者的话我们就要这样写

$("img[alt]).addClass("RedBorder");$("img[alt], img[title]").addClass("Bigger");

哪个更好？这个是表示给包含alt属性的元素加RedBorder类，给包含alt属性的元素和包含title属性的的元素加Bigger类。


集合中title内容包含puppy字段的剩余元素。

$("img").not("[title*=puppy]");



filter()的与not()想达成的效果是一样的，那就是都是在缩小集合。不一样的是not()用的是，而filter()用的是。大家这块一定要理清。

出集合中title内容包含puppy字段的元素。

$("img").filter("[title*=puppy]");

最后再介绍个方法

这个其实也没什么的，应该很少用到，大家就明白了。

选择页面所有元素，创建只包含前4个元素的新包装集。

$("*").slice(0,4);

选择页面所有元素，创建除前4个元素以外的新包装集。


$("*").slice(4);

4、利用关系获取包装集

jQuery还允许根据和其他DOM元素的关系，从DOM选择元素。具体的方法大家去网上查一下，我列举两个自己经常会用到的

5、更多使用包装集的途径

jQuery为了最大限度的方便用户，还提供了其他方法。

除了在包装集里查找匹配的元素外，jQuery还提供方法查找包含指定字符串的元素。

：匹配包含文本“I love you”的段落

$("p").包含(“我爱你”);

最后介绍一个方法,通常是用来对包装集进行测试的。

当我们不知道自己的选择器写的是否对的时候,就可以拿它来测试一下

 var hasImage=$ (“*”) . (img); 
jQuery学习系列笔记(二)(续)