第七章 jQuery框架的选择器

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

7.1 创建DOM节点

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

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

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

 //01 创建DOM节点
var oDom = $("<div></div>");
//02 设置DOM节点的内容
oDom.text("测试的div标签");
//02 把DOM节点添加到页面中
$("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方法来实现插入操作,下面的具体的代码示例。

 <body>
<div>我是div标签1</div>
<div>我是div标签2</div>
<script>
//appendChild方法使用
//01 创建p标签
var oP = document.createElement("p");
oP.innerHTML = "我是p标签";
//02 获取页面中第一个div标签
var oDiv1 = document.getElementsByTagName("div")[0];
//03 使用appendChild方法添加
//把p标签插入到oDiv1标签内容的后面
oDiv1.appendChild(oP);
//insertBefore方法使用
var oDiv2 = document.getElementsByTagName("div")[1];
//把p标签插入到oDiv2标签内容的前面
oDiv2.insertBefore(oP,oDiv2.firstChild);
</script>
</body>

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

插入方法的代码示例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery框架/jquery-2.0.0.js"></script>
</head>
<body>
<div class="cur">我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
<button>按钮</button>
<script>
$(function () {
$("button").click(function () {
//appendTo:把页面中所有的li标签都插入到所有的div标签内容的后面
//$("li").appendTo($("div"));
//append:把页面中所有的div标签都插入到所有的li标签内容的后面
//$("li").append($("div"));
//prependTo:把页面中所有的li标签都插入到所有的div标签内容的前面
//$("li").prependTo($("div"));
//prepend:把页面中所有的div标签都插入到所有的li标签内容的前面
//$("li").prepend($("div"));
})
})
</script>
</body>
</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系列 第七章 jQuery框架DOM操作的更多相关文章

  1. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  2. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  3. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  4. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  5. jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  6. jQuery原生框架-----------------dom操作

    // 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 ...

  7. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  8. jQuery简单介绍及基本用法(选择器&DOM操作)

    简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...

  9. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. Linux centos 7 安装NFS服务

    NFS服务简介:NFS是Network File System的缩写,即网络文件系统.客户端通过挂载的方式将NFS服务器端共享的数据目录挂载到本地目录下.---主要功能指的是共享文件 为什么要安装NF ...

  2. 【SSH/SFTP】SSH协议和SFTP

    [SSH和SFTP] ■ 设置一个只允许访问部分目录的SFTP服务器 由于SSH和SFTP之间的紧密联系,一个SFTP服务器必然会导致开放一定的SSH服务,而SSH的风险显然比SFTP要大一些.自然, ...

  3. 【Python】 迭代器&生成器

    迭代器 任何一个类,只要其实现了__iter__方法,就算是一个可迭代对象.可迭代对象的__iter__方法返回的对象是迭代器,迭代器类需要实现next方法.一般来说,实现了__iter__方法的类肯 ...

  4. java开源安全框架-------Apache Shiro--第二天

    身份验证 即在应用中谁能证明他就是他本人.一般提供如他们的身份ID一些标志信息来表明他就是他本人,如提供身份证.用户名.密码来证明 在shiro中,用户需要提供principals(身份)和crede ...

  5. 涉及模式之 装饰器模式详解(与IO不解的情缘)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. LZ到目前已经写了九个设计模 ...

  6. SuperMap iClient 查询成功后如何传递参数?

    一.iClient API文档中的接口描述 二.范例 //定义一个this对象 this.param = new SuperMap.LonLat(point.x, point.y); querySer ...

  7. 1.由浅入深解析 SimpleDateFormat

    一.SimpleDateFormat简介 SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (date -> text).语法分析 (text - ...

  8. Spark Job的提交与task本地化分析(源码阅读)

    Spark中任务的处理也要考虑数据的本地性(locality),Spark目前支持PROCESS_LOCAL(本地进程).NODE_LOCAL(本地节点).NODE_PREF.RACK_LOCAL(本 ...

  9. 201621123062《java程序设计》第十周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 思维导图: 2. 书面作业 本次PTA作业题集异常 2.1. 常用异常 结合题集题目7-1回答 2.1.1 自己以前 ...

  10. 城市安全风险管理项目Postmortem结果

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 本系统希望实现快速识别危害因素,使工作人员对风险作出准确的评估.即让使用者熟悉潜在的危险因素,知道 ...