继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery 学习系列笔记

千岁不倒翁
关注TA
已关注
手记 362
粉丝 60
获赞 386

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

一、管理包装元素集合

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

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


1、确定包装集的大小

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

size():返回包装集里元素的个数。

举个例子:

$("#myDiv").html("There are " + "$("a").size()" + " on this page.");

相信不用我解释大家也很明白了,就是匹配页面上所有的<a>元素,接着调用.size()方法,返回匹配的个数。

2、从包装集获取元素

包装集既然是一个数组,那么我们当然可以用下标的形式去获取集合中的指定某元素,像这样 $("img[alt]")[0]; 匹配所有带有alt属性的<img>元素集合中的第一个元素。同样,jQuery也为我们准备了类似的方法去达到相同的效果。

get(index):获取包装集里的一个或所有匹配元素。如果不指定参数,包装集里的所有元素就以javascript数组形式返回;如果指定下标参数,就返回下标所对应的元素。

$("img[alt]").get(0);    <==>   $("img[alt]")[0];

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

var allImgWithAlt = $("img[alt]").get();

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

index(element):在包装集里查找传入的元素,并返回该元素在包装集里的顺序下标;如果该元素不在包装集里,则返回-1。

element:整数,用于确定元素的下标,也可不写。

举个例子:得到带有类ironman的<img>元素集合中第五个元素在所有<img>里的位置。

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

3、筛选元素包装集

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

add(expression):把表达式参数所指定的元素添加到包装集。表达式可以是选择器、HTML片段、DOM元素或DOM元素数组。返回的是包装集。

expression:(字符串|元素|数组)指定添加到包装集的元素。

举个例子:包含alt属性的<img>元素和包含title属性的<img>的集合。

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

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

$("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属性的<img>元素加RedBorder类,给包含alt属性的<img>元素和包含title属性的<img>的元素加Bigger类。

not(expression):根据表达式参数的值,从包装集里删除元素。如果参数是jQuery筛选选择器,则从包装集里删除任何匹配表达式的元素;如果参数是元素引用,则从包装集里删除该元素。返回的是包装集。

expression:(字符串|元素|数组)


举个例子:排除集合中title内容包含puppy字段的剩余<img>元素。

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

filter(expression):利用传入的选择器表达式或筛选函数,从包装集里筛选元素。返回的是包装集。


expression:(字符串|函数)


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

举个例子: 筛选出集合中title内容包含puppy字段的<img>元素。

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

最后再介绍个方法

slice(begin, end):创建并返回新包装集,新包装集包含原始包装集的连续的一部分。返回新建的包装集。

begin:(数字)返回切片中的第一个元素的下标(从0开始)。

end:(数字,可选)返回切片中的最后一个元素的下标(从0开始),如省略,则指原始包装集的末尾。

这个其实也没什么的,应该很少用到,举两个例子大家就明白了。

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

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

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


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

4、利用关系获取包装集

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

next(expression):返回原始包装集元素的所有唯一的下一个兄弟元素所组成的包装集。

expression:(字符串)

parent(expression):返回原始包装集所有元素的唯一直接父元素所组成的包装集。

expression:(字符串)

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

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

find(selector):返回新包装集,包含原始包装集里与传入选择器表达式相匹配的所有元素。注意:原始包装集里的元素的后代,会因为与传入的选择器表达式相匹配而被包含在新包装集里。

selector:(字符串)一个jQuery选择器,元素必须匹配这个选择器,才能成为新包装集的一部分。

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

contains(text):返回新包装集,由包含text参数所传入的文本字符串的元素所组成。

text:(字符串)添加到新包装集里的元素必须包含的文本。

比如:匹配包含文本“I love you”的段落

$("p").contains("I love you");

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

is(selector):确定包装集里是否有元素匹配传入的选择器表达式。如果至少有一个元素匹配传入的选择器,返回true,否则返回false。

selector:(字符串)选择器表达式,用于测试包装集的元素。

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

var hasImage = $("*").is("img");

如果当前页面包含<img>元素,则hasImage为true。


6、管理jQuery链

其实这章开始的时候已经说了是为了让我们能更好的运用jQuery链,但当时我是根据自己的理解才那么说的,但是学到这个地方的时候,书上也来了这么一句,看来jQuery链已经被足够重视。引用一段话“这种链能力不但允许以简洁的方式写出强大的操作,而且提高了效率,因为它能够把多个命令应用到包装集里,而不必重新计算包装集。”

end():在jQuery命令链内调用,以便回退到前一个包装集。返回前一个包装集。

有了end()方法,就使jQuery链能更好的操作,延续下去。

这方面仍然是菜鸟,还得从真实项目中去不断的摸索学习。



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP