jquery之管理包装元素集合(筛选元素包装集之添加更多元素到包装集,add()方法的使用)

jquery之管理包装元素集合(筛选元素包装集之添加更多元素到包装集,add()方法的使用)

----------

假定想要匹配带有alt或title属性的所有<img>元素。强大的jquery选择器允许在单个选择器里实现这个功能,比如：

$('img[alt],img[title]') 

但为了说明add()方法的操作，采用如下语句匹配相同的元素集合：

$('img[alt]').add('img[title]') 

 

以这种方式来调用add()方法，允许把多个选择器链在一起形成"或"关系。因此，示例代码创建两个包装集的并集，每个包装集分别由各自选择器匹配得来。

 

 

 

add()语法：

add(expression)

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

参数：

expression : (字符串|元素|数组)指定添加到包装集的元素。参数如果是jquery选择器，则全部匹配元素都被添加到集合；如果是HTML片段，则创建适当的元素并添加到集合。如果是DOM元素或DOM元素数组，则直接添加到集合。

 

 

如例：

$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough') 

 

这个语句首先创建带有alt属性的所有<img>元素的包装集，接着应用预定义的类thickBorder实现粗边框，然后添加带有title属性的所有<img>元素，最后应用类seeThrough到新扩大的包装集，以便实现透明效果。

 

 

 

如果传入元素的引用，add()方法也可用于添加元素到现有包装集。只要把一个元素引用或元素引用的数组传递给add()方法，就可以添加元素到包装集。假定有一个元素引用，命名为someElement变量，则可以把元素添加到带有alt属性的所有图像集中：

$('img[alt]').add(someElement); 

 

add()方法不仅允许把现有元素添加到包装集，还能通过接受传入的包含HTML标记的字符串而添加新元素。如：

$('p').add('<div>Hi there!</div>') 

 

这个语句首先创建文档里所有<p>元素的包装集，然后新建<div>元素并添加到包装集。请注意，这样做只是添加新元素到包装集，而在语句里并没有调用添加新元素到DOM的方法。这时候，可以调用jquery的append()方法添加所选择的元素或新建的HTML到DOM的某个部分。