首頁技術(shù)文章正文

jQuery元素內(nèi)容操作的方法有多少種?

更新時間:2021-07-14 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

表1 元素內(nèi)容操作

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


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

為了讓讀者更好地理解元素內(nèi)容相關(guān)方法的使用,下面通過具體代碼進(jìn)行演示。

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


通過瀏覽器訪問測試,運行結(jié)果如圖1所示。

1626242736925_1.jpg

圖1 獲取元素內(nèi)容

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








猜你喜歡:

jQuery修改元素樣式的代碼演示

如何獲取jQuery?jQuery的使用

寫出jQuery鏈?zhǔn)秸{(diào)用實現(xiàn)方法【前端面試題】

黑馬程序員前端高級軟件工程師培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!