怎樣操作jQuery的元素內容？內容操作演示

jQuery中操作元素內容的方法，主要包括html()方法、text()方法和val()方法。html()方法用于獲取或設置元素的HTML內容，text()方法用于獲取或設置元素的文本內容，val()方法用來獲取或設置表單元素的value值。具體使用說明如表1所示。

表1 元素內容操作

語法	說明
html()	獲取第一個匹配元素的HTML內容
html(content)	設置第一個匹配元素的HTML內容
text()	獲取所有匹配元素包含的文本內容組合起來的文本
text(content)	設置所有匹配元素的文本內容
val()	獲取表單元素的value值
val(value)	設置表單元素的value值

需要注意的是，val()方法可以操作表單（select、radio和checkbox）的選中情況，當要獲取的元素是<select>元素時，返回結果是一個包含所選值的數(shù)組；當要為表單元素設置選中情況時，可以傳遞數(shù)組參數(shù)。

為了讓讀者更好地理解元素內容相關方法的使用，下面通過具體代碼進行演示。

   <div>
    <span>我是內容</span>
   </div>
   <input type="text" value="請輸入內容">
   <script>
    // 1. 獲取設置元素內容html()
    console.log($("div").html());     // 輸出結果：<span>我是內容</span>
    $("div").html("<span>hello</span>"); // 修改div的內容（HTML會被解析）
    // 2. 獲取設置元素文本內容text()
   console.log($("div").text());      // 輸出結果：hello
   $("div").text("<span>123</span>");  // 設置div的文本內容（不解析HTML）
   // 3. 獲取設置表單值val()
   console.log($("input").val());    // 輸出結果：請輸入內容
   $("input").val("123");        // 設置表單元素的值為123
  </script>

通過瀏覽器訪問測試，運行結果如圖1所示。

圖1 獲取元素內容

從圖1可以看出，使用html()方法獲取的元素內容含有HTML標簽（如span），而使用text()方法獲取的是去除HTML標簽的內容，將該元素包含的文本內容組合起來的文本。因此，讀者根據(jù)項目的需求，在開發(fā)中選擇合適的方法使用即可。

猜你喜歡：

jQuery庫中的$()是什么?

如何使用選擇器獲取元素？常用的jQuery選擇器列舉

演示jQuery的鏈式調用過程【前端面試題】

傳智教育前端開發(fā)培訓