JQuery系统梳理

Posted 2020-11-02 杨。。

　　JQuery在前端网页开发中可以说是非常常用了，它所拥有的强大功能足以让我们完成各式各样的效果。

一、JQuery基础语法

1. 使用JQuery必须先导入jquery.x.x.x.js文件；

2. JQuery中的选择器：

    $("选择器名称").函数名();

     注意：$是JQuery的缩写，也就是说，选择器可以使用JQuery(":input");

3. JQuery 文档就绪函数：

$(document).ready(function(){
           //JQuery代码
 });

     简写形式：

$(function(){
    console.log(jQuery(":input:disabled()"));
                
});

  说到文档就绪函数就要说说JQuery文档就绪函数和window.onload的区别了！！以下：

【JQuery文档就绪函数与window.onload的区别】

  ① window.onload必须等待网页资源(包括图片、视频等)全部加载完成后，才能执行。

       文档就绪函数只需要等待网页DOM结构加载完成后，即可执行；

  ② window.onload在一个页面中，只能写一次；

       文档就绪函数在一个页面中，可以有N个。

4. JS对象和JQuery对象：

  ① 使用$取到的节点为JQuery对象，只能调用JQuery方法，不能调用原生JS方法；

       同理：使用getElement系列函数取到的为JS对象，也不能调用JQuery函数。

$("#div").click(function(){}); //对的
$("#div").onclick=function(){}; //错的，JQuery对象不能用JS方法

 【JS对象与JQuery对象的相互转换】

   ① JQuery转JS：使用.get(index) 或 [index]选中的就是JS对象；

$("#div").get(0).onclick=function(){}
$("#div")[0].onclick=function(){}

   ② JS转JQuery：使用$()包裹JS对象。

var div=document.getElementsByTagName("div");
$(div).click(function(){});

5. 解决JQuery多库冲突问题：

    页面中如果同时引入多个JS框架，可能导致$冲突。

    解决办法：

① 使用JQuery.noConflict();使JQuery放弃在全局使用$；

② 使用JQuery关键字替代$. 或者使用一个自执行函数:

!function($){
     //在自执行函数中，可以使用$替代JQuery
     //除自执行函数外的其他区域，禁止JQuery使用$
}(JQuery);

 

二、DOM操作

　　DOM是JQuery中很重要的一部分，是需要熟练掌握的部分（但即使记不住也不是很严重，因为这些操作都可以用JS来实现。只是相对于 JS篇幅较长的代码量来说，何不学会好好运用以下的函数呢~）。DOM操作中包含各类函数，可以完成增加、删除等操作。

 //在div1的内部最后追加一个图片
$("#div1").append("<img src=\'../01-html基本标签/img/man.gif\' />");  
$("<img src=\'../01-HTML基本标签/img/women.gif\' />").appendTo("#div1"); 

 //在div1的内部最前方插入
$("#div1").prepend("<img src=\'../01-HTML基本标签/img/man.gif\' />"); 
$("<img src=\'../01-HTML基本标签/img/women.gif\' />").prependTo("#div1");

//在div1的外部，后面插入节点。
$("#div1").after("<p>一个P标签</p>");
$("<p>111</p>").insertAfter("#div1");

//在div1的外部，前面插入节点。
$("#div1").before("<p>一个P标签</p>");
$("<p>111</p>").insertBefore("#div1"); //每一次插入都要在div1的前面，所以会顶替掉之前插入的位置。

//为每一个选中的节点，都套一层父节点。
$("div").wrap("<section></section>");

//将选中的所有节点包裹在同一个父节点中。
$("div").wrapAll("<section></section>");

//删除选中节点的父节点。
$("#div1 p").unwrap();//删除div1

//将选中节点中的所有元素包裹在一个新的父节点中。新的父节点依然是当前元素的唯一子节点。
$("#div1").wrapInner("<div></div>");

//将选中的节点重新替换为新的节点。会换掉里面的内容。
$("div p").replaceWith("<span>1</span>");
$("<span>1</span>").replaceAll("div p");

//清空当前节点中的内容，但会保留当前节点标签。
$("#div1").empty();

//删除当前节点以及当前节点的所有子节点。
$("#div1").remove();  //恢复后不会保留原绑定事件

//删除当前节点以及当前节点的所有子节点。
$("#div1").detach();  //恢复后可以保留原绑定事件

 

其中有两点需要注意的区别：

1. [remove和detach的区别]

    使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件；

    使用detach删除的节点，在节点恢复以后，可以恢复节点之前所绑定的事件；

HTML代码：

<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>
<br />
<button>用remove删除div1</button>
<button>用detach删除div1</button>
<button>恢复被删除的div1</button>

CSS样式：

<style type="text/css">
    #div1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    #div2{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>

 

JQuery代码：用之前要先导入JQuery插件

$("#div1").click(function(){ //先给div1定义一个点击事件
    alert(123);
});
var div1=null;
$("button:eq(0)").click(function(){
    div1 = $("#div1").remove(); //用remove删除div1
});
                
$("button:eq(1)").click(function(){ 
    div1 = $("#div1").detach(); //用detach删除div1
});
                
$("button:eq(2)").click(function(){
    $("#div2").before(div1);  //恢复被删除的div1
});
                

 2. [JS中cloneNode与JQuery中clone()的区别]

     a. cloneNode如果不传参数或传入false，表示只克隆当前节点，不克隆子节点；

         参数传入true，表示克隆当前节点以及所有子节点。

     b. clone() 无论传入true还是false都会克隆当前节点以及所有子节点。

         传入true表示克隆节点的同时将包括节点所绑定的事件。否则，只表示克隆节点，而不克隆事件。

$("#div1").clone().insertBefore("button:eq(0)");//不论传入true还是false都会克隆子节点以及其绑定事件。

$("#div1").clone().empty().insertBefore("button:eq(0)");//JQuery是一种链式语法，克隆后接着清空div1里面的子节点。达到只克隆当前节点的目的；没有click事件。

 

三、CSS及属性操作

 

//取到节点的属性
console.log($("#div1").attr("id"));
//设置节点的属性
$("#div1").attr("class","cls cls2 cls3");
//传入对象，以键值对的形式同时设置多对属性。
$("#div1").attr({
    "class":$("#div1").attr("class")+" cls1", //先取到原来的，再加上"cls1"
    "name":"name1",
    "style":"font-size:24px; color:blue;"
});

//删除节点的属性
$("#div1").removeAttr("class");

//取到属性，用法和attr一样
console.log($("input:eq(0)").prop("hidden"));

//在原有class的基础上，新增class名字。
$("#div1").addClass("cls1");

//删除指定的class名称。  其余未删除的class名，依然保留
$("#div1").removeClass("cls cls1");

//切换class： 如果有指定class就删除，如果没有就新增。
$("button:eq(0)").click(function(){
    $("#div1").toggleClass("div1");
})

//取到或设置节点中的html代码；
console.log($("#div1").html("<p>111</p>").html());
//取到或设置节点中的文本；
console.log($("#div1").text("<p>111</p>").text());
//取到或设置表单元素的value值。
console.log($("input").val("<p>111</p>").val());

//给节点添加css样式，属于行级样式表权限。
$("#div1").css("color","green");
//传入一个对象，同时给一个节点添加多对css样式。
$("#div1").css({
    "color":"green",
    "font-size":"14px"
});
//通过回调函数返回值，修改css的样式。
//传入计时器，使div1的宽度自动增大，到width=600px时停下。
$("button:eq(0)").click(function(){
    var id = setInterval(function(){
        $("#div1").css({
            "width":function(index,value){
                var v = parseFloat(value) + 1;
                if(v>600){
                clearInterval(id);
                            }
                return v+"px";
               }
            });
    },10);

//
});

//取到或者设置节点的 宽高。只包含width/height
console.log($("#div1").height(400));
console.log($("#div1").width("400px"));

//取到 节点 的宽度+padding。 不包含border和margin
console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

//不传参数， 表示 宽高+padding+border;传入true，表示 宽高+padding+border+margin
console.log($("#div1").outerHeight());
console.log($("#div1").outerWidth(true));

//返回一个节点，相对于浏览器左上角的偏移量。返回一个对象{}
//此方法，测量时，会将margin算作偏移量的距离。
console.log($("#div1").offset());

//返回一个节点，相对于父容器的偏移量。
console.log($("#div1").position());

//设置或取到指定节点的滚动条的位置
console.log($("#div1").scrollTop(100));

View Code

 

注意：【attr和prop两者的不同】

            1. 在读取 属性名="属性值" 的属性时， attr将返回属性值和undefined；而prop将返回true或false。

             2. 也就是说，attr要取到的属性，必须是在标签上已经写明的属性。 否则无法取到。

          【position使用注意】

            1. 使用此方法，要求父元素必须是定位元素。 如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。 

            2. 此方法，测量偏移时，将不考虑margin。 而会将margin视为当前容器的一部分。

 

四、事件处理

1. 事件绑定的快捷方式

    缺点：绑定的事件无法取消

$("button:eq(0)").dblclick(function(){  //双击，不可解绑
    alert(123)
});

2. 使用on进行事件绑定，使用off可以解绑

   a. 使用on进行单事件绑定

$("button:eq(0)").on("click",function(){  //可解绑
    alert(123)
});
$("button:eq(0)").off("click"); //解绑

   b. 使用on，同时给多个事件绑定同一函数。

$("button:eq(0)").on("click dblclick mouseover",function(){  
    console.log(123);
});

 

   c. 使用on同时给多个事件分别绑定不同的函数。

$("button:eq(0)").on({
    "click":function(){
    console.log("click");
        },
    "mouseover":function(){
        console.log("mouseover");
    }
});

 

   d. 使用on，给回调函数传参，要求是对象格式。传递的参数可以在e.data中取到

$("button:eq(0)").on("click",{"name":"zhangsan","age":14},function(e){ //可以传入事件、data数据（可以是对象）、函数
    console.log(e);//取到JQuery.Event
    console.log(e.data); //取到数据
    console.log(e.data.name); //取到名字
    console.log(e.data.age); //取到年龄
});
$(document).on("mousemove",function(e){
    console.log(e);
});

3. 使用on 事件委派

    a. 事件委派：将与俺来绑定在DOM节点上的事件，改为绑定在其父节点甚至根节点上，然后委派给当前节点执行。

    b. 事件委派的作用：

         ① 将事件直接绑定在根节点上，可以减少事件绑定的次数，更加节省资源。

         ② 使用事件委派绑定的事件，当页面新增同类型标签时，新的标签也可以获得绑定的已有事件。

//普通绑定事件
$("p").on("click",function(){
    alert(123)
});

//绑在DOM根节点上。事件委派。
$(document).on("click","p",function(){ //传入一个选择器，委派给那一个标签来执行。每次点在根节点上，会判断和传入的选择器是否匹配，如果匹配，则委派给该选择器执行。
    alert(123);
});

//如果是普通绑定，新增的标签不会获得已绑定事件;但如果是事件委派绑定的事件，当页面新增同类型标签时，新的标签也可以获得绑定的已有事件。
$("button:eq(0)").click(function(){
    $("<p>hahah</p>").insertBefore("p:eq(0)");
});

4. 取消事件绑定

   a. 使用off取消事件绑定

$("button:eq(0)").on("click",function(){
    alert(1);
});
function func(){
    alert(2);
}
$("button:eq(0)").on("click",func); 
$("button:eq(0)").off("click",func); //只清除绑定了func函数的click事件
$("button:eq(0)").off("click"); //清除了所有的click事件
                
$("button:eq(0)").off("click dblclick"); //同时清除多个事件
$("button:eq(0)").off("click","p"); //清除事件委派
$("p").off(); //清除绑定在"p"上的所有事件

   b. 使用one，绑定的事件，只能出现一次

$("button:eq(0)").one("click",function(){
    alert("使用one我只能出来一次");
});

5. 事件切换

   a. hover():接受两个函数，分别表示mouseover() mouseout()两个事件。

       如果只写一个函数，表示mouseover()。

$("p:eq(0)").hover(function(){ //鼠标指上和鼠标拿走状态
    $(this).css("background-color","red");
},function(){
    $(this).css("background-color","blue");
});

   b. toggle(): 

       ① 不传参数，表示：当前元素如果为显示状态，则隐藏；如果为隐藏状态，则显示。
       ② 传入一个动画执行效果："ease" "slow" "fast"
             $("p:eq(0)").toggle("ease");
       ③ 传入一个函数，表示：隐藏动画或显示动画，完成后执行的回调函数。

       ④ 接受一个Boolean类型的参数，表示：如果传入的是true则显示当前元素；如果传入的是false则隐藏当前元素。

$("button:eq(0)").on("click",function(){
    $("p:eq(0)").toggle(); //不传参数

    $("p:eq(0)").toggle("ease"); //传入状态，切换效果不一样

    $("p:eq(0)").toggle("fast",function(){ //传入一个函数
        alert(123);
    });
                    
    var is=false;
    if("随便写个条件"){ //只要字符串不为空，为true
        is=true;
    }
    $("p:eq(0)").toggle(is); //此时为true                
});

 

五、事件动画

　　JQuery的事件动画要比JS中自己写的好用很多，一行代码就可以解决一个效果。其中animate自定义动画很灵活很方便，配合delay可以做出你想要的效果。在动画这一方面，JQuery非常人性化的为我们提供了插件库。里面都是各种技术大牛写好的效果封装成了插件，我们可以直接套用。这里，附上插件库链接，有需要的可以自行查找：http://www.jq22.com/

//show()                                $("#div1").show(2000,function(){//传入毫秒数和回调函数（动画完成后执行的函数）
    alert(123);
});
//hide()                            $("#div1").hide(2000,function(){
    alert(123);
});

//显示或隐藏元素,修改height属性
$("#div1").slideDown(2000,function(){  //让隐藏的元素显示
    alert(123);
});
$("#div1").slideUp(2000,function(){  //让显示的元素隐藏
    alert(123);
});
$("#div1").slideToggle(2000,function(){  //让显示的元素隐藏；让隐藏的元素显示
    alert(123);
});

//显示或隐藏元素,修改opacity属性
$("#div1").fadeIn(2000,function(){  //隐藏的元素显示
    alert(123);
});
$("#div1").fadeOut(2000,function(){  //显示的元素隐藏
    alert(123);
});
$("#div1").fadeToggle(2000,function(){  //隐藏的显示；显示的隐藏
    alert(123);
});
$("#div1").fadeTo(2000,0.5,function(){ //作用于fadeToggle相同。但是多了第二个参数，表示动画完成后的最终透明度。
    alert(123);
});

//animate()动画和delay动画延时
$("#div1").animate({
    fontSize: "64px"
}, 2000, "linear").delay(2000).animate({
    width: "0px",
    opacity: "0",
}, 3000, "linear");

$("#div2").animate({
    fontSize: "68px"
}, 2000, "linear").delay(2000).animate({
    fontSize: "16px"
}, 3000);

//stop():停止当前节点的所有动画。后续动画将不再执行，动画回调不在调用。
//finish():直接结束当前节点的所有动画。动画直接进入最后状态，直接调用动画回调。
$("button:eq(0)").on("click",function(){
    $("#div1").stop();
        $("#div1").finish();                
});    

1. show():

    a. 不传参将会直接显示，而不进行动画；

    b. 参数传入事件毫秒，或者表示速度的字符串"slow" "fast" "normal"则将在指定时间内完成动画;

    c. 参数也可以穿入回调函数，表示动画完成后执行的回调。

2. animate()动画，自定义动画，接收4个参数。

    a. 动画完成后最终状态的CSS键值对集合。

        注意：CSS的样式，要求使用驼峰式命名。例如：fontSize;

    b. 动画完成的时间。可以是毫秒，可以是"slow" "fast" "normal";

    c. 动画完成的效果。可选值"linear" "swing";

    d. 动画完成后的回调函数。