1、選擇器 $() -- 基於 CSS + XPath 的選擇器語法
I、基本選擇器
元素 | ID | Class - 替代JS的3種 getElement;可以 有多層
$("div p #id") -- div 元素 子元素爲p
II、屬性選擇器
$("[屬性]")
屬性選擇器支持 屬性 | 判斷屬性值 = != | 屬性值 | ^ $ 開頭和結尾 | 包含 *=
$("[href$='.jp']") -- 選擇 href 屬性以.jpg結尾的元素
III、DOM （層級） 選擇器
祖先: parent | parents | parentUtil
後代: children | find | each(公共方法，用於遍歷迭代數組、對象)
兄弟：sublings | next nextAll nextUntil | prev prevAll prevUntil
IV、僞類選擇器 -- 這些僞類基本都是CSS支持的
A、後代
基於任意位置 :first-child :first-of-type | :last-child :last-of-type | :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)
基於數目 :only-child :only-of-type
這些選擇器有兩種使用方式：
a、直接使用 :first-child 表明是第一個元素；第一個類型（只要類型發生切換後，出現新的類型也是第一個類型）
$("div :first-child")
<div>
<p>
</div>
$("div :first-child-type")
<div>
<span> -- 可以選中
<p> -- 可以選中（因爲類型不同）
</div>
b、指定元素 p:first-child 指定元素後，就要找 第一個元素 = p 的；第一個 類型 = p的（由直接使用可以看到，第一個類型=p的，並不限定子元素出現的位置，只要是 父元素的第一個類型=p的子元素即可。
$("div p:first-child")
<div>
<p> -- 選中
<p> -- 無法選中
</div>
$("div :first-child-type")
<div>
<span>
<p> -- 第一次出現可以選中
</div>
B、自身位置
自身在父節點的位置 :eq | :gt | :lt
選取元素的 :first | :last | :even | :odd (也有一些對應方法)
C、邏輯判斷（內容選擇）
:not(selector) | :empty | :contains | :has
:parent
D、表單元素選擇
根據type="" 類型來選擇
:input | :text | :password | :radio | :checkbox | :submit | :button | :reset | :image | :file
根據狀態 來選擇
:enabled | :disabled | :checked | :selected
2、過濾器 (filter)
I、過濾器 -- 基於選擇器選擇後，再通過方法進行過濾
位置： first | last
邏輯： eq | not | filter
$("div p").filter("#id1); -- 選出div 子元素中，id爲 id1 的元素
II、過濾樣式 -- 基於CSS 樣式，篩選選擇器內容，主要用在DOM和過濾器 方法參數中
$("div").parents(".class1") -- 選出祖先元素中 ，class 爲 class1 的元素
選擇器 + 過濾器 = 選出需要的元素；所以很多選擇器的用法，同樣適用在過濾器，特別是僞類部分，比如 狀態（可見性）；內容選擇（自身位置）；表單元素選擇；還有 父子層次 元素疊加 ("div p") (div>p) (div+p) (div~p)
選擇器和過濾器基本上最終目的途徑是差不多
3、DOM 操作
I、節點內容操作 getter/setter - 和js操作是一樣的邏輯
提供4個方法可以獲取元素的內容/屬性/ 以及表單用戶輸入的內容 ：text | html | val | attr
無參方法是 獲取內容；有參方法是設置值
設置值內容，有兩種方法：1 鍵值 - 對 & 鍵值對對象； 2、通過 callback 回調函數返回值設置 - callback 可選的參數是 (i, origValue) 當前元素索引和 原先的舊值。
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
II、新增/刪除節點
append prepend | before after -- 替代了JS的appendChild /nsertBefore
這兩組的區別是，如果可以包含子元素的，則 append 是追加子元素；如果不不能包含的兩者意思差不多
這兩組組方法，都可以接收 可變參數，支持多個 元素同時增加
function appendText(){
var txt1="<p>文本1。</p>"; // 使用 HTML 標籤創建文本
var txt2=$("<p></p>").text("文本2。"); // 使用 jQuery 創建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本3。"; // 使用 DOM 創建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
remove -- 包含自身和子元素都刪除 | empty -- 只清空子元素 -- 替代了JS的removeChild 等方法
如果選擇器選中的 元素很多是個列表，則 remove 方法可以通過 參數來過濾 （同樣是選擇），比如 id，class
III、樣式操作
addClass -- 增加，可以批量增加，空格分隔 | removeClass -- 刪除 | toggleClass -- 替代了JS的className
css() -- 不帶參數是獲取；可以指定 key - value 兩個參數；也可以是 多個key-value參數的對象 -- 替代了JS的style屬性
除了通過 css 來設置尺寸外，jQuery 提供了 6組方法來獲取設置尺寸，好處是避免了 同css 盒子模型 逐個去設置和計算
width | height | innerWidth | innerHeight | outerWidth | outerHeight | offset
4、事件
基本覆蓋了 JS的幾大事件種類 鍵盤、鼠標、瀏覽器、表單；在JS的事件基礎上去掉 on，比如onclick 編程click
I、常用事件
$(document).ready
$("p").click / dbclick
mouseenter/mouseover/mousemove/mouseleave/mousedown/mouseup
hover(= mouseenter + mouseleave)
focus/blur/change/select/submit
scorll
jQuery的事件基本都是基於 DOM level2 的；所以，同一個click 可以編寫、調用多次，相當於多次註冊；
這些事件都是 省略的事件;
II、實際中的事件模型有兩種：冒泡 和 捕獲；
冒泡：點擊元素後，事件不斷向上傳遞，直到 document IE標準
捕獲：點擊元素後，從父節點不斷遞歸到 ，子元素 其他標準
jQuery 因爲要支持IE， 默認使用了 冒泡的事件傳遞 模型；
on/bind(綁定方法）/live(並沒有直接綁定,而是綁定到document,由document分發到指定選擇元素)/delegate(和live方法類似，不過是綁定到唯一的父元素，然後再分發） -- on是最終方法，支持live和bind、delegate的所有功能
off/unbind/undelegate -- 與on 類似
$(selector).on(event,childSelector,data,function,map)
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
通過on可以註冊多個事件，可以指定子選擇器派發事件，還可以在事件基礎上綁定數據
如何選擇 通用事件模型 on 還是常用的簡化事件？
a、如果能唯一選擇到一個元素、事件是單一的，那就使用簡化事件、處理很清晰。
b、如果選擇了多個元素使用相同的事件（比如多個button響應相同的事件）、或者有多個類似事件不同元素可以派發，使用簡化事件需要逐個事件調用addEventListerner(handler)，效率非常低；使用 通用事件模型
c、還有幾種情況，新增元素（還未插入），綁定事件；特別是自定義事件
冒泡的副作用及解決？
如果綁定了上層元素的一個事件，但底層元素相同事件發生時，會冒泡到上層，結果上層觸發了該事件；比如mouseout事件，jQuery在處理時，對事件進行了判斷，通過event.realtedTarget 進行判斷，只有真的移出註冊的元素，才執行事件。具體可以參見 JS 總結的target部分。mouseenter和mouseleave替換 mouseover和mouseout
III、自定義事件
這個事件模型最大的作用就是可以自定義事件，這樣用戶可以在控件開發時，極大豐富了模型
$().trigger 觸發事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
5、動畫效果
基本所有的動畫效果，都提供無參的默認操作；有參的 (speed ,callback) 操作，可以在樣式後執行回調；speed可以是毫秒，也可以是 slow/fast/normal 等描述
I、隱藏/顯示
hide / show / toggle
II、淡入/淡出
fadeIn / fadeOut / fadeToggle / fadeTo - 固定漸變 透明度
III、滑動
slideDown / slideUp / slideToggle
IV、動畫 - 自定義效果
動畫效果，完全是基於 CSS3 的動畫功能來設置;從當前狀態 過渡 到 一個新的 位置
$(selector).animate({params},speed,callback);
默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
可以操作絕對值|相對值| 屬性(show|hide|toggle) |
雖然，annimate 可以操作所有 CSS 屬性，不過不支持 - 分隔符：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等
jQuery 還可以把多個動畫排在隊列中，按順序執行
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
V、停止
$().stop(stopAll, goToEnd)
stop方法可以停止 該元素的一些動畫效果（淡入淡出、滑動、自定義動畫）
stopAll 參數，是如果有隊列停止 所有隊列中的動畫
goToEnd 參數，當前動畫是否立即萬恆
VI、chaing技術 （就是把多個方法串聯起來執行、JS、Scala很多都可以）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
實現邏輯並不複雜，應該是每個方法返回值就是 this 這個元素本身，所以可以逐級調用；PS：注意如果是 不帶參數，獲取值的方法，估計就不能使用了
6、Ajax
I、基線方法 $.ajax(); -- 可以發送任何HTTP請求
$.ajax({
url:
cache:
dataType:
success: function(xml){
}
});
II、其他常用方法
($.) get/getJSON/getScript/post/load
-- 返回一些特定類型數據，這些可以通過 ajax 方法之後處理實現
III、附帶方法
$.param - 提供 URL 查詢字符串(index.htm?id=1) 這種查詢串
$.ajaxComplete / $.ajaxError / $.ajaxSend / $.ajaxStart / $.ajaxStop / $.ajaxSuccess 都是ajax發送、運行時、執行的回調通過，通過這些方法，把回調函數綁定到某個階段
7、工具函數
I、對象、數組常用函數
$.inArray （類似indexOf） | $.isArray | $.isEmptyObject | $.isFunction | $.makeArray | $.map (類似 map） | $merge (類似concat） | $.each(遍歷數組和對象，前面選擇器提到過) | $.extend(合併對象) | $.grep (類似filter) | $.type 對象類型 | $.uniqueSort （類似 sort）
II、字符串和數字操作
$.isNumberic | $.parseHTML | $.parseJSON | $.parseXML | $.trim
III、Dom相關
$.contains 判斷一個元素是否是另一個元素的後代 | $.data 元素綁定的數據 | $.hasData
IV、插件編寫
$.fn.extend -- 爲jQuery框架編寫新的方法(插件）
$(function () {
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// 使用新創建的.check() 方法
$( "input[type='checkbox']" ).check();
})
V、雜項
$.conflict -- 關鍵字切換
$.now() -- 當前時間
$.noop -- 空函數，可以提供一些需要 回調函數的方法使用