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