jquery DOM操作

一、元素操作

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操作 来源饥人谷课件,转载请注明来源 创建元素 只需要把DOM字符串传入$方法即可返回一个jQ...
    饥人谷光仔阅读 405评论 0 0
  • jQuery DOM操作 创建元素 只需要把DOM字符串传入$方法即可返回一个jQuery对象 添加元素 1..a...
    好奇男孩阅读 359评论 0 1
  • DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: 创建为属性节点: DOM节点的插入 DOM内部...
    Dl_毛良伟阅读 341评论 0 4
  • 库和框架的区别? 框架也算是库的一种,但倾向于重量级一些,倾向于提供整套的解决方案,倾向于创造一些需要你来遵守的规...
    Iswine阅读 320评论 0 1
  • jQuery--DOM操作(二) 一、元素的特性、属性 特性 attributes vs 属性 propertie...
    我可能是个假开发阅读 348评论 1 7