第10章教案_jQuery HTML DOM教学设计.doc
《JavaScript与jQuery网页前端开发与设计-第2版》教案
第10章jQueryHTMLDOM
一、教学目标：
掌握jQuery获取和设置相关函数text()、html()、val()、attr()、css()的使用；
掌握jQuery添加相关函数append()和prepend()、after()和before()的使用；
掌握jQuery删除相关函数remove()、empty()和removeAttr()的使用；
掌握jQuery类属性设置相关函数addClass()、removeClass()和toggleClass()的使用；
掌握jQuery尺寸相关width()、height()系列函数的使用。
二、教学重点和难点：
重点：jQuery常用DOM函数的用法（获取/设置、添加、删除）；
难点：jQuery类属性设置相关函数的使用。
三、教学方法与手段：
采取互动式教学方法，理论教学使用多媒体投影教室。
四、课程简介：
DOM指的是DocumentObjectModel（文档对象模型），jQuery提供了一系列与DOM相关的方法能让用户更方便的选择和操作HTML文档中的元素及其属性。本章主要内容是jQueryHTMLDOM技术的应用，包括jQuery获取和设置、添加、删除、类属性设置以及尺寸相关函数的应用。
五、教学基本内容：
10.1jQuery获取和设置
jQuery能获取或设置5种特定内容，具体见表10-1所示。
表10-SEQ表12-\*ARABIC1jQuery获取或设置常见方法
方法名称
解释
text()
获取或设置选定元素标签之间的文本内容。
html()
获取或设置选定元素标签的全部内容，包括HTML标记本身。
val()
获取或设置选定表单元素字段的值。
attr()
获取或设置选定元素的属性值。
css()
获取或设置选定元素的CSS属性值。
以上5种方法用于获取特定内容时，括号中不填写任何内容；用于设置时，括号中需要添加用于设置的新内容，并且用引号括住。
10.1.1jQuerytext()
jQuerytext()可用于获取或设置选定元素标签之间的文本内容，不包含元素标签本身。
1. 获取文本内容
当使用不带任何参数的text()方法，可以获取选定元素标签之间所有的文本内容。其语法格式如下：
$(selector).text()
该方法的返回结果为字符串类型，包含了所有匹配元素内部的文本内容。
例如id=test01的段落元素p表示如下：
pid=test01hello/p
使用$(p#test01).text()方法获取其中的文本内容，返回值为：
hello
返回值只包含文本内容，不带有前后的HTML标签。
如果是元素内部的后代元素中包含有文本，则使用text()也会获取其中的文本内容。例如以下情况：
divid=container
p
elementi1/i
/p
p
elementstrong2/strong
/p
/div
上述代码在id=container的div元素中包含了两个段落元素p，并且这两个段落元素内部的文本内容还分别包括了格式标签i和strong。此时使用$(div#container).text()方法获取该div元素的文本内容，返回值为：
element1
element2
返回值只包含文本内容，其中的格式化标签i和strong均被忽略。
需要注意的是，text()方法不能用于处理表单元素的文本内容，如果需要获取或设置表单中textarea或input元素的文本值需要使用val()方法。
2. 设置文本内容
设置选定元素标签之间文本内容的方法如下：
$(selector).text(新文本内容)
【例10-1】jQuerytext()方法获取和设置文本内容
使用text()方法获取和设置指定元素的文本内容。
【代码说明】
需要注意的是，text()方法只能用于设置元素中的纯文本内容，无法带有格式化标签。如果需要添加格式化标签或其他子元素标签，可以使用html()方法。
10.1.2jQueryhtml()
jQueryhtml()用于获取或设置选定元素标签的全部内容，包括内部的文本以及其他HTML标记。该方法调用的是JavaScript原生属性innerHTML。
1. 获取HTML内容
获取选定元素标签之间HTML代码内容的方法如下：
$(selector).html()
作为获取元素的HTML内容时，该方法无需带有参数。
例如某段HTML代码如下：
divclass=test
div这是一段内容。/div
/div
使用$(div.test).html()获取到的结果如下：
div这是一段内容