有时候，我们想生成新的HTML片段插入到页面中。利用jQuery，这就是小事一桩。$函数不仅能够选择现有页面元素，还能够生成HTML。
$("<div>Hello World</div>") 这个表达式新建一个div以便添加到页面中。在现有元素的包装集上可执行任何jQuery命令，在新建的Html片段上同样可以执行。如下代码：
$("<div id='foo1'>I have foo!</div><div>I don't</div>")
.filter("#foo1").click(
function (){
alert("I'm foo!");
}).end().appendTo("#someParentDiv");1.1确定包装集的大小
jQuery元素包装集运行起来与数组非常相似：像javascript数组那样有length属性。还有jQuery定义的size()方法。
1.2从包装集获取元素
jQuery运行把包装集当做数组进行处理，因此从包装集中获取元素可以利用数组下标的方式，也可以利用get()方法来获取。get() 方法也可以把元素包装集转化为普通的javascript数组。例如：
var numv = $("#id").get();
如果包装集的元素过多，想要获取某个元素，最好的方法就是通过下标去取，jQuery也提供了获取下标的方法index(element)。例如： var n = $('img').index($('img#findMe')[0]); 参数element是元素的引用。index是在包装集或查找传入的元素，如果有就返回该元素在包装集中的下标，没有就返回-1。
1.3筛选元素包装集
拥有元素包装集之后，可能需要添加元素扩大集合，也可能把原始匹配的包装集缩小为它的子集。
1.3.1添加更多的元素到包装集
我们经常需要添加更多的元素到现有的包装集。某个命令应用到原始包装集之后，想要添加更多的元素时，这种能力更为重要。假定想要匹配带有alt或者title特性的所有<img>元素，jQuery选择器运行在当个选择器中实现这个功能，例如： $('img[alt],img[title]')
但是为了说明add()方法的操作过程，采用如下语句匹配相同的元素集合：
$('img[alt]').add('img[title]')
以这种方式来调用add()方法，允许把多个选择器链在一起形成“或”关系。因此，示例代码创建两个包装集的并集，每个包装集分别由各自的选择器匹配得来。想add() 这样的方法，也可以用于代替选择器。end()方法可用于删除通过add()方法所添加的元素。
如果传入元素的引用，add()方法也可以用于添加元素到现有包装集。只要把一个元素引用或元素引用的数组传递给add()方法，就可以添加元素到包装集。假的有一个元素引用，命名为someElement，则可以把原始添加到带有alt属性的所有图像集中：
$('img[alt]').add(someElement)
add()方法不仅允许把现有元素添加到包装集，还能够通过传入包含HTML元素的字符串来添加新元素，例如：
$('p').add('<div>Hi there</div>')
这个语句首先创建文档里所有<p>元素的包装集，然后新建一个<div>元素并添加到包装集。需要注意的是，这样做只添加新元素到包装集，语句中并没有调用添加新元素到DOM的方法。
1.3.2 整理包装集的内容
在jQuery里调用add()方法，把多个选择器链接在一起形成“或”关系，从而创建包装集，是简单的事情。除此之外，通过调用not()方法把选择器链在一起形成“与非”关系也是可以的。这与之前讨论过的:not选择器有相似之处。然而，调用方式却与add()方法相似，即在jQuery命令链的任何一环，从包装集中删除元素。
例如，要选择页面中带有title属性的所有img元素，出title特性值包含文本puppy的元素意外。即：
img[title]:not([title*=puppy])
通过使用not方法：
$('img[title]').not('[title*=puppy]');
值得注意的是，传递给not()方法的选择器仅限于删除任何元素引用的筛选表达式。如果错误地传递了更加显示的选择器（如：img[title*=puppy]）给not方法，就无法得到预期结果。not()方法不支持原始选择器。
和add()方法一样，如果传入元素引用或元素引用的数组，not()方法也可以用于从包装集中删除个别元素。
有时候，筛选包装集的方式难以或者不可能用选择器表达式表达出来，在这种情况下，必须求助于编程方式去筛选包装集中的元素。迭代包装集的所有元素，调用not方法删除不符合标准的元素。但是jQuery团队不想让用户被迫亲自去做这一切工作，所以定义了filter()方法。
filter()方法，当传给它一个函数，它会为每个包装集元素反复调用哪个函数，如果哪个元素的函数调用返回false值，就删除那个元素，利用筛选函数体的函数上下文，（即 this）每次调用都能存取当前包装集元素。
假定处于某种理由，想要想要创建包含数字值的所有<td>元素的包装集。即使和jQuery的选择器表达式一样强大，也不可能利用选择器表达式表达上述要求。在这种情况下，filter()方法就派上用场了，如下所示：
$('td').filter(function (){return this.innerHTML.match(/^\d+$/);});
这个jQuery表达式首先创建所有的<td>元素的包装集，然后为每一个包装集元素个调用一次传递给filter()方法的函数，并且将当前包装集元素作为当次调用的this值。函数利用正则表达式确定元素内容是否匹配已描述的模式，如果不匹配这返回false。筛选函数调用返回false的任何元素，都会从包装集里删除。
例如：$('img').addClass('seeThrough').filter('title*=dog').addClass('thickBorder');
这个命令链语句选择所有图像，并对所有图像应用seeThrough样式，然后缩小集合，只留下title特性包含文本dog的图像元素，接着对留下的元素应用另一个名为thickBorder的样式。
1.3.3获取包装集的子集
有时，希望根据元素在包装集里的位置，获取包装集的子集。jQuery提供了名为slice()的方法，这个命令创建并返回来自原始包装集的任何连续部分的新包装集，或者把它较为元素包装集的切片。
slice(begin,end)：创建并返回新的包装集，新包装集是原始包装集的连续的一部分。
参数begin（数字）：将被包含在返回切片中的第一个元素的下标（从0开始）。
参数end（可选、数字）：不被包含在返回切片中的第一个元素的下标（从0开始）；或一个数字，该数字超出了原始包装集的最后一个元素的下标，如果省略，则切片延伸到原始包装集的末尾。
例如：如果想获取原始包装集的第四个元素，可用
$('*').slice(3,4);
值得注意的是，$('*').slice(3,4)与$('*').get(3)不同。前者返回的是一个包装集，后者返回的是元素。
jQuery允许根据HTML DOM中包装元素与其他元素的层次关系，从现有包装集里获取新包装集。如下表：
| 方法 | 描述 |
| children() | 返回原始包装集元素的所有唯一子元素所组成的包装集。 |
| contents() | 返回原始包装集元素的内容的包装集，这些元素可能包含文本节点（经常用于获取<iframe>元素的内容）。 |
| next() | 返回原始包装集元素的所有唯一的下一个兄弟元素所组成的包装集。 |
| nextAll() | 返回包含原始包装集元素的所有后续兄弟元素的包装集。 |
| parent() | 返回原始包装集所有元素的唯一直接父元素所组成的包装集。 |
| parents() | 返回原始包装集所有元素的唯一祖先元素所组成的包装集，包括直接父元素和一直向上追溯的祖先元素，但不包括文档根元素。 |
| prev() | 返回原始包装集元素的所有唯一的上一个兄弟元素所组成的包装集。 |
| prevAll() | 返回包含原始包装集元素的所有前面兄弟元素的包装集。 |
| siblings() | 返回原始包装集元素的所有唯一兄弟元素所组成的包装集。 |
1.3.5还有更多使用包装集的途径
jQuery还有几个窍门让我们定义包装对象的集合。
find()方法可以把现在又的包装集仔细搜索一遍，并返回包含所有匹配传入选择器表达式的元素的新包装集。例如:假如有包装集变量wrappedSet，我们可以用如下语句，获取段落内所有引文（<cite>元素）的新包装集：
wrappedSet.find('p cite')
注意：如果这是发生在单个语句里的一切，也可通过给jQuery选择器传入上下文参数来完成：
$('p cite',wrappedSet)
像许多别的jQuery包装集方法那样，当在jQuery操作链内调用时，find()方法的力量才爆发出来。
find() 方法的参数是一个jQuery选择器（字符串），元素必须匹配这个选择器，才能成为新包装集的一部分。
除在包装集里查找匹配选择器的元素以外，jQuery也提供方法查找包含指定字符串的元素。contains()方法返回新包装集，由元素体的内容中包含传入字符串的所有元素组成。例如：
$('p').contains('Lorem ipsum')
这个表达式产生包装集，包含所有包含文本Lorem ipsum的段落。请注意，字符串测试应用到元素体的内容的各个方面，包括标记和后代元素的特性值，但是，不匹配受测原始元素的标记或特性值。
contains(test)：返回新包装集，由包含text参数所传入的文本字符串的元素所组成。
参数text（字符串）：添加到新包装集里的元素必须包含的文本。
is(selector)：确定包装集里是否有元素匹配传入的选择器表达式。
参数selector（字符串）：选择器表达式，用于测试包装集的元素。
如果至少有一个元素匹配传入的选择器，那么返回true，否则返回false。
1.3.6 管理jQuery链
在单个语句里把jQuery包装器方法链接起来以完成大量任务。这种链接能力不但运行以简洁的方式写出强大的操作，而且提高了效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。
利用命令链里调用的方法，可能生成多个包装集。例如，调用clone()方法生成新包装集，即创建原始包装集元素的副本。一旦生成新包装集，就无法引用原始包装集，因此，我们就被剥夺了构造多功能jQuery命令链的能力。
思考以下语句：$('img').clone().appendTo('#somewhere')
这个语句内产生两个包装集：一个页面上所有的img元素的原始包装集，另一个是由原始包装集元素的副本所组成的新包装集。clone()方法返回新包装集作为结果，而appendTo()命令正是在这个新包装集上进行操作的。
那么，在克隆原始包装集后，如果我们想接着应用一个命令，比如添加CSS样式到原始包装集，该怎么办呢？不可以添加到现有命令的末端，因为那样做的话，会影响克隆得到的新包装集元素，而不是原始包装集的图像元素。
为了满足这个需求，jQuery提供了end()命令，在jQuery链内，一调用这个方法，方法就会作为返回值回退到前一个包装集，因此后续操作将应用到前一个包装集。如下：
$('img' ).clone().appendTo('#somewhere').end().addClass('beanCloned');
appendTo()方法返回克隆得到的新包装集，只要调用end()就回退到前一个包装集，并在其上执行addClass()命令。如果不插入end()命令，addClass()就操作克隆得到的新包装集。
这也许让人联想到，jQuery命令链在执行期间所产生的包装集保存在栈内。当调用end()时，顶端的包装集出栈，公开前一个包装集，让后续命令进行操作。
另一个修改包装集栈的便利的jQuery方法是andSelf()。这个方法把栈内最顶端的两个包装集合并为一个包装集。
1403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
