WEB入门之十六操作DOM节点

时间：2017-02-26 14:26:48 阅读：292 评论：0 收藏：0 [点我收藏+]

学习内容

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.1</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
height: 80px;
width: 150px;
padding-top:20px;
}
#nei {
border: thin dashed #000000;
height: 50px;
width: 50px;
display:inline;
}
</style>
</head>
<body>
<div id="wai"><a href="#">jQuery</a></div>
</body>
</html>
<script>
$("#wai").append("<div id=‘nei‘>新插入的div</div>");
</script>

网页原本只有一个包含超链接的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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.2</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<select id="yuyan">
<option>Java</option>
<option>C#</option>
<option>PHP</option>
<option>SQL</option>
</select>
</body>
</html>
<script>
$("#yuyan").empty();
</script>

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

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

7.1.4 替换节点

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

示例7.3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.3</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
请选择你喜欢的编程语言：<br/>
<input type="checkbox"/><span>Java</span>
<input type="checkbox"/><span>C#</span>
<input type="checkbox"/><span>C++</span>
</body>
</html>
<script>
$("span").mouseover(
function(){
$(this).replaceWith("<span style=‘color:red‘>"+
                                       $(this).text()+"</span>");
}
)
</script>

在上述代码中，当鼠标悬浮到某个语言上时，通过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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.4</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
}
</style>
</head>
<body>
<h3>jQuery简介</h3>
<span>jQuery是创建于2006年1月的开源项目，主要包括核心库、UI和插件三部分。</span><br/>
<span>jQuery凭借简洁、优雅的语法和跨平台的兼容性，极大的简化了JavaScript的开发难度。</span><br/>
<span>jQuery强调的理念是：写得少、做得多（write less, do more）。</span><br/>
<span>jQuery独特的选择器、链式的DOM操作、可靠成熟的事件处理机制都是其他JavaScript库无法比拟的。</span>
</body>
</html>
<script>
$("span").wrap("<div id=‘wai‘></div>");
</script>

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

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

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

示例7.5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.5</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
}
</style>
</head>
<body>
<ul>
<li>Java</li>
<li>C#</li>
<li>PHP</li>
<li>C++</li>
</ul>
</body>
</html>
<script>
$("ul").wrapInner("<div id=‘wai‘></div>");
</script>

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

7.1.6 复制节点

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

示例7.6

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.6</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<select id="s1" size="4">
  <option value="java" selected="selected">Java</option>
  <option value="c#">C#</option>
  <option value="php">PHP</option>
  <option value="c++">C++</option>
</select>
<input type="button" id="btn" value=">>"/>
<select id="s2" size="4">
</select>
</body>
</html>
<script>
$("#btn").click(
function(){
$("#s2").append($("select option:selected").clone());
}
)
</script>

上述代码包含两个下拉列表框，当单击按钮时通过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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例7.7</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="571" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">
 <form name="userfrm">
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">名字：</td>
    <td width="415" align="left" bordercolor="#E7E3E7"><input name="fname" type="text" class="register_textBroader"
 id="fname" size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">姓氏：</td>
    <td align="left" bordercolor="#E7E3E7"><input name="lname" type="text" class="register_textBroader"  id="lname"
size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150"  align="right" bgcolor="#E7FBFF">登录名：</td>
    <td align="left" bordercolor="#E7E3E7"> <input name="sname" type="text" class="register_textBroader"  id="sname"
size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">密码：</td>
    <td align="left" bordercolor="#E7E3E7"> <input name="pass" type="password" class="register_textBroader"  
id="pass" size="26"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</td>
    <td height="0" align="left" bordercolor="#E7E3E7"><input name="rpass" type="password"
class="register_textBroader"  id="rpass" size="26"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</td>
    <td height="0" align="left" bordercolor="#E7E3E7"><input name="email" type="text" class="register_textBroader"  
id="email" size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">性别：</td>
    <td align="left" bordercolor="#E7E3E7">
<input name="gen" type="radio"   value="男" checked>男 
    <input name="gen" type="radio" value="女" class="input">女
    </td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">爱好：</td>
    <td align="left" bordercolor="#E7E3E7">
  <label>
  	<input type="checkbox" name="checkbox" value="运动">
  </label>
  运动  
  <label>
  <input type="checkbox" name="checkbox2" value="聊天">
  </label>
聊天  
  <label>
<input type="checkbox" name="checkbox22" value="玩游戏">
  </label>
玩游戏
</td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">出生日期：</td>
    <td align="left" bordercolor="#E7E3E7">
<input name="byear" class="register_textBroader"   id="byear" onfocus="this.value=‘‘" value="yyyy"
size=4 maxlength=4 > 年  
   <select name="bmon"  >
<option value="" selected>[选择月份]
     <option value=0>一月
     <option value=1>二月
     <option value=2>三月
     <option value=3>四月
     <option value=4>五月
     <option value=5>六月
     <option value=6>七月
     <option value=7>八月
     <option value=8>九月
     <option value=9>十月
     <option value=10>十一月
     <option value=11>十二月
  </select> 月  
  <input name="bday" class="register_textBroader" id="bday" onfocus="this.value=‘‘" value="dd" size=2 maxlength=2 >日
</td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="35" align="right" bgcolor="#E7FBFF">
        <input type="reset" id="reset" value="重填"></td>
    <td height="35" align="center" bordercolor="#E7E3E7">
<input type="button" id="btn" value="注册">
</td>
  </tr>
  </form>
</table>
<script>
$("#btn").click(
function(){
var t1="第一个文本框的值是："+$(":text").first().val()+"\n";
var t2="索引是1的文本框的值是："+$(":text").eq(1).val()+"\n";
var t3="最后一个文本框的值是："+$(":text").last().val()+"\n";
var t4="前两个复选框的值是：";
$(":checkbox").slice(0,2).each(
function(){
t4=t4+$(this).val();
}
)
alert(t1+t2+t3+t4);
}
)
</script>
</body>
</html>

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

7.2.2 查找节点

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

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

节点查找函数	说明
children( )	根据条件获取元素的子元素
parent( )	获取元素的父元素
prev( )	获取紧挨着的前一个平级元素
next( )	获取紧挨着的后一个平级元素
find( )	根据条件找出元素的后代元素
siblings( )	找出与元素平级的所有其他元素

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

示例7.8

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>示例7.8</TITLE>
<script src="jquery-1.7.2.min.js"></script>
</HEAD>
<BODY>
<DIV>       
<A href="#"><IMG src="sx.gif" width="15" height="15"  border="0" align="absmiddle" >分类讨论区</A>
    <DIV id="1" style="padding-left:15px;">BBS系统<BR>
            共建水木<BR>
            站务公告栏<BR>
            妆点水木<BR>
</DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">社会信息</A>
    <DIV id="2" style="padding-left:15px;" >美容品与饰品代理<BR>
            考研资料市场<BR>
            商海纵横<BR>
            动物保护者<BR>
            动物世界<BR>
</DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">休闲娱乐</A>
     <DIV id="3" style="padding-left:15px;" >
            七彩水木<BR>
            网友聚会<BR>
            醉品人生<BR>
            花木园艺<BR>
     </DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">电脑技术</A>
     <DIV id="4" style="padding-left:15px;" >BBS安装管理<BR>
            CAD技术<BR>
            数字图像设计<BR>
            电脑音乐制作<BR>
            软件加密与解密<BR>
 </DIV>
</DIV>
</BODY>
</HTML>
<script>
alert($("#4").parent().children("a").text());
alert($("#4").prev().text());
alert($("#3").parent().next().html());
alert($("#4").parent().find("a").text());
alert($("#4").siblings().html());
</script>

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

本章总结

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

任务实训部分

1：动态管理树形菜单

训练技能点

? jQuery节点操作

需求说明

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

图7.2.1 树形菜单

实现步骤

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

<style>
div{
width:120px;
}
.sec{
margin-left:15px;
}
.three{
margin-left:25px;
}
a:link,a:visited{
text-decoration:none;
color:black;
}
</style>
</head>
 
<body>
节点文本：<input id="txt" type="text" size="10" /><input id="btn_add" type="button" value="添加"/><input id="btn_del" type="button" value="删除"/>
<div id="g1"><img src="img/jia.gif"/><a href="#">国产</a>
  <div>
<div class="sec"><img src="img/jia.gif"/><a href="#">北京奔驰</a></div>
<div class="sec"><img src="img/jia.gif"/><a href="#">北京现代</a>
<div class="three"><img src="img/flag.gif"/><a href="#">悦翔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">索纳塔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">途胜</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">伊兰特</a></div>
</div>
<div class="sec"><img src="img/jia.gif"/><a href="#">比亚迪</a></div>
  </div>
</div>
</body>
（2）实现节点的添加，参考代码如下所示。
<script>
var temp="";
$("a").live("click",function(e){
temp=$(this).parent();
}
);
$("#btn_del").click(
function(){
if(temp=="")
alert("删除之前请先单击某个三级节点！");
else if(temp.attr("class")!="three")
alert("你单击的不是三级节点！");
else
temp.remove();
}
);
$("#btn_add").click(
function(){
if($("#txt").val()!="")
{
if(temp=="")
alert("添加之前请先单击某个一级或二级节点！");
else if(temp.attr("class")=="three")
alert("请单击一级或二级节点！");
else
{
if(temp.attr("class")=="sec")
{
temp.append("<div class=‘three‘>
<img src=‘img/flag.gif‘/><a href=‘#‘>"+$(‘#txt‘).val()+"</a></div>");
}
else
{
temp.append("<div class=‘sec‘>
<img src=‘img/jian.gif‘/><a href=‘#‘>"+$(‘#txt‘).val()+"</a></div>");
}
}
}
}
);
</script>

2：动态管理表格

训练技能点

? jQuery节点操作

需求说明

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

实现步骤

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

<body>
<table width="58%" height="38" border="1" align="center" id="t">
  <tr>
    <td bgcolor="#999999"><div align="center">商品名称</div></td>
    <td bgcolor="#999999"><div align="center">商品售价</div></td>
    <td bgcolor="#999999"><div align="center">产地</div></td>
    <td bgcolor="#999999"><div align="center">删除</div></td>
  </tr>
</table>
<p align="center">添加商品
<form>
  <p align="center">商品名称：
    <input type="text" id="pname" />
  </p>
  <p align="center">商品售价：
    <input type="text" id="price" />
  </p>
  <p align="center">商品产地：
    <input type="text" id="paddress" />
  </p>
  <p align="center">
    <input type="button" id="btn" value="添加商品"/>
</p>
</form>
</body>
（2）实现商品的添加和删除，参考代码如下所示。
<script>
$("a").live("click",function(){
$(this).parent().parent().parent().remove();
}
)
$("#btn").click(
function(){
$("#t")	.append("<tr><td bgcolor=‘#999999‘>
<div align=‘center‘>"+$("#pname").val()+"</div></td><td bgcolor=‘#999999‘>
<div align=‘center‘>"+$("#price").val()+"</div></td><td bgcolor=‘#999999‘>
<div align=‘center‘>"+$("#paddress").val()+"</div></td><td bgcolor=‘#999999‘>
<div align=‘center‘><a href=‘#‘>删除</a></div></td></tr>");
}
)
</script>

3：省市级联

训练技能点

? jQuery节点操作

需求说明

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

4：价格小计

训练技能点

? jQuery节点操作

需求说明

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

巩固练习

一、问答题

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

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

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

二、上机练习

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

技术分享

WEB入门之十六操作DOM节点

标签：玩游戏 UI 处理机动态插件子节点 round 电子学习

原文地址：http://blog.csdn.net/zhangchen124/article/details/57387883

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

WEB入门之十六 操作DOM节点

学习内容

7.1 节点操作

7.1.1 获得节点

7.1.2 插入节点

7.1.3 删除节点

7.1.4 替换节点

7.1.5 包裹节点

7.1.6 复制节点

7.2 节点筛选

7.2.1 过滤节点

7.2.2 查找节点

1：动态管理树形菜单

2：动态管理表格

3：省市级联

4：价格小计

WEB入门之十六操作DOM节点