人建議：學習 jQuery 前先掌握基本的 JavaScrpit 語法，特別是對函數要掌握，jQuery 基本上是使用函數。

jQuery 簡介

• jQuery 是一個輕量級 JavaScript 庫

• jQuery 庫位于一個 JavaScript 文件中，其中包含了所有的 jQuery 函數，需要通過 <script>標簽引入 jQuery 庫才能進行使用

jQuery 庫的三種引入來源

• 本地引入

  共有兩個版本的 jQuery 可供下載 http://jQuery.com：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）

• 從 Google 加載 CDN jQuery 核心文件（ 版本可更換 ）

  src = http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js

• 從 Microsoft 加載 CDN jQuery 核心文件（ 版本可更換 ）

  src = http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js

jQuery語法

基礎語法：$(selector).action()

• 美元符號（$）定義 jQuery

• 選擇符（selector）“ 查詢 ” 和 “ 查找 ” HTML 元素

• jQuery 的 action() 執行對元素的操作

文檔就緒函數

• 文檔就緒函數，用于在頁面加載成功后執行的指定代碼

• 如果在文檔沒有完全加載之前就運行函數，操作可能失敗

• 通常該函數用于替換 window.onload 事件，文檔就緒函數的執行效率更高

$(document).ready(function(){
 code block
});

可以簡寫為:

$(function(){
 code block
});

jQuery 使用 $ 符號作為 jQuery 的簡寫

jQuery 標識符

• 使用 jQuery 全名

jQuery(document).ready(function(){
jQuery("button").click(function(){
 code block
});
});

• 使用 jQuery 簡寫

$(function(){
 $("button").click(function(){
 code block
 });
});

• 自定義 jQuery 別名

var jq = $.noConflict();
jq(function(){
 jq("button").click(function(){
 code block
 });
});

注：因為 javascrpit 某些框架中也使用 $ 作為簡寫( 就像 jQuery )，noConflict() 方法是為了解決 javascrpit 框架之間符號沖突而定義的方法，它會釋放 $ 標識符的控制，這樣其他腳本也可以使用這個符號

jQuery 選擇器

jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素

• $(this) 當前 HTML 元素

• $("p") 選取 <p> 元素

• $("p.intro") 選取所有 class="intro" 的 <p> 元素

• $("p#demo") 選取所有 id="demo" 的 <p> 元素

• $("div#intro .head") 選取 id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素

• $("[href]") 選取所有帶有href 屬性的元素

• $("[href='#']") 選取所有帶有 href 值等于"#" 的元素

• $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素

• $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素

jQuery CSS 選擇器

jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性

• 把所有 p 元素的背景顏色更改為紅色：$("p").css("background-color","red")

jQuery 事件

• jQuery 事件處理方法是 jQuery 中的核心函數

• 事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用

• 例子：按鈕的點擊事件被觸發時會調用一個函數

  $("button").click(function() {..some code... } )

常用事件函數

• $(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時）

• $(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件

• $(selector).change(function) 觸發、或將函數綁定到指定元素的 change 事件

• $(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件

• $(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件

• $(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件

jQuery 效果

效果通常綁定在某在事件上，例如通過點擊按鈕產生隱藏效果

常見的用于效果的函數

1.隱藏、顯示、切換

- 隱藏 `$(selector).hide(speed,callback)` ： `$("p").hide();`
- 顯示`$(selector).show(speed,callback)` ： `$("p").show(1000);`
- 切換隱藏/顯示`$(selector).toggle(speed,callback)` ： `$("p").toggle();`

speed 和 callback 都是可選參數

speed 參數規定顯示/隱藏的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數是顯示/隱藏完成后所執行的函數名稱

2.淡入、淡出

- 淡入 `$(selector).fadeIn(speed,callback)` ： `$("#div1").fadeIn("slow");`
- 淡出 `$(selector).fadeOut(speed,callback)` ： `$("#div3").fadeOut(3000);`
- 切換淡入/淡出 `$(selector).fadeToggle(speed,callback)` ： ` $("#div1").fadeToggle();`
- 漸變為特定透明度 `$(selector).fadeTo(speed,opacity,callback)` ：`$("#div2").fadeTo("slow",0.4);`

speed 和 callback 都是可選參數，opacity 為必需參數

speed 參數規定淡入/淡出的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數是顯示/隱藏完成后所執行的函數名稱

opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間)

3.滑動

- 向下滑動 `$(selector).slideDown(speed,callback)` ： `$("#panel").slideDown();`
- 向上滑動 `$(selector).slideUp(speed,callback)` : `$("#panel").slideUp();`
- 切換向上滑動/向下滑動 `slideToggle()` : `$("#panel").slideToggle();`

speed 和 callback 都是可選參數

speed 參數規定向上滑動/向下滑動的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數是向上滑動/向下滑動完成后所執行的函數名稱

4.動畫

- 自定義動畫 `$(selector).animate({params},speed,callback)`

params 是必需參數， speed 和 callback 是可選參數

params 參數定義形成動畫的 CSS 屬性

speed 參數規定效果的時長，可選值為：”slow”、”fast” 或毫秒值

callback 參數是動畫完成后所執行的函數名稱

注： 默認地，所有 HTML 元素都有一個靜態位置，且無法移動，如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！

- 停止動畫 ·`$(selector).stop(stopAll,goToEnd);`

stopAll 和 goToEnd 都是可選參數

stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行

goToEnd 參數規定是否立即完成當前動畫。默認是 false。

默認地，stop() 會清除在被選元素上指定的當前動畫

實例

使用絕對值

$("div").animate({
 left:'250px',
 opacity:'0.5',
 height:'150px',
 width:'150px'
 });

使用相對值

$("button").click(function(){
 $("div").animate({
 left:'250px',
 height:'+=150px',
 width:'+=150px'
 });
});

使用隊列功能 ( 逐一進行 animate 調用 )

$("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");
});

5.方法連接

允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條，這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上

例如： 把 css(), slideUp() 和 slideDown() 鏈接在一起。”p1” 元素首先會變為紅色，然后向上滑動，然后向下滑動

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery 操作 HTML 元素和屬性

對內容操作

1.獲取內容

- `$(selector).text();` 設置或返回所選元素的文本內容
- `$(selector).html();` 設置或返回所選元素的內容（包括 HTML 標記）
- `$(selector).val();` 設置或返回表單字段的值

2.設置內容

- `$(selector).text(string);` 設置所選元素的文本內容
- `$(selector).val(string);` 設置所選元素的內容（包括 HTML 標記）
- `$(selector).html(string);` 設置表單字段的值

3.回調函數

i：被選元素列表中當前元素的下標

origText：原始（舊的）值

res：以函數新值返回您希望使用的字符串

- `$(selector).text(function(i,origText){return res;});` 設置或返回所選元素的文本內容
- `$(selector).val(function(i,origText){return res;});` 設置或返回所選元素的內容（包括 HTML 標記）
- `$(selector).html(function(i,origText){return res;});` 設置或返回表單字段的值

對屬性操作

1.獲取屬性

- `$(selector).attr("attribute");` 獲取指定元素的所選屬性

2.設置屬性

- `$(selector).attr("attribute","value");` 設置所選屬性的值
- `$(selector).attr({"attribute1":"value1", "attribute2":"value2"});` 同時設置多個屬性的值

3.attr() 的回調函數

i ： 被選元素列表中當前元素的下標

origValue : 原始（舊的）值

res ： 以函數新值返回您希望使用的字符串

- `$(selector).attr("attribute",function(i,origValue){return res});`

對元素/內容操作

與前面的 對內容操作 不同的是：上面的三個方法會將原來的值覆蓋，而這里的方法是在原值基礎上進行修改

1.添加

參數可以是多個，如果多個含有 html 的內容，則相當于增加了多個 html 元素

- `$(selector).append("text");` 在被選元素的結尾插入內容
- `$(selector).prepend("text");` 在被選元素的開頭插入內容
- `$(selector).prepend("text");` 在被選元素之后插入內容
- `$(selector).before("text");` 在被選元素之前插入內容

2.刪除

- `$(selector).remove();` 刪除被選元素（及其子元素）
- `$(selector).empty();` 從被選元素中刪除子元素
- `$(selector).remove(selector);` 刪除指定選擇器的元素

對 CSS 元素操作

前三種方法是針對已經寫好的樣式

- `$(selector).addClass("className1 className2");` 向被選元素添加一個或多個類
- `$(selector).removeClass("className1 className2");` 從被選元素刪除一個或多個類
- `$(selector).toggleClass("className");` 對被選元素進行添加/刪除類的切換操作
- `$(selector).css();`返回樣式屬性
- `$(selector).css("attribute","value");`設置單個樣式屬性
- `$(selector).css({"propertyname":"value","propertyname":"value",...});`設置多個樣式屬性

對尺寸操作

注意參數，中間四種沒有沒有參數，不能進行設置

- `$(selector).width("text");` 設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
- `$(selector).height("text");` 設置或返回元素的高度（不包括內邊距、邊框或外邊距）
- `$(selector).innerWidth();`返回元素的寬度（包括內邊距）
- `$(selector).innerHeight(");`返回元素的高度（包括內邊距）
- `$(selector).outerWidth();`返回元素的寬度（包括內邊距和邊框）
- `$(selector).outerHeight();` 返回元素的高度（包括內邊距和邊框）
- `$(selector).outerWidth(true);`返回元素的寬度（包括內邊距、邊框和外邊距）
- `$(selector).outerHeight(true);` 返回元素的高度（包括內邊距、邊框和外邊距）

jQuery 遍歷 DOM

祖先

向上遍歷 DOM 樹

- `$(selector).parent();` 返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷
- `$(selector).parents();` 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
- `$(selector).parents(selector);` 返回經過過濾的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
- `$(selector).parentsUntil() ;`返回介于兩個給定元素之間的所有祖先元素

祖先

向下遍歷 DOM 樹，以查找元素的后代

- `$(selector).children();` 返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷
- `$(selector).children(selector);` 返回被選元素的經過過濾的子元素，該方法只會向下一級對 DOM 樹進行遍歷
- `$(selector).find("selector");` 返回被選元素的后代元素，一路向下直到最后一個后代(此方法必須有參數，如果是全部則為 "*" )

同胞

DOM 樹中遍歷元素的同胞元素

- `$(selector).siblings(selector);` 返回被選元素的所有同胞元素（selector可選）
- `$(selector).next();` 返回被選元素的下一個同胞元素
- `$(selector).nextAll();` 返回被選元素的所有跟隨的同胞元素
- `$(selector).nextUntil(selecotr);` 返回介于兩個給定參數之間的所有跟隨的同胞元素
- prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）

過濾

允許您基于其在一組元素中的位置來選擇一個特定的元素

- `$(selector).first();` 返回被選元素的首個元素
- `$(selector).last();` 返回被選元素的最后一個元素
- `$(selector).eq();` 返回被選元素中帶有指定索引號的元素（索引號從 0 開始）
- `$(selector).filter(selector);` 不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回
- `$(selector).not(selector);` not() 方法與 filter() 相反，返回不匹配標準的所有元素

jQuery Ajax

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）

簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示

load 方法

- `$(selector).load(URL,data,callback);`
方法從服務器加載數據，并把返回的數據放入被選元素中

必需的 URL 參數規定您希望加載的 URL。

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

可選的 callback 參數是 load() 方法完成后所執行的函數名稱

callback 回調函數

$(selector).load(URL,data,function(responseTxt,statusTxt,xhr){});

responseTxt - 包含調用成功時的結果內容

statusTXT - 包含調用的狀態

xhr - 包含 XMLHttpRequest 對象

responseTxt - 包含調用成功時的結果內容

statusTXT - 包含調用的狀態

xhr - 包含 XMLHttpRequest 對象

get/post 方法

必需的 URL 參數規定您希望請求的 URL

可選的 callback 參數是請求成功后所執行的函數名

- `$.get(URL,callback);`
通過 HTTP GET 請求從服務器上請求數據

GET - 從指定的資源請求數據

GET 基本上用于從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據

- `$.post(URL,data,callback);`
通過 HTTP POST 請求從服務器上請求數據

data 是要提交給服務器的數據，如果數據有多個，使用 json 格式

POST - 向指定的資源提交要處理的數據

POST 也可用于從服務器獲取數據。不過，POST 方法不會緩存數據，并且常用于連同請求一起發送數據

回調函數

data : 存有被請求頁面的內容

status : 存有請求的狀態( success/fail )

function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });

注意： ajax 不能訪問本地文件，需要解決跨域訪問的問題