脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquerry：jquery中的DOM操作<一>，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 之前两天学习了jquery强大的选择器，今天学习了一部分Jquery对DOM的操作，下面我将把自己今天的成果分享给大家，那些菜鸟们，你们是否需要巩固之前所学？

&nbsp;

    首先需要知道，DOM操作分为3个方面：DOM Core、HTML-DOM、CSS-DOM。我们很多情况下用到的getElementById()、getElementByTagName()、getAttribute()和setattribute()等方法都是DOM Core的组成部分。而document.forms(获取表单对象)、element.src(获取元素的src属性)是HTML-DOM中的方法，这是我以前没用过的。element.style.coler="red"这种对获取style各种属性的方法则属于CSS-DOM。

 

    Jquery中的DOM操作包括以下部分

 

    1、查找节点

 

      查找元素的节点：这是我们之前介绍过的选择器实现的功能。

 

      查找属性节点：当获取到元素的节点后，若是想要获取该元素的相关属性，可使用Jquery中的attr()方法，这个方法中需要的参数是想要查找的属性的名称，例如tITle。

 

    2、创建节点

 

    插入节点的方法有以下几种：

 

    例：<p> world </p>

 

    apPEnd():向匹配元素内部追加内容。$("p").append("<b> hello </b>"),结果是：<p> world <b> hello </b></p>。

 

    appendTo():将匹配元素追加到指定元素中。$("<b> hello </b>").append("p")，结果是：<p> world <b> hello </b></p>。

 

    PRepend():向每个匹配元素中前置内容。$("p").prepend("<b> hello </b>")，结果是：<p><b> hello </b> world </p>。

 

    propendTo():将匹配元素前置到指定元素中。$("<b> hello </b>").prepend("p")，结果是：<p><b> hello </b> world </p>。

 

    after():在每个匹配元素之后插入内容。$("p").after("<b> hello </b>"),结果是：<p> world <b> hello </b></p>。

 

    insertAfter():将匹配元素插入到指定元素的后面。$("<b> hello </b>").after("p"),结果是：<p> world <b> hello </b></p>。

 

    before():在每个匹配元素之前插入内容。$("p").before("<b> hello </b>"),结果是：<p><b> hello </b> world </p>。

 

    insertBefore():将匹配元素插入到指定元素的前面。$("<b> hello </b>").insertBefore("p"),结果是：<p><b> hello </b> world </p>。

 

    另插入的元素中可以包含文本和属性：$("p").append("<span title=&#39;hello'> hello </span>")。

 

    3、删除节点

 

    删除节点的方法有三种：remove()、detach()、empty()。

 

    remove():VAR delLi = $("ul li:eq(1)").remove()。删除ul下第二个li节点。使用remove()删除节点后，被删除的节点的子节点也会被删除，这个方法的返回值是指向被删除节点的引用，所以可以利用返回值再添加此节点。

 

    detach():此方法和remove()用法相同，它们的区别在于detach()删除节点后，再添加此节点，该节点原有的事件、绑定的数据都会保留下来。

 

    empty():$("ul li:eq(1)").empty(),这个方法严格来说不是一个删除的方法，它是清空节点的方法。它能清空选中节点的所有子节点。

 

    4、复制节点

 

    复制节点使用的方法是clone()。$("ul li").clone().appendTo("ul") 注：复制ul中所有li节点，并将复制的节点添加到ul中，这样，在ul中就有了两份原有的li节点了！

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquerry：jquery中的DOM操作<一>全部内容，希望文章能够帮你解决javascript代码实例教程-Jquerry：jquery中的DOM操作<一>所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。