jQuery从入门到精通最新章节_明日科技著

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").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　获取和设置元素的文本内容与

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>

（3）在引入jQuery库的代码下方编写jQuery代码，应用jQuery的val(arrVal)方法将其第一个和第二个列表项设置为选中状态，并应用val()方法获取该多行列表框的值，具体代码如下：

    <script type="text/javascript">
       $(document).ready(function(){
             $("select").val(['列表项1','列表项2']);
             alert($("select").val());
       });
    </script>

运行后将显示如图5.5所示的效果。

图5.5　获取到的多行列表框的值

5.2 对元素的内容和值进行操作

5.2.1 对元素内容操作

1．对文本内容操作

说明

2．对HTML内容操作

注意

5.2.2 对元素值操作

5.2　对元素的内容和值进行操作

5.2.1　对元素内容操作

5.2.2　对元素值操作