1. jQuery 語法

jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。

基礎語法： $(selector).action()

美元符號定義 jQuery

選擇符（selector）"查詢"和"查找" HTML 元素

jQuery 的 action() 執行對元素的操作

文檔就緒事件

您也許已經注意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：

$(docment).ready(function(){

// 開始寫 jQuery 代碼...

});

這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成後纔可以對 DOM 進行操作。

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素提示：

簡潔寫法（與以上寫法效果相同）:

$(function(){

// 開始寫 jQuery 代碼...

});

JavaScript 入口函數:

window.onload = function () {

// 執行代碼

}

Holdready（暫停加載）

$.holdReady(true) //執行

2. jQuery 入口函數與 JavaScript 入口函數的區別：

jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。

JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。

3. JQuery裏面的方法

$.each(arr,function(index, value){

//和原生JS不同，參數index在前

});

$.each(obj,function(index,value){

//可以遍歷僞數組

}）

$.map(obj,function(value,index){

//可以遍歷僞數組，

})

真數組轉換爲僞數組

[].push.apply(obj.arr)

僞數組轉換爲真數組

Var arr=[].slice.call(obj)

4. Map和each的區別

Each返回的默認值，遍歷誰返回原值

Map返回默認值爲空數組

Each不支持在回調函數對遍歷數組進行處理

Map可以在回調函數通過return對遍歷數組進行處理

5. jQuery 選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()。

5.1. 元素選擇器

jQuery 元素選擇器基於元素名選取元素。

在頁面中選取所有 <p> 元素:

$("p")

5.2. #id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：

$("#test")

5.3. class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下：

$(".test")

6. keypress,keydown,keyup的區別:

1.keydown：在鍵盤上按下某鍵時發生,一直按着則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;

2.keypress：在鍵盤上按下一個按鍵，併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。

3.keyup：用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼.

二.兩種常用用法舉例

案例1:獲取按鍵代碼或字符的ASCII碼

$(window).keydown( function(event){

// 通過event.which可以拿到按鍵代碼. 如果是keypress事件中,則拿到ASCII碼.

} );

案例2:傳遞數據給事件處理函數

語法:

jQueryObject.keypress( [[ data ,] handler ] );

data: 通過event.data傳遞給事件處理函數的任意數據;

handler: 指定的事件處理函數;

舉例:

// 只允許按下的字母鍵生效, 65~90是所有大寫字母的鍵盤代碼範圍.

var validKeys = { start: 65, end: 90 };

$("#keys").keypress( validKeys, function(event){

var keys = event.data; //拿到validKeys對象.

return event.which >= keys.start && event.which <= keys.end;

} );

語法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

$(selector).mouseover/mouseout 移入移出觸發父元素事件

$(selector).mouseenter/mouseleave 移入移出不觸發父元素事件

$(selector).hover(function(){}移入, function(){}移出）

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

$(selector).fadeTo(speed,opacity不透明度0~1,callback);

$(selector).animate({params}要執行的事件

{left:'250px'}右移250像素 CSS position 屬性設置爲 relative、fixed 或 absolute

可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：

可以把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：

7. jQuery 提供針對動畫的隊列功能。

這意味着如果您在彼此之後編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的"內部"隊列。然後逐一運行這些 animate 調用。

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

1.$(selector)選中的元素的個數爲n個，則callback函數會執行n次；

2.callback函數名後加括號，會立刻執行函數體，而不是等到顯示/隱藏完成後才執行；

當 callback 函數加上括號時，函數立即執行，只會調用一次，如果不加括號，元素顯示或隱藏後調用函數，纔會調用多次。

3.callback既可以是函數名，也可以是匿名函數；

jquery中有一個Queue隊列的接口，這個模塊沒有單獨拿出來作爲一個章節是因爲這個是內部專門爲動畫服務的，Queue隊列如同data數據緩存與Deferred異步模型一樣，都是jQuery庫的內部實現的基礎設施

隊列是一種特殊的線性表，只允許在表的前端（隊頭）進行刪除操作（出隊），在表的後端（隊尾）進行出入操作（入隊），隊列的特點是先進先出，最先插入的元素最先被刪除。

我們一直習慣於線性的編寫代碼邏輯，但是在JavaScript編程幾乎總是伴隨着異步操作：

setTImeout，css3Transition/Animation,ajax,dom的繪製，postmessage，web Database 等等，大量異步操作所帶來的回調函數會把我們的算法分解，對於“異步+回調”的模式，怎麼“拉平”異步操作使之跟同步一樣，因爲異步操作進行流程控制的時候無非避免的要嵌套大量的回調邏輯，所以就會出現 promises 約定了。

那麼 jQuery 引入隊列其實從一個角度上可以認爲：允許一系列函數被異步地調用而不會阻塞程序。

看一個代碼段：

$("#Aaron").slideUp().fadeIn()

這是 jQuery 的一組動畫鏈式序列，它的內部其實就是一組隊列 Queue，所以隊列和 Deferred 地位類似，是一個內部使用的基礎設施。

當 slideUp 運行時，fadeIn 被放到 fx 隊列中

當 slideUp 完成後，從隊列中被取出運行

Queue 函數允許直接操作這個鏈式調用的行爲，同時 Queue 可以指定隊列名稱獲得其他能力而不侷限於 fx 隊列。

jQuery 提供了 2 組隊列操作的 API：

jQuery.queue/dequeue

jQuery.fn.queue/dequeue

但是不同與普通隊列定義的是：

jQuery.queue 和 jQuery.fn.queue 不僅執行出隊操作返回隊頭元素，還會自動執行返回的隊頭元素

fn 是擴展在原型上的高級API是提供給實例使用的

.queue/.dequeue 其內部是調用的 .queue，.dequeue 靜態的底層方法實現入列與出列

動畫調度

對於 jQuery 的動畫的設計我們要分 2 個層面理解：

每一個動畫效果可以看作一個獨立的動畫對象，每個對象都實現了針對自己這個動畫的生命週期的控制

動畫對象與動畫對象之間其實是沒有直接關係，但是爲了做到連續調用就需要引入一套隊列機制也就是 Queue 來控制對象之間的轉換的控制

動畫的源碼：

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };

   this.queue(optall.queue, doAnimation);
}

這個代碼縮減了，但是我們上面提到的最重要的 2 點這裏都涉及到了：通過 queue 調度動畫的之間的銜接，Animation 方法執行單個動畫的封裝。

jQuery 在 queue 的調度上涉及了一個關鍵的處理：同步與異步代碼同時執行，同步收集動畫序列，異步調用序列，看看整個調用的流程是這樣的：

通過多個 animate 方法形成動畫鏈，那麼這個動畫鏈其實都是會加入到 queue 隊列裏面

在每一次 queue 方法中會把動畫數據寫到隊列中，然後取出隊列中的第一個序列通過 dequeue 方法執行

開始執行之前寫一個進程鎖“inprogress”到 queue 裏面，代表這個動畫還在執行中，防止同個序列的多個動畫重複執行，這個就是異步執行同步收集的處理方案

此時動畫開始了，這裏注意動畫是在異步執行的同步的代碼，繼續調用下一個 animate

執行同樣的 animate 方法邏輯但是此時問題來了，動畫可能還在執行可是後續的 animate 還在繼續調用，所以這個時候後面的動畫代碼就需要等待了（進程鎖）

隊列頭是有一把“inprogress”進程鎖的，那麼這時候動畫只需要加入隊列，但是可以通過 inprogress 是否存在來判斷是否執行

所有的 animate 方法在加入隊列都是按照以上的邏輯依次執行，動畫執行完畢了就會有一個結束通知，然後從 queue 取出第一個隊列繼續執行了，如此循環

以上是整個動畫的調度一個流程，其實都是利用隊列異步的空閒然後執行同步的代碼，這樣在處理上是沒有浪費資源的，而且精確度也是最高的。

8. $(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行

可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

因此，默認地，stop() 會清除在被選元素上指定的當前動畫。

9. 獲得內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（包括 HTML 標記）

val() - 設置或返回表單字段的值

對於 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法。

對於 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法。

具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()

實例 1：

這個例子裏 <a> 元素的 DOM 屬性有: href、target 和 class，這些屬性就是 <a> 元素本身就帶有的屬性，也是 W3C 標準裏就包含有這幾個屬性，或者說在 IDE 裏能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用 prop 方法。

這個例子裏 <a> 元素的 DOM 屬性有: href、id 和 action，很明顯，前兩個是固有屬性，而後面一個 action 屬性是我們自己自定義上去的，<a> 元素本身是沒有這個屬性的。這種就是自定義的 DOM 屬性。處理這些屬性時，建議使用 attr 方法。

prop()函數的結果:

1.如果有相應的屬性，返回指定屬性值。

2.如果沒有相應的屬性，返回值是空字符串。

attr()函數的結果:

1.如果有相應的屬性，返回指定屬性值。

2.如果沒有相應的屬性，返回值是 undefined。

10. 設置內容 - text()、html() 以及 val()

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（包括 HTML 標記）

val() - 設置或返回表單字段的值

Attr() 設置改變屬性值

回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。

11. 添加新的 HTML 內容

append() - 在被選元素的結尾插入內容添加無限元素

prepend() - 在被選元素的開頭插入內容添加無限元素

after() - 在被選元素之後插入內容添加無限元素

before() - 在被選元素之前插入內容添加無限元素

append/prepend 是在選擇元素內部嵌入。

after/before 是在元素外面追加。

12. 刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素被選元素不會刪除

刪除 class="italic" 的所有 <p> 元素：

實例

$("p").remove(".italic");

13. 替換

replaceWith（）

14. 複製

Clone（true深複製，複製元素和方法|flase淺複製只複製元素）

返回 CSS 屬性

css("propertyname");返回第一個屬性獲取到第二或第三個 p 的背景顏色呢，加入選擇器 :nth-child()：

alert("p3背景顏色 = " + $("p:nth-child(4)").css("background-color"));

$("p").eq(N) // N 是索引號，從 0 開始

設置 CSS 屬性

css("propertyname","value");

設置多個 CSS 屬性

css({"propertyname":"value","propertyname":"value",...});

15. jQuery 尺寸方法

width() 寬度

height()

innerWidth() 寬度包括內邊距

innerHeight()

outerWidth() 內邊距加邊框

outerHeight()

outerWidth(true) 內邊距加邊框加外邊框

outerHeight(true)

設置了 box-sizing 後，width() 獲取的是 css 設置的 width 減去 padding 和 border 的值。

.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}

width() 獲取爲: 60

innerWidth() 獲取值爲: 80

outWidth() 獲取值爲: 100

16. JQuery parent() 方法

parent() 方法返回被選元素的直接父元素。

該方法只會向上一級對 DOM 樹進行遍歷。

jQuery parents() 方法

parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。

jQuery parentsUntil() 方法

parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。

17. JQuery children() 方法

children() 方法返回被選元素的所有直接子元素。

該方法只會向下一級對 DOM 樹進行遍歷。

jQuery find() 方法

find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

18. siblings() 同胞元素

next() 下一個元素

nextAll() 加下來所有的元素

nextUntil() 到下一個指定元素之間的同胞元素

prev() 之前

prevAll()

prevUntil()

19. $(selector).load(URL,data,callback);

必需的 URL 參數規定您希望加載的 URL 異步加載所需元素時，選擇元素和class（#，.）

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱

可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數。回調函數可以設置不同的參數：

responseTxt - 包含調用成功時的結果內容

statusTXT - 包含調用的狀態

xhr - 包含 XMLHttpRequest 對象

20. 兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。

GET - 從指定的資源請求數據

POST - 向指定的資源提交要處理的數據

GET 基本上用於從服務器獲得（取回）數據。註釋：GET 方法可能返回緩存數據。

POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。

$.get(URL,callback);

$.post(URL,data,callback);

function(data,status){

alert("數據: " + data + "\n狀態: " + status);

}

21. jQuery first() 方法

first() 方法返回被選元素的首個元素。

下面的例子選取首個 <div> 元素內部的第一個 <p> 元素：

實例

$(document).ready(function(){

$("div p").first();

});

22. jQuery last() 方法

last() 方法返回被選元素的最後一個元素。

下面的例子選擇最後一個 <div> 元素中的最後一個 <p> 元素：

實例

$(document).ready(function(){

$("div p").last();

});

23. jQuery eq() 方法

eq() 方法返回被選元素中帶有指定索引號的元素。

索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素（索引號 1）：

實例

$(document).ready(function(){

$("p").eq(1);

});

24. jQuery filter() 方法

filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

下面的例子返回帶有類名 "url" 的所有 <p> 元素：

實例

$(document).ready(function(){

$("p").filter(".url");

});

25. jQuery not() 方法

not() 方法返回不匹配標準的所有元素。

提示：not() 方法與 filter() 相反。

下面的例子返回不帶有類名 "url" 的所有 <p> 元素：

實例

$(document).ready(function(){

$("p").not(".url");

});

$("p").filter(".url").css("background-color","yellow");

和

$("p.url").css("background-color","yellow");

效果一樣。

鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接着另一條。

26. jQuery noConflict() 方法

noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

實例

$.noConflict();

jQuery(document).ready(function(){

jQuery("button").click(function(){

jQuery("p").text("jQuery 仍然在工作!");

});

27. JSONP實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 實例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
  
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
   


    $('#divCustomers').html(html);
});
</script>
</body>
</html>

DOMcontentload會在監聽到DOM元素加載後執行

OnLoad還需要再加載完DOM之後加載其他資源

Document.readyState

28. 函數解綁

.off()默認取消所有綁定函數參數爲要解綁的函數

29.事件冒泡阻止

在子元素裏面寫return false 或者傳入event時間，使用event.stopPropagation()

默認事件阻止

event.paventDefault()

自動觸發事件

$().trigger() 觸發事件冒泡默認 .triggerHander不觸發事件冒泡默認

自定義事件：通過on綁定，通過trigger觸發

命名空間不同的開發對同一個元素綁定了同樣的事件，通過on綁定，trigger觸發 (click.za)

trigger觸發帶名字空間的子元素，父元素帶同樣名字空間的事件觸發，子元素不帶名字空間，父元素所有同類型的事件被觸發

委託事件 delegate 找一個入口函數被執行前就有的元素監聽動態添加的某些元素的事件

在JQuery中通過核心元素找到的元素不止一個，Jquery會遍歷所有找到的元素，給所有的元素添加事件

30. JQuery怎麼寫自己的框架

使用閉包防止不同框架之間的衝突
使用windows 傳參方便後期壓縮代碼提升查找效率
讓外界訪問內部定義的局部變量 window,xxx=xxx
使用undefined傳參 IE9以下undefined定義變量會被修改爲保證 Undifine定義變量還是undifine
Function(window,undefined)（window）{ }

30.1 JQuery入口函數接受不同入參

傳 ‘’ null undefined NAN 0 false 返回空的JQuery對象
傳HTML片段將創建好的DOM元素存儲袋JQuery對象中返回
傳選擇器將找到的所有元素存儲到JQuery中返回
傳數組將數組中存儲的元素一次存儲到JQuery中返回（真僞數組都一樣）
傳對象將傳入對象存儲到JQuery
傳DOM元素 chaungruDOM元素存儲到JQuery中返回
傳基本數據類型基本數據類型存儲到JQuery

30.2 JQuery拓展插件 (JS就是通過這個函數原理來寫JQuery）

Extend



/*
Function njQuery(){}
njQuery.extend=function(ojb){
//Condole.log(this);
for(var key in key){
//njQuery[“isTest”]  = function () {function(){console.log(“twst”);}
This[key]=obj[key];
}
njQuery.extend({
 isTest:function(){
Console.log(“test”);
}
});




njQuery.isText();
njQuery.prototype.extend=function(obj){
Console.log(this);
}










JQuery.extend=JQuery.fn.extend(){

}
$.extend({hello:function(){}})
$.fn.extend({hello:function(){}})
$.fn.extend($.net,{hello:function(){}})



$.extend({},{a:1,b:2})
$.extend(false,
*/

這是很久以前學就jQuery的時候做的筆記，後面零零碎碎加了很多小點，如有侵權，請聯繫我刪除或者加引用參考鏈接

JQuery 學習總結

1. jQuery 語法

2. jQuery 入口函數與 JavaScript 入口函數的區別：

3. JQuery裏面的方法

4. Map和each的區別

5. jQuery 選擇器

5.1. 元素選擇器

5.2. #id 選擇器

5.3. class 選擇器

6. keypress,keydown,keyup的區別:

案例1:獲取按鍵代碼或字符的ASCII碼

案例2:傳遞數據給事件處理函數

舉例:

語法:

7. jQuery 提供針對動畫的隊列功能。

動畫調度

8. $(selector).stop(stopAll,goToEnd);

9. 獲得內容 - text()、html() 以及 val()

實例 1：

10. 設置內容 - text()、html() 以及 val()

11. 添加新的 HTML 內容

12. 刪除元素/內容

13. 替換

14. 複製

15. jQuery 尺寸方法

16. JQuery parent() 方法

17. JQuery children() 方法

18. siblings() 同胞元素

19. $(selector).load(URL,data,callback);

20. 兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。

21. jQuery first() 方法

22. jQuery last() 方法

23. jQuery eq() 方法

24. jQuery filter() 方法

25. jQuery not() 方法

26. jQuery noConflict() 方法

27. JSONP實例

28. 函數解綁

29.事件冒泡阻止

30. JQuery怎麼寫自己的框架

30.1 JQuery入口函數接受不同入參

30.2 JQuery拓展插件 (JS就是通過這個函數原理來寫JQuery）