jQuery - DOM Manipulation

JQuery提供了有效操作DOM的方法。您不需要編寫大代碼來修改任何元素屬性的值或從段落或分區中提取HTML代碼。

JQuery提供了一些方法，如.attr（）、.html（）和.val（），這些方法充當getter，從DOM元素中檢索信息以供以後使用。

Content Manipulation

方法獲取第一個匹配元素的html內容（innerHTML）。

這裡是方法的語法−

selector.html( )

Example

下面是一個使用.html（）和.text（val）方法的示例。html（）從對象中檢索html內容，然後.text（val）方法使用傳遞的參數設置對象的值−

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

DOM Element Replacement

可以用指定的HTML或DOM元素替換完整的DOM元素。替換（內容）方法很好地實現了這一目的。

這裡是方法的語法−

selector.replaceWith( content )

這裡的內容是您想要的，而不是原始元素。這可以是HTML或簡單文本。

Example

下面是一個將division元素替換爲「<h1>JQuery is Great</h1>」的示例;

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

Removing DOM Elements

可能存在這樣的情況：您希望從文檔中刪除一個或多個DOM元素。JQuery提供了兩種方法來處理這種情況。

empty（）方法從匹配元素集中移除所有子節點，其中作爲方法remove（expr）方法從DOM中移除所有匹配元素。

這裡是方法的語法−

selector.remove( [ expr ])

or 

selector.empty( )

您可以傳遞可選參數expr來過濾要刪除的元素集。

Example

下面是一個示例，其中元素一經單擊就被刪除−

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

Inserting DOM Elements

在現有文檔中插入一個或多個新的DOM元素可能會出現這種情況。JQuery提供了在不同位置插入元素的各種方法。

after（content）方法在每個匹配元素之後插入內容，其中，作爲方法before（content）方法在每個匹配元素之前插入內容。

這裡是方法的語法−

selector.after( content )

or

selector.before( content )

這裡的內容是你想要插入的。這可以是HTML或簡單文本。

Example

下面是一個示例，其中<div>元素被插入到單擊的元素−

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

DOM Manipulation Methods

下表列出了可用於操作DOM元素的所有方法−

Sr.No.	Method & Description
1	after( content ) 在每個匹配的元素後插入內容。
2	append( content ) 將內容追加到每個匹配元素的內部。
3	appendTo( selector ) 將所有匹配的元素追加到另一個指定的元素集。
4	before( content ) 在每個匹配元素之前插入內容。
5	clone( bool ) 克隆匹配的DOM元素及其所有事件處理程序，然後選擇克隆。
6	clone( ) 克隆匹配的DOM元素並選擇克隆。
7	empty( ) 從匹配元素集中移除所有子節點。
8	html( val ) 設置每個匹配元素的html內容。
9	html( ) 獲取第一個匹配元素的html內容（innerHTML）。
10	insertAfter( selector ) 在另一個指定的元素集之後插入所有匹配的元素。
11	insertBefore( selector ) 在另一個指定的元素集之前插入所有匹配的元素。
12	prepend( content ) 將內容前置到每個匹配元素的內部。
13	prependTo( selector ) 將所有匹配的元素前置到另一個指定的元素集。
14	remove( expr ) 從DOM中移除所有匹配的元素。
15	replaceAll( selector ) 用匹配的元素替換指定選擇器匹配的元素。
16	replaceWith( content ) 用指定的HTML或DOM元素替換所有匹配的元素。
17	text( val ) 設置所有匹配元素的文本內容。
18	text( ) 獲取所有匹配元素的組合文本內容。
19	wrap( elem ) 用指定的元素包裝每個匹配的元素。
20	wrap( html ) 用指定的HTML內容包裝每個匹配的元素。
21	wrapAll( elem ) 將匹配集合中的所有元素包裝爲單個包裝元素。
22	wrapAll( html ) 將匹配集合中的所有元素包裝爲單個包裝元素。
23	wrapInner( elem ) 用DOM元素包裝每個匹配元素（包括文本節點）的內部子內容。
24	wrapInner( html ) 用HTML結構包裝每個匹配元素（包括文本節點）的內部子內容。極客書 © 2015-2020 . 京ICP備15058027號-1