jQuery
1. 什麼是 jQuery??
jQuery 是一個優秀的 JavaScript 架構，一個輕量級的 JavaScript 類庫。
jQuery 的核心理念是 Write less，Do more。
使用 jQuery 可以相容各種瀏覽器，方便的處理 HTML、Events、動畫效果
等，並且方便的為網站提供 AJAX 互動。
2.jQuery 的特點：
利用選取器來尋找要操作的節點， 然後將這些節點封裝成一個 jQuery 對象，
通過調用 jQuery 對象的方法或者屬性來實現對底層被封裝的節點的操作。
好處：a、相容性更好；b、代碼更簡潔
3.編程步驟：
step1、使用選取器尋找節點
step2、調用 jQuery 的屬性和方法
4.jQuery 對象與 DOM 對象之間的轉換
1. 什麼是 jQuery 對象。。
jQuery 對象是 jQuery 對底層對象的一個封裝，只有建立了這個對象，才能
使用類庫中提供的方法。
2. DOM 對象 ----> jQuery 對象
DOM 對象向 jQuery 對象的轉變很容易，外面追加$和圓括弧即可。
function f( ){
var obj = document.getElementById(‘d1’);
//DOM -> jQuery 對象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
} 3
. jQuery 對象 ----> DOM 對象
jQuery 對象向 DOM 對象轉化，通過調用 get 方法加參數值 0 即可
$obj.get(0)。
function f( ){
var $obj = $(‘#d1’);
//jQuery 對象 -> DOM
var obj = $(obj).get (0);
obj.innerHTML = ‘hello jQuery’;
}
5. jQuery 選取器
1. 什麼是 jQuery 選取器。。
jQuery 選取器是一種類似 CSS 選取器的特殊說明符號，能夠協助 jQuery
定位到要操作的元素上，使用了選取器可以協助 HTML 實現內容與行為的分離。
只需要在元素上加上 Id 屬性。
2. 選取器的種類
a、基本選取器
#id 根據指定的 ID 匹配一個元素
.class 根據指定的類匹配一個元素
element 根據的指定的元素名匹配所有的元素
select1,select2,......將每一個選取器匹配到的元素合并後一起返回
*匹配所有元素
b、層級選取器
1. select1 空格 select2 尋找指定元素的所有的後代
2. select1 > select2 尋找子節點
3. select1 + select2 下一個兄弟
4. select1 ~ select2 下面所有的兄弟
c、過濾選取器
1. 基本過濾選取器
:first 擷取第一元素
:last 擷取最後一個元素
:not 排除選取器要求的元素
:even 匹配所有下標為偶數的元素
:odd 匹配所有下標為奇數的元素
:eq 匹配所有給定索引值的元素
:gt 匹配所有大於給定索引值的元素
:lt 匹配所有小於給定索引值的元素
2. 內容過濾選取器
:contains 匹配包含給定文本的元素
:empty 匹配所有不包含子項目或者文本的空元素
:has 匹配含有選取器所匹配的元素的元素
:parent 匹配含有子項目或者文本的元素
3. 可見度過濾選取器
根據元素在頁面中的可見屬性進行過濾，主要是對 hidden 屬性和 visible
屬性的判斷。
:hidden 匹配所有隱藏元素，或者 type 為 hidden 的元素
:visible 匹配所有的可見元素
4. 屬性過濾選取器
屬性過濾器會對標記的屬性進行判斷，合格元素會作為返回的對象。
[attribute] 匹配包含給定屬性的元素。
[attribute=value] 匹配給定的屬性是某個特定值的元素
[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的
元素。
[attribute^=value] 匹配給定的屬性是以某些值開始的元素
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
[attribute*=value] 匹配給定的屬性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 複合屬性選取器，需要同時滿足多個條件時
使用。
5. 子項目過濾選取器
子項目過濾選取器會根據子項目的位置的數值來進行篩選。
:nth-child （index、enven、odd）匹配其父元素下的第 N 個子或奇偶元
素。注意':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元
素。:nth-child 從 1 開始的，而:eq()是從 0 算起的。
6. 表單對象屬性過濾選取器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有選中的被選中元素(複選框、單選框等，不包括 select
中的 option)
:selected 匹配所有選中的 option 元素
d、表單選取器
使用的規則和以上各選取器一致。$(“：input”)就會返回所有的 input 輸
入框，大多數情況下，表單選取器會和其他選取器進行配合來定位元素。
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的單行文字框
:password 匹配所有密碼框
:radio 匹配所有選項按鈕
:checkbox 匹配所有複選框
:submit 匹配所有提交按鈕
:image 匹配所有圖片
:reset 匹配所有重設按鈕
:button 匹配所有按鈕
:file 匹配所有的檔案域
:hidden 匹配所有隱藏元素，或者 type 為 hidden 的元素
6.jQuery 操作 DOM-查詢
1. html（） html()等價於 innerHTML
讀取或修改節點的 HTML 內容的屬性和 value 值。與 DOM 對象的
innerHTML 的作用一致。
2. text（） text()等價於 innerText
讀取或修改節點中的常值內容，會過濾掉標記內容，與 innerText 的作用基
本一致，但 innerText 在不同瀏覽器中寫法不同，在 jQuery 中則使用 text（）
方法即可。
3. val（）
讀取或修改節點的 value 屬性值，也就是針對錶單元素中有 value 屬性的哪
些元素的操作。
4. attr（）
讀取或設定修改節點的屬性。這個方法會更寬泛一些，可以修改元素的任何
屬性。
7. jQuery 操作 DOM-建立、插入、刪除
1. 建立 DOM 節點的文法
使用$符號將 HTML 標籤的字串文本括起來，即建立了 DOM 節點，如$
（html） 。大多數時候建立後的節點需要放入文檔中，使用到後續的一些方法可
以實現節點的插入簡寫形式
如 $(‘body’).append(‘<div>…</div>”)
2. 插入 DOM 節點的方法
append 方法會將 DOM 節點作為最後一個孩子節點添加進來
prepend 方法將 DOM 節點作為第一個孩子節點添加進來
after 方法將 DOM 節點作為下一個兄弟節點添加進來
before 方法將 DOM 節點作為上一個兄弟節點添加進來
3. 刪除 DOM 節點的方法
remove（）可以移除 DOM，remove（selector）可以按選取器定位後刪
除，empty（）清空節點。
4.將 js 和 html 內容分離
$(fn);
注意：window.onload=function(){}等價於$(fucntion(){});但是內在的機制
不相同。fn 是一個函數，表示當整個頁面記載完成之後就會執行 fn。
8. jQuery 操作 DOM-複製節點
1.複製 DOM 節點的方法
clone（）方法和 clone（true）都會實現複製，添加參數 true 的時候會將
節點的行為也複製到新的對象之上。
9. jQuery 操作 DOM-屬性操作
1. 屬性操作的方法
讀取屬性使用 attr（）方法，設定屬性使用 attr（ ‘’ ， ‘’ ）方法。刪除屬性
使用 removeAttribute（ ‘’ ）方法。
10. jQuery 操作 DOM-樣式操作
attr("class","")擷取和設定
addClass("")追加樣式
removeClass("")刪除所樣式
toggleClass("")轉場樣式
hasClass("")是否有某個樣式
css("")讀取 css 值
css("","")設定多個樣式
11.jQuery 操作 DOM-遍曆節點
childern()/childern(selector)只考慮直子節點
next()/next(selector)下一個兄弟的節點
perv()/perv(selector)上一個兄弟的節點
sibling()/sibling(selector)其他的兄弟
find(selector)尋找滿足選取器的所有的後代
parent()父節點，沒有選取器
jQuery 事件處理
1. 使用 jQuery 實現事件綁定
1. 使用 jQuery 實現事件綁定
$obj. bind(事件類型，事件處理函數)；
注 意 ： 為 一 個 jQuery 對 象 綁 定 單 擊 事 件 的 代 碼 實 現 為
$obj.bind(‘click’,fn);也可以簡寫為 $obj.click(fn);
2. 獲得事件對象 event
$(fucntion(e){
e 就是事件處理對象 （jQuery 對底層事件對象做了一個封裝， 簡化代碼）
});
3. 事件對象的常用屬性
a、找到事件來源：
var obj = e.target
擷取事件來源使用 事件對象的 target 屬性。
b、擷取發生事件時的滑鼠點擊的座標：
alert(e.pageX + ' ' + e.pageY);
擷取發生事件時的滑鼠座標使用 pageX 和 pageY 屬性。
c、禁止事件冒泡
e.stopPropagation();
2. 事件冒泡
子節點產生的事件會依次向上拋給相應的父節點
當事件發生時， 會首先發送給最內層的元素， 在這個元素獲得響應機會之後，
事件會向上冒泡給更外層的元素，及從內層向外層依次傳遞。
3. 合成事件
.hover（over，out）類比滑鼠移至上方事件
它為頻繁使用的任務提供了一種“保持在其中”的狀態。
當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函數。當滑鼠移
出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對滑鼠是否仍然處在
特定元素中的檢測（例如，處在 div 中的映像） ，如果是，則會繼續保持“懸停”
狀態，而不觸發移出事件（修正了使用 mouseout 事件的一個常見錯誤） 。
toggle（f1，f2，... ...）類比連續單機事件
注意的是，通過 jQuery 這種方式觸發事件時，不會發生事件傳播；只會執
行直接添加到元素的處理常式。
如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元
素時，則觸發指定的第二個函數，如果有更多函數，則再次觸發，直到最後一個。
隨後的每次點擊都重複對這幾個函數的輪番調用。
4.類比操作
trigger（type，[data]）在每一個匹配的元素上觸發某類事件。也就是提交
第一個表單，但不用 submit()的效果。
$('#username').trigger('focus');
簡寫$obj.focus();
jQuery 動畫
1. 顯示隱藏的動畫效果
.hide() 和 .show() 方法是對 display 的屬性的操作。如果添加一個速度參
數，就會產生動畫效果。
2. 上下滑動式動畫效果
$('div').slideDown(800);
通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可
選地觸發一個回呼函數。
$('div').slideUp('fast');
通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可
選地觸發一個回呼函數。
$('div').slideToggle(speed, [callback])
通過高度變化來切換所有匹配元素的可見度，並在切換完成後可選地觸發一
個回呼函數。
3. 淡入淡出式動畫效果
如 果 針 對 一 個 元 素 ， 只 是 逐 漸 增 大 其 不 透 明 度 ， 那 麼 使 用 fadeIn
（ ‘slow’ ）;fadeOut 是逐漸減少不透明度，可以使用 /.fadeOut()
4. 自訂動畫效果
用法：animate（{js 對象}，執行時間，回呼函數） ；
js 對象：{ }描述動畫執行之後元素的樣式
執行時間：毫秒數
callback 回呼函數：動畫執行結束後要執行的函數
jQuery 類數組
1. 什麼是類數組
jQuery 對象封裝的 DOM 對象。
2. 類數組的操作
length 屬性：獲得 jQuery 對象封裝的 dom 對象的個數
each（fn）遍曆類數組，fn 用來處理 DOM 對象。在 fn 中 this 表示正在被
遍曆的那個DOM對象。 fn函數可以添加一個參數i用於表示正在被遍曆的DOM
對象的下標（從 0 開始）
eq(index)：將下標等於 index 的 DOM 對象取出來
get(index):獲得下標為 index 的 dom 對象
get（） ：返回一個 DOM 對象組成的數組
index（obj） ：返回 DOM 或 jQuery 對象在類數組中的下標
jQuery 對 AJAX 的支援
1. load（）方法
作用：將伺服器返回的資料位元組添加到符合要求的節點之上
用法：
$obj.load ( 請求地址，請求參數） ；
請求參數可以有兩種格式：
“username=tom & age=22”
{‘username’ ： ‘tom’ ， ‘age’ ：22 }
有請求參數時，load 方法發送 POST 請求，否則發送 GET 請求
2.$.get 和$.post
a,作用:向伺服器發送非同步請求，可將伺服器返回的資料進行處理。
b,用法:
$.get(url,data,callback,type)
url: 請求地址
data:請求參數，可以有兩種格式
格式一;"username=tom"
格式二:{"username":"tom"}
