JQuery学习记录——操作DOM

1、创建节点：   $("父节点").append("子节点")；

demo：

    var $li = '<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎">绿叶学习网</a></li>';

   $("ul").append($li);

 

2、插入节点

（1）append()：demo：$(A).append(B)；——表示将B插入A内部的“末尾”

          appendTo()：demo：$(A).appendTo(B) ——表示将A插入B内部的“末尾”

（2）prepend()：表示向所选元素内部的“开始”插入节点。

         demo：$(A).prepend(B)——表示在A内部的“开始”插入B。

         prependTo()：demo：$(A).prependTo(B)——表示在B内部的“开始”插入A。

（3）before()：表示在所选元素外部“之前”插入节点。

         demo：$(A).before(B)——表示在A外部“之前”插入B。

         insertBefore()：demo：$(A).insertBefore(B)——)表示在B外部“之前”插入A。

 （4）after()：表示在所选元素外部“之后”插入节点。

           demo：$(A).after(B)——表示在A外部“之后”插入B。

           insertAfter()：demo：$(A).insertAfter(B)——在B外部“之后”插入A。

 

3、删除节点

（1）remove()：$(A).remove()

          demo：$("ul li:eq(3)").remove();

        该方法可以返回一个值，返回值类型为删除的jQuery节点对象。也就是说，虽然这个节点被删除了，但是还可以通过返回值来再次使用这个对象。可以使用该对象进行元素的交换

        

（2）detach()： demo：$(A).detach()

         remove()方法是“彻底”地删除元素。也就是说使用remove()方法，不仅元素会被删除，所绑定的事件都会被删除。

         detach()方法是“半彻底”地删除元素，也就是说使用detach()方法，只有元素被删除，所绑定的事件并不会删除。

         总结：当我们删除节点后，如果希望重新使用该节点，并且希望被删除的节点在重新使用后还能保留原来绑定的事件，那我们应该使用detach()而不是remove()。

 

（3）empty()：清空元素内部的所有节点。

         demo：$("ul li:eq(3)").empty();

   remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。

 

4、复制节点

          clone()：demo：$(A).clone()       

         其中clone()方法有一个布尔参数，默认值为false。

         $(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。

         $(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。

         demo：$(this).clone().appendTo("ul");

 

5、替换节点

（1）replaceWith()

   demo：$(A).replaceWith(B)——表示用B来替换A。

（2）replaceAll()

         demo：$(A).replaceAll(B)——表示用A来替换B。

         如果在替换节点之前，我们已经为元素绑定事件了，使用replaceWith()或replaceAll()之后，该元素所绑定的事件会消失。因此我们如果想要保留事件的话，则需要在新元素上重新绑定事件。

 

6、包裹节点
（1）wrap()

         demo：$("strong").wrap("<em></em>")——表示将strong元素使用em元素包裹起来。

 （2）wrapAll()

         demo：$("p").wrapAll("<div></div>")——使用一个div将所有的p标签包裹起来

         wrapAll()跟wrap()这两种方法的作用是不等价的。wrap()方法是将所有元素进行单独的包裹，但是wrapAll()会将所有匹配的元素用一个元素来包裹。

（3）wrapInner()

         demo：$(A).wrapInner(B)——将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）。

 

7、遍历节点

$().each(function(index){

    ……

})

       该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）。如果需要访问元素中的属性，可以借助形参index，然后配合this关键字来实现元素属性的获取和设置。

demo：

$("li").each(function (index) {

    var txt = arr[index];

    $(this).text(txt);

});