功能涵蓋

1. HTML 元素選取和操作
2. HTML 事件函式 ：包括a.滑鼠事件，b.鍵盤事件，c.表單事件和 d.文件/視窗事件。
3. HTML DOM 遍歷和修改，包括祖先，後代，同胞，過濾。
4. CSS 操作
5. JS 動畫和特效包括：a.隱藏和顯示，b.淡入淡出，c.滑動，d.動畫和停止動畫，e.方法鏈
6. AJAX 請求

注意

安裝

使用 BootCDN、百度、又拍雲、新浪、谷歌或微軟的 jQuery，有一個很大的優勢：
許多使用者在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。所以結果是，當他們訪問您的站點時，會從快取中載入 jQuery，這樣可以減少載入時間。同時，大多數 CDN 都可以確保當用戶向其請求檔案時，會從離使用者最近的伺服器上返回響應，這樣也可以提高載入速度。

//BootCDN:
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
//百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//又拍雲 CDN:
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
//新浪 CDN:
<script
 
 src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
//Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

// 版本相容IE 處理，IE 9 之前不能使用2.0.0
<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
 

<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

易忽略的細節

1.jQuery 入口函式與 JavaScript 入口函式的區別：

// jQuery 的入口函式是在 html 所有標籤(DOM)都載入之後，就會去執行。
$(document).ready(function(){
    // 執行程式碼
});
或者
$(function(){
    // 執行程式碼
});



// JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的檔案載入完後，才會執行。
window.onload = function () {
    // 執行程式碼
}

2.load() 方法在 jQuery 版本 1.8 中已廢棄。 3.unload() 方法在 jQuery 版本 1.8 中被廢棄，在 3.0 版本被移除。 4. DOM = Document Object Model（文件物件模型）

DOM 定義訪問 HTML 和 XML 文件的標準：
"W3C 文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。"

5.屬性操作

attr 和 prop 的區別介紹：
<a href="http://runoob.com" num="2"></a>

對於 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法或者attr 方法。
var href = $("a").prop("href");

對於 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法。
var num = $("a").attr("num");

6.attr()的回撥函式

jQuery 方法 attr()，也提供回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。
允許我們對原始值進行邏輯操作後，返回期望的值來更新屬性值。

7.toggleClass() - 對被選元素進行新增/刪除類的切換操作

.shadow{
  width:100vw;
  height:100vh;
  background:rgba(200,200,200,.8);
}
<a id="go" class="shadow"></a>
$("#go").toggleClass("shadow");

8.css() 可以傳 json 物件，設定多個css屬性。 9.獲取元素尺寸，對盒子模型不同程度尺寸的提取。 10.通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。 11.AJAX

//將請求結果放入選中的元素中
$(selector).load(URL,data,callback);
//將請求結果放入指定元素中
$(selector).load(URL+selector2,data,callback);
// data = {}傳入請求引數
$(selector).load(URL+selector2,data,callback);
// callback = function(responseTxt,statusTxt,xhr)){}，responseTxt是請求結果，statusTxt是響應狀態，xhr是請求物件。
$(selector).load(URL,data,callback);

//GET 基本上用於從伺服器獲得（取回）資料。註釋：GET 方法可能返回快取資料。
$.get(URL,callback);
//POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料。
$.post(URL,data,callback);

12.noConflict() 釋放對$識別符號的控制，避免與其他框架的衝突，返回一個jquery物件，可以用一個變數接收，然後再使用。 13.jsonp 是json的一種使用模式，實現跨域請求。

// url 用佔位符將回調函式傳到伺服器 url="http://www.baidu.com/jsoncallback=?"
$.getJson(url,function(data){})

14.從動態粒子效果 學習外掛。

1.函式即物件 2.畫布 canvas 3.幾何演算法

實用外掛列表

1. jQuery Validate 用於表單驗證
2. jQuery Accordion 用於建立摺疊選單
3. jQuery Autocomplete 用於根據使用者輸入值進行搜尋和過濾，讓使用者快速找到並從預設值列表中選擇
4. jQuery Growl 訊息提醒
5. jQuery Password Validation 密碼驗證,可以評價密碼。
6. jQuery Prettydate
7. jQuery Tooltip 取代了原生的工具提示框，讓它們可自定義，您只需要調整它們的內容、位置和外觀即可
8. jQuery Treeview 提供了一個無序靈活的可摺疊的樹形選單。適用於一些選單的導航，支援基於 cookie 的永續性選單。
9. jQuery qrcode 提供生成二維碼 的工具。

//  jQuery Validate 

//  jQuery Accordion
//  jQuery Autocomplete

//  jQuery Growl
//  jQuery Password Validation
//  jQuery Prettydate 
//  jQuery Tooltip
//  jQuery Treeview

//  jQuery 
<script src="jquery.js"></script>
// https://github.com/jeromeetienne/jquery-qrcode
<script src="jquery.qrcode.min.js"></script>
<script>
$("#qrcode").qrcode({width:50,height:50,text:"www.baidu.com"});//預設使用canvas渲染
$("#qrcode").qrcode({width:50,height:50,render:"table",text:"www.baidu.com"});//使用table渲染 不推薦
</script>
<div id="qrcode" style="width:50px;height:50px;"></div>