jQuery - DOM操作

首页 / jQuery入门教程 / 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 )

将内容附加到每个匹配元素的内部。

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-dom.html

来源:LearnFk无涯教程网

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

这一章《jQuery - DOM操作》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

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

相关推荐

Linux性能优化实战 -〔倪朋飞 - 〕

玩转Git三剑客 -〔苏玲 - 〕

Java业务开发常见错误100例 -〔朱晔 - 〕

Service Mesh实战 -〔马若飞 - 〕

ESLint 美元($)未定义. (无非定义)

使用 Webpack 将 jQuery 公开给真实的 Window 对象

由于 MIME 类型错误,Chrome 拒绝执行 AJAX 脚本

表单提交之前的jQuery函数

$(this) 和 event.target 之间的区别?

Bootstrap:在 Modal 中打开另一个 Modal

视频推荐

jQuery-13-复习 更多视频教程 »