开发者社区> 文顶顶.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery系列 第七章 jQuery框架DOM操作

简介: 第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象。 7.1 创建DOM节点 使用JavaScript原生方式创建DOM节点并添加到页面中的代码示例: 1 //01 创建DOM节点 2 var oDiv = document.
+关注继续查看

第七章 jQuery框架的选择器

jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象。

7.1 创建DOM节点

使用JavaScript原生方式创建DOM节点并添加到页面中的代码示例:

1 //01 创建DOM节点
2  var oDiv = document.createElement("div");
3  //02 设置DOM节点的内容
4  oDiv.innerText = "测试的DIV标签";
5  //03 把节点添加到页面中
6  document.body.appendChild(oDiv);

使用jQuery框架创建DOM节点并添加的代码示例:

1 //01 创建DOM节点
2  var oDom = $("<div></div>");
3  //02 设置DOM节点的内容
4  oDom.text("测试的div标签");
5  //02 把DOM节点添加到页面中
6  $("body").append(oDom);

更简单的创建及添加方式:
$("body").append($("<div>我是测试的div标签</div>"));

说明

【1】jQuery框架简化了DOM操作,直接使用jQuery构造函数$()来创建标签,在创建标签的时候只需要把HTML字符串传递给函数,jQuery框架会根据参数的内容来创建标签并包装成一个jQ实例对象返回。

【2】要明白jQuery框架的DOM操作本身是对JavaScript原生方式进行的封装,所以相对原生的DOM操作而言效率更低

7.2 插入DOM节点

jQuery框架中提供了多个插入DOM节点的方法,我们可以通过调用这些方法方便的实现节点的插入操作。

在JavaScript原生的DOM操作中,我们通常使用appendChild和insertBefore方法来实现插入操作,下面的具体的代码示例。

 1 <body>
 2 <div>我是div标签1</div>
 3 <div>我是div标签2</div>
 4 <script>
 5     //appendChild方法使用
 6     //01 创建p标签
 7     var oP = document.createElement("p");
 8     oP.innerHTML = "我是p标签";
 9     //02 获取页面中第一个div标签
10     var oDiv1 = document.getElementsByTagName("div")[0];
11     //03 使用appendChild方法添加
12     //把p标签插入到oDiv1标签内容的后面
13     oDiv1.appendChild(oP);
14     //insertBefore方法使用
15     var oDiv2 = document.getElementsByTagName("div")[1];
16     //把p标签插入到oDiv2标签内容的前面
17     oDiv2.insertBefore(oP,oDiv2.firstChild);
18 </script>
19 </body>

jQuery框架中为我们提供了四个方法来提供对应的功能,它们分别是:
[1]append方法:向每个匹配的元素内部追加内容。
[2]appendTo方法:把所有匹配的元素追加到另一个指定的元素集合中,和append方法相反。
[3]prepend方法:向每个匹配的元素内部前置内容。
[4]prependTo方法:把所有匹配的元素前置到另一个指定的元素集合中,和append方法相反。

插入方法的代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jQuery框架/jquery-2.0.0.js"></script>
 7 </head>
 8 <body>
 9 <div class="cur">我是div1</div>
10 <div>我是div2</div>
11 <div>我是div3</div>
12 <ul>
13     <li>我是第1个li</li>
14     <li>我是第2个li</li>
15     <li>我是第3个li</li>
16     <li>我是第4个li</li>
17     <li>我是第5个li</li>
18 </ul>
19 <button>按钮</button>
20 <script>
21     $(function () {
22         $("button").click(function () {
23             //appendTo:把页面中所有的li标签都插入到所有的div标签内容的后面
24             //$("li").appendTo($("div"));
25             //append:把页面中所有的div标签都插入到所有的li标签内容的后面
26             //$("li").append($("div"));
27             //prependTo:把页面中所有的li标签都插入到所有的div标签内容的前面
28             //$("li").prependTo($("div"));
29             //prepend:把页面中所有的div标签都插入到所有的li标签内容的前面
30             //$("li").prepend($("div"));
31         })
32     })
33 </script>
34 </body>
35 </html>

jQuery框架中还提供了多个外部插入内容的方法,它们分别是:
[1]after方法:在每个匹配的元素之后插入内容。
[2]before方法:在每个匹配的元素之前插入内容。
[3]insertAfter方法:把所有匹配的元素插入到另一个指定的元素集合的后面。
[4]insertBefore方法:把所有匹配的元素插入到另一个指定的元素集合的前面。

7.3 删除DOM节点

JavaScript原生的DOM操作中可以使用removeChild方法来删除指定的节点以及其包含的所有子节点,并返回这些删除的内容。

jQuery框架中定义了3个删除内容的方法:它们分别是remove()、empty()和detach()。

remove方法能够将匹配的元素从DOM中删除。
empty方法用来清空元素包含的内容,该方法没有参数。
detach方法能够将匹配的元素从DOM中分离出来。

注意

[1] 删除和清空是两个概念,清空操作执行后该标签还存在。

[2] detach方法和remove方法差不多,但detach方法能够保存所有jQuery数据与被移走的元素相关联,所有绑定在元素上的事件、附加的数据等都会保存下来。如果您在移走一个元素不久后,又需要将该元素重新插入DOM,那么推荐使用detach方法。

7.4 复制和替换DOM节点

① 节点的复制

在JavaScript原生方式操作DOM节点时,可以使用cloneNode方法来复制节点,具体的语法如下:

语法:nodeObject.cloneNode(include_all)
参数:

include_all参数本身为布尔类型的值。

  • 如果为true,那么将会复制原有的节点以及所有的子节点。
  • 如果为false,那么紧紧复制节点本身。

jQuery框架中,使用clones方法来复制节点,具体的语法如下:

语法:jQ.clone([widthDataAndEvents],[deepWithDataAndEvents])
参数:
clone方法的两个参数都是可选的布尔值,如果不传递则默认全部为false。

  • widthDataAndEvents参数表示是否复制该节点的事件处理数据。
  • deepWithDataAndEvents参数表示是否复制子元素的事件处理数据。

② 节点的替换

在原生的DOM操作中,可以使用replaceChild方法来替换节点。
语法:nodeObject.replaceChild(new_node,old_node)
参数说明:new_node为指定的新节点,old_node为被替换的节点。如果替换成功,那么会返回被替换的节点,如果替换失败,那么会返回null。

jQuery框架中定义了replaceWith和replaceAll方法来替换节点。

[1] replaceWith方法

语法:jQ.replaceWith(newContent)
说明:replaceWith方法能够将所有匹配的元素都替换成指定的HTML或者是DOM元素。
示例:$("p").replaceWith("<div>我是DIV标签<div>")

[2] replaceAll方法

语法:jQ.replaceAll(selector)
说明:replaceAll方法和replaceWith是一对相反的操作。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值、select取值、radio选中、checkbox选中、select选中及其相关: 1、影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐藏,一句话就搞定了,请看下面使用说明。
1148 0
15款最好的 jQuery Modal(模态窗口)插件
  jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方。模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口。这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件注册,表单等场合。
1720 0
让网站动起来!12款优秀的 jQuery 动画插件推荐
  如今,大多数设计师和开发人员被要客户要求开发动态的网站。创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力。在网络上有大量的工具和插件可用于创建网站动画。许多开发人员正在使用 HTML5 和 jQuery 提供的最新功能来创建创建和实现震撼的视觉效果。
1148 0
网站开发中很实用的 HTML5 & jQuery 插件
  这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的。这些优秀的 jQuery 插件能为你的网站提供各种各样强大的功能和效果。
1231 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
文顶顶.
JavaScript专家、技术讲师 关注前端开发和移动端开发
196
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载