jQuery的DOM

jQuery的DOM

1 原生js的BOM

• 创建
  • 创建标签节点：document.createElement（“标签名”）
  • 创建文本节点：document.createTextNode（“文本内容”）
  • “
    ”
• 添加
  • 追加：父节点.appendChild（子节点）
  • 插入：父节点.insertBefore(newChild,refChild)
• 删除
  • 删除本身：标签.remove() ie8-不兼容
  • 删除子节点：父节点.removeChild(子节点)
• 复制
  • 被复制的标签.cloneNode（boolean） 默认是false：只复制标签，true：复制标签和内容
• 替换
  • 父节点.replace(newChild，refChild)

2 jQuery的DOM

• 创建

  $("

• ")

• 添加

  • 在父元素末尾添加
    • $(父元素).append(子元素)
    • $(子元素).appendTo(父元素)
  • 在父元素头部添加
    • $(父元素).prepend(子元素)
    • $(子元素).prependTo(父元素)
  • 在某个元素之前添加
    • $(参考元素).before(添加的元素)
    • $(添加的元素).insertBefore(参考元素)
  • 在某个元素之后添加
    • $(参考元素).after(添加的元素)
    • $(添加的元素).insertAfter(参考元素)

  //1.创建节点  $("<li>大江大河2</li>")
  console.log($("<li>大江大河2</li>"));
  
  //2.追加,在父元素的末尾添加
  //2.1 $(父节点).append(子元素)
  $("ul").append("<li>家有儿女</li>");
  
  //2.2 $(子元素).appendTo(父元素)
  $("<li>品如的衣柜</li>").appendTo("ul");
  
  //3.在头部添加
  //3.1 $(父元素).prepend(子元素)
  $("ul").prepend("<li>赵四</li>");
  
  //3.2 $(子元素).prependTo(父元素)
  $("<li>刘能</li>").prependTo("ul");
  
  //4.在某个元素之前添加
  //4.1 $("参考元素").before(添加的节点)
  $("li:eq(4)").before("<li>大郎</li>");
  
  //4.1 $("添加的节点").insertBefore("参考节点")
  $("<li>牛郎</li>").insertBefore("li:eq(4)");
  
  //5.在某个元素之后添加
  //5.1 $("参考元素").after("要添加的节点")
  //5.2 $("要添加的节点").insertAfter("参考元素")
  $("li:eq(1)").after("<li>谢大脚</li>");
  

• 删除

  • detach:删除元素，返回被删除元素的引用,方便下次使用，会保留被删除元素的事件

  • remove:删除元素，返回被删除元素的引用,方便下次使用，不会保留被删除元素的事

  • empty:清空子元素

    //detach:删除元素，返回被删除元素的引用,方便下次使用，会保留被删除元素的事件
    $(".detach").click(function(){
        var del = $("li").detach();
    
        setTimeout(function(){
            $("ul").append(del);
        },2000);
    })
    
    
    //remove:删除元素，返回被删除元素的引用,方便下次使用，不会保留被删除元素的事件
    $(".remove").click(function(){
        var del = $("li").remove();
    
        setTimeout(function(){
            $("ul").append(del);
        },2000);
    })
    
    
    //empty:清空子元素
    $("ul").empty();
    

• 复制

  • $().clone(boolean)，
    • 默认是false：复制标签，不会复制js中添加的事件，
    • true:复制标签，会复制js中添加的事件

  $("div").click(function(){
      alert("你猜我是个啥？");
  })
  //$().clone(boolean)
  //默认是false：复制标签，不会复制js中添加的事件
  //true:复制标签，会复制js中添加的事件
  
  $("div").clone(false).appendTo("body");
  // $("div").clone(true).appendTo("body");
  

• 替换

  • $(被替换的内容).replaceWith(替换的内容)

  • $(替换的内容).replaceAll(被替换的内容)

    //$(被替换的内容).replaceWith(替换的内容)
    $("li:eq(2)").replaceWith("<li>第三周：睡觉</li>");
    
    //$(替换的内容).replaceAll(被替换的内容)
    $("<li>第二周：国美项目完成</li>").replaceAll("li:eq(1)");