本文列出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.cssHooks1.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.off1.3全局属性是否全局性地禁用所有动画效果。
jQuery.fx.interval1.4.3全局属性设置jQuery动画的帧速(每隔多长时间绘制一帧图像)。
queue()1.2创建或替换一个函数队列,或向其中添加一个队列函数。
dequeue()1.2移除队列中的第一个函数,并执行该函数。
clearQueue()1.4清空队列中所有尚未执行的队列函数。
70 5
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。