jQuery中DOM常见操作实例小结
本文实例讲述了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程序设计有所帮助。
相关文章
JS拖动选择table里的单元格完整实例【基于jQuery】
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下2019-05-05
最新评论