DOM

优质

小牛编辑

130浏览

2023-12-01

JQuery提供了以有效方式操作DOM的方法。您不需要编写大代码来修改任何元素属性的值或从段落或分区中提取HTML代码。

JQuery提供了诸如.attr（）,. html（）和.val（）之类的方法，它们充当getter，从DOM元素中检索信息供以后使用。

内容操作

html( )方法获取第一个匹配元素的html内容（innerHTML）。

以下是该方法的语法 -

<i>selector</i>.html( )

例子 (Example)

以下是使用.html（）和.text（val）方法的示例。这里.html（）从对象中检索HTML内容，然后.text（val）方法使用传递的参数设置对象的值 -

<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元素替换

您可以使用指定的HTML或DOM元素替换完整的DOM元素。 replaceWith( content )方法很好地实现了这个目的。

以下是该方法的语法 -

<i>selector</i>.replaceWith( content )

这里的内容是您想要的而不是原始元素。这可以是HTML或简单文本。

例子 (Example)

以下是一个用“

JQuery很好 h1>”替换除法元素的例子 -

<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>

删除DOM元素

您可能希望从文档中删除一个或多个DOM元素。 JQuery提供了两种方法来处理这种情况。

empty( )方法从匹配元素集中删除所有子节点，其中方法remove( expr )方法从DOM中删除所有匹配的元素。

以下是该方法的语法 -

<i>selector</i>.remove( [ expr ])
or 
<i>selector</i>.empty( )

您可以传递可选参数expr来过滤要删除的元素集。

例子 (Example)

以下示例是单击元素后立即删除元素的示例 -

<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>

插入DOM元素

您可能希望在现有文档中插入新的一个或多个DOM元素。 JQuery提供了各种方法来在不同位置插入元素。

after( content )方法在每个匹配元素之后插入内容，其中作为前面的方法before( content )方法在每个匹配元素之前插入内容。

以下是该方法的语法 -

<i>selector</i>.after( content )
or
<i>selector</i>.before( content )

这里的内容是您要插入的内容。这可以是HTML或简单文本。

例子 (Example)

以下是在单击元素之前插入

元素的示例 -

<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></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操纵方法

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

Sr.No.	方法和描述
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结构包装每个匹配元素（包括文本节点）的内部子内容。