无涯教程网

关注我们

jQuery - DOM操作

jQuery - DOM操作

JQuery提供了有效地操作DOM的方法。您无需编写大型代码即可修改任何元素的属性值，也无需从段落或分区中提取HTML代码。

JQuery提供了诸如.attr()，.html()和.val()之类的方法，这些方法充当获取器，从DOM元素中检索信息以供以后使用。

HTML内容操作

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

这是方法的语法-

selector.html( )

以下是使用.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元素

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

这是方法的语法-

selector.replaceWith( content )

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

以下是将分隔元素替换为“ <h1> JQuery is Great </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中删除所有匹配的元素。

这是方法的语法-

selector.remove( [ expr ])

or 

selector.empty( )

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

以下是一个示例，其中单击元素即会删除它们-

<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)方法在每个匹配元素之前插入内容。

这是方法的语法-

selector.after( content )

or

selector.before( content )

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

以下是一个示例，其中<div>元素正被插入到被单击元素之前-

<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函数列表

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

Sr.No.	Method & Remark
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结构包装每个匹配元素(包括文本节点)的内部子内容。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

程序员进阶攻略 -〔胡峰〕

大规模数据处理实战 -〔蔡元楠〕

黄勇的OKR实战笔记 -〔黄勇〕

从0打造音视频直播系统 -〔李超〕

ZooKeeper实战与源码剖析 -〔么敬国〕

性能工程高手课 -〔庄振运〕

小马哥讲Spring核心编程思想 -〔小马哥〕

恋爱必修课 -〔李一帆〕

React Hooks 核心原理与实战 -〔王沛〕

好记忆不如烂笔头。留下您的足迹吧 :)