zoukankan      html  css  js  c++  java
  • jquery中的DOM操作

    jquery中的DOM操作

    1.插入到某元素

    //插入到某元素的子元素的最后面
    var div=$("<div></div>");  //创建div元素
    $("body").append(div);
    //$("body").append("<div></div>");   //如果直接插入元素,元素的创建不用$符号
    //这种写法返回body的jQuery的对象
    
    $("<div></div>").appendTo("body");
    // 这种写法返回的是div的jQuery对象
    
    
    //把div插入到div1的子元素的最前面
    $("<div></div>").prependTo(".div1");
    $(".div1").prepend("<div></div>");
    
    //   插入在某个元素后面(成为兄弟元素)
     $(".div1").after("<div></div>");
     $("<div></div>").insertAfter(".div1");
    
    // 插入在某个前面(成为兄弟元素)
    $(".div1").before("<div class='divs'></div>")
    $("<div></div>").insertBefore(".div1");
        
    

    2.wrap 包裹

    $("div").wrap("<a></a>");//给每个元素(获取的元素)外面的包裹a标签  多个a标签
    $("div").wrapAll("<a></a>");//给所有元素外面包裹一个a标签    一个a标签
    $("span").unwrap();//将包裹的父元素删除
    $("div").wrapInner("<a></a>");//给每个div的内容包裹一个a标签
    

    3.复制

    $("div").clone(false);
    $("div").clone(true);
    //全部是深复制
    // true就是连带事件一起复制
    // false不复制事件
    

    4.删除

    var div=$(".div1").on("click",function(){
         $(this).css("color","red");
    });
    div.remove();//删除元素的时候会将所有元素的事件也删除注销
    div.detach();//仅删除元素,事件保留
    $(".div1").empty();//清除元素的所有子元素和内容
    

    5.替换

    //a标签替换div1   全部替换
    $(".div1").replaceWith("<a></a>");   
    $("<a></a>").replaceAll(".div1");
    
  • 相关阅读:
    Applet
    Tutorial中代码的区别及不同效果
    Session
    代码解析&Filter用户授权例子
    Web的后台运作过程
    XML
    数据库
    spring常用注解
    spring mvc 常用注解
    @requestMapping
  • 原文地址:https://www.cnblogs.com/94-Lucky/p/13472589.html
Copyright © 2011-2022 走看看