jQuery中DOM树操作之复制元素的方法


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下:

复制元素

前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到复制元素的操作。例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上。实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会。毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会呢?

在复制元素时,需要使用jQuery的.clone()方法,这个方法能够创建任何匹配的元素集合 的副本以便将来使用。与前面使用$()创建元素时一样,在为复制的元素应用一种插人方法 之前,这些元素不会出现在文档中。

例如,下面这行代码将创建<div class="chapter">中第一段落的副本:

$('div.chapter p:eq(0)').clone();

但仅创建副本还不足以改变页面的内容。要想让复制的内容显示在网页中,可以使用插人方 法将其放到 <div class=__chapter__> 前面。

$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');

这样,同一个段落就会出现两次。可见,.clone()与插人方法的关系就如同复制和粘贴一样。

连同事件一起复制

在默认情况下,.clone()方法不会复制匹配的元素或其后代元素中绑定的 事件。不过,可以为这个方法传递一个布尔值参数,将这个参数设置为true, 就可以连同事件一'起复制,即.clone(true)。这样一'来,就可以避免每次复制 之后还要手工重新绑定事件的麻烦。

通过复制创建突出引用很多网站都和它们的印刷版一样,使用了突出引用(pullquote)来强调小块的文本并吸引读 者的眼球。所谓突出引用,就是从正文中提取一部分文本,然后为这段文本应用特殊的图形样式。 通过.clone()方法可以轻而易举地完成这种装饰效果。首先,我们来看一看例子文本的第三段:
<p>
<span class="pull-quote">It is a Law of Nature <span class=MdropM>with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.
</p>

我们注意到这个段落W<span class="pull-quote">X素开始,其中的类是为了复制而 准备的。当把复制的<span>*的文本粘贴到其他位置上时,还需要修改它的样式属性,以便它 与原来的文本区别开来。
要实现这种样式,需要为复制的<3。3。>添加一个pulled类,并在样式表中为这个类添加如 下样式规则:

.pulled {

position: absolute; width: 120px; top: -20px; right: -180px; padding: 20px;

font: italic 1.2em "Times New Roman", Times, serif; background: #e5e5e5; border: 1px solid #999; border-radius: 8px;

box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);

}

这样,就为pull-quote添加了浅灰色的背景、一些内边距和不同的字体。更重要的是将它 绝对定位到了在DOM中(绝对或相对)定位的最近祖先元素的上方20px、右侧20px。如果祖先 兀素中没有应用定位(除了static)的兀素,那么pull-quote就会相对于文档中的<body>兀素 定位。为此,需要在jQuery代码中确保复制的pull-quote的父兀素应用了 position:relative 样式。

计算CSS位置

虽然pull-quote盒子的上沿位置比较直观,但说到它的左边位于其定位的 父元素右侧20像素时,恐怕就没有那么好理解了。要得到这个数字,需要先计算 pull-quote盒子的总宽度,即width属性的值加上左右内边距,或者说145px + 5px + 10px,结果是160px。当为pull-quote设置right属性时,值为0会使 pull-quote的右边与其父元素的右边对齐。因此,要使它的左边位于父元素右 侧20px,需要在相反的方向上将它移动比其总宽度多20px的距离,即-180px。

现在我们再回到jQuery代码中,看看怎么应用样式。首先,从匹配所有<span class= "pull-quote">元素的选择符表达式开始,然后为选择的元素应用position:relative样式, 参见如下代码:

$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');

});

});

这里,我们同样把需要多次用到的选择符表达式保存在变量$parentParagraph中,以提升性能和可读性。

接下来就是创建突出引用本身,以便利用准备好的CSS样式。此时,我们先复制每个<span> 元素,然后为得到的副本添加pulled类,最后再把这个副本插人到其父段落的开始处,参见如下代码:

$(document).ready(function() {

$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $clonedCopy = $(this).clone();

$clonedCopy

.addClass('pulled')

.prependTo($parentParagraph);

});

});

这里,我们又定义了一个新变量$clonedCopy,以便后面使用。
因为前面已经为这个复制的元素设置了绝对的定位,因此它在段落中的位置是无所谓的。根据CSS规则中的设置,只要它处于这个段落的内部,它就会相对于段落的上边和右边进行定位。 目前,段落与其中插人的突出引用的外观如下图所示:

jQuery中DOM树操作之复制元素的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
Vue异步加载about组件
Oct 31 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
React key值的作用和使用详解
Aug 23 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
使用angular写一个hello world
Jan 23 #Javascript
Javascript中的几种URL编码方法比较
Jan 23 #Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
进一步了解Python中的XML 工具
2015/04/13 Python
python3序列化与反序列化用法实例
2015/05/26 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python列表切片操作实例总结
2019/02/19 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python urllib爬虫模块使用解析
2019/09/05 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
交通事故委托书范本
2014/09/28 职场文书
党员自评材料范文
2014/12/17 职场文书
自荐信大全
2019/03/21 职场文书