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

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

一、滚动设置

document.documentElement.scrollTop=200;//原生JS的基本滚动设置;
//scrollTop()是一个函数,不管设置还是获取必须写();
$(document.documentElement.scrollTop(200));
$(document).scrollTop(200);
console.log($(document).scrollTop());
//下面的案例是步骤分离,点击和动画函数的分离,是一个简单的面向对象的jQuery锚点案例;
//面向对象虽然书写繁琐,但是在日后的修改中会异常的轻松,建议大家养成良好的书写习惯;
var bool=false;
$("div").on("click",function(){
    bool=true;
    animation();
});//点击转换bool属性;
function animation(){
    if(!bool) return;
    requestAnimationFrame(animation);
    var scroll=$(document).scrollTop();
    if(scroll<=0>){
         bool=false;
         return;
    }
    $(document).scrollTop(scroll-100);
}

二、创建插入元素

//创建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元素的处理方式极大地方便了我们对元素的改变; 这些属性还是很方便我们前端程序员对页面的修改;