jQuery 簡明教程 快速上手

1. jQuery概述

1.1 JavaScript 庫

即 library，是一個封裝好的特定的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了不少預先定義好的函數在裏面，好比動畫animate、hide、show、獲取元素等。
簡單理解： 就是一個JS 文件，裏面對原生JS代碼進行了封裝，存放到裏面。這樣能夠快速高效使用這些封裝好的功能了。
jQuery，就是爲了快速方便操做DOM，裏面基本都是函數（方法）。

1.2 jQuery 的概念

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼， 作更多的事情。
j就是 JavaScript；Query 查詢；意思就是查詢js，把js中的DOM操做作了封裝，能夠快速查詢使用裏面的功能。

jQuery 封裝了 JavaScript 經常使用的功能代碼，優化了 DOM 操做、事件處理、動畫設計和 Ajax 交互。
學習jQuery本質：學習調用這些函數（方法）。

2. jQuery的基本使用

2.1 jQuery 的入口函數

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

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

1. 等着 DOM 結構渲染完畢便可執行內部代碼，沒必要等到全部外部資源加載完成，jQuery 幫咱們完成了封裝。
2. 至關於原生 js 中的DOMContentLoaded。
3. 文檔加載完畢，圖片不加載的時候就能夠執行這個函數。
4. 更推薦使用第一種方式。

2.2 jQuery 的頂級對象 $

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

2. $是jQuery的頂級對象， 至關於原生JavaScript中的window。把元素利用$包裝成jQuery對象，就能夠調用jQuery的方法。

2.3 jQuery 對象和 DOM 對象

相互轉化：

1. DOM 對象轉換爲 jQuery 對象： $(DOM對象)

$('div')

2. jQuery 對象轉換爲 DOM 對象（兩種方式）

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

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

3. jQuery 選擇器

3.1 基礎選擇器

$(「選擇器」)   //  裏面選擇器直接寫 CSS 選擇器便可，可是要加引號

3.2 層級選擇器

jQuery 設置樣式：

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

3.3 隱式迭代（重要）

遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫作隱式迭代。
簡單理解：給匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。

3.4 篩選選擇器

3.5 jQuery 篩選方法（重點）

3.6 jQuery 裏面的排他思想

想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。

當前元素設置樣式，其他的兄弟元素清除樣式。

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

3.7 鏈式編程

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

4. jQuery 樣式操做

4.1 操做 css 方法

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

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

（2）參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值若是是數字能夠不用跟單位和引號

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

（3）參數能夠是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性能夠不用加引號

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

4.2 設置類樣式方法

原生 JS 中 className 會覆蓋元素原先裏面的類名。
jQuery 裏面類操做只是對指定類進行操做，不影響原先的類名。

（1）添加類

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

（2）移除類

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

（3）切換類

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

5. jQuery 效果

5.1 顯示隱藏效果

（1）顯示

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

1. 參數均可以省略， 無動畫直接顯示。
2. speed：三種預約速度之一的字符串(slow,normal, or fast)或表示動畫時長的毫秒數值(如：1000)。
3. easing：(Optional) 用來指定切換效果，默認是swing，可用參數linear。
4. fn：回調函數，在動畫完成時執行的函數，每一個元素執行一次。

（2）隱藏

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

（3）切換

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

5.2 滑動效果

（1）下滑

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

（2）上滑

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

（3）滑動切換

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

5.3 事件切換

hover([over,]out);

1. over：鼠標移到元素上要觸發的函數（至關於mouseenter）
2. out：鼠標移出元素要觸發的函數（至關於mouseleave）
3. 若是隻寫一個函數，則鼠標通過和離開都會觸發它

5.4 動畫隊列及其中止排隊方法

（1）動畫或效果隊列

動畫或者效果一旦觸發就會執行，若是屢次觸發，就形成多個動畫或者效果排隊執行。

（2）中止排隊

stop();        // 寫到動畫或者效果的前面，至關於中止結束上一次的動畫

例如：

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

5.5 淡入淡出效果

（1）淡入

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

（2）淡出

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

（3）淡入淡出切換

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

（4）漸進方式調整到指定的不透明度

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

5.6 自定義動畫 animate

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

params： 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名能夠不用帶引號， 若是是複合屬性則須要採起駝峯命名法 borderLeft。

例如：

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

6. jQuery 屬性操做

6.1 固有屬性值 prop()

（1）獲取屬性

prop("屬性");

（2）設置屬性

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

6.2 自定義屬性值 attr()

用戶本身給元素添加的屬性，咱們稱爲自定義屬性。 好比給 div 添加index =「1」

（1）獲取屬性

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

（2）設置屬性

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

該方法也能夠獲取 H5 自定義屬性

6.3 數據緩存 data()

data()方法能夠在指定的元素上存取數據，並不會修改 DOM 元素結構。一旦頁面刷新，以前存放的數據都將被移除。

（1）附加數據

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

（2）獲取數據

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

還能夠讀取 H5 自定義屬性data-index，獲得的是數字型

7. jQuery 內容文本值

7.1 普通元素內容 html()

至關於原生innerHTML

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

html("內容")      // 設置元素的內容

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

至關與原生innerText

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

text("文本內容");        // 設置元素的文本內容

7.3 表單的值 val()

至關於原生value

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

val("內容")      // 設置表單的值

8. jQuery 元素操做

8.1 遍歷元素

jQuery 隱式迭代是對同一類元素作了一樣的操做。 若是想要給同一類元素作不一樣操做，就須要用到遍歷。

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

1. $.each()方法可用於遍歷任何對象。主要用於數據處理，好比數組，對象
2. 裏面的函數有2個參數：index是每一個元素的索引號；element遍歷內容

8.2 建立元素

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

8.3 添加元素

（1）內部添加

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

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

（2）外部添加

element.after("內容");               // 把內容放入目標元素外部後面

element.before("內容");              // 把內容放入目標元素外部前面

8.4 刪除元素

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

element.empty();                   //  刪除匹配的元素集合中全部的子節點

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

1. remove刪除元素自己。
2. empt()和html("")做用等價，均可以刪除元素裏面的內容，只不過html("")還能夠設置內容。

9. jQuery 尺寸、位置操做

7.1 jQuery 尺寸

7.2 jQuery 位置

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

1. offset()方法設置或返回被選元素相對於文檔的偏移座標，跟父級沒有關係。
2. 該方法有2個屬性 left、top 。offset().top用於獲取距離文檔頂部的距離，offset().left用於獲取距離文檔左側的距離。
3. 能夠設置元素的偏移：offset({ top： 10, left： 30 });

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

1. position()方法用於返回被選元素相對於帶有定位的父級偏移座標，若是父級都沒有定位，則以文檔爲準。
2. 該方法有2個屬性 left、top。position().top用於獲取距離定位父級頂部的距離，position().left用於獲取距離定位父級左側的距離。
3. 該方法只能獲取。

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

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

10. jQuery 事件

10.1 jQuery 事件註冊

單個事件註冊

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

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

10.2 jQuery 事件處理

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

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

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

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

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

// 動態建立的元素，click()沒有辦法綁定事件，on()能夠給動態生成的元素綁定事件
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是後來建立的</li>");
$("ol").append(li);

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

$("p").off();                  // 解綁p元素全部事件處理程序 
 
$("p").off("click");          // 解綁p元素上面的點擊事件
 
$("ul").off("click", "li");    // 解綁事件委託

若是有的事件只想觸發一次， 可使用one()來綁定事件。

（3）自動觸發事件trigger()

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

element.trigger("type");          // 第二種自動觸發模式

$("p").on("click", function() {
    alert("hi~");
});
$("p").trigger("click");          // 此時自動觸發點擊事件，不須要鼠標點擊

element.triggerHandler(type);     // 第三種自動觸發模式

trigger()和triggerHandler()的區別：

1. trigger會致使瀏覽器同名的默認行爲的執行，如：trigger('submit');不但會執行submit()函數的效果，也會執行表單提交的效果；而triggerHandler就不會致使默認行爲的執行
2. triggerHandler只會觸發JQ對象集合中第一個元素的事件處理函數，也不會產生事件冒泡。而trigger不一樣
3. 這個方法的返回時事件處理函數的返回值，而不是具備可鏈性的JQ對象，此外，若是最開始的JQ對象集合爲空，則返回undefined

10.3 jQuery 事件對象

事件被觸發，就會有事件對象的產生

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

阻止默認行爲：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

11. jQuery 拷貝對象

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

1. deep：若是設爲true爲深拷貝，默認爲false淺拷貝
2. target： 要拷貝的目標對象
3. object1：待拷貝到第1個對象的對象。
4. objectN：待拷貝到第N個對象的對象。
5. 淺拷貝目標對象引用的被拷貝的對象地址，修改目標對象會影響被拷貝對象。
6. 深拷貝，前面加true， 徹底克隆，修改目標對象不會影響被拷貝對象。

12. jQuery 多庫共存

問題概述：
jQuery 使用\(做爲標示符，隨着 jQuery 的流行,其餘 js 庫也會用這\)做爲標識符， 這樣一塊兒使用會引發衝突。

客觀需求：
須要一個解決方案，讓jQuery 和其餘的js庫不存在衝突，能夠同時存在，這就叫作多庫共存。

jQuery 解決方案：

1. 把裏面的 $ 符號 統一改成jQuery。 好比jQuery("div")

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

   var xx = $.noConflict();