jQuery操作DOM

最新推荐文章于 2024-02-28 16:51:01 发布
最新推荐文章于 2024-02-28 16:51:01 发布
阅读量314 收藏
点赞数
分类专栏： web开发

一、使用jQuery创建节点

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

属性和文本。

看一个例子 实例4-1：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  

执行效果如图：


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

二、使用jQuery插入元素

1、在节点内部插入内容

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

表4-1 在节点内部插入内容方法
方法说明
append()向每个匹配的元素内部追加内容（既然是‘追加’，那旧说明是在匹配元素内部的后面增加）
appendTo()      把所有匹配的元素追加到另一个指定的元素集合中，实际上，这个方法颠倒了append()方法的应用。例如$(A).append($B)和
$B.appendTo($A)是等价的
prepend()与append()相反，它是把元素插到到匹配元素内部的最前面
prependTo()与prepend()用法颠倒，不多说了

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

实例4-2：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  
执行结果如图：

2、在节点外部插入内容

jQuery同样提供了四个方法

表4-2 在节点外部插入内容方法
方法说明
after()在每个匹配的元素之后插入内容
before()在每个匹配的元素之前插入内容
insertAfter()把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore()把所有匹配的元素插入到另一个指定的元素集合的前面

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

实例4-3：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  
执行效果如图：

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

置的内容将被删除。

实例4-4：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  
执行效果：

加上一段js：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $("p").insertAfter($("div"))  
执行效果如下：

三、使用jQuery删除元素

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

表4-3 jQuery删除元素的方法
方法说明
remove()从DOM中删除所有的匹配的元素，也就是把本身都删除。
empty()这个意义是清空，是清空内部，本身保留。

四、使用jQuery复制元素

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

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

实例4-5：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  

执行结果：

五、使用jQuery替换元素

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

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

实例4-6：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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结构：

六、使用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 在CODE上查看代码片 派生到我的代码片
  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>  

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


2、移除样式removeClass()

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

3、切换样式toggleClass()

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

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

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

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

实例4-8：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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> New Document </title>  
  5.   <style type="text/css">  
  6.     .hidden{  
  7.         display:none;  
  8.     }  
  9.   </style>  
  10.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  11.   <script type="text/javascript">  
  12.   <!--  
  13.         $(function(){  
  14.             $("input").click(function(){  
  15.                 $("p").toggleClass("hidden")  
  16.             })  
  17.         })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.  <body>  
  22.     <input type="button" value="切换样式" >  
  23.     <p>手握日月摘星辰,世间无我这般人</p>  
  24.  </body>  
  25. </html>  

4、判断样式hasClass()

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

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

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

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


zy408710468
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作dom简易留言板
lu__lala的博客
10-28 1236
1.编写内容实现留言并加删除键 如下 2.实现删除 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery.js"></script> </head> <body> ...
jQuery DOM节点操作
weixin_44540247的博客
04-30 489
DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素，然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。 而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个appe...
Jquery操作DOM对象
zhoutong2323的博客
02-28 501
HTML代码操作 演示案例 总结
七、 jQuery 操作 DOM
m0_72166275的博客
08-03 848
当网页被加载时，浏览器会创建当前网页的 DOM 对象。JavaScript 通过提供的方法对 DOM 节点进行操作，实现页面的交互；jQuery 提供了一系列操作 DOM 的方法；一方面简化了 JavaScript 操作 DOM的写法；另一方面解决了浏览器的兼容性问题。JavaScript 操作 DOM 分为三类，即 DOM Core(核心)、HTML-DOM 和 CSS-DOM，jQuery 操作 DOM 同样分为这三类。
jQuery操作Dom的总结
m0_68284186的博客
04-25 1355
jQuery操作DOM的总结
使用jquery操作DOM对象
诗人密语
10-27 2355
目录 1、DOM操作分类 2、jQuery中的DOM操作 ①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass() ②使用jQuery操作文本与属性值内容——html()、 text()、 val() ③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历 ④节点属性操作：attr() 、r...
JavaScript之jQuery操作DOM详解
qq_47897078的博客
01-19 903
JavaScript之jQuery操作DOM jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？ 答案当然是操作对应的DOM节点啦！ 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结
jquery之Dom操作
m0_72694993的博客
11-04 1007
().toggleClass("类名");语法格式：$().each(function(index,element){});jQuery对象.attr("属性名", "属性值");$("div").empty()清空div下的内容和元素。$("div").remove()删除所有div元素。$().css("属性名", "属性值");$().removeClass("类名");$().addClass("类名");$().css("属性名");$().html("内容");$().text("内容");
jquery操作DOM对象
qx020814的博客
07-28 490
通过replaceWith方法替换掉指定DOM。使用each方法可以遍历获取到的DOM元素。上面的代码时随机获取1-4的图片作为背景。通过attr方法改变DOM的属性值。判断文本框是否有过更新输入值，获取输入框类容，选中DOM对象。类似于JAVA的加强for循环。删除类时传入类名参数，参数一下标，从0开始。...
jquery 操作DOM的基本用法分享
10-28
jquery 操作DOM的基本用法分享，使用jquery的朋友可以参考下，方便以后对dom操作
jQuery操作DOM之获取表单控件的值
12-08
在jQuery中，操作DOM元素尤其是表单控件的值是一项常见的任务。表单控件，如文本输入框、选择列表等，它们的值在HTML属性和DOM属性中表现形式不同，因此在处理这些值时需要特别注意。这篇文章将详细介绍如何使用...
使用jQuery操作DOM的方法小结
10-20
本文主要介绍了使用jQuery操作DOM的方法，具有很好的参考价值，下面跟着小编一起来看下吧
jquery 操作DOM案例代码分享
01-19
实例如下： 代码如下: <style type=”text/css”> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
基于Springboot和Vue的物品租赁系统源码 物品租赁系统代码（高分毕设项目）
最新发布
07-28
物品租赁系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
jquery操作DOM
07-28
下面是一些常见的jQuery操作DOM的示例： 1. 选择元素： 使用jQuery选择器可以方便地选择DOM元素。例如，要选择id为"myElement"的元素，可以使用以下代码： ```javascript var element = $("#myElement"); ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值