jQuery操作DOM：事件与元素操作详解

该文件是关于jQuery常见事件的文本，主要涵盖了jQuery中元素属性操作、DOM操作（Manipulation）和遍历（Traversing）的相关方法。 jQuery是JavaScript的一个库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在jQuery中，事件是用户与页面交互时触发的行为，而这些方法则用于处理和控制这些事件。 1. **元素属性操作**： - `addClass(cssClass)`：为选择器匹配的所有元素添加指定的CSS类。 - `attr(attributeName, value)`：设置或获取元素的属性值。当只提供名称时，用于获取；提供名称和值时，用于设置。 - `attr(attributes)`：批量设置多个属性，如`{src:"test.jpg",title:"testImage"}`。 - `attr(attributeName, function)`：根据当前元素的属性值执行函数并返回新的值，用以更新属性。 - `removeAttr(attributeName)`：移除指定属性。 - `removeClass(class)`：移除元素的指定CSS类。 - `toggleClass(class)`：切换元素的CSS类，如果已经存在，则移除；如果不存在，则添加。 - `html()`：获取或设置元素的HTML内容。 - `text()`：获取或设置元素的纯文本内容。 - `val()`：获取或设置表单元素（如`<input>`）的值。 2. **DOM操作（Manipulation）**： - `after(content)`：在每个匹配元素之后插入指定的内容。 - `append(content)`：将内容追加到每个匹配元素的内部。 - `appendTo(content)`：将所有匹配元素追加到指定内容的内部。 - `before(content)`：在每个匹配元素之前插入指定的内容。 - `clone(withDataAndEvents)`：克隆匹配元素，可选参数决定是否包括数据和事件。 - `empty()`：清空匹配元素的子内容。 - `insertAfter(content)`：将所有匹配元素插入到指定内容的后面。 - `insertBefore(content)`：将所有匹配元素插入到指定内容的前面。 - `prepend(content)`：将内容预置到每个匹配元素的内部，作为第一个子元素。 - `prependTo(content)`：将所有匹配元素预置到指定内容的内部。 - `remove()`：移除匹配元素及其所有子元素。 - `remove(selector)`：根据指定的选择器移除匹配元素中的部分元素。 - `wrap(wrapperHTML)`：将每个匹配元素包裹在指定的HTML结构中。 - `wrap(element)`：将每个匹配元素包裹在指定的DOM元素中。 3. **遍历（Traversing）**： - `add(expr)`：将新的选择器结果合并到现有的jQuery对象中，扩展选择的元素集合。 这些jQuery方法使得对DOM的操作变得简单直观，通过链式调用可以实现复杂的页面动态效果和交互。例如，`$(document).ready(function(){...})`确保在DOM加载完成后执行指定的函数，避免了因DOM未完全加载而导致的问题。在这个函数内部，我们可以对DOM元素进行各种操作，如`$("div").css("border","2px solid red")`用于设置所有`<div>`元素的边框样式。