jQuery操作DOM
目录
1 文档对象模型DOM
当您在浏览器中打开任何网页时，页面的HTML将被加载并在屏幕上可视化呈现。
为了实现这一点，浏览器构建了该页面的文档对象模型(DOM)，它是其逻辑结构的面向对象的模型。
HTML文档的DOM可以表示为嵌套的一组框：
DOM表示文档作为树结构，其中HTML元素是树中的相关节点。
节点可以有子节点。 同一棵树级别的节点称为兄弟姐妹。
jQuery遍历是用于描述移动DOM的过程，并根据其与其他元素的关系来查找（选择）HTML元素的术语。
jQuery可以轻松地遍历DOM并使用HTML元素。
2 DOM遍历
<html>元素是<body>的父项，它是下一个元素的祖先。
<body>元素是<h1>和<a>元素的父元素。
<h1>和<a>元素是<body>元素和<html>的后代,称为子元素。
<h1>和<a>元素是兄弟姐妹（他们共享相同的父代）。
摘要:
祖先是指父母，祖父母，曾祖父母等等。
后代是一个孩子，孙子，曾孙等等。
兄弟姐妹同享同一个父母。
了解DOM元素之间的关系对于能够正确遍历DOM很重要。
3 DOM遍历
jQuery有很多有用的DOM遍历方法。
parent()方法返回所选元素的直接父元素。 例如：
HTML：
<div> div 元素
<p>段落</p>
</div>
JS:
var e = $("p").parent();
e.css("border", "2px solid red");
上面的代码选择了段落的父元素，并为其设置了一个红色边框。
4 DOM遍历父类元素
parent()方法只能遍历单个级别的DOM树。
要获取所选元素的所有祖先，可以使用parents()方法。 例如：
HTML：
<body>
<div style="width:300px;"> div
<ul> ul
<li> li
<p>paragraph</p>
</li>
</ul>
</div>
</body>
JS:
$(function() {
var e = $("p").parents();
e.css("border", "2px solid red");
});
上面的代码为段落的所有父类设置了一个红色边框。
下面是一些最常用的遍历方法如下：
5 eq()方法
eq() 方法可用于从多个选定元素中选择特定元素。
例如，如果页面包含多个div元素，并且我们要选择第三个元素：
$("div").eq(2);
索引号从0开始，所以第一个元素的索引号为0。
6 删除元素
我们使用remove()方法从DOM中删除选定的元素。 例如：
HTML：
<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>
JS:
$("p").eq(1).remove();
这将删除Green，第二个段落元素。
您还可以在多个选定元素上使用remove()方法，例如$("p").remove()将删除所有段落。
jQuery remove()方法将删除所选元素及其子元素。
7 清空内容
empty()方法用于删除所选元素的子元素。 例如：
HTML：
<div>
<p style="color:red">红</p>
<p style="color:green">绿</p>
<p style="color:blue">蓝</p>
</div>
CSS:
div {
background-color: aqua;
width: 300px;
height: 200px;
}
JS:
$("div").empty();
这将删除div的所有三个子元素。
本文地址：https://blog.csdn.net/ZGL_cyy/article/details/107300231