jQuery技术

DOM树操作之复制元素

字号+ 作者:H5之家 来源:H5之家 2018-03-07 17:03 我要评论( )

萌萌的IT人

jQuery教程(9)-DOM树操作之复制元素

文章标签: jquery,jquery-dom

2015-1-6 13:11:45     39 人阅读    

复制元素
          本章到目前为止已经示范的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到复制元素的操作。例 如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上。实际上,无论何时,只要能通 过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会。毕竟,如果能够只编写一次 代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会呢?
         在复制元素时,需要使用jQuery的.cl〇ne()方法,这个方法能够创建任何匹配的元素集合 的副本以便将来使用。与本章前面使用$()创建元素时一样,在为复制的元素应用一种插人方法 之前,这些元素不会出现在文档中。

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

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


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

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


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

连同事件一起复制

       在默认情况下,.clone()方法不会复制匹配的元素或其后代元素中绑定的 事件。不过,可以为这个方法传递一个布尔值参数,将这个参数设置为true, 就可以连同事件一'起复制,即.clone(true)。这样一'来,就可以避免每次复制 之后还要手工重新绑定事件的麻烦(第3章曾讨论过)。
通过复制创建突出引用很多网站都和它们的印刷版一样,使用了突出引用(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>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样式, 参见代码清单5-17。
代码清单5-17

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


          这里,我们同样把需要多次用到的选择符表达式保存在变量$parentParagraph中,以提升 性能和可读性。
         接下来就是创建突出引用本身,以便利用准备好的CSS样式。此时,我们先复制每个<span> 元素,然后为得到的副本添加pulled类,最后再把这个副本插人到其父段落的开始处,参见代 码清单5-18。
代码清单5-18

$(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); }); });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery Address全站 AJAX 完整案例详解

    jQuery Address全站 AJAX 完整案例详解

    2018-03-10 08:01

  • JQuery实战视频教程[完整][基础]

    JQuery实战视频教程[完整][基础]

    2018-03-07 10:10

  • 前端分页功能的实现以及原理(jQuery)

    前端分页功能的实现以及原理(jQuery)

    2018-02-16 15:00

  • JavaScript 开发的40个经典技巧 前端开发,JQUERY特效,全栈开发

    JavaScript 开发的40个经典技巧 前端开发,JQUERY特效,全栈开发

    2018-02-16 15:00

网友点评
s