属性
版本
说明
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])