jQuery开发基础第4章使用jQuery操作DOM
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并
获取设置后的文本内容和HTML内容，具体代码如下：
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<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>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容，具体代码如下 ：
<script type="text/javascript"> $(document).ready(function(){ $("div").text("我是通过text()方法设置的文本内容"); });
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>
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图4-3所示的内容。
图4-3 重新设置HTML内容后获取到的结果
注意：html()方法与html(val)不能用于XML文档的，但是可以用于XHTML文档。
对元素的文本内容与HTML内容操作的区别
【例4-2】 获取和设置元素的文本内容与HTML内容。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面ห้องสมุดไป่ตู้语句引入jQuery库。
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
例如： （1）使用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form");
（2）使用DOM Core来获取元素的title属性：
element.getAttribute("title");
4.2 对元素内容和值进行操作
4.2.1 对元素内容操作 4.2.2 对元素值操作
<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>
1．DOM Core
DOM Core（核心DOM）：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序 语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、 getAttribute()和setAttribute()等方法都是DOM Core的组成部分。
</script>
注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <应d用iv“运><行$s(p本"and实iivd例"=)"，.ctle效oxct果k(""如>我图当是前4通-1时过所间图t示：e4。x-t21(0)11方设-法0置7设-d0i6置v元星的素期文的三本文内1本3容:内2"0)容:;1”0<设/s置pa值n>后</，di该v><div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
jQuery开发基础第4章使用jQuery操作 DOM
第4章 使用jQuery操作DOM
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
4.1 DOM操作的分类
DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并
获取设置后的文本内容和HTML内容，具体代码如下：
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<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>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容，具体代码如下 ：
<script type="text/javascript"> $(document).ready(function(){ $("div").text("我是通过text()方法设置的文本内容"); });
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>
这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到如图4-3所示的内容。
图4-3 重新设置HTML内容后获取到的结果
注意：html()方法与html(val)不能用于XML文档的，但是可以用于XHTML文档。
对元素的文本内容与HTML内容操作的区别
【例4-2】 获取和设置元素的文本内容与HTML内容。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面ห้องสมุดไป่ตู้语句引入jQuery库。
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
例如： （1）使用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form");
（2）使用DOM Core来获取元素的title属性：
element.getAttribute("title");
4.2 对元素内容和值进行操作
4.2.1 对元素内容操作 4.2.2 对元素值操作
<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>
1．DOM Core
DOM Core（核心DOM）：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序 语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、 getAttribute()和setAttribute()等方法都是DOM Core的组成部分。
</script>
注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <应d用iv“运><行$s(p本"and实iivd例"=)"，.ctle效oxct果k(""如>我图当是前4通-1时过所间图t示：e4。x-t21(0)11方设-法0置7设-d0i6置v元星的素期文的三本文内1本3容:内2"0)容:;1”0<设/s置pa值n>后</，di该v><div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
jQuery开发基础第4章使用jQuery操作 DOM
第4章 使用jQuery操作DOM
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
4.1 DOM操作的分类
DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。