jQuery属性的结点基础知识(关于结点的各种操作)

文档处理
复制节点

如果传入false就是浅复制, 如果传入true就是深复制

浅复制只会复制元素, 不会复制元素的事件

深复制会复制元素, 而且还会复制元素的事件

浅复制

GIF 2020 6 18 15 00 36

$("button").eq(0).click(function () {
    // 1.浅复制一个元素
    var $li = $("li:first").clone(false)
    // 2.将复制的元素添加到ul中
    $("ul").append($li)
})
深复制

GIF 2020 6 18 15 00 56

$("button").eq(1).click(function () {
    // 1.深复制一个元素
    var $li = $("li:first").clone(true)
    // 2.将复制的元素添加到ul中
    $("ul").append($li)
})
删除节点
  • remove([expr]) / detach([expr])

删除指定元素

GIF 2020 6 18 15 04 28

$("button").click(function () {
    $("div").remove()
    // $("div").empty()

    // 利用remove删除之后再重新添加,原有的事件无法响应
    var $div = $("div").remove()
    // console.log($div)
    $("body").append($div)
})
  • empty()

删除指定元素的内容和子元素, 指定元素自身不会被删除

GIF 2020 6 18 15 06 41

$("button").click(function () {
    $("li").remove(".item")

    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach()
    // console.log($div)
    $("body").append($div)
})
替换节点
  • replaceWith(content|fn) / replaceAll(selector)

替换所有匹配的元素为指定的元素

GIF 2020 6 18 15 12 38

$("button").click(function () {
    // 1.新建一个元素
    var $h6 = $("<h6>我是标题6</h6>")
    // 2.替换元素
    // $("h1").replaceWith($h6)
    $h6.replaceAll("h1")
})
添加节点
内部插入
  • append(content|fn) / appendTo(content)

会将元素添加到指定元素内部的最后

GIF 2020 6 18 15 40 02

 $("button").click(function () {
    // 1.创建一个节点
    var $li = $("<li>新增的li</li>")
    // 2.添加节点
    // $("ul").append($li)      
    $li.appendTo("ul")
})
  • prepend(content|fn) / prependTo(content)

会将元素添加到指定元素内部的最前面

GIF 2020 6 18 15 40 23

 $("button").click(function () {
    // 1.创建一个节点
    var $li = $("<li>新增的li</li>")
    // 2.添加节点
    $("ul").prepend($li)            
    // $li.prependTo("ul")
})
外部插入
  • after(content|fn) / insertAfter(content)

会将元素添加到指定元素外部的后面

GIF 2020 6 18 15 49 01

$("button").click(function () {
    // 1.创建一个节点
    var $li = $("<li>新增的li</li>")
    // 2.添加节点
    $("ul").after($li)
    // $li.insertAfter("ul")
})
  • before(content|fn) / insertBefore(content)

会将元素添加到指定元素外部的前面

GIF 2020 6 18 15 49 17

$("button").click(function () {
    // 1.创建一个节点
    var $li = $("<li>新增的li</li>")
    // 2.添加节点
    $("ul").before($li)
    // $li.insertBeforer("ul")
})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值