Jquery——DOM学习(元素节点）

首先是学习文件HTML

<html>
    <head>
        <title>测试用</title>
        <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            window.onload=init;
            function init(){
            }
        </script>
    </head>
    <body>
        <p title="选择你喜欢的水果">你最喜欢哪一个</p>
        <ul>
            <li tilte="苹果">苹果</li>
            <li tilte="梨">梨</li>
            <li tilte="桃子">桃子</li>
        </ul>

    </body>
</html>

一、查找元素节点：

例如查找桃子这个节点元素中的文本节点

                var $li=$("ul li:eq(2)");
                var e_txt=$li.text();
                alert(e_txt);

其中 li:eq(index)表示选择第几个<li>

li.text(),返回节点元素的文本节点的内容。

二、查找属性节点

查找 <p>中属性title的值。

                var $p=$("p");
                var para=$p.attr("title");
                alert(para);

.attr(attributeName) 返回第一个匹配的属性的值，只能返回单值。

三、创建元素节点与文本节点

                var $li_1=$("<li>葡萄</li>");
                var $li_2=$("<li>樱桃</li>");
                $("ul").append($li_1).append($li_2);

思路是通过$(html)来创建好元素节点的，然后赋值给一个变量，然后再对应的元素节点下面通过.append(centet)加入，由于.append(content)返回的对象是JQuery，所以可以使用链式添加。注意.append(content)是在末尾添加而不是头部。

四、创建属性节点

思路是相同的。

                var $li_1=$("<li title='葡萄'>葡萄</li>");
                var $li_2=$("<li title='樱桃'>樱桃</li>");
                $("ul").append($li_1).append($li_2);
                var $li=$("ul li:eq(3)");
                alert($li.attr("title"));

五、插入节点

常见的有几个方法

.append():插入到匹配元素的的后端

.appendTo()：a.appendTo(b) a插入到b后面

.prepend()：插入到匹配元素的前段

.preprendTo()：a.preprendTo(b) a插入到b的前面

.after()：在每个匹配元素之后插入内容

.insertAfter()：将所有匹配元素插入到指定元素的后端

.befer()：在每个匹配元素之前插入内容

.insertBefer()：将所有匹配元素插入到指定元素的前端

六、删除节点

$("ul li:eq(1)").remove()

用.remove()删除节点的同时也把该节点所有的后代节点也删除掉了，但是返回值是删除的所有内容.

若把返回值赋值给一个变量的话，还可以随时加入这个节点。

.empty()其实清空节点，清空节点中的内容。

$("ul li:eq(1)").empty()

七、复制节点

假若在商城中你看到的不错的商品，可以单击图片并拖动到你的购物篮中，这个的原理，就是复制商品节点的所有内容，然后加载到你的购物篮中的节点。

                $("ul li").click(function(){
                    $(this).clone().appendTo("ul");

                });

这个功能就是复制节点的功能，但是复制出来的节点不具备复制的功能。如果想要其复制的功能传递给新生成的节点则应该在为

                $("ul li").click(function(){
                    $(this).clone(true).appendTo("ul");

                });

八、替换节点

一共有两个方法，replaceWith(),replaceAll()这两个方法的不同点在如下：

替换的内容.replaceAll(被替换的内容);

被替换的内容.replaceWith(替换的内容);

                var $p=$("p");
                $("<p>你好</p>").replaceAll($p);

九、包裹节点

$("p").wrap("<b></b>");//把<p>标签用<b>标签包裹起来

新加入的标签包裹在存在标签的外面的方法有$(exist).wrap(new),或者$(exist).wrapAll(new)一个是替换指定的，一个是替换全部的

新加入的抱歉包裹在存在标签的里面的方法有：$(exist).wrapInner(new)

posted on 2011-07-31 17:07  帘  阅读(1762)  评论(0)  编辑  收藏  举报

导航