JQuery系統梳理

　　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));

 

注意：【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. 動畫完成后的回調函數。