重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
jQuery学习系列笔记（二）（续）
接着上一篇继续，今天学习对元素包装集进行精简、扩展或取子集的多种途径。
十年专注建站、设计、互联网产品按需制作服务，业务涵盖品牌网站制作、商城网站建设、微信平台小程序开发、软件系统开发、手机APP定制开发等。凭借多年丰富的经验，我们会仔细了解每个客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联更提供一系列网站制作和网站推广的服务，以推动各中小企业全面信息数字化，并利用创新技术帮助各行业提升企业形象和运营效率。
一、管理包装元素集合
不知道大家对包装集这个词有没有概念，其实就是我们用jQuery选择器或筛选器最终得到的一个或一组符合条件的集合。
比如：$("li:has(a)"); 它的包装集就是所有包含元素的
1、确定包装集的大小
通常包装集是一个javascript数组，而在javascript中有length属性去获得数组的长度，jQuery中也有类似的东西，不过不是属性，而是方法。
size()：返回包装集里元素的个数。
举个例子：
$("#myDiv").html("There are " + "$("a").size()" + " on this page.");相信不用我解释大家也很明白了，就是匹配页面上所有的元素，接着调用.size()方法，返回匹配的个数。
2、从包装集获取元素
包装集既然是一个数组，那么我们当然可以用下标的形式去获取集合中的指定某元素，像这样 $("img[alt]")[0]; 匹配所有带有alt属性的元素集合中的第一个元素。同样，jQuery也为我们准备了类似的方法去达到相同的效果。
get(index)：获取包装集里的一个或所有匹配元素。如果不指定参数，包装集里的所有元素就以javascript数组形式返回；如果指定下标参数，就返回下标所对应的元素。
$("img[alt]").get(0); <==> $("img[alt]")[0];如果不指定参数的话，就是以javascript数组形式返回。
var allImgWithAlt = $("img[alt]").get();此外，如果我们已知某元素，想知道它在某包装集里的下标，我们有另一个方法。
index(element)：在包装集里查找传入的元素，并返回该元素在包装集里的顺序下标；如果该元素不在包装集里，则返回-1。
element：整数，用于确定元素的下标，也可不写。
举个例子：得到带有类ironman的元素集合中第五个元素在所有
里的位置。
var pos = $("img").index($("img.ironman]").get(4) );3、筛选元素包装集
有时候我们需要对现有的包装集进行添加元素。
add(expression)：把表达式参数所指定的元素添加到包装集。表达式可以是选择器、HTML片段、DOM元素或DOM元素数组。返回的是包装集。
expression：（字符串|元素|数组）指定添加到包装集的元素。
举个例子：包含alt属性的元素和包含title属性的
的集合。
$("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属性的元素加RedBorder类，给包含alt属性的
元素和包含title属性的
的元素加Bigger类。
not(expression)：根据表达式参数的值，从包装集里删除元素。如果参数是jQuery筛选选择器，则从包装集里删除任何匹配表达式的元素；如果参数是元素引用，则从包装集里删除该元素。返回的是包装集。
expression：（字符串|元素|数组）
举个例子：排除集合中title内容包含puppy字段的剩余元素。
$("img").not("[title*=puppy]");filter(expression)：利用传入的选择器表达式或筛选函数，从包装集里筛选元素。返回的是包装集。
expression：（字符串|函数）
filter()的与not()想达成的效果是一样的，那就是都是在缩小集合。不一样的是not()用的是排除条件，而filter()用的是筛选条件。大家这块一定要理清。
举个例子：筛选出集合中title内容包含puppy字段的元素。
$("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");如果当前页面包含元素，则hasImage为true。
6、管理jQuery链
其实这章开始的时候已经说了是为了让我们能更好的运用jQuery链，但当时我是根据自己的理解才那么说的，但是学到这个地方的时候，书上也来了这么一句，看来jQuery链已经被足够重视。引用一段话“这种链能力不但允许以简洁的方式写出强大的操作，而且提高了效率，因为它能够把多个命令应用到包装集里，而不必重新计算包装集。”
end()：在jQuery命令链内调用，以便回退到前一个包装集。返回前一个包装集。
有了end()方法，就使jQuery链能更好的操作，延续下去。
这方面仍然是菜鸟，还得从真实项目中去不断的摸索学习。
关于jQuery的学习系列笔记我写的会比较简洁，更注重的是快速上手使用，当然，非常重要的知识点我还是会专门指出的。
PS：欢迎留言交流，24小时内必有回复。
分享文章：jQuery学习系列笔记（二）（续）
文章起源：http://cqcxhl.cn/article/pcjogs.html