jQuery提供了对元素的内容和值进行操作的方法,其中,元素的值是元素的一种属性,大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。
元素的内容是指定义元素的起始标记和结束标记中间的内容,又可分为文本内容和HTML内容。
那么什么是元素的文本内容和HTML内容?通过下面这段来说明。
<div>
<p>测试内容</p>
</div>
在这段代码中,div元素的文本内容就是“测试内容”,文本内容不包含元素的子元素,只包含元素的文本内容。
而“<p>测试内容</p>”就是<div>元素的HTML内容,HTML内容不仅包含元素的文本内容,而且还包含元素的子元素。
一 对文本的内容操作
jQuery
提供了
text()
和
text(val)
两个方法用于对文本内容操作,其中
text()
用于获取全部匹配元素的文本内容,
text(val)
用于设置全部匹配元素的文本内容。
例如,在一个
HTML
页面中,包括下面
3
行代码。
<div>
<span id="clock">当前时间:2016-07-06 星期三 13:20:10</span>
</div>
要获取
div
元素的文本内容,可以使用下面的代码:
$("div").text();
得到的结果为:
当前时间:
2016-07-06
星期三 13:20:10
text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容,这个方法也对XML文档有效,可以用text()方法解析XML文档元素的文本内容。
要重新设置div元素的文本内容,可以使用下面的代码:
$("div").text("我是通过text()方法设置的文本内容");
这时,再应用“$("div").text();”获取div元素的文本内容时,将得到以下内容:
我是通过text()
方法设置的文本内容
使用
text()
方法重新设置
div
元素的文本内容后,
div
元素原来的内容将被新设置的内容替换掉,包括
HTML
内容。
例如,对下面的代码
<div><span id="clock">
当前时间:2011-07-06
星期三 13:20:10</span></div>
应用“
$("div").text("
我是通过
text()
方法设置的文本内容
");
”设置值后,该
<div>
标记的内容将变为
<div>
我是通过text()
方法设置的文本内容</div>
二 对HTML内容操作
jQuery提供了html()和html(val)两个方法用于对HTML内容操作,其中html()用于获取第一个匹配元素的HTML内容,html(val)用于设置全部匹配元素的HTML内容。
例如,在一个HTML页面中,包括下面3行代码。
<div>
<span id="clock">当前时间:2016-07-06 星期三 13:20:10</span>
</div>
要获取div元素的HTML内容,可以使用下面的代码:
alert($("div").html());
得到的结果如下图
text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容,这个方法也对XML文档有效,可以用text()方法解析XML文档元素的文本内容。
要重新设置div元素的HTML内容,可以使用下面的代码:
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
这时,再应用“$("div").html();”获取div元素的HTML内容时,将得到下图所示的内容。
html()方法与html(val)不能用于XML文档的,但是可以用于XHTML文档。