jquery中add的用法

jQuery中的.add()方法是一个非常实用的函数，它允许你将额外的元素添加到已经匹配的元素集合中，这个方法对于处理多个元素集合非常有用，特别是在需要同时操作多个不同元素集合时，在本文中，我们将详细探讨.add()方法的用法，并通过一些实际的例子来加深理解。

1. .add()方法的基本用法

.add()方法接受一个选择器字符串或者元素对象作为参数，并将这些元素添加到当前的jQuery对象中，这意味着你可以将多个选择器的结果合并成一个单独的jQuery对象。

var $divs = $('div'); // 选择所有的div元素
$divs = $divs.add('p'); // 将所有的p元素也添加到$divs中

在上面的例子中，我们首先选择了所有的div元素，然后将所有的p元素添加到这个集合中。

2. 传递元素对象

除了选择器字符串，你还可以直接传递一个元素对象或者元素数组给.add()方法。

var $divs = $('div');
var $paragraphs = $('p');
$divs = $divs.add($paragraphs); // 将$paragraphs中的元素添加到$divs中

3. 链式调用

.add()方法返回一个新的jQuery对象，这意味着你可以在.add()方法后面继续链式调用其他jQuery方法。

$('div').add('p').css('color', 'red'); // 将所有的div和p元素的文本颜色设置为红色

4. 过滤和添加

如果你想要添加特定的元素，可以使用.filter()方法先过滤出你想要的元素，然后再使用.add()方法添加它们。

var $visibleDivs = $('div:visible'); // 选择所有可见的div元素
$visibleDivs = $visibleDivs.add('p:visible'); // 将所有可见的p元素添加到$visibleDivs中

5. 处理多个选择器

.add()方法可以同时接受多个参数，这意味着你可以一次性添加多个不同的选择器。

var $elements = $('div').add('p').add('span'); // 将所有的div、p和span元素添加到$elements中

6. 注意事项

- .add()方法不会修改原始的jQuery对象，而是返回一个新的jQuery对象，包含了原始对象和新添加的元素。

- 如果你尝试添加的元素已经在原始的jQuery对象中，它们不会被重复添加。

7. 实际应用场景

.add()方法在处理具有多个类别的元素时非常有用，如果你想要同时操作页面上的所有按钮，无论它们是<button>元素还是<input type="button">元素，你可以这样做：

$('button, input[type="button"]').css('background-color', 'blue'); // 直接使用属性选择器
// 或者
var $buttons = $('button').add('input[type="button"]'); // 使用.add()方法
$buttons.css('background-color', 'blue'); // 设置背景颜色

结论

jQuery的.add()方法是一个非常强大的工具，它允许你将多个不同的元素集合合并成一个单独的jQuery对象，从而简化你的代码并提高效率，通过理解.add()方法的用法和注意事项，你可以更加灵活地处理DOM元素，编写更加高效和可读的jQuery代码。