jQuery
jQuery是一個優秀的JavaScript框架,輕量級的JS庫，封裝了JS、CSS、DOM。
方便處理HTML、Event、實現動畫效果，方便為網站提供AJAX互動。
使使用者的HTML頁面保持程式碼和HTML頁面分離。
輕量級：侵入性低 耦合度低
重量級：侵入性高 耦合度高

jQuery使用步驟：
1.引用jQuery
2.使用jQuery選擇器定位節點
3.呼叫jQuery方法操作節點

jQuery物件： 即：jQuery選擇器選擇的物件
本質是一個DOM物件陣列;所以可以使用陣列方法：jQuery物件.length .get(index)  [index]
jQuery方法都是針對jQuery物件特有的，大部分方法的返回值型別也是jQuery物件，所有方法可以連綴呼叫方法
如：jQuery物件.f1().f2().f3()......
要使用jQuery中的API方法，必須先將DOM物件轉換成jQuery物件：$(DOM物件);
jQuery選擇器：定位元素，選擇方法
基本選擇器：$("標籤名"/".class屬性名"/"#id"/"#id,improtant"（選擇器組）);
層次選擇器: 
$("select1 select2") 1下所有滿足2的 子孫 元素
$("select1 > select2") 1下所有滿足2的 子 元素
$("select1 + select2") 1下所有滿足2的 下一個弟弟 元素
$("select1 ~ select2") 1下所有滿足2的 所有弟弟 元素
過濾選擇器:
first 選擇第一個last 選擇最後一個 （如 $("table tr:first); ）
not(selector) 把selector排除外
even 挑選偶數行odd挑選奇數行（按元素索引確定奇偶，從0開始）
eq(index) 下標等於index的元素gt(index) 下標大於index的元素lt(index) 下標小於index的元素（如選中第二行  $("table tr:eq(2));）
contains(text)  匹配包含給定文字的元素（如 $("p:contains('月餅')")  文字內容要用單引號包括！！）
可見元素過濾器：
empty匹配所有不包含子元素或文字的空元素
hidden 匹配所有不可見元素 
visible 匹配所有可見元素
屬性元素過濾器：
[attribute]  匹配所有具有attribute屬性的元素  （如獲取帶id的div $("div[id]") ）
[attribute=value] 匹配所有屬性值等於value的元素
[attribute！=value] 匹配所有屬性值不等於value的元素
狀態過濾選擇器
enabled 匹配可用的元素
disabled 匹配不可用的元素
checked 匹配選中的checkbox（如： $("input:checked") ）
selected 匹配選中的option（如： $("option:selected"); ）
表單選擇器
:text文字框:password密碼框:radio單選框:checkbox多選框  :submit提交按鈕
:reset重置按鈕   :button普通按鈕:file檔案框:hidden隱藏框
jQuery操作DOM
讀寫節點：
obj.html() 讀寫節點的HTML內容（帶標籤格式）
obj.text()/obj.text("")讀寫節點的文字內容
obj.val()/obj.val("")讀寫節點的value屬性值
obj.attr("屬性名")/obj.val("屬性名","屬性值")讀寫節點的任意屬性值
建立節點：$("元素內容");
新增節點：
$("a").prepend("b")  b新增到a元素中最前
$("a").append("b")b新增到a元素中最後
$("a").before("b")b新增到a元素之前
$("a").after("b")b新增到a元素之後
刪除節點：
obj.remove()  刪除節點
obj.remove(selector)  只刪除滿足selector的節點
obj.empty() 清空節點
jQuery樣式操作
addClass(" "); 追加樣式
removeClass(" ");移除指定樣式 ,若不指定則移除所有樣式
toggleClass(" ");  切換樣式，沒有就加上，有就移除
hasClass(" ");  判斷是否有指定樣式，返回布林值
遍歷節點
children()直接子節點
next()下一個兄弟節點
prev()上一個兄弟節點
siblings()所有兄弟節點
find(selector)查滿足選擇器的所有後代
parent()父節點
jQuery事件處理
$obj.bind('click',fn);/$obj.click(fn);（click代表單機事件，fn代表函式）
獲得事件event物件只需傳遞一個引數：$obj.click(function(e){....)); e就是event物件,已經過封裝適合各瀏覽器
獲取事件源：e.target 獲取事件物件座標：e.pageX   e.pageY（此處若要使用e.target呼叫方法，需$(e.target)）
jQuery處理時間機制：冒泡機制
子節點產生的時間會一次向上拋給父節點。
e.stopPropagation() 取消事件冒泡機制
jQuery合成事件
hover（mouseenter,mouseleave)  游標懸停事件（進入特效,離開特效）
toggle()  在多個事件響應切換 （顯示與隱藏）
電腦模擬操作事件
$obj.trigger(事件型別)  
如：$obj.triger("focus")/$obj.focus();
jQuery動畫
1.隱藏/顯示  show()/hide()
如：$obj.show(執行時間,動畫完畢後執行的函式)
2.上下滑動slideDown()/slideUp
用法同上
3.淡入淡出式動畫  fadeIn()/fadeOut()
用法同上
4.自定義動畫
移動位置：
animate(偏移起始位置，執行時間，回撥函式）（回撥函式選擇寫）
（若移動圖片則需預先將圖片定位，改變流定位預設模式， 在樣式中將圖片設定為相對定位：position：relative）
如：$("div").click(function(){
$(this).animate({'left':500px'},4000);
$(this).animate({'top':300px'},2000);
});
元素變形：
如：$("div").animate({"height":"300px"},2000).animate({"width":"300px"},2000);

//each()是jQuery封裝的遍歷方法
//含義是每次迴圈都執行each（）裡的function（）
$(emps).each(function(){});