jQuery教程(11)-DOM树操作之DOM操作方法的简单归纳

对于jQuery提供的大量DOM操作方法,应该根据要完成的任务和元素的位置作出不同的选 择。本章只介绍了一部分DOM操作方法,但其他方法的使用与这些方法类似;第12章还将更全 面地讨论DOM操作方法。下面,我们简单地归纳出一些方法,这些方法几乎能够在任何情况下, 完成任何任务。

jQuery学习笔记二:DOM操作

本次主要练习dom操作,包括:dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件 代码如下:

jQuery教程(10)-DOM树操作之内容setter和getter方法

dom内容setter和getter方法 如果能够对突出引用稍作修改,去掉一些文本并代之以省略号,那么效果会更好。为此,我 们在例子文本中已经将某些文本包装在了 X素中。 实现这种替换的最简便方式,就是直接用新的HTML代替旧的内容。此时,就要用到.html() 方法了,参见代码清单5-19。

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

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

jQuery教程(8)-DOM树操作之使用反向插入方法

使用反向插入方法 在代码清单5-12中,我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现 在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。

jQuery教程(7)-DOM树操作之包装元素

包装元素 脚注的编号可以直接在标记中添加,但在这里我们要利用标准的有序列表来生成序号。为此, 需要先创建一个用于包装所有脚注的<〇1>元素,并为每个脚注分别创建一个
  • 元素。这时候 就要用到包装方法了。
  • jQuery教程(6)-DOM树操作之移动元素

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

    jQuery教程(5)-DOM树操作之插入新元素

    插入新元素 jQuery提供了很多将元素插人到文档中的方法。每一种方法的名字都表明了新内容与已有内 容之间的关系。例如,我们想把back to top链接插人到每个段落后面,因此就可以使 用.insertAfter()方法,参见代码清单5-7。

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

    DOM树操作 刚才介绍的.attr()和.prop()方法都是在修改文档时的得力工具。但我们还没有涉及怎样 修改DOM文档的结构。要想操作DOM树本身,需要再深人了解一下jQuery库的核心函数。

    jQuery教程(2)-操作DOM之DOM元素属性

    我们曾在前面简单提到过,HTML属性与DOM属性有一点区别。HTML属性是指页面标记中 放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值。如图5-2所示,通过Chrome 的开发人员工具可以看到HTML属性和DOM属性值。

    jQuery教程(1)-操作DOM之操作属性

    所谓Web体验,就是Web服务器与Web浏览器之间合作的结果。过去,都是由服务器生成 HTML文档,然后浏览器负责解释并显示该文档。后来,正如我们所看到的,这种情况发生了变化,我们可以用CSS技术来动态修改页面的外观。然而,要想把JavaScript的威力真正发挥出来, 还得学会修改文档本身。
    共11 条  1/1页  首页  上一页  下一页  尾页  转到: Go