您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2014年09月10日 14:07

原创 jQuery的文档操作方法

6072 次浏览 读完需要≈ 32 分钟

内容目录

本文列出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 清空队列中所有尚未执行的队列函数。
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单