雪狼捕鱼机有哪些产品

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 710字
更新時間： 2020-11-28 16:21:45

3.1 獲取或設置元素的內容

jQuery中有3個方法用來獲取HTML中元素的內容，分別是text()、html()和val()。

● text()：設置或返回所選元素的文本內容。

● html()：設置或返回所選元素的內容（包括HTML標記）。

● val()：設置或返回表單字段的值。

text和html的明顯區別是text只返回元素的文本內容，而html返回的是將HTML解析后的內容。val返回的是表單的內容。

【示例3-1】get_set_content.html

        01    <body>
        02    <p id="test">
        03       有3個方法可以用于獲取<strong>HTML元素</strong>的內容，分別是：<br/>
        04       <strong>text()：設置或返回所選元素的文本內容</strong><br/>
        05       <strong>html()：設置或返回所選元素的內容（包括HTML標記）</strong><br/>
        06       <strong>val()：設置或返回表單字段的值</strong><br/>
        07    </p>
        08    <textarea name="textvalue" cols="80" rows="5"></textarea>
        09    <div>
        10   <button id="btn1">顯示文本</button>
        11   <button id="btn2">顯示HTML</button>
        12    </div>
        13    </body>

上面的代碼在HTML中放置了一個id為test的p元素，在段落內部設置了一些HTML代碼，在段落下面添加了一個textarea元素，用于顯示文本的btn1和HTML的btn2。接下來對btn1編寫代碼，使其獲取p元素內部的文本內容，并顯示到textarea中。btn2將顯示HTML內容到textarea元素。這兩個按鈕的事件處理實現如下：

        01    <script type="text/javascript">
        02      $(document).ready(function(e) {
        03        $("#btn1").click(function(e) {
        04           var textStr=$("p").text();        //獲取段落的文本內容
        05           $("#textvalue").text(textStr);   //在textarea中顯示文本內容
        06        });
        07        $("#btn2").click(function(e) {
        08           var htmlStr=$("#test").html();   //獲取段落的HTM內容
        09           $("#textvalue").text(htmlStr);   //在textarea中顯示HTML內容
        10        });
        11    });

在上面的代碼中，按鈕btn1用于使用text獲取段落的文本內容并顯示到textarea中，顯示效果如圖3.1所示。

圖3.1 顯示文本內容

可以見到，即便段落標記內部包含HTML字符串，但是text()只是取出其中的文本內容。在為textarea賦值時，使用帶參數的text函數，這個參數將作為文本內容設置給textarea，因此在textarea中顯示HTML文本內容。

btn2按鈕使用html()方法獲取HTML格式的內容，輸出結果如圖3.2所示。

圖3.2 顯示HTML內容

html()方法顯示段落標簽中的HTML元素，可以看到它包含HTML標記。同樣，如果為html()方法帶一個參數，表示將為指定的目標元素設置HTML內容，比如可以編寫如下代碼：

        $("#test2").html(htmlStr);     //將HTML內容設置到id為test2的div中

這就使得HTML代碼的設置給了名為test2的div，這樣就可以動態地為div添加新的HTML內容。

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

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.1 獲取或設置元素的內容

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）