WEB入门之十六 操作DOM节点

视频课：https://edu.csdn.net/course/play/7621

学习内容

jQuery插入DOM节点

jQuery删除DOM节点

jQuery替换DOM节点

jQuery筛选DOM节点

能力目标

能熟练使用jQuery进行节点操作

能熟练使用jQuery进行节点筛选

本章简介

DOM是Document Object Model的缩写，即文档对象模型，它是W3C的标准规范，提供了使用JavaScript操纵页面元素的接口。节点是DOM中最基本的组成单位，每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。

核心技能部分

7.1 节点操作

节点是DOM中最基本的组成单位，每个标签、每个文本都可以看成是一个节点。节点操作包括获得节点、插入节点、删除节点、复制节点和替换节点等等。

7.1.1 获得节点

节点一般分为三种：元素节点、文本节点和属性节点。元素节点通常使用前面讲的各种选择器即可获得；文本节点使用text( )函数即可获得；属性节点使用attr( )函数即可获得。这些内容在前面都已经讲过，此处不再多述。

7.1.2 插入节点

在实际开发中，有些节点需要动态的插入到页面中，这时可以通过jQuery提供好的一些函数来实现，详见表7-1-1所示。

表7-1-1  节点插入函数

函数

说明

append( )

A.append ( B )，把B添加到A元素内的尾部

prepend( )

A.prepend( B )，把B添加到A元素内的头部

before( )

A.before( B )，把B添加到A的前面

after( )

A.after( B )，把B添加到A的后面

jQuery提供的节点插入函数比较全面，下面通过一些示例来演示这些函数的用法，注意它们之间的区别。

示例7.1

网页原本只有一个包含超链接的div，我们通过append方法向该div内的尾部插入了一个新的div

网页上原本存在的是边框为实线的div，而边框是虚线的是新插入的div。如果把代码中的append函数换成prepend函数，其他不变

通过对比可以得出append和prepend这两个函数的异同点：这两个函数都是向元素内部插入新节点的，append函数是把节点插入到元素内的尾部，而prepend函数是把节点插入到元素内的头部了。

如果把代码中的prepend换成before函数，其他不变

如果把代码中的before换成after函数，其他不变

通过对比可以得出before和after这两个函数的异同点：这两个函数都是向元素外部插入新节点的，before函数是把节点插入到元素的前面，after函数是把节点插入到元素的后面。

7.1.3 删除节点

删除节点指的是把现有的元素从网页中删除，这时可以通过jQuery提供好的一些函数来实现，详见表7-1-2所示。

表7-1-2  节点删除函数

函数

说明

remove( )

A.remove( )，把A从页面中删除掉

empty( )

A.empty( )，把A中的所有子元素删除掉

这两个函数都比较简单，下面通过一些示例来演示这些函数的用法，特别是它们之间的区别。

示例7.2

网页上原本有个下拉列表框

我们看到下拉列表框中的所有子元素（option）都被删掉了。如果把代码中的empty换成remove函数，其他不变，运行后会发现整个下拉列表框都被删除掉了。

7.1.4 替换节点

替换节点是指把现有的元素用别的元素替换，这主要通过jQuery中的replaceWith函数实现，下面是具体的示例。

示例7.3

在上述代码中，当鼠标悬浮到某个语言上时，通过replaceWith函数把原节点（黑色字体）使用红色字体的节点进行了替换

7.1.5 包裹节点

包裹节点是指使用其他节点包裹住某节点，使节点成为其他节点的子节点，这可以通过表7-1-3中的函数实现。

表7-1-3  节点包裹函数

函数

说明

wrap( )

A.wrap( B )，用B包裹每一个A

wrapAll( )

A.wrapAll( B )，把所有的A作为整体用B包裹

wrapInner( )

A.wrapInner( B )，用B把A中的子元素整个包裹

我们先通过一个示例演示wrap和wrapAll函数的区别，参考代码如下所示。

示例7.4

上述代码使用wrap函数给所有的span标签包裹了一个带有黑色边框的div

如果把上述代码中的wrap换成wrapAll函数，其他不变

wrapInner函数用来包裹元素内的子元素，下面是该函数的一个示例。

示例7.5

上述代码使用wrapInner函数包裹ul中的所有li子元素

7.1.6 复制节点

clone函数用来复制节点，下面是该函数的一个示例。

示例7.6

上述代码包含两个下拉列表框，当单击按钮时通过clone函数把第一个下拉列表框的选中项，复制到了另一个下拉列表框中。

7.2 节点筛选

前面我们学习了过滤选择器，它是在获取到元素后通过索引进一步进行了过滤或筛选。除此之外，jQuery还提供了很多函数来对获取到的元素进一步进行过滤或筛选，这些函数整体可分为两大类：节点过滤函数和节点查找函数。

7.2.1 过滤节点

节点过滤函数主要是通过索引来获取节点，详见表7-1-4所示。

表7-1-4  节点过滤函数

节点过滤函数

说明

eq( )

按索引获取匹配元素中的第n个元素，索引从0开始

first( )

获取匹配元素中的第1个元素

last( )

获取匹配元素中的最后1个元素

slice( )

按起始索引获取匹配元素中的子集

下面通过一个示例来演示eq、first、last和slice函数的用法，这几个函数有个共同点：都是通过索引进行过滤的。

示例7.7

上述代码分别使用eq、first、last和slice函数结合选择器获取了相关表单数据

7.2.2 查找节点

节点查找函数用来通过父子、平级、后代等关系查找节点，详见表7-1-5所示。

表7-1-5 节点查找函数

节点查找函数

说明

children( )

根据条件获取元素的子元素

parent( )

获取元素的父元素

prev( )

获取紧挨着的前一个平级元素

next( )

获取紧挨着的后一个平级元素

find( )

根据条件找出元素的后代元素

siblings( )

找出与元素平级的所有其他元素

下面我们通过一个示例来演示这几个函数的具体用法，参考代码如下所示。

示例7.8

上述代码包含了一个树形菜单

本章总结

节点操作是DOM最基础的操作，也比较繁琐，包括插入节点、删除节点、复制节点等。jQuery针对节点操作提供了很多函数供开发人员使用，这些函数很多比较相似，大家在使用的时候要注意区分。

任务实训部分

1：动态管理树形菜单

训练技能点

Ø jQuery节点操作

需求说明

使用jQuery节点操作函数对树形菜单进行动态添加和删除，如图7.2.1所示。添加节点时，需要先单击选中某个一级或二级节点，然后在文本框中填写新添加的节点名，单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。

图7.2.1  树形菜单

实现步骤

（1）实现图7.2.1所示的界面，参考代码如下所示。

节点文本：

国产

北京奔驰

北京现代

悦翔

索纳塔

途胜

伊兰特

比亚迪

（2）实现节点的添加，参考代码如下所示。

2：动态管理表格

训练技能点

Ø jQuery节点操作

需求说明

使用jQuery节点操作函数对行进行动态添加和删除。

实现步骤

（1）实现图7.2.2所示的界面，参考代码如下所示。

添加商品

（2）实现商品的添加和删除，参考代码如下所示。

3：省市级联

训练技能点

Ø jQuery节点操作

需求说明

按照图7.2.3所示的界面使用jQuery节点操作函数实现省市级联。

4：价格小计

训练技能点

Ø jQuery节点操作

需求说明

按照图7.2.4所示的界面使用jQuery节点操作函数实现价格小计。单击“加”“减”图片可以修改文本框中的数值大小，同时后面的小计要计算出来。

巩固练习

一、问答题

1. 请举例描述append和prepend这两个函数的异同点。

2. 请举例描述before和after这两个函数的异同点。

3. 请举例描述remove和empty这两个函数的异同点。

二、上机练习

使用jQuery节点操作函数实现表格内容的修改。当单击【修改】按钮时，单元格中的文本信息替换为文本框；单击【确定】按钮时，文本框中的数据显示到单元格中。

JavaScript jQuery web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。