理解jQuery：选择器与DOM操作详解

"这篇资源主要讨论了jQuery中的选择器和DOM操作，包括基本选择器、层次选择器和过滤选择器，以及如何利用这些工具来高效地操作页面元素。" jQuery选择器是JavaScript库jQuery的核心功能之一，它们允许开发者以简洁的方式定位和操作HTML文档对象模型（DOM）中的元素。jQuery的选择器设计灵感来源于CSS，使得DOM操作变得更加简单和直观。 1. **基本选择器**： - `$(“#id”)`: 通过ID查找唯一元素。ID在页面中应该是唯一的，因此返回的结果通常只有一个元素。 - `$(“.class”)`: 通过类名查找元素。一个类名可以应用于多个元素，所以返回的是一个元素集合。 - `$(“element”)`: 通过元素类型（如div、span）查找所有匹配的元素，返回一个元素集合。 - `$(“*”)`: 查找所有元素，等同于选取整个DOM树。 2. **层次选择器**： - `$(“ancestordescendant”)`: 查找祖先元素下的所有后代元素。 - `$(“parent>child”)`: 查找父元素下的直接子元素。 - `$(“pre+next”)`: 查找指定元素之后的直接相邻元素。 - `$(“pre~siblings”)`: 查找指定元素之后的所有兄弟元素。 3. **过滤选择器**： 过滤选择器用于进一步细化选取的元素集合，基于特定条件进行筛选。 - **基本过滤**：`:first`选取集合中的第一个元素，`:last`选取最后一个元素。 - **内容过滤**：例如`:contains(text)`选取包含特定文本的元素，`:empty`选取无子节点的元素。 - **可见性过滤**：`:hidden`选取隐藏的元素，`:visible`选取可见的元素。 - **属性过滤**：`:has(selector)`选取包含特定后代元素的元素，`:attr(name)`或`:attr(name=value)`基于属性筛选。 - **子元素过滤**：`:nth-child(n)`选取父元素的第n个子元素，`:first-child`和`:last-child`选取第一个或最后一个子元素。 - **表单对象属性过滤**：如`:checked`选取已勾选的输入元素，`:disabled`选取禁用的表单元素。 DOM操作是jQuery的另一关键部分，允许开发者修改、添加和删除DOM元素。例如，`append()`将内容追加到元素末尾，`prepend()`在元素开头插入内容，`remove()`移除元素，`html()`、`text()`和`val()`用于设置或获取元素的HTML、文本内容或表单字段的值。 使用jQuery选择器和DOM操作，开发者可以轻松实现诸如事件处理、动画效果和AJAX交互等功能，显著提高了JavaScript编程的效率和代码的可读性。jQuery的广泛使用和强大的功能使其成为Web开发中不可或缺的工具。