DOM

2018-08-12 21:27 更新

jQuery - DOM 操作

JQuery 提供了一些方法來有效的操縱 DOM。你不需要編寫冗長的代碼來修改任何元素的屬性值或從段落或 division 中提取 HTML 代碼。

JQuery 提供的方法如 .attr()，.html() 和 .val，充當(dāng) getter，從 DOM 元素中檢索信息，供以后使用。

內(nèi)容操作

html( ) 方法獲取第一個(gè)匹配元素的 html 內(nèi)容(內(nèi)部 HTML)。

這是該方法的語法 ——

selector.html( )

示例

下面是一個(gè)例子，利用 .html() 和 .text(val) 方法。這里，.html()對象檢索來自對象的 HTML 內(nèi)容，然后 .text(val) 方法使用傳遞的參數(shù)設(shè)置對象的值 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on the square below:</p>
      <span id="result"> </span>

      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>

   </body>

</html>

這將產(chǎn)生如下所示結(jié)果：

DOM 元素替換

你可以使用指定的 HTML 或 DOM 元素來替換一個(gè)完整的 DOM 元素。replaceWith( content ) 方法很符合這一目的。

這是該方法的語法 ——

selector.replaceWith( content )

這里 concent 是你想要替換原始元素的東西。這可以是 HTML 或簡單的文本。

示例

下面的例子中用 “< h1>JQuery is Great< /h1>” 替換了 division 元素 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on the square below:</p>
      <span id="result"> </span>

      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>

   </body>
</html>

這將產(chǎn)生如下所示結(jié)果：

刪除 DOM 元素

你可能會(huì)想要從文檔中刪除一個(gè)或多個(gè) DOM 元素。jQuery 提供了兩種方法來實(shí)現(xiàn)這一操作。

empty() 方法會(huì)從一組匹配的元素中刪除所有的子節(jié)點(diǎn)，而 remove(expr) 方法會(huì)從 DOM 中刪除所有的匹配元素。

這是兩種方法的語法 ——

selector.remove( [ expr ])

or 

selector.empty( )

你可以傳遞可選參數(shù) expr 來過濾要被刪除的元素組。

示例

下面的例子中當(dāng)元素被點(diǎn)擊時(shí)，就會(huì)被刪除 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on any square below:</p>
      <span id="result"> </span>

      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>

   </body>

</html>

這將產(chǎn)生如下所示結(jié)果：

插入 DOM 元素

你可能會(huì)想要在已存在的文檔中插入一個(gè)或多個(gè)新的 DOM 元素。jQuery 提供了不同的方法來在不同的位置插入元素。

after( content ) 方法會(huì)在每個(gè)匹配元素之后插入內(nèi)容，而 before( content ) 方法會(huì)在每個(gè)匹配元素之前插入內(nèi)容。

這是兩種方法的語法 ——

selector.after( content )

or

selector.before( content )

這里 content 是你想要插入的內(nèi)容。它可以是 HTML 或簡單的文本。

示例

下述例子中會(huì)在點(diǎn)擊的元素之前插入 < div> 元素 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>

   </head>

   <body>

      <p>Click on any square below:</p>
      <span id="result"> </span>

      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>

   </body>

</html>

這將產(chǎn)生如下所示結(jié)果：

DOM 操作方法

下表是用來操作 DOM 元素的全部方法 ——

序號 方法 & 描述
1 after( content )

在每一個(gè)匹配元素之后插入內(nèi)容
2 append( content )

在每一個(gè)匹配元素內(nèi)部添加內(nèi)容。
3 appendTo( selector )

將所有匹配元素添加到另一個(gè)指定的元素組中。
4 before( content )

在每個(gè)匹配的元素之前插入內(nèi)容。
5 clone( bool )

克隆匹配的 DOM 元素以及所有的事件處理程序，并選擇克隆項(xiàng)。
6 clone( )

克隆匹配的 DOM 元素并選擇克隆項(xiàng)。
7 empty( )

從匹配的元素集合中刪除所有的孩子節(jié)點(diǎn)。
8 html( val )

設(shè)置每個(gè)匹配元素的 html 內(nèi)容。
9 html( )

獲取第一個(gè)匹配元素的 html 內(nèi)容(內(nèi)部 HTML)。
10 insertAfter( selector )

將所有的匹配元素插入到另一個(gè)指定的元素集合之后。
11 insertBefore( selector )

將所有匹配的元素插入到另一個(gè)指定的元素集合之前。
12 prepend( content )

將內(nèi)容前置到每個(gè)匹配元素的內(nèi)部。
13 prependTo( selector )

將所有匹配元素前置到另一個(gè)指定的元素集合中。
14 remove( expr )

從 DOM 中刪除所有的匹配元素。
15 replaceAll( selector )

用匹配的元素替換與指定的選擇器相匹配的元素。
16 replaceWith( content )

用指定的 HTML 或 DOM 元素代替所有的匹配元素。
17 text( val )

設(shè)置所有匹配元素的文本內(nèi)容。
18 text( )

獲取所有匹配元素的組合的文本內(nèi)容。
19 wrap( elem )

用指定的元素包裝每個(gè)匹配的元素。
20 wrap( html )

用指定的 HTML 內(nèi)容包裝每個(gè)匹配的元素。
21 wrapAll( elem )

將匹配的集合中的全部元素包裝到一個(gè)單獨(dú)的元素中。
22 wrapAll( html )

將匹配的集合中的全部元素包裝到一個(gè)單獨(dú)的元素中。
23 wrapInner( elem )

用 DOM 元素包裝每個(gè)匹配元素(包括文本節(jié)點(diǎn))的內(nèi)部孩子內(nèi)容。
24 wrapInner( html )

用 HTML 結(jié)構(gòu)包裝每個(gè)匹配元素(包括文本節(jié)點(diǎn))的內(nèi)部孩子內(nèi)容。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號