jQuery DOM基础操作

---

前言

本文讲解了jQuery DOM 操作的基础，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。

---

DOM简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。

---

一、查找节点

查找元素节点

var $li = $("ul li:eq(0)"); //获取
里第一个
节点
var li_txt = $li.text(); //获取第一个
元素节点的文本内容
1
2

查找属性节点

使用 attr()方法来获取元素的各种属性的值。attr() 方法的参数可以是一个，也可以是两个。

var $pobj = $("p"); //获取
节点
var p_txt = $pobj.attr("title"); //获取
元素节点属性title
alert(p_txt); //打印title属性值
1
2
3

---

二、创建节点

创建元素节点

创建元素节点可以用 $(html)函数。$(html) 方法会根据传入的 HTML 标记字符串，创建一个 DOM 对象，并将这个 DOM 对象包装成一个 jQuery 对象然后返回。

var $liobj = $("
创建一个新元素
"); //创建一个
元素
1

创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用 append()等方法将它们添加到文档中。

var $liobj = $("
我是文本节点
");
1

创建属性节点

与创建文本节点大同小异，可以在创建元素节点时直接创建属性节点，然后使用 append()等方法将它们添加到文档中。

var $li = $("
"); 
1

---

三、插入节点

常用的方法：

.append() 在每个匹配元素里面的末尾处插入参数内容。

$parent.append('
最后面
')
1

.appendTo() 将匹配的元素插入到目标元素的最后面。

删除后恢复
appendTo（）
var $li=$('ul li:eq(2)').remove() 将它存放在变量中
$li.appendTo($('ul'))
1
2
3
4

.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

$li_1$.insertAfter($li_2)// 内容.insertAfter(参考点) 元素集合的后面
1

.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

$li_1$.insertBefore($li_2) // 内容.insertBefore(参考点) 元素集合的前面。
1

---

四、删除节点

如果文档中某一个元素多余，那么我们可以使用 jQuery 中的 remove() detach() 和empty() 方法删除节点。

---

.remove() 将匹配元素集合从 DOM 中删除，当我们想将元素自身移除时我们用.remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的 jQuery 数据。

 $('ul').remove()// 删除ul
1

---

detach() 从 DOM 中去掉所有匹配的元素。.detach()方法和.remove()一样, 除了.detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。

 var $li = $("ul").detach(); //删除元素
1

---

empty() 从 DOM 中移除集合中匹配元素的所有子节点。这个方法不接受任何参数。这个方法不仅移除子元素，同样移除元素里的文本。因为,元素里任何文本字符串都被看做是该元素的子节点。

$("ul li:eq(1)").empty(); //获取第2个li元素节点后,清除此元素里的内容,注意是元素里面
1

---

五、复制节点

复制节点可以通过 clone()方法来实现， 当 clone()中传递了参数 true 时，代表复制元素的同时复制其所绑定的元素。

$('ul  li').clone(true).appendTo('ul')   
true参数决定着你是否可以复制，复制出来的元素
1
2

---

六、替换节点

.replaceAll() 用集合的匹配元素替换每个目标元素。
.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
.replaceAll() 和 .replaceWith() 功能一样，但是目标和源相反。