jQuery教程(6)-DOM树操作之移动元素

文章标签: jquery,jquery-dom
2014-12-29 20:07:49     11 人阅读    

移动元素
在back to top链接的例子中,我们创建了新元素并把它们插人到了页面上。此外,也可以取 得页面中某个位置上的元素,将它们插人到另一个位置上。动态地放置并格式化脚注,就是这种 插人操作在实际中的一种应用。现在,Flatland的原始文本中已经包含了一个这样的脚注,但为 了示范这种应用,下面我们还需要将文本其他几个部分指定为脚注:

<p>How admirable is the Law of Compensation! <span
class=MfootnoteM>And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland!</span>
By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.&hellip;
</p>


这个HTML文档中包含三个脚注,上面这个段落里包含一个。脚注的文本包含在段落的文本 中,通过<span class=__footnote__></span>隔开。通过以这种方式来标记HTML,能够保持 脚注在上下文中的关系。在为脚注应用了斜体样式规则后,这个段落的外观如图5-5所示。


图5-5
接下来,需要提取出这些脚注,然后把它们插人到文档的底部,具体来说,就是插人到<div
class=’’chapter’’>^<div id = ’’footer’’〉之间。
不过,这里我们要记住的一点是,即使是在隐式迭代的情况下,插人的顺序也是预定义的, 即从DOM树的上方开始向下依次插人。由于维持脚注在页面上新位置中的顺序很重要,所以我 们应该使用.insertBefore(’#footer’)。这样,footnote 1 会被放S<div class= "chapter"〉 :^<div id=__footer__>之间,footnote 2会被放在footnote 1^P<div id=__footer__>之间,然后 依此类推。但是,如果在这里使用.insertAfter(’div.chapter’),那么脚注的次序就会颠倒。 因此,当前的代码应该如代码清单5-9所示。


代码清单5-9

$(document).ready(function() {
$('span.footnote').insertBefore('#footer');
});


由于脚注放在<span>标签中,这就意味着它们在默认情况下应该显示为行内盒子,因此会导 致这3个脚注前后相连,从视觉上无法将它们区分开来。不过,我们已经使用CSS解决了这个问题, 即将处T<div class=__chapter__> 外部的span.footnote 兀素的display 属性设置为block。 这样,我们的脚注就具备了雏形,如图5-6所示。
至少,它们现在可以从视觉上明显地分开。然而,围绕这些脚注还有很多后续工作要做。更 加健壮的一种脚注方案应该:


为每个标注编号;
在正文中标出提取脚注的位置,使用脚注的编号;
在文本中的位置上创建一个指向对应脚注的链接,在脚注中创建返回文本位置的链接。

图5-6


原文地址:http://www.itmmd.com/201412/410.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(7)-DOM树操作之包装元素   上一篇
下一篇  Java程序常用算法 验证 IP 地址的有效性

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!