jQuery中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])

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f6906731aba64152ba5e381614ca03d9.html