美文网首页
jquery DOM操作

jquery DOM操作

作者: 八点半的星光1101 | 来源:发表于2018-10-31 14:53 被阅读0次

一、元素操作

1.1内部插入

1.1.1 append()

1.1.2 appendTo()

1.1.3 prepend()

1.1.4 prependTo()

1.2外部插入

1.2.1 after()

1.2.2 insertAfter()

1.2.3 before()

1.2.4 insertBefore()

1.3删除元素

1.3.1 remove()

1.3.2 detach()

1.4替换元素

1.4.1 replaceWith()

1.4.2 replaceAll()

1.5克隆元素

1.6包装元素

1.6.1 warp()

1.6.2 wrapAll()

1.6.3 warpInner()

1.6.4unwarp()

一、元素操作

1.1内部插入

1.1.1 append()

父jquery对象.append(新内容)追加到父元素的最后一个位置上

可以把已有的元素追加到另外一个已经存在的元素中

1.1.2 appendTo()

新内容.apppendTo(父jquery对象)作用于append()一样,追加到最后

1.1.3 prepend()

父jquery对象.prepend(新内容)将新内容添加到父元素中的第一个位置上

1.1.4 prependTo()

新内容.prependTo(jquery对象)同prepend()

1.2外部插入

在指定元素的相邻位置添加元素

1.2.1 after()

jquery对象.after(新内容)在指定元素的后面添加元素

1.2.2 insertAfter()

新内容.insertAfter(jquery对象) 在指定元素的后面添加元素

1.2.3 before()

jquery对象.before(新内容)在指定元素的前面添加元素

1.2.4 insertBefore()

新内容.insertBefore(jquery对象)在指定元素的前面添加元素

1.3删除元素

1.3.1 remove()

jquery对象.remove(内容)全部删除,包括jquery对象。

1.3.2 detach()

jquery对象.detach()全部删除,包括jquery对象

1.3.3

empty()

jquery对象.empty()清除内容,jquery对象还存在

1.4替换元素

1.4.1 replaceWith()

jquery对象.replaceWith(内容) 用后面的内容代替前面的jquery对象,有多少替换多少内容可以是纯文本、标签等

1.4.2 replaceAll()

内容.replaceAll(jquery对象)内容不能是纯文本。

1.5克隆元素

clone(参数)

参数可选,默认为false,把所有的内容都复制(包括文本,标签等)注:只能克隆元素,不能克隆事件

当参数为true时,能够连事件一起克隆

1.6包装元素

1.6.1 warp()

jquery对象.wrap(包装格式)包装格式--外层包裹的父元素

每一个jquery对象都被一个父元素包裹

1.6.2 wrapAll()

jquery对象.wrap(包裹格式)成组 包裹

所有选择的对象用一个父元素包裹起来

1.6.3 warpInner()

jquery对象.warpInner(包裹格式)

包裹选中对象的内部,即,作为父元素进行包裹

1.6.4unwarp()

jquery对象.unwarp()

删除被选中元素的直接父元素

1.7 DOM属性操作

1.7.1 attr()

设置与获取选中对象的自带的属性

注:只能获取自带的属性,不能获取自己隐藏属性与自己设置的属性

获取属性=====attr(“属性名”);

设置属性:

1.设置单个属性=========attr("属性名",“属性值”)

2.设置多个属性=========attr({“属性名1”:“属性值1”,“属性名2”:“属性值2”});

1.7.2 prop()

与attr()用法一样

不同:prop()可以设置/获取原本不属于jquery对象的属性

1.7.3 removeAttr()

移除某一属性

1.8 css操作

1.8.1 offset()

设置/获取jquery对象的偏移量,该方法有top、left两个属性

设置偏移量时,无论设置几个都要加上{}

获取:======jquery对象.offset().top/left;

设置:======jquery对象.offset({“top”:值,“left”:值});

注:使用该方法时,会自动将jquery对象声明为定位元素

1.8.2

scrollTop()/scrollLeft()

获取/设置jquery对象的滚动距离

获取:=====jquery对象.scrollTop()/scrollLeft()

设置:=====jquery对象.scrollTop(参数)/scrollLeft(参数)---------参数为jquery对象滚动的距离,无单位

获取文档的滚动高度时,可以使用window

设置文档的滚动距离时,不能使用window,只能使用body/html

1.8.3 position()

获取jquery对象相对于父元素的偏移量,两个属性top/left

只能获取,不能设置

注:不受margin值得影响

1.8.4 width()/height()与innerWidth()/innerHeight与outerWidth()/outerHeight()

三组方法都是获取/设置jquery对象的宽高

width()/height()===不受margin、padding、border的影响

innerWidth()/innerHeight()====受padding的影响,不受margin、border

outerWidth()/outerHeight()=====参数:布尔值,可选

参数为false:不受margin的影响,受padding、border的影响默认为false

参数为true:margin、padding、border都会影响最后结果

相关文章

网友评论

      本文标题:jquery DOM操作

      本文链接:https://www.haomeiwen.com/subject/uvgbsxtx.html