jQuery的基本操作

当你使用了jQuery的的时候，所有事情都变得简单方便起来，但是会用嘛？
接下来我就分享一下一些jQuery的基本操作
html：封装了原生js的innerHTML
原生js的innerHTML是属性
原生js的innerHTML是通过赋值
jq的html是方法
jq的html是传参设置
可以用来干什么呢，实现基本所有原生js的html的操作
如

 $("#box").html("");//清空html
 $("#box").html("htllo");//添加
  $("#box").html("<h1 abc=`qwe`>hello</h1>");//直接覆盖原有的标签

text：封装了原生js的innerText

$("#box").text("");//同样删除
$("#box").text("worl") //修改
 $("#box").text("<em>wwwww</em>");//并不能设置标签，但是能修改html

val:封装了js的value（表格里使用的元素标签）

 $("input").val("");//删除
 $("input").val("hahaha");//设置
 $("input").val("<b>hahaha</b>");//不能修改标签

原生js的className是覆盖,jq是添加

$(".box").addClass("blue border red");
 // 删除class，不是清空
    // $(".box").removeClass("border blue");
     // 清空class，其实就是配合属性
    // $(".box").prop("class","");
    // $(".box").attr("class","");

    // 判断当前有，删除；如果没有，添加
    // document.onclick = function(){
    //     $(".box").toggleClass("fontsize");
    // }

    // 判断是否具有class：有true，没有false
    // console.log($(".box").hasClass("red"));

还有jq中的事件绑定：都是DOM2级，意味着全部可以重复绑定。
1.on绑定，off删除
on绑定可以实现事件委托，及，向事件处理函数中传参
on的参数：
1.事件类型，还可以起名，为了将来删除方便
2.事件委托的元素，可省略
3.向事件处理函数中传递的数据，可省略
4.事件处理函数，注意，如果向时间里出函数中传参了，那么要通过事件对象的data属性找到
off删除，删除事件类型+名字

可以查看一下

//事件后面是事件起的名字，通过名字来操控删除
$("#box").on("click.c1",".aa","hello",function(eve){
          console.log(eve);
          console.log(eve.data);
         console.log(1);
         console.log(this);
     });
     $("#box").off("click.c1");//这个就是删除了

还有这些基础绑定，直接使用事件名绑定就好了

$("#box").click(function(){
         console.log("点击")
    })
     $("#box").mousemove(function(){
         console.log("移动")
     })
     $("#box").dblclick(function(){
         console.log("双击")
     })
     $("#box").mousedown(function(){
         console.log("按下")
     })
    

ready方法绑定事件：
原生：document.onload
jq:

 $(document).ready(function(){
         console.log("页面结构加载完成")
     })

     window.onload
     $(window).ready(function(){
         console.log("页面和资源都加载完成")
     })

模拟事件执行，这个看似无用，其实还有用/

trigger：会触发事件冒泡
triggerHandler：不会触发事件冒泡

setInterval(()=>{
         $("#box").triggerHandler("click");
     },1000)

总结：
on绑定（只能使用off删除），one绑定，hover绑定（进入和离开），trigger模拟执行，ready绑定（加载），基础绑定（所有事件都支持）
事件对象：
兼容不用处理了
事件对象身上的属性原来怎么用现在还怎么用
事件对象身上的事件冒泡，兼容解决了
事件对象身上的阻止默认事件，兼容解决了
事件处理函数中的：
return false
既可以阻止冒泡，又可以阻止默认

然后就是元素节点：
创建：

document.createElement("div")
          console.log($("<div>"));
          var s = $("<span>");

插入

  // 要插入的父元素.appendChild(ele);
        // append:插入指定父元素的最后一个子元素
        // $("#box")被s插入了
        // $("#box").append(s);

        // 把s插入到$("#box")中
        // s.appendTo($("#box"));
        
        // prepend:插入指定父元素的第一个子元素
        // $("#box").prepend(s);
        // s.prependTo($("#box"));

        // before:给指定元素，添加上一个兄弟
        // $("#box").before(s);

        // after:给指定元素，添加下一个兄弟
        // $("#box").after(s);
         修改
        // 获取标签自身同时删除自己
        // console.log($("#box").replaceWith());

        // 传字符的参数，会修改标签
        // $("#box").replaceWith("<span id='"+ $("#box").attr("id") +"'>"+ $("#box").html() +"</span>");
        
    // 克隆
        // $("#box").click(function(){
        //     console.log(1);
        // })

        // var b = $("#box").clone();
        // $("body").append(b);

        // 除了克隆结构，还会克隆事件
        // var b = $("#box").clone(true);
        // $("body").append(b);

jq的内置动画：

 // 当前这一波动画效果为：显示或隐藏
    // 固定的，只能显示，或隐藏
    // 而且，方向不可改变，大小不可改变
    // 除了运动时间，什么都不能改

    // 隐藏，显示
    $("#btn1").click(function(){
        $("#box").hide(200,"linear",function(){
            alert("动画结束了")
        });
    })
    $("#btn2").click(function(){
        $("#box").show(200);
    })
    $("#btn3").click(function(){
        $("#box").toggle(200);
    })

    // 上拉，下拉
    $("#btn4").click(function(){
        $("#box").slideUp(1000);
    })
    $("#btn5").click(function(){
        $("#box").slideDown(1000);
    })
    $("#btn6").click(function(){
        $("#box").slideToggle(1000);
    })

    // 淡出，淡入
    $("#btn7").click(function(){
        $("#box").fadeOut();
    })
    $("#btn8").click(function(){
        $("#box").fadeIn();
    })
    $("#btn9").click(function(){
        $("#box").fadeToggle();
    })

    $("#btn10").click(function(){
        $("#box").fadeTo(1000,0.2);
    })

这些都受限制，可以了解一下自定义动画
关键词animate

  $("#btn1").click(function(){
        $("#box").animate({
            width:0,
            height:0,
            left:50,
            top:80
        },2000,function(){
            alert("结束了");
        });
    })

总结：方便好用，但是提醒一下哈，原生js才是正道，不要被jQuery等等这些框架给宠坏了。