第4章 使用 jQuery操作DOM - jQuery开发基础教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第4章 使用jQuery操作DOM
本章要求：
DOM操作的分类 对元素的内容和值进行操作 创建节点 查找节点 插入节点 删除、复制与替换节点 遍历节点 对元素的CSS样式进行操作
第4章 使用jQuery操作DOM
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
//获取id为username
val(val) 用于设置所有匹配元素的值
$("input:text").val("新值") 框设置值
//为全部文本
val(arrVal)
用于为check、select和radio等元素设置值，参数为字符 串数组
$("select").val(['列表项1','列表项2']); // 为下拉列表框设置多选值
例如： （1）使用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form");
（2）使用DOM Core来获取元素的title属性：
element.getAttribute("title");
4.2 对元素内容和值进行操作
4.2.1 对元素内容操作 4.2.2 对元素值操作
</script>
运行后将显示如图4-5所示的效果。 图4-5 获取到的多行列表框的值
4.3 对DOM节点进行操作
4.3.1 4.3.2 4.3.3 4.பைடு நூலகம்.4
创建节点 插入节点 删除、复制与替换节点 遍历节点
4.3.1 创建节点
创建元素节点
例如要创建两个<p>元素节点，并且要把它们作为<div>元素节点的子节点添加到DOM节点树上，完
</script>
注意：使用text()方法获取div元素的文本内容时，是将全部匹配的元素中包含的文本内容都获 取出来了，即将div1和div2元素的文本都获取。而使用html()方法获取div元素的HTML内容时，只是 将第一个匹配元素，即div1元素包含的HTML内容显示出来了，并没有显示div2元素的HTML内容。
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并 获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容
4.1 DOM操作的分类
DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。
1．DOM Core
DOM Core（核心DOM）：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序 语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、 getAttribute()和setAttribute()等方法都是DOM Core的组成部分。
成这个任务需要两个步骤。
（1）创建两个新的<p>元素。
（2）将这两个新元素插入到文档中。
第（1）步可以使用jQuery的工厂函数$()来完成，格式如下：
$(html)
$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并且将这个DOM对象包装成一个
jQuery对象后返回。
首先，创建两个<p>元素，jQuery代码如下：
// 将第1个p元素添加到div中，使它能在页面中显示
$(“div”).append($p_2);
// 也可以采用链式写法： $("div").append($p_1).append($p_2);
运行代码后，新创建的<p>元素将被添加到页面当中。
创建文本节点
两个<p>元素节点已经创建完毕并插入到文档中了，此时需要为它们添加文本内容。具体的jQuery
var $p_1 = $("<p></p>");
// 创建第1个p元素
var $p_2 = $("<p></p>");
// 创建第2个p元素，文本为空
然后将这两个新的元素插入到文档中，可以使用jQuery中的append()等方法(将在4.3.3节中介绍)
具体的jQuery代码如下：
$("div").append($p_1);
【例4-3】 为多行列表框设置并获取值。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</span>"); $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容
</span>"); alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：
\r\n"+$("div").html()); });
</select>
（3）在引入jQuery库的代码下方编写jQuery代码，并应用val()方法获取该多行列表框的值，具体 代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); });
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图4-3所示的内容。
图4-3 重新设置HTML内容后获取到的结果 注意：html()方法与html(val)不能用于XML文档的，但是可以用于XHTML文档。
对元素的文本内容与HTML内容操作的区别
【例4-2】 获取和设置元素的文本内容与HTML内容。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
代码如下：
var $p_1 = $("<p>明日科技</p>"); // 创建第1个p元素，包含元素节点和文本节点，文本节点为“明日科技”
var $p_2 = $("<p>明日图书</p>"); // 创建第2个p元素，包含元素节点和文本节点，文本节点为“明日图书”
$("div").append($p_1);
运行本实例，将显示如图4-4所示的运行结果。从该运行结果，我们可以看出，应用text()设置文 本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析 ，而应用html()设置的HTML内容中所包含的HTML代码就可以被浏览器解析。因此，文本“我是通过 html()方法设置的HTML内容”是红色的，而通过text()方法设置的HTML文本则是按照原样显示的
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记，这两个<div>标记除了id属性不同外，其他均相 同，关键代码如下：
应用text()方法设置的内容 <div id="div1"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div> <br />应用html()方法设置的内容 <div id="div2"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
（2）在页面的<body>标记中，添加一个包含3个列表项的可多选的多行列表框，默认为后两项被选 中，代码如下：
<select name="like" size="3" multiple="multiple" id="like"> <option>列表项1</option> <option selected="selected">列表项2</option> <option selected="selected">列表项3</option>
<div></div>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容，具体代码如下 ：
<script type="text/javascript"> $(document).ready(function(){ $("div").text("我是通过text()方法设置的文本内容"); });
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
</script>
运行本实例，效果如图4-1所示。
图4-1 设置div元素的文本内容 注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <div><span id="clock">当前时间：2011-07-06 星期三 13:20:10</span></div> 应用“$("div").text("我是通过text()方法设置的文本内容");”设置值后，该<div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
4.2.1 对元素内容操作
1．对文本内容操作 jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配 元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下 面3行代码。
<div> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
图4-4 获取和设置元素的文本内容与HTML内容
4.2.2 对元素值操作
jQuery提供了3种对元素值操作的方法，如表4-1所示。
方法 val()
说明
示例
用于获取第一个匹配元素的当前值，返回值可能是一个字 符串，也可能是一个数组。例如当select元素有两个选中 值时，返回结果就是一个数组
$("#username").val(); 的元素的值
2．对HTML内容操作 jQuery提供了html()和html(val)两个方法用于对HTML内容进行操作。其中html()用于获取第一 个匹配元素的HTML内容，text(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中， 包括下面3行代码。
<div> <span id="clock">当前时间：2011-07-06 星期三 13:20:10</span> </div>
本章要求：
DOM操作的分类 对元素的内容和值进行操作 创建节点 查找节点 插入节点 删除、复制与替换节点 遍历节点 对元素的CSS样式进行操作
第4章 使用jQuery操作DOM
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
//获取id为username
val(val) 用于设置所有匹配元素的值
$("input:text").val("新值") 框设置值
//为全部文本
val(arrVal)
用于为check、select和radio等元素设置值，参数为字符 串数组
$("select").val(['列表项1','列表项2']); // 为下拉列表框设置多选值
例如： （1）使用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form");
（2）使用DOM Core来获取元素的title属性：
element.getAttribute("title");
4.2 对元素内容和值进行操作
4.2.1 对元素内容操作 4.2.2 对元素值操作
</script>
运行后将显示如图4-5所示的效果。 图4-5 获取到的多行列表框的值
4.3 对DOM节点进行操作
4.3.1 4.3.2 4.3.3 4.பைடு நூலகம்.4
创建节点 插入节点 删除、复制与替换节点 遍历节点
4.3.1 创建节点
创建元素节点
例如要创建两个<p>元素节点，并且要把它们作为<div>元素节点的子节点添加到DOM节点树上，完
</script>
注意：使用text()方法获取div元素的文本内容时，是将全部匹配的元素中包含的文本内容都获 取出来了，即将div1和div2元素的文本都获取。而使用html()方法获取div元素的HTML内容时，只是 将第一个匹配元素，即div1元素包含的HTML内容显示出来了，并没有显示div2元素的HTML内容。
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并 获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容
4.1 DOM操作的分类
DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。
1．DOM Core
DOM Core（核心DOM）：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序 语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、 getAttribute()和setAttribute()等方法都是DOM Core的组成部分。
成这个任务需要两个步骤。
（1）创建两个新的<p>元素。
（2）将这两个新元素插入到文档中。
第（1）步可以使用jQuery的工厂函数$()来完成，格式如下：
$(html)
$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并且将这个DOM对象包装成一个
jQuery对象后返回。
首先，创建两个<p>元素，jQuery代码如下：
// 将第1个p元素添加到div中，使它能在页面中显示
$(“div”).append($p_2);
// 也可以采用链式写法： $("div").append($p_1).append($p_2);
运行代码后，新创建的<p>元素将被添加到页面当中。
创建文本节点
两个<p>元素节点已经创建完毕并插入到文档中了，此时需要为它们添加文本内容。具体的jQuery
var $p_1 = $("<p></p>");
// 创建第1个p元素
var $p_2 = $("<p></p>");
// 创建第2个p元素，文本为空
然后将这两个新的元素插入到文档中，可以使用jQuery中的append()等方法(将在4.3.3节中介绍)
具体的jQuery代码如下：
$("div").append($p_1);
【例4-3】 为多行列表框设置并获取值。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</span>"); $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容
</span>"); alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：
\r\n"+$("div").html()); });
</select>
（3）在引入jQuery库的代码下方编写jQuery代码，并应用val()方法获取该多行列表框的值，具体 代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); });
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图4-3所示的内容。
图4-3 重新设置HTML内容后获取到的结果 注意：html()方法与html(val)不能用于XML文档的，但是可以用于XHTML文档。
对元素的文本内容与HTML内容操作的区别
【例4-2】 获取和设置元素的文本内容与HTML内容。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
代码如下：
var $p_1 = $("<p>明日科技</p>"); // 创建第1个p元素，包含元素节点和文本节点，文本节点为“明日科技”
var $p_2 = $("<p>明日图书</p>"); // 创建第2个p元素，包含元素节点和文本节点，文本节点为“明日图书”
$("div").append($p_1);
运行本实例，将显示如图4-4所示的运行结果。从该运行结果，我们可以看出，应用text()设置文 本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析 ，而应用html()设置的HTML内容中所包含的HTML代码就可以被浏览器解析。因此，文本“我是通过 html()方法设置的HTML内容”是红色的，而通过text()方法设置的HTML文本则是按照原样显示的
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记，这两个<div>标记除了id属性不同外，其他均相 同，关键代码如下：
应用text()方法设置的内容 <div id="div1"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div> <br />应用html()方法设置的内容 <div id="div2"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
（2）在页面的<body>标记中，添加一个包含3个列表项的可多选的多行列表框，默认为后两项被选 中，代码如下：
<select name="like" size="3" multiple="multiple" id="like"> <option>列表项1</option> <option selected="selected">列表项2</option> <option selected="selected">列表项3</option>
<div></div>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容，具体代码如下 ：
<script type="text/javascript"> $(document).ready(function(){ $("div").text("我是通过text()方法设置的文本内容"); });
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
</script>
运行本实例，效果如图4-1所示。
图4-1 设置div元素的文本内容 注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <div><span id="clock">当前时间：2011-07-06 星期三 13:20:10</span></div> 应用“$("div").text("我是通过text()方法设置的文本内容");”设置值后，该<div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
4.2.1 对元素内容操作
1．对文本内容操作 jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配 元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下 面3行代码。
<div> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
图4-4 获取和设置元素的文本内容与HTML内容
4.2.2 对元素值操作
jQuery提供了3种对元素值操作的方法，如表4-1所示。
方法 val()
说明
示例
用于获取第一个匹配元素的当前值，返回值可能是一个字 符串，也可能是一个数组。例如当select元素有两个选中 值时，返回结果就是一个数组
$("#username").val(); 的元素的值
2．对HTML内容操作 jQuery提供了html()和html(val)两个方法用于对HTML内容进行操作。其中html()用于获取第一 个匹配元素的HTML内容，text(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中， 包括下面3行代码。
<div> <span id="clock">当前时间：2011-07-06 星期三 13:20:10</span> </div>