本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下：
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值)。 |
DOM文档操作
一、添加元素
1、内部添加
- 向当前元素的内部追加内容添加到末尾
append($(selector))
- 将当前元素在某元素内部追加。但由于会根据需要对当前元素进行移动，所以jQuery对象更改了，可用end()还原
appendTo($(selector))
- 向当前元素的内部前置内容
prepend($(selector))
- 将当前元素在某元素内部前置。类似于
appendTo()，会改变对象
prependTo($(selector))
2、外部添加
- 向当前元素之后插入内容
after($(selector))
- 将当前元素插入到某元素之后。类似于
appendTo()，会改变对象
insertAfter($(selector))
- 向当前元素之前插入内容
before($(selector))
- 将当前元素插入到某元素之前。类似于
appendTo()，会改变对象
insertBefore($(selector))
二、删除元素
- 删除当前元素，该元素包含的文本内容和后代元素会一起删除掉，绑定的事件也不复存在
remove()
- 同样是删除当前元素，但是绑定的事件还是存在的
detach()
- 清空当前元素，该元素的文本内容和后代元素都将删除，但保留其本身
empty()
三、替换元素
- 移动页面上原有的元素来替换当前选定的页面元素，也可以添加新元素来替换
replaceWith($(selector)) replaceWith($(html))
- 用当前选定的元素来替换某元素，可以使页面上原有元素，也可以是新元素。同样会根据需要复制当前元素副本，从而更改jQuery对象
replaceAll($(selector)) replaceAll($(html))
DOM样式操作
一丶概要
通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了
二丶样式操作函数
- CSS()
css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值,如果需要删除指定的css属性，使用函数将其值设为空字符串("")
语法格式:
$("selector").css(property [, value ])
$("selector").css( object )
- height()
用于设置或返回当前匹配元素的高度
语法格式: $("selector").height( [ value ] )
如果省略了value参数，则表示获取高度；如果指定了该参数，则表示设置高度。
- width()
用于设置或返回当前匹配元素的宽度
语法格式: $("selector").width( [ value ] )
- innerHeight(),innerWidth()
置或返回当前匹配元素的内宽度或者高度
语法格式:
$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )
- outerHeight(),outerWidht()
获取当前匹配元素的外高度(外宽度)
语法格式:
$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )
DOM事件操作
一丶事件API
jQuery对象的核心事件方法，核心事件函数，主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数
二丶方法
- on()方法
说明:on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
语法:$(selector).on(event,childSelector,data,function,map)
- toggle([speed],[easing],[fn])
说明: 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。如果元素是可 见的，切换为隐藏的；如果元素是隐藏的，切换为可见的.
语法:$(selector).toggle(speed,easing,function)
参数:
- speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。
- easing：可选参数。用来指定切换效果，默认是"swing"，可用参数"linear"。
fn：在动画完成时执行的函数，每个元素执行一次。
- change([[data],fn])
说明:当元素的值发生改变时，会发生change事件.该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
语法:$(selector).change(data,fn);
- click([[data],fn])
说明: 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
语法:$(selector).click(data,fn);
- mouseover([[data],fn])
说明: 当鼠标指针位于元素上方时，会发生mouseover事件。该事件大多数时候会与mouseout事件一起使用。
与mouseenter事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。只有在鼠标指针穿过被选元素时，才会触发mouseenter事件
语法:$(selector).mouseover(data,fn);
- mouseout([[data],fn])
1.说明:当鼠标指针从元素上移开时，发生mouseout事件。该事件大多数时候会与mouseover事件一起使用。
语法:$(selector).mouseout(data,fn);
- select([[data],fn])
说明: 当textarea或文本类型的input元素中的文本被选择时，会发生select事件
语法: $(selector).select(data,fn);
- submit([[data],fn])
更多关于jQuery相关内容还可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。