【jQuery】节点操作

jQuery节点操作

一. 添加节点

• 追加到指定元素内部
  

  • append()方法: 追加到指定元素内部的后面

  $('button').eq(0).click(function(){
      $('ul').append($li);
  
      // appendTo: 只是语法不同
      // $li.appendTo('ul');
  })
  

  appendTo: 只是语法不同, 效果一样

  • prepend()方法: 追加到指定元素内部的前面

    $('button').eq(1).click(function () {
        $('ul').prepend($li);
    
        // $li.prependTo('ul');
    })
    

    prependTo: 只是语法不同, 效果一样

• 追加到指定元素外部

  • after(): 追加到指定元素外部的后面

    $('button').eq(2).click(function () {
        $('ul').after($li);
       
        // $li.insertAfter('ul');
    })
    

    insertAfter: 只是语法不同, 效果一样

  • before(): 追加到指定元素外部的前面

    $('button').eq(3).click(function () {
        $('ul').before($li);
    
        // 只是语法不同    
        // $li.insertBefore('ul');
    })
    

    insertBefore: 只是语法不同, 效果一样

二. 删除节点

• remove(): 删除指定元素

  $('button').eq(0).click(function(){
      $('div').remove();
  })
  

  可以指定要删除的元素名如：

   $('button').eq(0).click(function(){
      $('li').remove('.item');
  })
  

  删除li里类名叫item的

• empty(): 删除指定元素的内容和子元素，自身不会删除

  $('button').eq(1).click(function () {
      $('div').empty();
  })
  

• detach(): 效果同remove

  $('button').eq(2).click(function () {
      $('li').detach('.item');
  })
  

三. 替换节点

• replaceWith(): 替换所有匹配到的元素为指定元素

  $('button').click(function(){
      // 新建节点
      var $h2 = $('<h2>标题2</h2>');
      
      // replaceWith(): 替换所有匹配到的元素为指定元素
      $('h5').replaceWith($h2);
  })
  

  replaceAll(): 仅语法不同

  $('button').click(function(){
      // 新建节点
      var $h5 = $('<h5>标题5</h5>');
  
      // replaceAll(): 仅语法不同
      $h5.replaceAll('p');
  })
  

四. 复制节点

• clone方法：传入false是浅复制，传入true是深复制

  • 浅复制，只复制元素，不会复制元素的事件

    $('button').eq(0).click(function(){
        // 浅复制li的第一个
        var $li = $('li:first').clone(false);
    
        // 添加到ul中
        $('ul').append($li);
    })
    

  • 深复制，不仅复制元素，还会复制元素的事件

    $('button').eq(1).click(function () {
        // 深复制li的第一个
        var $li = $('li:first').clone(true);
    
        // 添加到ul中
        $('ul').append($li);
    })
    
    // 给li添加点击事件
    $('li').click(function(){
        alert($(this).html())
    })