jQuery教程
+ -

JQuery DOM

2019-09-09 2 0

JQuery提供了有效地操作DOM的方法。您无需编写大型代码即可修改任何元素的属性值,也无需从段落或分区中提取HTML代码。
JQuery提供了诸如.attr(),.html()和.val()之类的方法,这些方法充当获取器,从DOM元素中检索信息以供以后使用。

内容操作

.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元素的所有方法-

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

0 篇笔记 写笔记

Python3 random() 函数
random() 方法返回随机生成的一个实数,它在[0,1)范围内。语法以下是 random() 方法的语法:import randomrandom.random()注 意:random()是不能直接访问的,需要导入 random 模块,然后通过 random 静态对象调用该方法。参数无返回值返回随......
Redis RANDOM key
Redis RANDOMKEY 命令用于从Redis数据库获取随机键(key)。RANDOMKEY - 返回值字符串,一个随机键,如果数据库为空,则为nil。RANDOMKEY - 语法以下是Redis RANDOMKEY 命令的基本语法。redis 127.0.0.1:6379> RANDO......
AIML random标签
标签用于获取随机响应。 此标记使AIML能够针对相同的输入做出不同的响应。 标签与
  • 标签一起使用。
  • 标签设置每个不同的响应,这些响应将随机传递给用户。语法
  • randrange() 方法返回指定递增基数集合中的一个随机数,基数缺省值为1。语法以下是 randrange() 方法的语法:import randomrandom.randrange ([start,] stop [,step])注 意:randrange()是不能直接访问的,需要导入 rand......
    choice() 方法返回一个列表,元组或字符串的随机项。语法以下是 choice() 方法的语法:import randomrandom.choice( seq )注 意:choice()是不能直接访问的,需要导入 random 模块,然后通过 random 静态对象调用该方法。参数seq — ......
    random() 方法用于返回一个随机数,随机数范围为 0.0 =< Math.random < 1.0。语法static double random()参数这是一个默认方法,不接受任何参数。返回值该方法返回 double 值。实例public class Test{ public......
    JQuery提供了有效地操作DOM的方法。您无需编写大型代码即可修改任何元素的属性值,也无需从段落或分区中提取HTML代码。JQuery提供了诸如.attr(),.html()和.val()之类的方法,这些方法充当获取器,从DOM元素中检索信息以供以后使用。内容操作.html()方法获取第一个匹配元......
    取消
    感谢您的支持,我会继续努力的!
    扫码支持
    扫码打赏,你说多少就多少

    打开支付宝扫一扫,即可进行扫码打赏哦

    您的支持,是我们前进的动力!