jQuery整理笔记四----jQuery操作DOM

古城微笑少年丶 2022-08-27 10:54 209阅读 0赞

**一、使用jQuery创建节点**

节点是DOM结构的基础。根据DOM规范，节点是一个很宽泛的概念，范围包含元素、属性、文本、文档、注释等。实际开发过程中，要创建动态内容，主要操作的节点包括元素、

属性和文本。

看一个例子 实例4-1：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** jQuery创建元素、文本和属性 **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.      $(function()\{  
8.          var $h1=$("**<****h1**  title='一级标题'**>**jQuery创建元素、文本和属性**</****h1****>**");  
9.          $("body").append($h1);  
10.         //写成一行   
11.         $("body").append("**<****h2**  title='二级标题'**>**二级标题**</****h2****>**")  
12.     \})  
13.   **</****script****>**  
14.  **</****head****>**  
15.  **<****body****>**  
16.     
17.  **</****body****>**  
18. **</****html****>**

执行效果如图：

![SouthEast][]

很简单的一行代码就可以完成创建元素、文本和属性并且把该元素放到body元素下。比JavaScript简化了太多了。

**二、使用jQuery插入元素**

1、在节点内部插入内容

jQuery提供了4种方法用于在节点内部插入内容

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表4-1 在节点内部插入内容方法</span>  
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>append()</td> 
   <td>向每个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面增加）</td> 
  </tr> 
  <tr> 
   <td>appendTo() &nbsp; &nbsp; &nbsp;</td> 
   <td>把所有匹配的元素追加到另一个指定的元素集合中，实际上，这个方法颠倒了append()方法的应用。例如$(A).append($B)和<br> $B.appendTo($A)是等价的</td> 
  </tr> 
  <tr> 
   <td>prepend()</td> 
   <td>与append()相反，它是把元素插到到匹配元素内部的最前面</td> 
  </tr> 
  <tr> 
   <td>prependTo()</td> 
   <td>与prepend()用法颠倒，不多说了</td> 
  </tr> 
 </tbody> 
</table>

这四个方法的参数可以是字符串、DOM元素对象或者是jQuery对象。下面示例演示append()方法分别把DOM元素对象、jQuery对象和字符串添加到ul对象下面。

实例4-2：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** jQuery在节点内部插入内容 **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.          $(function()\{  
8.              var $li =$("**<****li****>**jQuery对象**</****li****>**");  
9.              var li=document.createElement("li");  
10.             li.innerText="DOM对象";  
11.             $("ul").append($li)  
12.             $("ul").append(li)  
13.             $("ul").append("**<****li****>**字符串**</****li****>**");  
14.         \})  
15.   **</****script****>**  
16.  **</****head****>**  
17.   
18.  **<****body****>**  
19.     **<****ul****>****</****ul****>**  
20.  **</****body****>**  
21. **</****html****>**

执行结果如图：

![SouthEast 1][]

2、在节点外部插入内容

jQuery同样提供了四个方法

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表4-2 在节点外部插入内容方法</span>  
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>after()</td> 
   <td>在每个匹配的元素之后插入内容</td> 
  </tr> 
  <tr> 
   <td>before()</td> 
   <td>在每个匹配的元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td>insertAfter()</td> 
   <td>把所有匹配的元素插入到另一个指定的元素集合的后面</td> 
  </tr> 
  <tr> 
   <td>insertBefore()</td> 
   <td>把所有匹配的元素插入到另一个指定的元素集合的前面</td> 
  </tr> 
 </tbody> 
</table>

这四个方法跟前面那四个方法用法相似，看个例子

实例4-3：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** jQuery在节点外部插入内容 **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.      $(function()\{  
8.          $("div").after($("**<****p****>**最后一段文本**</****p****>**"))  
9.          $("div").before($("**<****p****>**第一段文本**</****p****>**"))  
10.         $("div").css("background","red");  
11.     \})  
12.   **</****script****>**  
13.  **</****head****>**  
14.  **<****body****>**  
15.     **<****div** id="" class="" bgcolor="red"**>**  
16.         **<****p** **>**段落文本**</****p****>**  
17.     **</****div****>**  
18.  **</****body****>**  
19. **</****html****>**

执行效果如图：

![SouthEast 2][]

特别注意：appendTo()、prependTo()、insertAfter()、insertBefore()四个方法具有破坏性操作的特性。也就是说，如果选择已存在的内容并把他们插入到指定对象中，则原位

置的内容将被删除。

实例4-4：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** 插入内容的破坏性 **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.      $(function()\{  
8.      $("div").css("background","red");  
9.      \})  
10.   **</****script****>**  
11.  **</****head****>**  
12.  **<****body****>**  
13.     **<****div** id="" class="" bgcolor="red"**>**  
14.         **<****p** **>**段落文本**</****p****>**  
15.     **</****div****>**  
16.  **</****body****>**  
17. **</****html****>**

执行效果：

![SouthEast 3][]

加上一段js：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  $("p").insertAfter($("div"))

执行效果如下：

![SouthEast 4][]

**三、使用jQuery删除元素**

jQuery支持两种删除元素的方法：remove()和empty()。而DOM仅定义了与jQuery的remove()方法对应的removeChild()方法。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  表4-3 jQuery删除元素的方法  
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>remove()</td> 
   <td>从DOM中删除所有的匹配的元素，也就是把本身都删除。</td> 
  </tr> 
  <tr> 
   <td>empty()</td> 
   <td>这个意义是清空，是清空内部，本身保留。</td> 
  </tr> 
 </tbody> 
</table>

**四、使用jQuery复制元素**

jQuery定义了clone()方法用来复制节点，与之对应的DOM定义了cloneNote()方法实现相同的操作功能。

这个比较简单，看个例子得了：

实例4-5：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** 使用jQuery复制元素 **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.      $(function()\{  
8.          var $tr=$("table tr:last").clone();  
9.          $tr.find("td").each(function(index,value)\{  
10.             $(this).text("第3行第"+(index+1)+'列')  
11.         \})  
12.         $("table").append($tr)  
13.     \})  
14.   **</****script****>**  
15.  **</****head****>**  
16.  **<****body****>**  
17.     **<****div** id=""  **>**  
18.         **<****table** width="100%" border="1" cellpadding="2" cellspacing="0"**>**  
19.         **<****tr****>**  
20.             **<****td****>**第1行第1列**</****td****>**  
21.             **<****td****>**第1行第2列**</****td****>**  
22.         **</****tr****>**  
23.         **<****tr****>**  
24.             **<****td****>**第2行第1列**</****td****>**  
25.             **<****td****>**第2行第2列**</****td****>**  
26.         **</****tr****>**  
27.         **</****table****>**  
28.     **</****div****>**  
29.  **</****body****>**  
30. **</****html****>**

执行结果：

![SouthEast 5][]

**五、使用jQuery替换元素**  
  
jQuery定义了replaceWith()方法和replaceAll()方法用来替换节点，与之对应的DOM定义了replaceChild()方法实现相同的操作功能，不过他们的用法迥然不同。

replaceWith()方法能够将所有匹配的元素替换成指定的HTML或DOM元素，replaceAll()方法与之功能相同，但是操作相反，例如在下例中将所有的p元素替换为div元素

实例4-6：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** jQuery替换元素 **</****title****>**  
5.    **<****meta** name="Generator" content="EditPlus"**>**  
6.    **<****meta** name="Author" content=""**>**  
7.    **<****meta** name="Keywords" content=""**>**  
8.    **<****meta** name="Description" content=""**>**  
9.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
10.   **<****script** type="text/javascript"**>**  
11.         $(function()\{  
12.             $("p").replaceWith("**<****div****>**111**</****div****>**")  
13.   
14.             //$("**<****div****>**111**</****div****>**").replaceAll($("p")) 与上面的效果相同  
15.         \})  
16.   **</****script****>**  
17.  **</****head****>**  
18.   
19.  **<****body****>**  
20.     **<****p****>**段落1**</****p****>**  
21.     **<****p****>**段落2**</****p****>**  
22.     **<****p****>**段落3**</****p****>**  
23.  **</****body****>**  
24. **</****html****>**

看一下它的DOM结构：

![20140419223452015][]

**六、使用jQuery操作属性**

jQuery和DOM都提供了元素属性的基本操作方法

1、设置属性

jQuery通常使用attr()方法来设置属性,而DOM定义了setAttribute()方法来设置元素的属性。

在使用jQuery提供的attr()方法的时候，需要为该方法设置两个参数值，分别是属性名和属性值。还可以用一个函数替换第二个参数（属性值），用函数的返回结果充当属性值。

用法很简单，例如：$("p").attr("title","段落文本");

2、获取属性

jQuery里还是用attr(),DOM里用getAttribute()。

当为attr()设置了一个参数值时，代表要获取这个属性的属性值，如果没有该属性，那么返回undefined。不用举例了，很简单，也经常用。

3、删除属性

jQuery里定义的方法是removeAttr()方法删除指定的元素属性，DOM里定义的是removeAttribute()。

$("p").removeAttr("title");

**七、jQuery操作类样式**

在设计动态样式时，经常需要与元素的class属性打交道，该属性可以为元素定义样式。既然作为元素的属性，我们当然可以用上面介绍的attr()方法进行动态修改元素的class。

不过，jQuery为了开发者方便操作，又单独定义了几个与class操作相关的方法。

1、追加样式 addClass

使用addClass方法前首先的定义好样式类。用法也很简单，看个例子

实例4-7：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>**addClass **</****title****>**  
5.    **<****style** type="text/css"**>**  
6.      .red\{  
7.          color:red;/\*红色字体样式\*/  
8.      \}  
9.      .bold\{  
10.         font-weight:bold;/\*加粗字体样式\*/  
11.     \}  
12.     .italic\{  
13.         font-style:italic;/\*倾斜字体样式\*/  
14.     \}  
15.   **</****style****>**  
16.   **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
17.   **<****script** type="text/javascript"**>**  
18.   <!--  
19.         $(function()\{  
20.             $("input").eq(0).click(function()\{  
21.                 $("p").addClass("red");  
22.             \});  
23.             $("input").eq(1).click(function()\{  
24.                 $("p").addClass("bold");  
25.             \})  
26.             $("input").eq(2).click(function()\{  
27.                 $("p").addClass("italic");  
28.             \})  
29.         \})  
30.   //--**>**  
31.   **</****script****>**  
32.  **</****head****>**  
33.   
34.  **<****body****>**  
35.     **<****p****>**手握日月摘星辰,世间无我这般人**</****p****>**  
36.     **<****input** type="button" value="红色" onclick=""**>**  
37.     **<****input** type="button" value="加粗" onclick=""**>**  
38.     **<****input** type="button" value="倾斜" onclick=""**>**  
39.  **</****body****>**  
40. **</****html****>**

执行前的效果和分别点击三个按钮后的变化如图：

![SouthEast 6][]![SouthEast 7][]

![SouthEast 8][]![SouthEast 9][]

2、移除样式removeClass()

使用方法大同小异，不做介绍了。

**3、切换样式toggleClass()**

样式切换在鼠标动态操作中非常实用，在Web开发中诸如折叠、开关、伸缩、Tab切换等动态效果中都需要用到交互切换。jQuery为此定义了toggleClass()方法，该方法可用来

开/关指定类样式，从而实现切换类样式的目标。

jQuery的toggleClass()方法包含两个参数，第一个参数指定作为开关的类样式名称，第二个参数用来决定是否打开类样式，该参数为可选。如果没有设置第二个参数，则

toggleClass()方法根据是否存在参数设置的样式，如果存在，就去除，否则追加。

实例4-8：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

4、判断样式hasClass()

在过滤函数里总结过，不重复写了。

八、使用jQuery操作HTML、文本和值

就是经常用的html()  text()  val()

没有参数的时候是读取，有参数的时候是赋值。

[view plain]: http://blog.csdn.net/caohaicheng/article/details/24022605#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/302321
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/302321/fork
[SouthEast]: /images/20220824/0c02e039939245939775bbbcc29e5f92.png
[SouthEast 1]: /images/20220824/02403b0c1cb34d688b3a26553c3bbc11.png
[SouthEast 2]: /images/20220824/b26eb4089e8c452eb0c0669283d016e5.png
[SouthEast 3]: /images/20220824/ae8848c4852a4e8eb1a8cf524a80b1b6.png
[SouthEast 4]: /images/20220824/98cef8b29aaf462eaeff694ff3809d0b.png
[SouthEast 5]: /images/20220824/65e0bef7bdc04ee59fd2d245f1a3c96e.png
[20140419223452015]: /images/20220824/da3255b9977f42a1822511da1b5502cf.png
[SouthEast 6]: https://img-blog.csdn.net/20140419230804500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 7]: /images/20220824/a24529951faf4f06b31dd4c8303f02b0.png
[SouthEast 8]: https://img-blog.csdn.net/20140419230828343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 9]: /images/20220824/85fd9f5ddb1644eea665a32ba7f6d608.png