内容目录
本文列出jQuery中几乎所有的DOM操作方法。使用这些方法可以非常简单方便地对文档进行操作处理。
例如:
- 操作文档节点的属性、操作DOM元素的属性。
- 操作文档节点的内容(插入节点、修改节点、删除节点)。
- 操作文档的样式属性(CSS属性操作)。
- 显示、隐藏、设置样式,并可附带动画效果。处理各种函数队列等。
jQuery对象的文档操作方法
版本说明:如果"版本"列的版本号带有删除线(例如:1.8),表示从该版本开始,此方法 已过时。如果版本号带有删除线,并且为红色(例如:1.9),表示从该版本开始,此方法已 被移除。
注意:
如果当前jQuery对象匹配多个DOM元素,那么我们执行该对象的下列方法时:如果当前执行的是"写"操作,则作用于每一个匹配的元素;如果当前执行的是"读"操作,则只作用于第一个匹配的元素。
以使用attr()
方法为例:如果我们用它来设置属性,它将会为匹配的每一个元素都设置属性;如果用它来读取属性,则它只会获取第一个匹配元素对应的属性值。
如果当前jQuery对象不匹配任何元素,执行以下方法也不会报错。jQuery会根据合理的逻辑来采取不同的操作策略。例如:对于属性、CSS而言,设置操作将不会执行,获取操作将视具体情况返回undefined、null、空字符串等值。对于文档内容处理而言,jQuery会视具体情况采取不处理、或将其当作空的内容来处理等措施。
方法 | 版本 | 描述 |
---|---|---|
属性API——操作文档节点、DOM对象的属性。 | ||
attr() | 1.0 | 设置或返回文档节点的属性。 |
removeAttr() | 1.0 | 移除文档节点的属性。 |
prop() | 1.6 | 设置或返回DOM元素的属性。 |
removeProp() | 1.6 | 移除每个匹配元素的属性。 |
addClass() | 1.0 | 添加CSS类名。 |
removeClass() | 1.0 | 移除CSS类名。 |
toggleClass() | 1.2 | 切换CSS类名(存在就删除,不存在就添加)。 |
html() | 1.0 | 设置或返回元素的html内容(即innerHTML)。 |
text() | 1.0 | 设置或返回元素的文本内容(已过滤掉HTML标签,即IE中的innerText )。 |
val() | 1.0 | 设置或返回元素的值(主要是表单元素的value值)。 |
内容操作——插入、修改、删除文档节点。 | ||
append() | 1.0 | 向每个匹配元素内部的末尾位置追加内容。 |
appendTo() | 1.0 | 将所有匹配元素追加到目标元素内部的末尾位置。 |
prepend() | 1.0 | 向每个匹配元素内部的开头位置追加内容。 |
prependTo() | 1.0 | 将所有匹配元素追加到目标元素内部的开头位置。 |
after() | 1.0 | 在每个匹配元素之后插入内容。 |
before() | 1.0 | 在每个匹配元素之前插入内容。 |
insertAfter() | 1.0 | 将所有匹配元素插入到目标元素之后。 |
insertBefore() | 1.0 | 将所有匹配元素插入到目标元素之前。 |
wrap() | 1.0 | 在每个匹配元素外包裹指定的HTML结构。 |
unwrap() | 1.4 | 移除每个匹配元素的父元素的HTML标签。 |
wrapAll() | 1.2 | 将所有匹配元素用单个HTML结构包裹起来 |
wrapInner() | 1.2 | 在每个匹配元素内侧(所有子节点外侧)包裹指定的HTML结构。 |
replaceWith() | 1.2 | 将每个匹配元素替换成指定的HTML内容或DOM元素。 |
replaceAll() | 1.2 | 使用所有匹配的元素替换掉每个目标元素。 |
empty() | 1.0 | 清空每个匹配元素的html内容。 |
remove() | 1.0 | 移除所有的匹配元素,包括它的附加数据和绑定事件。 |
detach() | 1.0 | 移除所有的匹配元素,但在jQuery对象上保留其附加数据和绑定事件。 |
clone() | 1.0 | 克隆所有的匹配元素。 |
CSS操作——操作文档节点的样式属性。 | ||
css() | 1.0 | 设置或返回元素的CSS属性。 |
jQuery.cssHooks | 1.4.3 | 全局属性用于设置或获取jQuery操作CSS属性的钩子。 |
offset() | 1.2 | 获取鼠标相对于当前文档的坐标。 |
position() | 1.2 | 获取当前元素相对于离它最近的拥有定位的祖辈元素的坐标。 |
scrollTop() | 1.2.6 | 设置或返回当前元素相对于垂直滚动条顶部的偏移 |
scrollLeft() | 1.2.6 | 设置或返回当前元素相对于水平滚动条最左侧的偏移 |
height() | 1.0 | 设置或返回当前元素的高度值(不包括内边距、边框、外边距)。 |
width() | 1.0 | 设置或返回当前元素的宽度值(不包括内边距、边框、外边距)。 |
innerHeight() | 1.2.6 | 设置或返回当前元素的内高度(包括内边距)。 |
innerWidth() | 1.2.6 | 设置或返回当前元素的内宽度(包括内边距)。 |
outerHeight() | 1.2.6 | 设置或返回当前元素的外高度(包括内边距、边框,以及可选的外边距)。 |
outerWidth() | 1.2.6 | 设置或返回当前元素的外宽度(包括内边距、边框,以及可选的外边距)。 |
动画效果API——用于进行文档处理,并可能带有过渡的动画效果。 | ||
show() | 1.0 | 显示匹配的元素,并可选附带过渡动画效果。 |
hide() | 1.0 | 隐藏匹配的元素,并可选附带过渡动画效果。 |
toggle() | 1.0 | 切换显示/隐藏匹配的元素(如果显示就隐藏,如果隐藏就显示),并可选附带过渡动画效果。 |
slideDown() | 1.0 | 显示匹配的元素,并带有向下滑动的动画效果。 |
slideUp() | 1.0 | 隐藏匹配的元素,并带有向上滑动的动画效果。 |
slideToggle() | 1.0 | 切换显示/隐藏匹配的元素,并带有向下/上滑动的动画效果。 |
fadeIn() | 1.0 | 显示匹配的元素,并带有"淡入"的动画效果。 |
fadeOut() | 1.0 | 隐藏匹配的元素,并带有"淡出"的动画效果。 |
fadeToggle() | 1.0 | 切换显示/隐藏匹配的元素,并带有"淡入"/"淡出"的动画效果。 |
animate() | 1.0 | 设置元素的CSS样式属性,并带有从当前样式到目标样式过渡的动画效果。 |
stop() | 1.2 | 停止匹配元素上当前正在运行的动画。 |
delay() | 1.4 | 设置一个定时器,以延迟队列中下一项的执行。 |
finish() | 1.9 | 立即完成队列中的所有动画(显示所有动画执行完后的目标样式,但省略动画过程),并清空队列。 |
jQuery.fx.off | 1.3 | 全局属性是否全局性地禁用所有动画效果。 |
jQuery.fx.interval | 1.4.3 | 全局属性设置jQuery动画的帧速(每隔多长时间绘制一帧图像)。 |
queue() | 1.2 | 创建或替换一个函数队列,或向其中添加一个队列函数。 |
dequeue() | 1.2 | 移除队列中的第一个函数,并执行该函数。 |
clearQueue() | 1.4 | 清空队列中所有尚未执行的队列函数。 |
0 条评论
撰写评论