jQuery节点操作

添加节点相关方法

在元素内部添加

• append()方法和appendTo方法

  • 语法不同：

    • $('ul').append($li);
      

    • $li.appendTo('ul');
      

  • 效果相同：都是在指定元素内部的最后一个元素之后添加元素。

• prepend()方法和prependTo()方法

  • 语法不同：

    • $('ul').prepend($li);
      

    • $li.prependTo('ul');
      

  • 效果相同：都是在都是在指定元素内部的第一个元素之前添加元素。

在元素外部添加

• after()方法和insertBefore()方法

  • 语法不同：

    • $('ul').after($li);
      

    • $li.insertBefore('ul');
      

  • 效果相同：都是在指定元素外部的后面添加新节点。

• before()方法和insertAfter()方法

  • 语法不同：

    • $('ul').before($li);
      

    • $li.insertAfter('ul');
      

  • 效果相同：都是在指定元素外部的前面添加新节点。

删除节点相关方法

• $.remove()，移除指定元素
• $.empty()，清空指定元素的内容和子元素
• $.detach(),移除指定元素，效果和remove()方法一样

替换节点相关方法

• $.replaceWith()和$.replaceAll()

  • //1.创建一个h6标题元素
    var $h6 = $('<h6>我是标题6</h6>')
    //2.将页面中的h2标题替换为h6标题元素
    $('h2').replaceWith($h6)
    //3.将页面中h2标题为h6
    $h6.replaceAll('h2')
    

复制节点相关方法

• $.clone()方法

  • 参数：true或false，true表示深复制，false表示浅复制，不填写默认为浅复制。

  • //给第一个li注册事件
    $('ul>li:first').click(function(){
        alert("这是第一个li的单击事件")
    })
    //注册浅复制和深复制按钮的单击事件
    $('.first').click(function(){
        //浅复制一个节点到$li
        var $li= $('ul>li:first').clone()
        //将复制的节点添加到ul中来
        $('ul').append($li)
    })
    $('.second').click(function(){
        //浅复制一个节点到$li
        var $li= $('ul>li:first').clone(true)
        //将复制的节点添加到ul中来
        $('ul').append($li)
    })