1. jQuery概述

1.1 JavaScript 庫(kù)

即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫(kù)，就是在這個(gè)庫(kù)中，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動(dòng)畫animate、hide、show、獲取元素等。
簡(jiǎn)單理解： 就是一個(gè)JS 文件，里面對(duì)原生JS代碼進(jìn)行了封裝，存放到里面。這樣可以快速高效使用這些封裝好的功能了。
jQuery，就是為了快速方便操作DOM，里面基本都是函數(shù)（方法）。

1.2 jQuery 的概念

jQuery 是一個(gè)快速、簡(jiǎn)潔的 JavaScript 庫(kù)，其設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼， 做更多的事情。
j就是 JavaScript；Query 查詢；意思就是查詢js，把js中的DOM操作做了封裝，可以快速查詢使用里面的功能。

jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動(dòng)畫設(shè)計(jì)和 Ajax 交互。
學(xué)習(xí)jQuery本質(zhì)：學(xué)習(xí)調(diào)用這些函數(shù)（方法）。

2. jQuery的基本使用

2.1 jQuery 的入口函數(shù)

$(function () {
...  // 此處是頁(yè)面DOM加載完成的入口
});

$(document).ready(function(){    
...  //  此處是頁(yè)面DOM加載完成的入口
});

1. 等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
2. 相當(dāng)于原生 js 中的DOMContentLoaded。
3. 文檔加載完畢，圖片不加載的時(shí)候就可以執(zhí)行這個(gè)函數(shù)。
4. 更推薦使用第一種方式。

2.2 jQuery 的頂級(jí)對(duì)象 $

1. $是jQuery的別稱，在代碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$。

2. $是jQuery的頂級(jí)對(duì)象， 相當(dāng)于原生JavaScript中的window。把元素利用$包裝成jQuery對(duì)象，就可以調(diào)用jQuery的方法。

2.3 jQuery 對(duì)象和 DOM 對(duì)象

相互轉(zhuǎn)化：

1. DOM 對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象： $(DOM對(duì)象)

$('div')

2. jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象（兩種方式）

$('div')[index]        // index 是索引號(hào)

$('div').get(index)    // index 是索引號(hào)

3. jQuery 選擇器

3.1 基礎(chǔ)選擇器

$(“選擇器”)   //  里面選擇器直接寫 CSS 選擇器即可，但是要加引號(hào)

3.2 層級(jí)選擇器

jQuery 設(shè)置樣式：

$('div').css('屬性', '值')

3.3 隱式迭代（重要）

遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲(chǔ)）的過程就叫做隱式迭代。
簡(jiǎn)單理解：給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們?cè)龠M(jìn)行循環(huán)，簡(jiǎn)化我們的操作，方便我們調(diào)用。

3.4 篩選選擇器

3.5 jQuery 篩選方法（重點(diǎn)）

3.6 jQuery 里面的排他思想

想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。

當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。

$(this).css('color','red');
$(this).siblings(). css('color',");

4. jQuery 樣式操作

4.1 操作 css 方法

（1）參數(shù)只寫屬性名，則是返回屬性值

$(this).css('color');

（2）參數(shù)是屬性名，屬性值，逗號(hào)分隔，是設(shè)置一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào)

$(this).css('color', 'red');

（3）參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開， 屬性可以不用加引號(hào)

$(this).css({"color"："white","font-size"："20px"});

4.2 設(shè)置類樣式方法

原生 JS 中 className 會(huì)覆蓋元素原先里面的類名。
jQuery 里面類操作只是對(duì)指定類進(jìn)行操作，不影響原先的類名。

（1）添加類

$("div").addClass("current");

（2）移除類

$("div").removeClass("current");

（3）切換類

$("div").toggleClass("current");

5. jQuery 效果

5.1 顯示隱藏效果

（1）顯示

show([speed,[easing],[fn]]);

1. 參數(shù)都可以省略， 無(wú)動(dòng)畫直接顯示。
2. speed：三種預(yù)定速度之一的字符串(slow,normal, or fast)或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)。
3. easing：(Optional) 用來(lái)指定切換效果，默認(rèn)是swing，可用參數(shù)linear。
4. fn：回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

（2）隱藏

hide([speed,[easing],[fn]]);

（3）切換

toggle([speed,[easing],[fn]]);

5.2 滑動(dòng)效果

（1）下滑

slideDown([speed,[easing],[fn]]);

（2）上滑

slideUp([speed,[easing],[fn]]);

（3）滑動(dòng)切換

slideToggle([speed,[easing],[fn]]);

5.3 事件切換

hover([over,]out);

1. over：鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
2. out：鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
3. 如果只寫一個(gè)函數(shù)，則鼠標(biāo)經(jīng)過和離開都會(huì)觸發(fā)它

5.4 動(dòng)畫隊(duì)列及其停止排隊(duì)方法

（1）動(dòng)畫或效果隊(duì)列

動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。

（2）停止排隊(duì)

stop();        // 寫到動(dòng)畫或者效果的前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫

例如：

$(".nav>li").hover(function() {
    // stop 方法必須寫到動(dòng)畫的前面
    $(this).children("ul").stop().slideToggle();
});

5.5 淡入淡出效果

（1）淡入

fadeIn([speed,[easing],[fn]]);

（2）淡出

fadeOut([speed,[easing],[fn]]);

（3）淡入淡出切換

fadeToggle([speed,[easing],[fn]]);

（4）漸進(jìn)方式調(diào)整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]]);          // opacity 透明度必須寫，取值 0~1 之間

5.6 自定義動(dòng)畫 animate

animate(params,[speed],[easing],[fn]);

params： 想要更改的樣式屬性，以對(duì)象形式傳遞，必須寫。 屬性名可以不用帶引號(hào)， 如果是復(fù)合屬性則需要采取駝峰命名法 borderLeft。

例如：

$("button").click(function() {
    $("div").animate({
        left： 500,
        top： 300,
        opacity： .4,
        width： 500,
    }, 500);
});

6. jQuery 屬性操作

6.1 固有屬性值 prop()

（1）獲取屬性

prop("屬性");

（2）設(shè)置屬性

prop("屬性", "屬性值");

6.2 自定義屬性值 attr()

用戶自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加index =“1”

（1）獲取屬性

attr("屬性");      // 類似原生 getAttribute()

（2）設(shè)置屬性

attr("屬性", "屬性值");   // 類似原生 setAttribute()

該方法也可以獲取 H5 自定義屬性

6.3 數(shù)據(jù)緩存 data()

data()方法可以在指定的元素上存取數(shù)據(jù)，并不會(huì)修改 DOM 元素結(jié)構(gòu)。一旦頁(yè)面刷新，之前存放的數(shù)據(jù)都將被移除。

（1）附加數(shù)據(jù)

data("name","value");   // 向被選元素附加數(shù)據(jù)

（2）獲取數(shù)據(jù)

date("name");             //   向被選元素獲取數(shù)據(jù)

還可以讀取 H5 自定義屬性data-index，得到的是數(shù)字型

7. jQuery 內(nèi)容文本值

7.1 普通元素內(nèi)容 html()

相當(dāng)于原生innerHTML

html();             // 獲取元素的內(nèi)容

html("內(nèi)容")      // 設(shè)置元素的內(nèi)容

7.2 普通元素文本內(nèi)容 text()

相當(dāng)與原生innerText

text();                     // 獲取元素的文本內(nèi)容

text("文本內(nèi)容");        // 設(shè)置元素的文本內(nèi)容

7.3 表單的值 val()

相當(dāng)于原生value

val();              // 獲取表單的值

val("內(nèi)容")      // 設(shè)置表單的值

8. jQuery 元素操作

8.1 遍歷元素

jQuery 隱式迭代是對(duì)同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。

$.each(object, function (index, element) { xxx; });

1. $.each()方法可用于遍歷任何對(duì)象。主要用于數(shù)據(jù)處理，比如數(shù)組，對(duì)象
2. 里面的函數(shù)有2個(gè)參數(shù)：index是每個(gè)元素的索引號(hào)；element遍歷內(nèi)容

8.2 創(chuàng)建元素

$("<li></li>");

8.3 添加元素

（1）內(nèi)部添加

element.append("內(nèi)容");              // 把內(nèi)容放入匹配元素內(nèi)部最后面

element.prepend("內(nèi)容");             // 把內(nèi)容放入匹配元素內(nèi)部最前面

（2）外部添加

element.after("內(nèi)容");               // 把內(nèi)容放入目標(biāo)元素外部后面 

element.before("內(nèi)容");              // 把內(nèi)容放入目標(biāo)元素外部前面  

8.4 刪除元素

element.remove();                  //  刪除匹配的元素（本身）

element.empty();                   //  刪除匹配的元素集合中所有的子節(jié)點(diǎn)

element.html("");                  //  清空匹配的元素內(nèi)容 

1. remove刪除元素本身。
2. empt()和html("")作用等價(jià)，都可以刪除元素里面的內(nèi)容，只不過html("")還可以設(shè)置內(nèi)容。

9. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

7.2 jQuery 位置

（1）offset()設(shè)置或獲取元素偏移

1. offset()方法設(shè)置或返回被選元素相對(duì)于文檔的偏移坐標(biāo)，跟父級(jí)沒有關(guān)系。
2. 該方法有2個(gè)屬性 left、top 。offset().top用于獲取距離文檔頂部的距離，offset().left用于獲取距離文檔左側(cè)的距離。
3. 可以設(shè)置元素的偏移：offset({ top： 10, left： 30 });

（2）position()獲取元素偏移

1. position()方法用于返回被選元素相對(duì)于帶有定位的父級(jí)偏移坐標(biāo)，如果父級(jí)都沒有定位，則以文檔為準(zhǔn)。
2. 該方法有2個(gè)屬性 left、top。position().top用于獲取距離定位父級(jí)頂部的距離，position().left用于獲取距離定位父級(jí)左側(cè)的距離。
3. 該方法只能獲取。

（3）scrollTop() / scrollLeft()設(shè)置或獲取元素被卷去的頭部和左側(cè)

1. scrollTop()方法設(shè)置或返回被選元素被卷去的頭部。
2. 不跟參數(shù)是獲取，參數(shù)為不帶單位的數(shù)字則是設(shè)置被卷去的頭部。

10. jQuery 事件

10.1 jQuery 事件注冊(cè)

單個(gè)事件注冊(cè)

element.事件(function(){});

$("div").click(function(){});

10.2 jQuery 事件處理

（1）事件處理on()綁定事件

on()方法在匹配元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)

element.on(events,[selector],fn);

1. events：一個(gè)或多個(gè)用空格分隔的事件類型，如click或keydown。
2. selector：元素的子元素選擇器。
3. fn：回調(diào)函數(shù) 即綁定在元素身上的偵聽函數(shù)。

// 可以綁定多個(gè)事件，多個(gè)處理事件處理程序
$("div").on({
    mouseover： function() {},
    mouseout： function() {},
    click： function() {}
});
// 如果事件處理程序相同
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
});
// 可以事件委派操作。事件委派的定義就是，把原來(lái)加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素
$('ul').on('click', 'li', function() {
    alert('hello world!');
});

// 動(dòng)態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on()可以給動(dòng)態(tài)生成的元素綁定事件
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后來(lái)創(chuàng)建的</li>");
$("ol").append(li);

（2）事件處理off()解綁事件

$("p").off();                  // 解綁p元素所有事件處理程序 
 
$("p").off("click");          // 解綁p元素上面的點(diǎn)擊事件
 
$("ul").off("click", "li");    // 解綁事件委托

如果有的事件只想觸發(fā)一次， 可以使用one()來(lái)綁定事件。

（3）自動(dòng)觸發(fā)事件trigger()

element.click();                  // 第一種簡(jiǎn)寫形式

element.trigger("type");          // 第二種自動(dòng)觸發(fā)模式

$("p").on("click", function() {
    alert("hi~");
});
$("p").trigger("click");          // 此時(shí)自動(dòng)觸發(fā)點(diǎn)擊事件，不需要鼠標(biāo)點(diǎn)擊

element.triggerHandler(type);     // 第三種自動(dòng)觸發(fā)模式

trigger()和triggerHandler()的區(qū)別：

1. trigger會(huì)導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行，如：trigger('submit');不但會(huì)執(zhí)行submit()函數(shù)的效果，也會(huì)執(zhí)行表單提交的效果；而triggerHandler就不會(huì)導(dǎo)致默認(rèn)行為的執(zhí)行
2. triggerHandler只會(huì)觸發(fā)JQ對(duì)象集合中第一個(gè)元素的事件處理函數(shù)，也不會(huì)產(chǎn)生事件冒泡。而trigger不同
3. 這個(gè)方法的返回時(shí)事件處理函數(shù)的返回值，而不是具有可鏈性的JQ對(duì)象，此外，如果最開始的JQ對(duì)象集合為空，則返回undefined

10.3 jQuery 事件對(duì)象

事件被觸發(fā)，就會(huì)有事件對(duì)象的產(chǎn)生

element.on(events, [selector], function(event) {});

阻止默認(rèn)行為：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

11. jQuery 拷貝對(duì)象

$.extend([deep], target, object1, [objectN]);

1. deep：如果設(shè)為true為深拷貝，默認(rèn)為false淺拷貝
2. target： 要拷貝的目標(biāo)對(duì)象
3. object1：待拷貝到第1個(gè)對(duì)象的對(duì)象。
4. objectN：待拷貝到第N個(gè)對(duì)象的對(duì)象。
5. 淺拷貝目標(biāo)對(duì)象引用的被拷貝的對(duì)象地址，修改目標(biāo)對(duì)象會(huì)影響被拷貝對(duì)象。
6. 深拷貝，前面加true， 完全克隆，修改目標(biāo)對(duì)象不會(huì)影響被拷貝對(duì)象。

12. jQuery 多庫(kù)共存

問題概述：
jQuery 使用\(作為標(biāo)示符，隨著 jQuery 的流行,其他 js 庫(kù)也會(huì)用這\)作為標(biāo)識(shí)符， 這樣一起使用會(huì)引起沖突。

客觀需求：
需要一個(gè)解決方案，讓jQuery 和其他的js庫(kù)不存在沖突，可以同時(shí)存在，這就叫做多庫(kù)共存。

jQuery 解決方案：

1. 把里面的 $ 符號(hào) 統(tǒng)一改為jQuery。 比如jQuery("div")

2. jQuery 變量規(guī)定新的名稱：$.noConflict()

   var xx = $.noConflict();