jQuery框架-1.基礎知識
jQuery簡介
jQuery，顧名思義是JavaScript和查詢（Query），jQuery是免費、開源的。它可以簡化查詢DOM對象、處理事件、制作動畫、處理Ajax交互過程且兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。
jQuery優勢
- 體積小，使用靈巧（只需引入一個js文件）。
- 方便的選擇頁面元素（模仿CSS選擇器更精確、靈活）。
- 動態更改頁面樣式/頁面內容（操作DOM，動態添加、移除樣式）。
- 控制響應事件（動態添加響應事件）。
- 提供基本網頁特效（提供已封裝的網頁特效方法）。
- 快速實現通信（ajax）。
- 易擴展、插件豐富。
- 支持鏈式寫法。
引入jQuery
- 通過script引入本地jQuery文件。
- 通過引入CDN上面jQuery文件。
版本選擇
- 1.x：兼容ie678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
- 2.x：不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
- 3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。
jQuery和$的關系：
一、jQuery選擇器
- ID選擇器：$(“#box”);
- 類名選擇器：$(“.box”);
- 標簽選擇器：$(“div”);
- 後代選擇器：$(“#box p”);
- :first：獲取第一個元素。
- :last：獲取最後一個元素。
- :even：匹配所有索引值為偶數的元素，從 0 開始計數。
- :odd：匹配所有索引值為奇數的元素，從 0 開始計數。
- :eq(index)：匹配一個給定索引值的元素，從 0 開始計數。
- :not(selector)：去除所有與給定選擇器匹配的元素。
- :has(selector)：匹配含有選擇器所匹配的元素的元素。
二、jQuery屬性和樣式CSS
操作屬性：
attr(name|properties|key,value|fn)：設置或返回被選元素的屬性值。
removeAttr(name)：從每一個匹配的元素中刪除一個屬性。
prop(name|properties|key,value|fn)：獲取在匹配的元素集中的第一個元素的屬性值。
removeProp(name)：用來刪除由.prop()方法設置的屬性集。
區別：attr可以操作（增刪改查）自定義的節點屬性，而prop不可以（增刪改查）。attr和prop對input的disabled屬性的返回值不一致，attr返回disabled或者undefined，而prop返回布爾值。
操作Class：
addClass(class|fn) ：為每個匹配的元素添加指定的類名。
removeClass([class|fn]) ：從所有匹配的元素中刪除全部或者指定的類。
toggleClass(class|fn[,switch])：如果存在（不存在）就刪除（添加）一個類。
操作內容：
html([val|fn])：取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。
text([val|fn])：取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
val([val|fn|arr])：獲得匹配元素的當前值。如果多選，將返回一個數組，其包含所選的值。
操作CSS：
css(name|pro|[,val|fn])：訪問匹配元素的樣式屬性。
操作位置：
offset([coordinates])：獲取匹配元素在當前文檔的相對偏移。返回的對象包含兩個整型屬性：top 和 left，以像素計。方法只對可見元素有效。
position()：獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
scrollTop([val])：獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。
scrollLeft([val])：獲取匹配元素相對滾動條左側的偏移。此方法對可見和隱藏元素均有效。
操作尺寸：
height([val|fn])：取得匹配元素當前計算的高度值（px）。
width([val|fn])：取得第一個匹配元素當前計算的寬度值（px）。
innerHeight()：獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
innerWidth()：獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
outerHeight([options])：獲取第一個匹配元素外部高度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。
outerWidth([options])：獲取第一個匹配元素外部寬度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。
註：設置options為true，計算margin在內。
三、過濾查找
過濾元素：
eq(index|-index)：獲取第N個元素。這個元素的位置是從0算起，如果是負數，則從集合中的最後一個元素開始倒數。
first()：獲取第一個元素。
last()：獲取最後一個元素。
hasClass(class)：檢查當前的元素是否含有某個特定的類，如果有，則返回true。
has(expr|ele)：保留包含特定後代的元素，去掉那些不含有指定後代的元素。
not(expr|ele|fn)：刪除與指定表達式匹配的元素。
查找元素：
children([expr])：取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。只考慮子元素而不考慮所有後代元素。
find(expr|obj|ele)：搜索所有與指定表達式匹配的子元素。
parent([expr])：取得一個包含著所有匹配元素的唯一父元素的元素集合。
offsetParent()：返回第一個匹配元素用於定位的父節點。
next([expr])：取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
nextAll([expr])：查找當前元素之後所有的同輩元素。
prev([expr])：取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll([expr])：查找當前元素之前所有的同輩元素。
siblings([expr])：取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。
串聯操作：
add(expr|ele|html|obj[,con])：把與表達式匹配的元素添加到jQuery對象中。這個函數可以用於連接分別與兩個表達式匹配的元素結果集。返回的結果將始終以元素在HTML文檔中出現的順序來排序，而不再是簡單的添加。
andSelf()：將先前所選的加入當前元素中。
end()：回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。
四、jQuery事件
頁面載入事件：
ready(fn)：當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。
綁定事件：
on(events,[selector],[data],fn)：在選擇元素上綁定一個或多個事件的事件處理函數。
off(events,[selector],[fn])：在選擇元素上移除一個或多個事件的事件處理函數。
bind(type,[data],fn)：為每個匹配元素的特定事件綁定事件處理函數。
unbind(type,[data|fn]])：bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。
one(type,[data],fn)：為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。
hover([over,]out)：當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
click([[data],fn])：觸發每一個匹配元素的click事件。這個函數會調用執行綁定到click事件的所有函數。
註：其他事件方法使用方式一樣。例如：mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。
jQuery框架-1.基礎知識