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

文章目录

• 文档处理
• 复制节点
• 浅复制
• 深复制

• 内部插入
• 外部插入

文档处理

复制节点

如果传入

false

就是浅复制, 如果传入

true

就是深复制

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

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

浅复制

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

深复制

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

删除节点

• remove([expr])

  /

  detach([expr])

删除指定元素

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

• empty()

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

$(\"button\").click(function () {$(\"li\").remove(\".item\")// 利用detach删除之后再重新添加,原有事件可以响应var $div = $(\"div\").detach()// console.log($div)$(\"body\").append($div)})

替换节点

• replaceWith(content|fn)

  /

  replaceAll(selector)

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

$(\"button\").click(function () {// 1.新建一个元素var $h6 = $(\"<h6>我是标题6</h6>\")// 2.替换元素// $(\"h1\").replaceWith($h6)$h6.replaceAll(\"h1\")})

添加节点

内部插入

• append(content|fn)

  /

  appendTo(content)

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

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

• prepend(content|fn)

  /

  prependTo(content)

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

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

外部插入

• after(content|fn)

  /

  insertAfter(content)

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

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

• before(content|fn)

  /

  insertBefore(content)

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

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