jQuery教程(4)-DOM树操作之创建新元素

文章标签: jquery-dom,jquery
2014-12-28 20:27:26     17 人阅读    

DOM树操作
刚才介绍的.attr()和.prop()方法都是在修改文档时的得力工具。但我们还没有涉及怎样 修改DOM文档的结构。要想操作DOM树本身,需要再深人了解一下jQuery库的核心函数。
 重新认识$()函数
从本书开始到现在,我们一直在使用$()函数来访问文档中的元素。这个函数就像一个工厂, 它能够生成一个jQuery对象,指向CSS选择符所描述的一组元素。
然而,除了选择元素之外,$()函数的圆括号内还有另外一个玄机一这个强大的特性使得 $()函数不仅能够改变页面的视觉外观,更能改变页面中实际的内容。只要在这对圆括号中放人 一组HTML元素,就能轻而易举地改变整个DOM结构。
关于可访问性的提示


再次重申,无论什么时候都不应该忘记,我们添加的所有功能、视觉效果 或者文本性的信息,只有在可以使用(并启用了)JavaScript的Web浏览器中才能 正常有效。但是,重要的信息应该对所有人都是可以访问的,而不应该只针对 使用了正确的软件的人。

创建新元素


在FAQ页面中,一个常见的功能是出现在每一对“问题-答案”后面的backto top (返回页面 顶部)链接。通常,这些链接并没有语义上的价值,因而可以合理地通过JavaScript来生成它们, 将它们作为访问者所浏览页面的一个增强的子功能。在我们的例子中,需要为每个段落后面添加 一个backto top链接,而且,也需要添加作为backto top链接返回目标的铺。首先,我们来创建新 元素,参见代码清单5-6。
代码清单5-6
//未完成的代码
$(document).ready(function() {
$('<a href=M#topM>back to top</a>');
$('<a id="top"></a>');


});
第一行代码中创建了 backto top链接,而第二行代码则为这个链接创建了一个作为目标的锚。 但是,页面中还没有出现back to top链接。图5-3是此时页面的外观。


图5-3
虽然前面的两行代码创建了新的元素,但是还没有把它们添加页面中。为此,我们可以选择 使用jQuery提供的众多插人方法中的一种。


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

jQuery教程(5)-DOM树操作之插入新元素   上一篇
下一篇  产品经理学习笔记(15)-定期整理和总结反馈内容

精彩回复
发表评论
姓名:       

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