jQuery DOM操作参考手册

内容操作

对元素内容的操作是DOM操作中最基础的部分，主要包括获取和设置HTML内容、纯文本内容以及表单元素的值。

方法	描述	示例	版本
`.html()`	获取匹配元素集合中第一个元素的HTML内容，或设置每一个匹配元素的HTML内容。	`$('div').html('<p>新内容</p>')`	1.0
`.text()`	获取匹配元素集合中每个元素的合并文本内容（包括其后代），或设置匹配元素的文本内容。	`$('p').text('新文本')`	1.0
`.val()`	获取匹配元素集合中第一个元素的当前值，或设置每一个匹配元素的值。主要用于表单元素。	`$('input').val('新值')`	1.0

属性与数据操作

除了常规的HTML属性，jQuery还提供了专门的数据存储机制，用于在元素上关联任意数据。

方法	描述	示例	版本
`.attr()`	获取匹配元素集合中第一个元素的属性值，或为每一个匹配元素设置一个或多个属性。	`$('img').attr('src', 'image.jpg')`	1.0
`.removeAttr()`	为匹配的元素集合中的每一个元素移除一个属性（attribute）。	`$('a').removeAttr('target')`	1.0
`.prop()`	获取匹配元素集合中第一个元素的属性（property）值，或为每一个匹配元素设置一个或多个属性（property）。	`$('input').prop('checked', true)`	1.6
`.removeProp()`	为匹配的元素集合中的每一个元素移除一个属性（property）。	`$('input').removeProp('disabled')`	1.6
`.data()`	在匹配元素上存储任意相关数据，或返回匹配的元素集合中第一个元素的指定数据存储项的值。	`$('div').data('key', 'value')`	1.2.3
`.removeData()`	移除先前在元素上使用`.data()`存储的数据。	`$('div').removeData('key')`	1.2.3

.attr()与.prop()在jQuery 1.6版本后有了明确的区分。.attr()用于操作HTML文档节点上的属性（attributes），如id、class；而.prop()用于操作DOM元素对象的属性（properties），如checked、selected、disabled等布尔值属性。对于布尔值属性，应优先使用.prop()。

CSS与样式操作

这类方法用于操作元素的样式类名或直接修改内联样式，是实现页面视觉动态变化的核心。

方法	描述	示例	版本
`.css()`	获取匹配元素集合中第一个元素的样式属性值，或设置每一个匹配元素的一个或多个CSS属性。	`$('div').css('color', 'red')`	1.0
`.addClass()`	为每一个匹配的元素添加指定的样式类名。	`$('p').addClass('highlight')`	1.0
`.removeClass()`	为每一个匹配的元素移除一个或多个样式类名。	`$('p').removeClass('highlight')`	1.0
`.toggleClass()`	为每一个匹配的元素添加或移除一个或多个样式类名，取决于类名是否存在或`state`参数的值。	`$('p').toggleClass('highlight')`	1.0
`.hasClass()`	确定任何一个匹配的元素是否被分配了给定的样式类。	`$('p').hasClass('highlight')`	1.2

元素尺寸与位置

获取或设置元素在页面中的几何尺寸和位置信息，对于实现拖拽、定位、滚动加载等功能至关重要。

方法	描述	示例	版本
`.width()` / `.height()`	获取匹配元素集合中第一个元素的当前计算宽度/高度（px），或设置每一个匹配元素的宽度/高度。	`$('div').width(300)`	1.0
`.innerWidth()` / `.innerHeight()`	为匹配的元素集合中第一个元素获取当前计算的内部宽度/高度（包括`padding`，但不包括`border`）。	`$('div').innerWidth()`	1.2.6
`.outerWidth()` / `.outerHeight()`	获取匹配元素集合中第一个元素当前计算的外部宽度/高度（包括`padding`和`border`）。可选的参数`includeMargin`（布尔值）决定是否包括`margin`。	`$('div').outerHeight(true)`	1.2.6
`.offset()`	获取匹配元素集合中第一个元素当前的坐标，或设置每一个匹配元素的坐标，坐标相对于文档（document）。	`$('div').offset({top:100,left:0})`	1.2
`.position()`	获取匹配元素集合中第一个元素的当前坐标，坐标相对于最近的已定位的祖先元素（offset parent）。	`$('div').position().left`	1.2
`.scrollLeft()` / `.scrollTop()`	获取匹配元素集合中第一个元素的当前水平/垂直滚动条位置，或设置每一个匹配元素的滚动条位置。	`$('div').scrollTop(300)`	1.2.6

数据存储

jQuery提供了专门的数据存储机制，用于在元素上关联任意数据，避免直接修改DOM造成循环引用和内存泄漏。

方法	描述	示例	版本
`.data()`	在匹配元素上存储任意相关数据，或返回匹配的元素集合中第一个元素的指定数据存储项的值。	`$('div').data('key', 'value')`	1.2.3
`.removeData()`	移除先前在元素上使用`.data()`存储的数据。	`$('div').removeData('key')`	1.2.3
`jQuery.data()`	底层方法，用于在指定元素上存储数据，或返回存储的数据。	`$.data(elem, 'key', 'value')`	1.0
`jQuery.hasData()`	确定一个元素是否有关联的jQuery数据。	`$.hasData(elem)`	1.5
`jQuery.removeData()`	底层方法，用于移除指定元素上存储的数据。	`$.removeData(elem, 'key')`	1.5

.data()方法在jQuery 1.2.3引入时主要用于内部事件系统和动画队列。从1.4版本开始，该方法被正式公开为通用数据存储API。jQuery 4.0.0对数据模块进行了重构，以防止与Object.prototype上的属性发生冲突，并分离了数据模块与CSS/效果模块中的驼峰命名转换实现，使代码更加精简。

DOM遍历

DOM遍历方法允许在已选中的元素集合基础上，根据与文档树中其他元素的关系（如祖先、后代、兄弟）进行筛选或移动，从而精确地定位到目标元素。

祖先遍历

祖先遍历方法用于从当前选中的元素出发，向上遍历DOM树，查找其父级、祖父级乃至更上层的元素。

方法	描述	示例	版本
`.parent()`	获取匹配元素集合中每个元素的直接父元素，可以通过一个可选的选择器进行筛选。	`$('span').parent('.parentClass')`	1.0
`.parents()`	获取匹配元素集合中每个元素的所有祖先元素（直到文档根元素），可以通过一个可选的选择器进行筛选。	`$('span').parents('div')`	1.0
`.parentsUntil()`	获取匹配元素集合中每个元素的所有祖先元素，直到（但不包括）由选择器、DOM节点或jQuery对象匹配的元素。	`$('span').parentsUntil('.container')`	1.4
`.closest()`	从元素本身开始，逐级向上遍历DOM树，返回第一个匹配选择器的祖先元素（包括元素自身）。	`$('span').closest('form')`	1.3
`.offsetParent()`	返回第一个匹配元素用于定位的最近的已定位祖先。	`$('span').offsetParent()`	1.2.6

.closest()方法在处理事件委托或查找特定上下文时非常实用，因为它会检查当前元素自身。.parents()和.closest()的主要区别在于，.parents()从父元素开始向上遍历并返回所有匹配的祖先，而.closest()从当前元素开始向上遍历并返回第一个匹配的元素（可能包括自身）。

后代遍历

后代遍历方法用于向下查找元素内部的子元素或更深层次的后代元素。

方法	描述	示例	版本
`.children()`	获取匹配元素集合中每个元素的直接子元素，可以通过一个可选的选择器进行筛选。	`$('div').children('.childClass')`	1.0
`.find()`	获取匹配元素集合中每个元素的所有后代元素，由传入的选择器、jQuery对象或元素筛选。	`$('div').find('p')`	1.0
`.contents()`	获取匹配元素集合中每个元素的子节点，包括元素节点和文本节点。	`$('div').contents()`	1.2

在jQuery 4.0.0中，修复了.contents()方法在处理带有子元素的<object>元素时在IE浏览器中的问题，提升了跨浏览器的一致性。

兄弟遍历

兄弟遍历方法用于在DOM树的同一层级中，查找当前元素之前或之后的元素。

方法	描述	示例	版本
`.siblings()`	获取匹配元素集合中每个元素的所有兄弟元素，可以通过一个可选的选择器进行筛选。	`$('li.active').siblings('li')`	1.0
`.next()`	获取匹配元素集合中每个元素的紧邻的下一个兄弟元素，可以通过一个选择器进行筛选。	`$('li.active').next()`	1.0
`.nextAll()`	获取匹配元素集合中每个元素之后的所有兄弟元素，可以通过一个选择器进行筛选。	`$('li.active').nextAll()`	1.2
`.nextUntil()`	获取匹配元素集合中每个元素之后的所有兄弟元素，直到（但不包括）由选择器匹配的元素。	`$('li.active').nextUntil('#end')`	1.4
`.prev()`	获取匹配元素集合中每个元素的紧邻的上一个兄弟元素，可以通过一个选择器进行筛选。	`$('li.active').prev()`	1.0
`.prevAll()`	获取匹配元素集合中每个元素之前的所有兄弟元素，可以通过一个选择器进行筛选。	`$('li.active').prevAll()`	1.2
`.prevUntil()`	获取匹配元素集合中每个元素之前的所有兄弟元素，直到（但不包括）由选择器匹配的元素。	`$('li.active').prevUntil('#start')`	1.4

过滤遍历

过滤遍历方法用于在当前的匹配元素集合基础上，根据特定条件进行缩减、筛选或增加新的元素，从而得到一个新的、更精确的jQuery对象。这些方法是实现链式调用的关键。

方法	描述	示例	版本
`.eq()`	将匹配元素集合缩减为指定索引的那个元素。索引从`0`开始。	`$('li').eq(2)`	1.1.2
`.first()`	将匹配元素集合缩减为集合中的第一个元素。	`$('li').first()`	1.4
`.last()`	将匹配元素集合缩减为集合中的最后一个元素。	`$('li').last()`	1.4
`.slice()`	将匹配元素集合缩减为指定索引范围的子集。	`$('li').slice(1,3)`	1.1.4
`.filter()`	将匹配元素集合缩减为匹配指定选择器或通过函数测试的元素。	`$('li').filter(':even')`	1.0
`.not()`	从匹配元素集合中移除匹配指定选择器的元素。	`$('li').not('.special')`	1.0
`.has()`	将匹配元素集合缩减为那些拥有匹配指定选择器或DOM元素的后代的元素。	`$('div').has('p')`	1.4
`.is()`	检查当前匹配的元素集合是否匹配选择器、元素或jQuery对象，如果至少有一个匹配，则返回`true`。	`$('li').is('.active')`	1.0
`.map()`	通过一个函数处理当前匹配集合中的每个元素，并将返回值组成一个新的jQuery对象。	`$('li').map(function(){return this.id;})`	1.2
`.add()`	将元素添加到匹配元素的集合中。	`$('li').add('p')`	1.0
`.addBack()`	将之前的匹配元素集合添加到当前集合中，可选一个选择器进行筛选。	`$('li').find('span').addBack('li')`	1.8
`.andSelf()`	从jQuery 1.8起已废弃，由`.addBack()`替代。将之前的匹配元素集合添加到当前集合中。	`$('li').find('span').andSelf()`	1.2

过滤与检索

这些方法用于从jQuery对象中提取或操作DOM元素本身，而非进行遍历筛选。

方法	描述	示例	版本
`.get()`	检索匹配元素集合中指定索引的DOM元素，或不带参数时返回包含所有DOM元素的数组。	`$('li').get(0)` 或 `$('li').get()`	1.0
`.eq()`	将匹配元素集合缩减为指定索引的那个元素，返回新的jQuery对象。	`$('li').eq(2)`	1.1.2
`.first()`	将匹配元素集合缩减为集合中的第一个元素。	`$('li').first()`	1.4
`.last()`	将匹配元素集合缩减为集合中的最后一个元素。	`$('li').last()`	1.4
`.even()`	将匹配元素集合缩减为索引为偶数的元素（索引从`0`开始）。	`$('li').even()`	4.0.0
`.odd()`	将匹配元素集合缩减为索引为奇数的元素（索引从`0`开始）。	`$('li').odd()`	4.0.0
`.toArray()`	检索匹配元素集合中包含的所有DOM元素，作为数组返回。	`$('li').toArray()`	1.4
`.index()`	在匹配元素集合中搜索给定的元素，并返回其索引（从0开始）。	`$('li').index($('#foo'))`	1.0
`.length`属性	返回jQuery对象中封装的元素个数。	`$('div').length`	1.0
`.size()`	从jQuery 1.8起已废弃，由`.length`属性替代。返回jQuery对象中元素的个数。	`$('div').size()`	1.0 – 1.7

在jQuery 4.0.0中，新增了.even()和.odd()两个链式方法，它们分别用于将匹配元素集合缩减为索引为偶数或奇数的元素，这与使用:even和:odd选择器类似，但提供了更现代的方法调用方式，避免了选择器引擎的额外解析开销。

链式调用与堆栈管理

jQuery的DOM遍历方法大多会返回一个新的jQuery对象，这使得链式调用成为可能。为了管理链式调用中的元素集合变化，jQuery内部维护了一个堆栈。每次调用一个过滤遍历方法（如.find(), .filter()），新的集合就会被推入堆栈。.end()方法则弹出堆栈中最近一次压入的集合，返回到前一个状态。

// 链式调用示例：找到所有div，再找到其中的p，然后返回div集合并添加类
$('div').addClass('box').find('p').css('color', 'red').end().addClass('bordered');

在这个例子中，.end()使集合从p元素返回到之前的div元素，从而允许继续对div进行操作。

元素创建与插入

jQuery 提供多种方式动态创建新元素，并可以灵活地将其插入到DOM树中的指定位置。

创建新元素

通过向$()函数传递包含HTML标记的字符串，可以便捷地创建DOM元素。

// 创建一个带有属性和文本的新div元素
var newDiv = $('<div>', {
    id: 'new-element',
    class: 'box',
    text: '这是一个新创建的div',
    css: { backgroundColor: 'yellow' },
    click: function() { alert('点击了!'); }
});
// 注意：此时元素仅存在于内存中，尚未插入到页面

插入元素

插入方法主要分为两类：内部插入（作为子元素）和外部插入（作为兄弟元素）。每个操作通常有“内容插入到目标”和“目标插入到内容”两种方向相反的便捷方法。

内部插入

方法	描述	示例	版本
`.append()`	将参数指定的内容插入到匹配元素集合中每个元素的末尾（作为其最后一个子元素）。	`$('div').append('<p>新段落</p>')`	1.0
`.appendTo()`	将匹配元素集合插入到目标元素的末尾（与`.append()`方向相反）。	`$('<p>新段落</p>').appendTo('div')`	1.0
`.prepend()`	将参数指定的内容插入到匹配元素集合中每个元素的开头（作为其第一个子元素）。	`$('div').prepend('<p>新段落</p>')`	1.0
`.prependTo()`	将匹配元素集合插入到目标元素的开头（与`.prepend()`方向相反）。	`$('<p>新段落</p>').prependTo('div')`	1.0

外部插入

方法	描述	示例	版本
`.after()`	将参数指定的内容插入到匹配元素集合中每个元素的后面（作为其下一个兄弟元素）。	`$('div').after('<p>新段落</p>')`	1.0
`.insertAfter()`	将匹配元素集合插入到目标元素的后面（与`.after()`方向相反）。	`$('<p>新段落</p>').insertAfter('div')`	1.0
`.before()`	将参数指定的内容插入到匹配元素集合中每个元素的前面（作为其上一个兄弟元素）。	`$('div').before('<p>新段落</p>')`	1.0
`.insertBefore()`	将匹配元素集合插入到目标元素的前面（与`.before()`方向相反）。	`$('<p>新段落</p>').insertBefore('div')`	1.0

包装、替换与删除

除了插入和创建，jQuery还提供了一系列方法来改变DOM结构中的现有元素，包括对元素进行包裹、替换现有内容，以及移除或复制元素。

包装元素

方法	描述	示例	版本
`.wrap()`	在每个匹配的元素外部包裹一个指定的HTML结构。	`$('span').wrap('<div class="wrapper"></div>')`	1.0
`.wrapAll()`	在所有匹配的元素外部包裹一个指定的HTML结构。这些元素会被作为一个整体包裹在一个结构中。	`$('span').wrapAll('<div class="wrapper"></div>')`	1.2
`.wrapInner()`	在每个匹配的元素内部（即在其所有子元素的外部，但元素自身内部）包裹一个指定的HTML结构。	`$('div').wrapInner('<p></p>')`	1.2
`.unwrap()`	移除匹配元素集合中每个元素的父元素，将元素与其父元素替换（实际上是移除了父元素）。	`$('span').unwrap()`	1.4

替换元素

方法	描述	示例	版本
`.replaceWith()`	用提供的新内容替换匹配元素集合中的每个元素，并返回被移除的元素集合。	`$('div.old').replaceWith('<div class="new">新div</div>')`	1.2
`.replaceAll()`	用匹配的元素集合替换掉每个目标元素（与`.replaceWith()`方向相反）。	`$('<div class="new">新div</div>').replaceAll('div.old')`	1.2

删除与清空元素

方法	描述	示例	版本
`.remove()`	移除匹配元素集合中的元素，包括其所有文本和子节点。同时会移除元素上绑定的事件和`jQuery.data()`。	`$('div').remove()`	1.0
`.detach()`	移除匹配元素集合中的元素，包括其所有文本和子节点。但会保留元素上绑定的事件和`jQuery.data()`，以便后续重新插入。	`$('div').detach()`	1.4
`.empty()`	从DOM中移除匹配元素集合中所有元素的子节点（包括文本节点），但保留元素自身及其属性。	`$('div').empty()`	1.0

.remove()适用于永久删除元素；.detach()适用于需要临时移除并在之后重新添加回文档的场景，能有效保持数据状态。

复制元素

方法	描述	示例	版本
`.clone()`	创建匹配元素集合的一个深拷贝副本。可选的参数`withDataAndEvents`（布尔值）决定是否同时复制元素上的事件处理程序和数据。从jQuery 1.5开始，可以传入第二个参数`deepWithDataAndEvents`来决定是否复制所有子元素的事件和数据。	`$('div').clone(true).appendTo('body')`	1.0

本jQuery DOM操作参考手册涵盖了从内容获取、属性修改到结构变化的核心方法。熟练掌握这些操作，能够高效地构建动态、交互丰富的Web页面。建议在实际开发中，根据具体任务选择最精确、性能最优的DOM操作方法。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目

参考手册