目录
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的所有三个子元素。