JS学习十八：jQuery增删改查节点

创建节点，直接 $(selector)即可，相当于DOM中的document.createElement(selector)

一、插入节点

创建DOM的元素节点：

        <div id="box1">
        </div>
        <div id="box2"></div>
        <script type="text/javascript">
            //创建元素节点
            var $jsp = $("<p>abc</p>")
            console.log($jsp)
            //插入元素节点:append
            $("div").append($jsp)
        </script>

 

        <div id="box1">
        </div>
        <div id="box2"></div>
        <script type="text/javascript">
            //创建元素节点
            var $jsp = $("<p>abc</p>")
            console.log($jsp)
            //插入元素节点:append
            $("div").append($jsp)
            
            // 文本节点
            var $jsp2 = $("<p>aaaaaaaaa</p>")
            $("div").append($jsp2)
            
            // 属性节点
            var $jsp3 = $("<p title='nice'>bbbb</p>")
            $("div").append($jsp3)
        </script>

 

在元素内部插入节点的方法：

• append(content)：为所有匹配的元素的内部追加内容（在尾部添加）
• appendTo(content)：将所有匹配的元素添加到另一个元素集合中（内部），添加到尾部
• prepend()：为所有匹配的元素的内部添加内容（在头部添加）
• prependTo()：将所有匹配的元素添加到另一个元素集合中（内部），添加在头部

在元素外部插入节点的方法：

• after(content)：在所有匹配元素外部的后面添加内容
• before(content)：在所有匹配元素外部的前面添加内容
• insertAfter(content)：将所有匹配的元素，插入到指定元素外部的后面
• insertBefore(content)：将所有匹配的元素，插入到指定元素外部的前面

            // 文本节点
            var $jsp2 = $("<p>append.......</p>")
            // 将jsp2插入到div集合中
            $("div").append($jsp2)
            // 将jsp2插入到div集合中
            $jsp2.append($("div"))

 

        <div id="box1">
            <p>p1.........</p>
        </div>
        <script type="text/javascript">
            var $jsp1 = $("<p>prepend p...........</p>")
            var $box1 = $("#box1")
            // 在$box1元素内部,头部添加$jsp1
            $box1.prepend($jsp1)
            var $jsp2 = $("<p>after p...........</p>")
            $box1.after($jsp2)
            // $jsp2.insertAfter($box1)
            var $jsp3 = $("<p>befor p...........</p>")
            $box1.before($jsp3)
            // $jsp3.insertBefore($box1)
        </script>

 

 

二、删除节点

删除节点的方法：

remove()：用于从DOM中，删除匹配的元素，包括匹配元素的子元素。会把匹配的元素从JQ对象中删除。

detach()：用于从DOM中，删除匹配的元素，包括匹配元素的子元素。但是这个方法，不会把匹配的元素从JQ对象中删除。

empty()：该方法，并不是删除节点，而是将节点内容清空，包括清空元素中所有的后代节点。

        <div id="box1">
            <p>p1....<a>a1</a>.....</p>
            <p>p2.........</p>
            <p>p3.........</p>
        </div>
        <script type="text/javascript">
            var $p1 = $("#box1 p:first-child")
            // $p1.remove()  //$p1应该不可以再使用
            $p1.detach()
            // $p1.empty()
            console.log($p1)  
        </script>

 

 

三、复制节点

        <div id="box1">
            <p>p1.......</p>
            <p>p2...<a>a</a>......</p>
            <p>p3.........</p>
        </div>
        <script type="text/javascript">
            // 绑定click事件:点击的时侯,复制p1
            $("#box1 p:eq(1)").bind("click", function() {
                // this是DOM对象,$(this)将DOM对象的this转换为JQ对象的this
                // $(this).clone().insertAfter($(this))
                // 如果给clone加上true参数,会将事件处理程序也复制
                $(this).clone(true).insertAfter($(this))
            })  
        </script>

 

 

四、替换节点

replaceAll(selector)：使用指定的元素，替换掉所有匹配selector的元素

replaceWith(content)：使用content，替换掉指定的元素

        :div1
        <div id="box1">
        </div>
        :div2
        <div id="box2">
        </div>
        <script type="text/javascript">
            $("#box1").replaceWith("<div>newdiv</div>")
            $("<div>good</div>").replaceAll("div")
        </script>

 

五、遍历节点

        <div id="box2">
            <p> p1.....</p>
            <p> p2.....</p>
            <p> p3.....</p>
            <p> p4.....</p>
        </div>
        <script type="text/javascript">
            $("p").each(function(index){
                $(this).attr("title", "我是第" + (index + 1) +"个p标签")
            })
        </script>

 

六、包裹节点：.wrap()方法.....略