5.2 对元素的内容和值进行操作
jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。
元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。那么什么是元素的文本内容和HTML内容？我们通过下面这段来说明。
<div>
<p>测试内容</p>
</div>
在这段代码中，div元素的文本内容就是“测试内容”，文本内容不包含元素的子元素，只包含元素的文本内容。而“<p>测试内容</p>”就是<div>元素的HTML内容，HTML内容不仅包含元素的文本内容，而且还包含元素的子元素。
5.2.1 对元素内容操作
由于元素内容可分为文本内容和HTML内容，那么，对元素内容的操作也可以分为对文本内容操作和对HTML内容进行操作。下面分别进行详细介绍。
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文档元素的文本内容。
【例5.1】设置div元素的文本内容。（实例位置：光盘\TM\sl\5\1）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
<div></div>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("div").text("我是通过text()方法设置的文本内容");
});
</script>
运行本实例，效果如图5.1所示。
图5.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>
2．对HTML内容操作
jQuery提供了html()和html(val)两个方法用于对HTML内容进行操作。其中html()用于获取第一个匹配元素的HTML内容，html(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中，包括下面3行代码。
<div>
<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
</div>
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图5.2所示。
图5.2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
这时，再应用“$("div").html(); ”获取div元素的HTML内容时，将得到如图5.3所示的内容。
图5.3 重新设置HTML内容后获取到的结果
注意
html()方法与html(val)不能用于XML文档，但是可以用于XHTML文档。
下面我们通过一个具体的例子，说明对元素的文本内容与HTML内容操作的区别。
【例5.2】获取和设置元素的文本内容与HTML内容。（实例位置：光盘\TM\sl\5\2）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<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>
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容</span>");
$("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：\r\n"+$("div").html());
});
</script>
运行本实例，将显示如图5.4所示的运行结果。从该运行结果，我们可以看出，应用text()设置文本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析，而应用html()设置的HTML内容中所包含的HTML代码就可以被浏览器解析。因此，文本“我是通过html()方法设置的HTML内容”是红色的，而通过text()方法设置的HTML文本则是按照原样显示的。
图5.4 获取和设置元素的文本内容与HTML内容
5.2.2 对元素值操作
jQuery提供了3种对元素值操作的方法，如表5.1所示。
表5.1 对元素的值进行操作的方法
【例5.3】为多行列表框设置并获取值。（实例位置：光盘\TM\sl\5\3）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（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>
</select>
图5.5 获取到的多行列表框的值
（3）在引入jQuery库的代码下方编写jQuery代码，应用jQuery的val(arrVal)方法将其第一个和第二个列表项设置为选中状态，并应用val()方法获取该多行列表框的值，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("select").val([’列表项1', ’列表项2']);
alert($("select").val());
});
</script>
运行后将显示如图5.5所示的效果。