• <nav id="dstbx"></nav>

    <nav id="dstbx"></nav>
    1. <form id="dstbx"></form>
    2. <small id="dstbx"></small>

      教育行業A股IPO第一股(股票代碼 003032)

      全國咨詢/投訴熱線:400-618-4000

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

      更新時間:2021年07月14日14時24分 來源:傳智教育 瀏覽次數:

      好口碑IT培訓

      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>元素時,返回結果是一個包含所選值的數組;當要為表單元素設置選中情況時,可以傳遞數組參數。

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

         <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所示。

      1626242736925_1.jpg

      圖1 獲取元素內容

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





      猜你喜歡:

      jQuery庫中的$()是什么?

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

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

      傳智教育前端開發培訓

      0 分享到:
      神马影院我不卡