JQuery學習筆記

? jQuery是一個快速、簡潔 的javascript庫，它的宗旨就是讓我們寫得更少，做得更多，jQuery封裝了javascript的常用功能代碼，優化了DOM操作物件、事件處理、影片設計和Ajax互動等，其本質就是學習呼叫這些函式的方法，加快開發速度，

• 輕量級，核心檔案才10幾kb，不會影響頁面的加載，
• 跨瀏覽器兼容，基本主流的瀏覽器都兼容，
• 鏈式編程和隱式迭代
• 對事件、樣式、影片支持，大大簡化DOM物件的操作，
• 免費開源，

官網：https://jquery.com/

把下載后的jQuery庫引入到你需要的頁面就可以使用了，

1、入口函式

當dom物件全部加載完后再執行js代碼，通常使用第二種，

語法1：

// 頁面加載完后執行js代碼，回呼函式中是執行的代碼
$(document).ready(function () {
    // 代碼
});

語法2：

$(function () {
    // 代碼
});

2、$ 物件

• $ 是jQuery的別稱，在代碼中可以使用jQuery來代替 $ 這個符號，但是為了方便，通常使用 $符號，
• $ 是jQuery的頂級物件，相當于原生js中的window物件，

DOM物件和jQuery物件：

• DOM物件：使用原生的js獲取的物件，
• jQuery物件：通過jQuery獲取的物件，本質是 $ 把DOM物件進行封裝，是一個偽陣列，

這兩個物件不是相同的物件，DOM物件只能使用原生的js的方法和屬性，而jQuery物件也只能使用jQuery中的方法和屬性，兩者不能互相使用，

DOM物件和jQuery物件的相互轉換：

由于原生的js比較強大，部分的原生功能在jQuery不能實作，所以需要相互轉換，

• DOM物件—》jQuery物件：

語法：

// 原生物件
var obj = document.getElementsByTagName("div");
// 轉換成jQuery物件
console.log($(obj));

直接使用 $ 來將一個原生的DOM物件轉換成jQuery物件，將DOM物件作為引數傳入，

• jQuery物件—》DOM物件：

語法1：

// jquery物件
var jObj = $('div');
// 轉換成原生物件
console.log(jObj[0]);

直接將jQuery物件使用下標來將對應的jquery物件轉換成js物件，因為jquery物件是一個dom物件封裝的偽陣列，

語法2：

// jquery物件
var jObj = $('div');
// 轉換成原生物件
console.log(jObj.get(0));

3、jQuery基礎選擇器

? 我們通過選擇器來選擇頁面中的元素，

語法：

$("css中的選擇器"); // 通過該方法就能選擇頁面中的元素，必須使用引號包裹的，只要是css中的選擇器都可以

例如：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    // 選擇ul下的所有li
    $("ul li");
</script>

4、隱式迭代

? 遍歷內部的dom元素（偽陣列的形式存盤）的程序成為隱式迭代，

例如：

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script>
    // 選擇ul下的所有li
    var liObj = $("ul li");
    // 將所有的li設定字體顏色為紅色
    liObj.css("color","red");
    // 這里就有隱式迭代，我們沒有物件這個liObj物件進行遍歷，但是可以將所有的li設定對應的css樣式，這就不需要遍歷去一個個設定
    // 但是這種方式這能設定為同一種方式
</script>

5、jQuery中的篩選選擇器

例如：

<div class="box">
   <span>你好</span>
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>
<script>
   // 選擇box下的第一個div元素
   $(".box div:first").css("color","red");
   // 選擇box下的索引為偶數的元素
   $(".box div:even").css("color","blue");
</script>

6、父子選擇器

排它思想：

? 想要多選一的效果，排他思想，當前的元素設定一個樣式，而其它的兄弟元素設定為另一個樣式，

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
   $("button").click(function () {
       // 將當前的物件設定為對應的背景顏色
      $(this).css("background","#bfa");
      // 排他思想，其它的兄弟元素設定為另一個背景顏色
      $(this).siblings("button").css("background","");
       });
</script>

7、鏈式編程

? 鏈式編程就是為了節省代碼量，讓代碼看起來更加簡練，

語法：

$(this).css("background","#bfa").siblings("button").css("background","red");   

這個表示將當前元素的背景設定為 #bfa，而它的兄弟元素設定為red，這個代碼也可以分為兩句來寫，

// 將當前的物件設定為對應的背景顏色
$(this).css("background","#bfa");
// 排他思想，其它的兄弟元素設定為另一個背景顏色
$(this).siblings("button").css("background","red");

注意：使用鏈式編程需要注意是哪個物件執行的樣式，

8、樣式的操作

css()方法：
通過操作css()方法來修改元素的樣式，

語法1：用于獲取當前元素的指定屬性名的屬性值，它會回傳屬性值，不會修改屬性值，

$(this).css("屬性名");

語法2：用于修改指定元素中指定屬性的屬性值，

$(this).css("屬性名","屬性值");

屬性名必須使用引號包裹，屬性值也需要使用引號包裹，但是當屬性值為數字是可以不用引號包裹，也可以后面不跟單位，

語法3：css()方法的引數可以是一個物件，通常用于修改多組樣式，

$(this).css({
   屬性名1: 屬性值1,
   屬性名2: 屬性值2,
   屬性名3: 屬性值3
});

屬性名可以不使用引號包裹，多組樣式之間使用逗號隔開，但是屬性值為非數字時需要使用引號包裹，屬性名如果時符合屬性名，采用駝峰的命名規則，

操作類來修改樣式：
通過增刪改來修改元素的類名達到不同樣式之間的切換，

• addClass()：添加一個類，如果存在該類，就不添加，

語法：

$(this).addClass("類名");

這個方法需要傳入一個引數，是添加的類名，使用引號包裹，但是不需要添加 . 點，

• removeClass()：洗掉一個類，如果不存在就不洗掉，

語法：

$(this).removeClass("類名"); // 用法和上面類似

• toggleClass()：用于切換類名，當元素有這個類時就把這個類洗掉，沒有這個類時就添加該類，

語法：

$(this).toggleClass("類名"); // 用法和上面類似

9、影片

9.1、顯示與隱藏

顯示：
我們使用show()方法來使一個元素來顯示，

語法：

$(this).show();

這個方法有三個引數，這三個引數可以省略不寫，第一個是顯示花費的時間單位是毫秒，也可以指定為（fast、slow、normal），第二個引數是顯示的方式（linear、swing），第三個引數是回一個回呼函式，當元素顯示后就執行該回呼函式，

隱藏：
通過使用hide()方法來使一個元素隱藏，

語法：

$(this).hide(); // 這個方法也有三個參數，和上面的一樣

切換：
通過使用toggle()方法來使一個元素在顯示和隱藏之間相互切換，

語法：

$(this).toggle(); // 這個方法有三個引數，和上面一樣

上面如果沒有引數就不會有影片效果，如果指定引數就會有影片效果，但是這個影片效果很丑，所以在開發中一般不用使用這種方式來制作隱藏和顯示的影片效果，

滑動顯示和隱藏：
通過滑動的影片效果來隱藏和顯示元素，

這三個方法都有三個引數，引數和上面的一樣，

事件切換：
用于在事件切換之間，滑鼠經過和滑鼠離開的事件的切換，

語法：

$(this).hover(滑鼠經過的回呼函式,滑鼠離開的回呼函式);

liObj.hover(function () {
    // 滑鼠經過的事件
    $(this).children("ul").slideDown(200);
},function () {
    // 滑鼠離開的事件
    $(this).children("ul").slideUp(200);
})

如果hover()方法只傳入一個引數，那么滑鼠經過和滑鼠離開都會執行這個回呼函式，

影片排隊現象：
當多次觸發影片時，可能之前的影片還沒有執行完就觸發了第二次影片，這樣多次影片就出現了影片排隊的現象，

我們使用stop()方法來停止上一次的影片，只會停止上次最新的影片，

語法：

$(this).children("ul").stop().slideUp(200);

注意：這里我們采用鏈式編程，停止影片必須寫在執行影片的前面，

淡入淡出：
通過淡入淡出的效果來顯示元素，

前三個方法引數與上面一樣，

第四個方法的引數有四個引數，第一個是執行影片的時間，第二個是透明度，0-1之間，1表示完全不透明，0表示完全透明，第三個是執行的方式，第四個是影片執行完以后的回呼函式，

9.2、animate自定義影片

? 使用animate()方法來自定義一個影片效果，

$(this).animate(引數1,引數2,引數3,引數4);

引數1是必須寫的，以物件的形式傳入一個需要改變的樣式，和css()方法的引數一樣，

后面的三個引數和前面的影片引數相同，也可以省略，

10、屬性操作

prop()方法和attr()方法的區別：

• 對于HTML元素本身就帶有的固有屬性，只存在true/false的屬性在處理時，使用prop方法，prop不支持自定義屬性，
• 對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法，

prop可以看到在HTML標簽中隱藏的屬性，例如checked屬性，而attr()方法只能看到HTML中顯示的屬性，所以在開發中我門通才使用prop()方法來獲取元素的固有屬性，使用attr()方法來獲取用戶自定義的屬性，

11、遍歷物件

雖然在jquery中存在隱式迭代這個功能，但是隱式迭代只能將元素設定為相同的樣式不能將元素設定為不同的樣式，所以我們采用each()方法來實作遍歷元素進行元素之間不同的操作，

語法1：

$("li").each(function (index,domElement) {
    // 執行的代碼
});

這個方法需要一個回呼函式，函式中會傳入兩個引數，第一個引數是遍歷到元素的小標，第二個引數是遍歷到這個元素dom物件，如果這個物件需要使用jquery中的方法需要將這個物件轉換成jquery物件，

語法2：

$.each(object,function(index,domElement){
    // 執行的代碼
});

這個方法需要兩個引數，第一個是遍歷的物件，這個物件可以是任意的的物件，第二個是回呼函式，這個回呼函式也有兩個引數和上面一樣，

語法1通常用于遍歷HTML元素物件，而語法2通常用于資料處理，例如遍歷陣列，物件等，

12、元素操作

創建元素：

語法：

var div = $("<div></div>");

直接使用 $ 符號就可以創建一個元素，這個方法需要一個引數，引數是元素的字串形式，

添加元素：

• 內部添加

語法1：

$(this).append(創建的新元素); 
// 還有一個方法作用類似
新元素.appendTo(目標元素);

這個方法是在該元素中的內部添加一個新的指定的元素，新元素以引數的形式傳入，這個方法是把新元素添加到當前元素內部的最后面，作為一個子元素，

語法2：

$(this).prepend(創建的新元素);
// 還有一個方法作用類似
新元素.prependTo(目標元素);

和上面不同的是，將新元素添加到元素內的最前面，

• 外部添加

語法1：

$(this).after(新元素);

將新元素添加到當前元素的后面，作為一個兄弟元素，

語法2：

$(this).before(新元素);

將新元素添加到當前元素的前面，作為一個兄弟元素，

洗掉元素：

13、jQuery中的尺寸和位置

尺寸：

• 如果引數為空是直接獲取該元素對應的值，回傳值是數字型別，
• 引數不為空是將當前元素的值設定為引數值，引數可以不帶單位，

位置：

• offset()：回傳是一個物件，這個物件中包含top、left兩個屬性，獲取元素距檔案的偏移位置，這個方法也可以設定元素距檔案的偏移位置，需要傳入一個帶有top、left屬性的物件，屬性值不需要帶單位，

$(".box").offset({
   top: 100,
   left: 100
});

• position()：回傳值和offset()類似，但是這個方法只能回去當前元素距帶有定位父元素的偏移位置，不能修改這個偏移位置，

• scrollTop()：回傳值是一個數字型別，可以傳入一個整數引數用于設定元素被滾動條隱藏的高度，

// 當頁面滾動的事件
$(window).scroll(function () {
    // 獲取當前檔案被滾動條隱藏的高度
    console.log($(document).scrollTop());
});

這個方法可以傳入一個引數，用于設定元素到被隱藏的高度，scrollLeft()方法和scrollTop()方法類似，

14、事件

事件的系結：
通過on()方法來注冊一個或多個事件，

語法1：將一個元素系結一個或多個事件，并且多個事件執行相同的代碼，

$(this).on("事件名1 事件名2",function(){
   // 執行的代碼 
});

注意第一個引數是事件名，可以指定一個或多個，它們之間必須使用空格隔開，第二個引數是這寫事件執行的相同代碼，

例如：

$(this).on("mouseenter mouseleave",function () {
    alert("你好");
});

給當前元素系結了兩個事件，滑鼠移入和移除，當觸發事件后就是執行對應的代碼，==

語法2：將一個元素系結一個或多個事件，這些事件分別指定不同的執行的代碼，

$(this).on({
    mouseenter: function () {
        // 滑鼠移入執行的代碼
    },
    mouseleave: function () {
        // 滑鼠移除執行的代碼
    }
})

這種方式的on()方法傳入了一個物件，物件以 事件名: 回呼函式 這個格式組成，每一組使用逗號隔開，

事件委派：
將事件系結給父元素，大大減少事件的系結，

語法：

$(this).on("事件名","子元素選擇器",function(){
    // 執行的代碼
});

• 將事件系結給父元素，可以減少系結的次數，
• 可以給動態創建的元素系結事件，將新創建的子元素也可以系結事件，

事件解綁：
通過off()方法將一個元素的事件進行解除，

語法：

$(this).off(); // 解除當前元素上的所有事件
$(this).off("事件名"); // 解除元素指定的事件
$(this).off("事件名","子元素"); // 用于解除事件委派的事件

只觸發一次的事件：

語法：

$(this).one("事件名",function(){
    // 這個事件只觸發一次
}); 
// 用法和on()相同，就是效果不一樣

自動觸發事件：

事件物件：
只要觸發了事件，就會產生一個事件物件，事件物件通過引數的形式傳入回呼函式，

語法：

$(this).on(function(event){
    // 這樣就可以操作事件物件來實作功能
});

事件物件的屬性和js原生的屬性基本相同，

15、物件的拷貝

語法：

$.extend([deep],target,obj); // 將obj這個物件拷貝給target這個物件

例如：

// 目標物件
var target = {
    id: 0,
    name: "張三"
};
// 拷貝的物件
var obj = {
    id: 1,
    age: 18
};
// 執行拷貝
$.extend(target,obj);
console.log(target);

如果目標物件的屬性和被拷貝物件的屬性沖突，被拷貝的物件的屬性會把目標物件的屬性覆寫，

物件的拷貝分為淺拷貝和深拷貝，

• 淺拷貝：對于拷貝物件中的參考型別通過復制一份地址拷貝給目標物件，這樣目標物件和拷貝物件中的參考型別是執行同一個物件，
• 深拷貝：對于拷貝物件中的參考型別重新創建一個參考物件拷貝給目標物件，如果參考中的屬性重復，也會將參考型別中的屬性覆寫，不重復的屬性就不會覆寫，