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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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
判断PHP数组是否为空的代码
2011/09/08 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
Vue程序调试的方法
2019/06/17 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
土木工程专业个人求职信
2013/12/05 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
先进工作者获奖感言
2014/02/08 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers