关于jQuery对DOM元素的简单处理和使用(3)

逃离我推掉我的手 2022-04-17 03:19 140阅读 0赞

# 关于jQuery对DOM元素的简单用法 #

## 一、滚动设置 ##

## 二、创建插入元素 ##

//创建HTML标签;
    var div=$("<div></div>");//创建一个div;
    var bn=$("<button></button>");//创建一个按钮;
    
    //1.在某个元素里面尾部插入某个元素;
       $("body").append($("<div></div>"));//插入jQuery对象元素;
       $(document.body).append($("<div></div>"));//插入html标签字符串;
       $(document.body).append("你好啊!");//body中插入字符串;
       $(document,body).append(document.createElement("button"));//插入Dom元素;
       $("div").append(function(index){ 
           return "<a href="#">"+index+"</a>";
       });//给多个元素插入内容;
       $("div").append(function(index,value){ 
           return `<a href="#">${ value}</a>`;
       });//插入在后面,还会保留原来的内容;
    
    //2.把某个元素插入在某个元素的尾部;
       var ul=document.createElement("ul");//创建一个ul;
       $(ul).appendTo("body");//将这个DOM元素插入body里的尾部;
       $("<ul></ul>").appendTo("bady");//html标签字符串;
       $("a").appendTo("body");//这样的jQuery对象不是字符串,而是选择器;
       $("div:not(.divs)").appendTo(".divs");//将div中除了.divs的元素放入.divs中;这样可以完成移动;
       $("<div></div>").appendTo("body").css({ 
           "width":"100px",
           height:"100px",
           backgroundColor:"red"
       }).attr("bool","false").on("click",function(e){ 
           if($(this).attr("bool")==="false"){ 
               $(this).css("backgroundColor","green").attr("bool","true");
           }else{ 
               $(this).css("backgroundColor","red").attr("bool","false");
           }
       });//这是一个简单的点击改变背景色案例;
    
    //3.在某个元素的里面头部插入某一个元素;
       div.insertBefore(span,div.firstElementChild);//原生JS的写法;
       $("body").prepend("<div class='div1'></div>");
       $("body").prepend("<span></span>");
       $("body").prepend(function(index){ 
          return `<span>${ index}</span>`;
       });//在div的头部插入span标签;
    
    //4.把某个元素插入另个元素里面的头部位置;
       $("<div></div>").prependTo("body");
       $("<div></div>").prependTo(document.body);//可以插入在DOM元素中;

## 三、外部插入元素 ##

//1.在某个元素(成为他的哥哥)的后面插入兄弟节点;
    //插入jQuery对象,HTML标签,文本,DOM对象,并且可以给多个元素插入不同的内容;
       $(".div0").after("<div></div>");
       $(".div0").after(function(index){ 
            
       });
       
    //2.将某个元素(成为他的弟弟)插入另一个元素的后面;
       $("<div></div>").insertAfter(".div0");
       //***这种方式不能针对多个元素使用;这种方式是错的***
    
    //3.给某个元素节点(成为他的弟弟)前面插入一个兄弟元素;
       $(".div0").before("<div></div>");
    
    //4.讲某个元素(成为他的哥哥)插入某个节点的前面;
       $("<div></div>").insertBefore(".div0");

## 四、包裹 ##

//在标签外面包裹一个标签、DOM对象
    $("span").wrap("<div></div>");
    var arr=["http://www.163.com","http://www.qq.com",
             "http://www.baidu.com",
             "http://www.taobao.com"];
    $("span").wrap(function(index){ 
       return "<a href='"+arr[index]+"'></a>";
    });//讲数组的网址放入a标签,并且将a包裹span;
    
    $("a").unwrap();//取消包裹,仅能取消他父级元素的节点;
    $("a").unwrap(".div0");//如果指定筛选将会取消筛选的父级元素的节点;
    
    //将选中的节点统一在一起,外面包裹元素,如果需要全部包裹,注意筛选的精确度;
    $("span").wrapAll("<div></div>");
    var divs=document.createElement("div");
    //在这里DOM元素并没有放在body中,但是这里会自动将DOM元素放入在body中;
    $("span").wrapAll(divs);
    
    //在元素的里面,将其内容包裹一个新的元素;
    $("span").wrapInner("<a href='#'></a>");

> ***wrap( )和.wrapAll( )的区别在前者吧每一个元素当成一个独立体，分别包含一层外层； 后者将所有元素作为一个整体作为一个独立体，之包含一层外层。这两种都是在外层包含，而.wrapInner( )在内层包含。***

## 五、复制、删除、替换 ##

#### 1、复制 ####

//复制,clone(true)都是深复制,true就是赋值元素的事件,false就是不复制事件;
    $(".div0").on("click",function(){ 
        console.log("aaa");
    }).clone(true).appendTo("body");
    //下面是点击div改变背景色并且深复制得到两个div的小案例
    $(".div0").attr("bool","false").on("click",function(){ 
       if($(this).attr("bool")==="false"){ 
           $(this).css("backgroundColor","blue")
           .attr("bool","true");
       }else{ 
           $(this).css("backgroundColor","red");
           .attr("bool","false");
       }
    }).clone(true).appendTo("body");

#### 2、删除 ####

//1.remove
    $(".div0").remove();//删除class名为div0
    $(".div0").children().eq(0).remove();//删除第一个class名为div0的元素;
    $(".div0").children().frist().remove();//同上;
    
    //2.detach //删除元素,但是不删除元素的事件
    var div=$(".div0").on("click",function(){ 
        console.log("aaa");
    }).detach();
    div.appendTo("body");
    
    //3.empty() //清空元素中的内容
    $(".div0").empty();
    $("ul").empty();//清空li

#### 3、替换 ####

//旧节点.replaceWith(新节点);
    //新节点.replaceAll(旧节点);
    $("span").replaceWith("<a href='#'>超链接</a>");
    $("li").replaceWith("<span></span>");
    
    $("ul").replaceWith(function (index,value) { 
        return "<div>"+value+"</div>"
    });
    $("<div></div>").replaceAll("ul");div替换ul

> 总结:jQuery对DOM元素的处理方式极大地方便了我们对元素的改变; 这些属性还是很方便我们前端程序员对页面的修改;