1小时赚100元的捕鱼游戏

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 1801字
更新時間： 2020-11-28 23:47:26

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所示的效果。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

5.2 對元素的內容和值進行操作

5.2.1 對元素內容操作

5.2.2 對元素值操作

jQuery從入門到精通（軟件開發視頻大講堂）