首頁  >  文章  >  web前端  >  jquery中html()方法怎麼用

jquery中html()方法怎麼用

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-06-08 14:33:285014瀏覽

在javascript中,「html()」方法的用法是「元素.html(被選元素的新內容)」。 html方法設定或傳回被選取元素的內容,當此方法用於傳回內容時,則傳回第一個符合元素的內容;當此方法用於設定內容時,則會重寫所有符合元素的內容。

jquery中html()方法怎麼用

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

HTML內容就是內容中可以包含HTML標籤,並且能夠被瀏覽器渲染。

文字內容是先將內容中的HTML預定義字元轉換成html字元實體,這樣HTML標籤就不會被渲染。
語法結構一:

$(selector).html()

此時方法不帶參數時候是取得第一個符合元素的html內容。

此方法與text()方法沒有參數用法類似,但是還是有很大差別:

一.html()方法取得第一個符合元素的內容,而text()方法是取得所有符合元素所包含的內容。
二.html()方法取得內容html內容,而text()方法取得是文字內容。

實例程式碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <meta name="author" content="https://www.jb51.net/" />
    <title></title>
    <style type="text/css">
      div{
        height:150px;
        width:150px;
        background-color:green;
        margin-top:10px;
      }
    </style>
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("button").click(function () {
          alert($("div").html());
        });
      });
    </script>
  </head>

  <body>
    <div>
      <ul>   
        <li>
          <span>欢迎您</span>
        </li>         
      </ul>
    </div>
    <button>点击查看效果</button>
  </body>
</html>

以上程式碼將傳回div元素中的內容。

語法結構二:

$(selector).html(content)

有參數的時候是設定所有符合元素而的html內容。
此方法與text()方法帶有參數的用法類似,但是還是有很大的區別:
html()方法設定的是html內容,而text()方法設定的是文字內容。

實例程式碼:

以下程式碼將div中的html內容設定為"a4b561c25d9afb9ac8dc4d70affff419我是重新設定後的內容0d36329ec37a2cc24d42c7229b69747a"。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <meta name="author" content="https://www.jb51.net/" />
    <title>脚本之家</title>
    <style type="text/css">
      div
      {
        height:150px;
        width:150px;
        background-color:green;
        margin-top:10px;
      }
    </style>
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("button").click(function () {
          $("div").html("<b>我是重新设置后的内容</b>");
        });
      });
    </script>
  </head>
  
  <body>
    <div>原来内容</div>
    <button>点击查看效果</button>
  </body>
</html>

【推薦學習:javascript進階教學

以上是jquery中html()方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn