jQuery高级教程：筛选与动态添加元素

在jQuery学习的第四部分中，我们关注了如何通过`add()`函数对现有的jQuery对象进行筛选和查找。`add()`方法是jQuery提供的一种强大工具，它允许开发者将新的元素添加到已匹配元素的集合中，从而扩展或组合两个或多个不同的选择器结果。 `add()`函数接收一个或多个参数，这些参数可以是： 1. **表达式字符串**：用于匹配DOM元素，表达式可以是CSS选择器，如`"span"`或`"[id='a']"`，这些将被用来查找文档中的元素并添加到jQuery对象中。 2. **DOM元素**：单个或多个元素实例可以直接传递给`add()`，这些元素会被自动转换为jQuery对象。 3. **数组**：包含DOM元素或字符串的数组，数组中的每个元素都会被处理并添加到匹配结果集中。 示例中展示了如何使用`add()`的不同用法： - 在第一个例子中，通过向匹配的`<p>`元素中添加`<span>`元素，实现了元素的组合，返回一个新的jQuery对象，包含了添加后的元素。 - 第二个示例演示了动态生成HTML代码后，通过`add()`将其插入到匹配元素集合中，同样扩展了原始的选择范围。 - 最后一个例子展示了如何利用`document.getElementById()`获取具有特定ID的元素，然后将它们添加到匹配的`<p>`元素集合中，这可能是在页面加载后动态获取元素并加入到筛选结果中。 此外，`children()`方法是一个补充功能，用于获取匹配元素集合中每个元素的子元素集合。它接受一个可选的表达式作为参数，用于过滤子元素。`children()`与`parents()`不同，后者会搜索所有祖先元素，而`children()`仅限于直接子元素，不包括后代元素。 总结来说，`add()`函数在jQuery中用于灵活地操作和组合已有的选择器结果，增强了对DOM元素的控制，是开发过程中处理元素添加和筛选的强大工具。理解和熟练掌握这些函数，有助于提升网页应用的动态性和灵活性。