jQuery中DOM常见操作的示例分析

这篇文章主要介绍了jQuery中DOM常见操作的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下：

DOM属性操作

属性列表

DOM文档操作

一、添加元素

1、内部添加

1. 向当前元素的内部追加内容添加到末尾

append($(selector))

2. 将当前元素在某元素内部追加。但由于会根据需要对当前元素进行移动，所以jQuery对象更改了，可用end()还原

appendTo($(selector))

3. 向当前元素的内部前置内容

prepend($(selector))

4. 将当前元素在某元素内部前置。类似于appendTo()，会改变对象

prependTo($(selector))

2、外部添加

1. 向当前元素之后插入内容

after($(selector))

2. 将当前元素插入到某元素之后。类似于appendTo()，会改变对象

insertAfter($(selector))

3. 向当前元素之前插入内容

before($(selector))

4. 将当前元素插入到某元素之前。类似于appendTo()，会改变对象

insertBefore($(selector))

二、删除元素

1. 删除当前元素，该元素包含的文本内容和后代元素会一起删除掉，绑定的事件也不复存在

remove()

2. 同样是删除当前元素，但是绑定的事件还是存在的

detach()

3. 清空当前元素，该元素的文本内容和后代元素都将删除，但保留其本身

empty()

三、替换元素

1. 移动页面上原有的元素来替换当前选定的页面元素，也可以添加新元素来替换

replaceWith($(selector))
replaceWith($(html))

2. 用当前选定的元素来替换某元素，可以使页面上原有元素，也可以是新元素。同样会根据需要复制当前元素副本，从而更改jQuery对象

replaceAll($(selector))
replaceAll($(html))

DOM样式操作

一丶概要

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

二丶样式操作函数

1. CSS()

css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值,如果需要删除指定的css属性，使用函数将其值设为空字符串("")

语法格式:

$("selector").css(property [, value ])
$("selector").css( object )

2. height()

用于设置或返回当前匹配元素的高度
语法格式: $("selector").height( [ value ] )
如果省略了value参数，则表示获取高度；如果指定了该参数，则表示设置高度。

3. width()

用于设置或返回当前匹配元素的宽度
语法格式: $("selector").width( [ value ] )

4. innerHeight(),innerWidth()

置或返回当前匹配元素的内宽度或者高度

语法格式:

$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )

5. outerHeight(),outerWidht()

获取当前匹配元素的外高度(外宽度)

语法格式:

$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )

DOM事件操作

一丶事件API

jQuery对象的核心事件方法，核心事件函数，主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数

二丶方法

1. on()方法

说明:on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
语法:$(selector).on(event,childSelector,data,function,map)

2. toggle([speed],[easing],[fn])

说明: 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。如果元素是可 见的，切换为隐藏的；如果元素是隐藏的，切换为可见的.
语法:$(selector).toggle(speed,easing,function)
参数:

• speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。

• easing：可选参数。用来指定切换效果，默认是"swing"，可用参数"linear"。

fn：在动画完成时执行的函数，每个元素执行一次。

3. change([[data],fn])

说明:当元素的值发生改变时，会发生change事件.该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生

语法:$(selector).change(data,fn);

4. click([[data],fn])

说明: 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
语法:$(selector).click(data,fn);

5. mouseover([[data],fn])

说明: 当鼠标指针位于元素上方时，会发生mouseover事件。该事件大多数时候会与mouseout事件一起使用。
与mouseenter事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。只有在鼠标指针穿过被选元素时，才会触发mouseenter事件
语法:$(selector).mouseover(data,fn);

6. mouseout([[data],fn])

1.说明:当鼠标指针从元素上移开时，发生mouseout事件。该事件大多数时候会与mouseover事件一起使用。
语法:$(selector).mouseout(data,fn);

7. select([[data],fn])

说明: 当textarea或文本类型的input元素中的文本被选择时，会发生select事件
语法: $(selector).select(data,fn);

感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery中DOM常见操作的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!