JQuery庫的基礎用法
JQuery的定義：
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。
jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。
jQuery 優點：
它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。
極大地簡化了 JavaScript 程式設計。jQuery 庫可以通過一行簡單的標記被新增到網頁中。
jQuery庫包含以下功能：
1、html，的元素選取
2、html的，元素操作
3、html dom，遍歷和修改
4、js，特效和動畫效果
5、css，操作
6、html，事件操作
7、ajax，非同步請求方式
提示
jQuery 語法使用：
通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行"操作"（actions）。
jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。
基礎語法： $(selector(選擇器)).(行為)action()
美元符號用來定義 jQuery
選擇符（selector）用來“查詢"和"查詢” HTML 元素
jQuery 的 action() 執行對元素的操作事件
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
<!--匯入jQuery程式碼庫-->
<script type="text/javascript" src="js/jquery-2.1.0.js">
/*為了保證js和jq的程式碼能夠同時使用，所以獨立開一個scrpt*/
</script>
<!--jq的文件載入事件-->
<script>
/*js版的載入方式*/
onload = function(){
alert("我被載入了1");
}
/*jq的載入方式*/
jQuery(document).ready(function(){
alert("我被載入了1");
});
/*簡寫方式*/
$(document).ready(function(){
alert("我被載入了2");
});
/*終極簡寫方式*/
$(function(){
alert("我被載入了3");
});
</script>
如果在文件沒有完全載入之前就執行函式，操作可能失敗。
jQuery選擇器jQuery選擇器允許您對HTML元素組或單個元素進行操作。
jQuery選擇器基於元素的id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML元素。
它基於已經存在的CSS選擇器，除此之外，它還有一些自定義的選擇器。
jQuery中所有選擇器都以美元符號開頭：$ (function(){// 開始寫 jQuery 程式碼...});如果在文件沒有完全載入之前就執行函式，操作可能失敗。
jQuery 選擇器jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
#jQuery的元素轉換
##示例程式碼
<script>
function changeJs(){
var div1 = document.getElementById("div1");
div1.innerHTML = "JS成功修改了程式碼";
//js物件轉換為jq的物件
$(div1).html("JQ成功修改了程式碼");
// div1.html("JS成功修改了程式碼");
}
$(function(){
//給bt2新增點選事件
$("#bt2").click(function(){
//找到div2
$("#div2").html("是JQ進行的內容的改變");
//將jq的物件轉換成js的物件
var $div = $("#div2");
//獲取jq物件的具體元素，賦值給js變數轉換為js物件
//var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML = "jq物件轉換為js物件成功";
});
});
</script>
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如右側所示：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test") ........…(".test")
$("*")，選取所有元素
$(this)，選取當前 HTML 元素
$(“p.intro”)，選取 class 為 intro 的
元素
$(“p:first”)，選取第一個
元素
$(“ul li:first”)，選取第一個
元素的第一個
元素
$(“ul li:first-child”)，選取每個
元素的第一個
元素
$("[href]")，選取帶有 href 屬性的元素
$(“a[target=’_blank’]”)，選取所有 target 屬性值等於 “_blank” 的 元素
$(“a[target!=’_blank’]”)，選取所有 target 屬性值不等於 “_blank” 的 元素
$(":button")，選取所有 type=“button” 的 元素 和 元素
$(“tr:even”)，選取偶數位置的 元素
$(“tr:odd”)，選取奇數位置的 元素
#JQ的開發步驟
1. 匯入相關的JQ的庫
2. 完成文件載入事件 $(function)
3. 確定相關的事件源
4. 確定事件源所操作的事件
5. 確定事件的響應行為
#jQuery的動畫效果
## 示例程式碼
<script>
$(function(){
//顯示圖片
//給btn1新增點選事件
$("#btn1").click(function(){
//$("#img1").show(5000);
//$("#img1").fadeIn(5000);
$("#img1").slideDown(1000);
});
//隱藏圖片
$("#btn2").click(function(){
//$("#img1").hide(5000);
//$("#img1").slideUp(2000);
$("#img1").animate({width:"20%",opacity:"0.3"},1000)
});
});
</script>
##使用jQuery寫出一個帶動畫的自動顯示和隱藏的廣告的功能
<script>
//顯示廣告
function showAD(){
$("#img1").slideDown(2000);
setTimeout("hideAD()",2000);
}
//隱藏廣告
function hideAD(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAD()",2000);
});
</script>
</head>
<body>
<img src="img/1.jpg" id="img1" style="display: none;" width="300px"/>
</body>
#jQuery的選擇器:
## 什麼選擇器?
jQuery的選擇器和CSS的選擇器基本一致，都是為了更加精確的匹配到某個元素
## 基本選擇器
- 標籤選擇器:以標籤名作為參考
- 類選擇器:以.類名開頭
- ID選擇器:以#ID名開頭
- 萬用字元選擇器:以*代表全部選擇器
- 多層選擇器:選擇器，選擇器
### 示例程式碼
<script>
$(function(){
//找出id為two的元素
$("#btn1").click(function(){
$("#two").css("background-color","paleturquoise");
});
//找出mini類的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","paleturquoise");
});
//找出所有div元素
$("#btn3").click(function(){
$("div").css("background-color","paleturquoise");
});
//找出所有元素
$("#btn4").click(function(){
$("*").css("background-color","paleturquoise");
});
//找出mini類和span類的元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","paleturquoise");
});
});
</script>
##層級選擇器
- 子代選擇器：選擇器1 > 選擇器2
- 後代選擇器:選擇器1 選擇器2
- 相鄰兄弟選擇器:選擇器1 + 選擇器2:找出離本身最近的一個弟弟元素
- 找出所有弟弟選擇器?：選擇器1 ~ 選擇器2:找出所有的弟弟
###示例程式碼
<script>
$(function(){
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","paleturquoise");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","paleturquoise");
});
//找出id為one的相鄰兄弟div
$("#btn3").click(function(){
$("#one+div").css("background-color","paleturquoise");
});
//找出id為two的所有弟弟div
$("#btn4").click(function(){
$("#two~div").css("background-color","paleturquoise");
});
});
</script>
獨立檔案中使用 jQuery 函式，如果您的網站包含許多頁面，並且您希望您的 jQuery 函式易於維護，那麼請把您的 jQuery 函式放到獨立的 .js 檔案中。
jQuery 事件
jQuery 是為事件處理特別設計的。
頁面對不同訪問者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。
例項：
在元素上移動滑鼠。
選取單選按鈕
點選元素
在事件中經常使用術語"觸發"（或"激發"）例如： “當您按下按鍵時觸發 keypress(按鍵響應) 事件”。
常見 DOM 事件：
滑鼠事件：
click(單擊)
dblclick(雙擊滑鼠)
mouseenter(滑鼠移入)，mouseleave(滑鼠移出)
mousedown(按下滑鼠按鍵)，mouseup(鬆開滑鼠按鈕)
hover()方法用於模擬游標懸停事件，當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter)，當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。
鍵盤事件：keypress(按鍵響應)，keydown(按鍵按下)，keyup(按鍵恢復)
表單事件：submit(提交)，change(更換)，focus(焦點)， blur(失去焦點)
文件/視窗事件： load(負荷)，resize(調整尺寸)， scroll(文字框中的起始滾動行)， unload(解除安裝)
fadeOut(淡出時間)
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
(document).ready()方法允許我們在文件完全載入完後執行函式。
jQuery效果−隱藏和顯示隱藏、顯示、切換，滑動，淡入淡出，以及動畫。slow(緩慢的)，可用作動作時間
jQueryhide(spaad)和show(spaad)：通過jQuery，您可以使用"hide(隱藏)"和"show(顯示)"方法來隱藏和顯示HTML元素。speed引數規定隱藏/顯示的速度，可以取以下值："slow(緩慢的)"、"fast(快速的)"或毫秒，可選的callback引數是隱藏或顯示完成後所執行的函式名稱
jQuerytoggle(切換)：通過jQuery，您可以使用toggle()方法來切換hide()和show()方法。
jQuery效果−淡入淡出通過jQuery，您可以實現元素的淡入淡出效果。
jQuery擁有下面四種fade方法：fadeIn()，用於淡入已隱藏的元素。fadeOut()，用於淡出顯示的元素。fadeToggle()，可以在fadeIn()與fadeOut()方法之間進行切換。
fadeTo()，允許漸變為給定的不透明度（值介於0與1之間）。
jQuery效果−滑動通過jQuery，您可以在元素上建立滑動效果。
jQuery擁有以下滑動方法：slideDown()，用於向下滑動元素。
slideUp()，用於向上滑動元素。
slideToggle()，可以在slideDown()與slideUp()方法之間進行切換。
如果元素向下滑動，則slideToggle()可向上滑動它們。
如果元素向上滑動，則slideToggle()可向下滑動它們。
jQuery效果−動畫jQueryanimate()方法允許您建立自定義的動畫。
語法： (document).ready() 方法允許我們在文件完全載入完後執行函式。
jQuery 效果- 隱藏和顯示隱藏、顯示、切換，滑動，淡入淡出，以及動畫。slow(緩慢的)，可用作動作時間
jQuery hide(spaad) 和 show(spaad)：通過 jQuery，您可以使用 "hide(隱藏)" 和 "show(顯示)" 方法來隱藏和顯示 HTML 元素。speed 引數規定隱藏/顯示的速度，可以取以下值："slow(緩慢的)"、"fast(快速的)" 或毫秒，可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱
jQuery toggle(切換)：通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
jQuery 效果 - 淡入淡出通過 jQuery，您可以實現元素的淡入淡出效果。jQuery 擁有下面四種 fade 方法：fadeIn()，用於淡入已隱藏的元素。fadeOut()，用於淡出顯示的元素。
fadeToggle()，可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
fadeTo()，允許漸變為給定的不透明度（值介於 0 與 1 之間）。
jQuery 效果 - 滑動通過 jQuery，您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法：slideDown()，用於向下滑動元素。
slideUp()，用於向上滑動元素。
slideToggle()，可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
jQuery 效果- 動畫jQuery animate() 方法允許您建立自定義的動畫。
語法：(document).ready()方法允許我們在文件完全載入完後執行函式。
jQuery效果−隱藏和顯示隱藏、顯示、切換，滑動，淡入淡出，以及動畫。
slow(緩慢的)，可用作動作時間。
jQueryhide(spaad)和show(spaad)：通過jQuery，您可以使用"hide(隱藏)"和"show(顯示)"方法來隱藏和顯示HTML元素。
speed引數規定隱藏/顯示的速度，可以取以下值："slow(緩慢的)"、"fast(快速的)"或毫秒，可選的callback引數是隱藏或顯示完成後所執行的函式名稱。
jQuerytoggle(切換)：通過jQuery，您可以使用toggle()方法來切換hide()和show()方法。
jQuery效果−淡入淡出通過jQuery，您可以實現元素的淡入淡出效果。
jQuery擁有下面四種fade方法：fadeIn()，用於淡入已隱藏的元素。
fadeOut()，用於淡出顯示的元素。fadeToggle()，可以在fadeIn()與fadeOut()方法之間進行切換。fadeTo()，允許漸變為給定的不透明度（值介於0與1之間）。
jQuery效果−滑動通過jQuery，您可以在元素上建立滑動效果。
jQuery擁有以下滑動方法：slideDown()，用於向下滑動元素。
slideUp()，用於向上滑動元素。
slideToggle()，可以在slideDown()與slideUp()方法之間進行切換。
如果元素向下滑動，則slideToggle()可向上滑動它們。
如果元素向上滑動，則slideToggle()可向下滑動它們。
jQuery效果−動畫jQueryanimate()方法允許您建立自定義的動畫。
語法：(selector).animate({params},speed,callback)，必需的 params 引數定義形成動畫的 CSS 屬性。
預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動，如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！
jQuery animate() - 使用相對值，也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 “+=” 或 “-=” 。
jQuery animate() - 使用預定義的值，您也可以把屬性的動畫值設定為 “show”、“hide” 或 “toggle” 。
jQuery animate() - 使用佇列功能，預設地，jQuery 提供針對動畫的佇列功能。
這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。
jQuery 停止動畫
jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。
jQuery stop() 方法，jQuery stop() 方法用於停止動畫或效果，在它們完成之前，stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
語法：(selector).stop(stopAll,goToEnd);可選的stopAll引數規定是否應該清除動畫佇列。
預設是false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
可選的goToEnd引數規定是否立即完成當前動畫。預設是false。
因此，預設地，stop()會清除在被選元素上指定的當前動畫。
jQueryCallback(回撥函式)方法Callback函式在當前動畫100許多jQuery函式涉及動畫。
這些函式也許會將speed或duration作為可選引數。例子： (selector).stop(stopAll,goToEnd);可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。因此，預設地，stop() 會清除在被選元素上指定的當前動畫。
jQuery Callback(回撥函式) 方法Callback 函式在當前動畫 100% 完成之後執行。許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。例子：(selector).stop(stopAll,goToEnd);可選的stopAll引數規定是否應該清除動畫佇列。預設是false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。可選的goToEnd引數規定是否立即完成當前動畫。預設是false。因此，預設地，stop()會清除在被選元素上指定的當前動畫。
jQueryCallback(回撥函式)方法Callback函式在當前動畫100許多jQuery函式涉及動畫。這些函式也許會將speed或duration作為可選引數。例子：(“p”).hide(“slow”)
speed 或 duration 引數可以設定許多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。
jQuery - 鏈(Chaining)
通過 jQuery，可以把動作/方法連結在一起。
Chaining 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）。
jQuery 方法連結：直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為連結（chaining）的技術，允許我們在相同的元素上執行多條 jQuery 命令，一條接著另一條。
提示： 這樣的話，瀏覽器就不必多次查詢相同的元素。
如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
如果需要，我們也可以新增多個方法呼叫。
提示：當進行連結時，程式碼行會變得很長。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮排。
jQuery 會拋掉多餘的空格，並當成一行長程式碼來執行上面的程式碼行。
jQuery - 獲取內容和屬性
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作：
jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
DOM = Document Object Model（文件物件模型）
DOM 定義訪問 HTML 和 XML 文件的標準：“W3C 文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式”。
獲得內容 - text()、html() 和 val()：
三個簡單實用的用於 DOM 操作的 jQuery 方法：
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容（包括 HTML 標記）
val() - 設定或返回表單欄位的值
attr(“要獲取的屬性”) - 方法用於獲取屬性值
jQuery - 設定內容和屬性
設定內容 - text()、html() 和 val()
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容（包括 HTML 標記）
val() - 設定或返回表單欄位的值
。。。。。。。。。。。。。。。。。。
text()、html() 以及 val() 的回撥函式：
text()、html() 以及 val()，同樣擁有回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
attr() 方法也用於設定/改變屬性值。attr() 方法也允許您同時設定多個屬性。
attr()，也提供回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
jQuery - 新增元素
通過 jQuery，可以很容易地新增新元素/內容。
新增新內容的四個 jQuery 方法：
append() - 在被選元素的結尾插入內容，（仍然該元素的內部），可無限追加。
prepend() - 在被選元素的開頭插入內容，可無限追加。
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
jQuery - 刪除元素
通過 jQuery，可以很容易地刪除已有的 HTML 元素。
可使用以下兩個 jQuery 方法：
remove() - 刪除被選元素（及其子元素），remove() 方法也可接受一個引數，允許您對被刪元素進行過濾，該引數可以是任何 jQuery 選擇器的語法。
empty() - 從被選元素中刪除子元素
jQuery - 獲取並設定 CSS 類
通過 jQuery，可以很容易地對 CSS 元素進行操作。
jQuery 擁有若干進行 CSS 操作的方法：
addClass() - 向被選元素新增一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對addClass()和removeClass() 的切換
jQuery css() 方法
css() - 設定或返回被選元素的一個或多個樣式屬性
如需返回指定的 CSS 屬性的值，請使用如右所示語法：css("(屬性名)propertyname")。
如需設定指定的 CSS 屬性，請使用如右所示語法：css("(屬性名)propertyname","(值)value")。
如需設定多個 CSS 屬性，請使用如下語法：css({“propertyname”:“value”,“propertyname”:“value”,…})。
jQuery 尺寸
通過 jQuery，很容易處理元素和瀏覽器視窗的尺寸。
jQuery 提供多個處理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法：
width() 方法設定或返回元素的寬度（不包括內邊距，邊框或外邊距）。
height() 方法設定或返回元素的高度（不包括內邊距，邊框或外邊距）。
jQuery innerWidth() 和 innerHeight() 方法：
innerWidth() 方法返回元素的寬度（包括內邊距，不包括外邊距）。
innerHeight() 方法返回元素的高度（包括內邊距，不包括外邊距）。
jQuery outerWidth() 和 outerHeight() 方法：
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
jQuery 遍歷：
jQuery 遍歷，意為"移動"，用於根據其相對於其他元素的關係來"查詢"（或選取）HTML 元素。以某項選擇開始，並沿著這個選擇移動，直到抵達您期望的元素為止。
遍歷 DOM：jQuery 提供了多種遍歷 DOM 的方法，遍歷方法中最大的種類是樹遍歷（tree-traversal）。
jQuery 遍歷 - 祖先：
祖先是父、祖父或曾祖父等等，通過 jQuery，您能夠向上遍歷 DOM 樹，以查詢元素的祖先。
這些 jQuery 方法很有用，它們用於向上遍歷 DOM 樹：
parent()方法，返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷。
parents()方法，返回被選元素的所有祖先元素，它一路向上直到文件的根元素 ()。
parentsUntil()方法，返回介於兩個給定元素之間的所有祖先元素。
jQuery 遍歷 - 後代：
後代是子、孫、曾孫等等，通過 jQuery，您能夠向下遍歷 DOM 樹，以查詢元素的後代。
下面是用於向下遍歷 DOM 樹的 jQuery 方法：
children()方法，返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷。
find()方法，返回被選元素的後代元素，一路向下直到最後一個後代。
jQuery 遍歷 - 同胞(siblings)：
同胞擁有相同的父元素，通過 jQuery，您能夠在 DOM 樹中遍歷元素的同胞元素。
在 DOM 樹中水平遍歷，有許多有用的方法讓我們在 DOM 樹進行水平遍歷：
siblings() 方法，返回被選元素的所有同胞元素。
next()方法，返回被選元素的下一個同胞元素，該方法只返回一個元素。
nextAll()方法，返回被選元素的所有跟隨的同胞元素。
nextUntil()方法，返回介於兩個給定引數之間的所有跟隨的同胞元素。
prev()，prevAll()，prevUntil()方法，工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞之前元素遍歷，而不是之後元素遍歷）。
jQuery 遍歷- 過濾：
縮小搜尋元素的範圍：
三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
first()方法，返回被選元素的首個元素。
last()方法，返回被選元素的最後一個元素。
eq()方法，返回被選元素中帶有指定索引號的元素，索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。
filter()方法，允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
not()方法，返回不匹配標準的所有元素，提示：not() 方法與 filter() 相反。
jQuery - AJAX(建立互動式 Web 應用程式而無需犧牲瀏覽器相容性的流行方法)
AJAX 是與伺服器交換資料的技術，它在不過載全部頁面的情況下，實現了對部分網頁的更新。
AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）,簡短地說，在不過載整個網頁的情況下，AJAX 通過後臺載入資料，並在網頁上進行顯示。
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。
jQuery - AJAX load() 方法：
jQuery load() 方法是簡單但強大的 AJAX 方法，load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。
語法：$(selector).load(負荷)(URL(地址),data(資料),callback)。
必需的 URL 引數規定您希望載入的 URL。
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的 callback 引數是 load() 方法完成後所執行的函式名稱。
responseTxt - 包含呼叫成功時的結果內容
statusTXT - 包含呼叫的狀態
xhr - 包含 XMLHttpRequest 物件
jQuery - AJAX get() 和 post() 方法：
jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從伺服器請求資料。
HTTP 請求：GET vs. POST：
兩種在客戶端和伺服器端進行請求-響應的常用方法是：GET 和 POST。
GET - 從指定的資源請求資料
POST - 向指定的資源提交要處理的資料
GET 基本上用於從伺服器獲得（取回）資料。註釋：GET 方法可能返回快取資料。
POST 也可用於從伺服器獲取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起傳送資料。
.get()方法通過HTTPGET請求從伺服器上請求資料，語法： .get() 方法通過 HTTP GET 請求從伺服器上請求資料，語法：.get()方法通過HTTPGET請求從伺服器上請求資料，語法：.get(URL,callback)，必需的 URL 引數規定您希望請求的 URL，可選的 callback 引數是請求成功後所執行的函式名。
.post()方法通過HTTPPOST請求向伺服器提交資料，語法： .post() 方法通過 HTTP POST 請求向伺服器提交資料，語法：.post()方法通過HTTPPOST請求向伺服器提交資料，語法：.post(URL,data,callback)，必需的 URL 引數規定您希望請求的 URL。可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。
jQuery - noConflict(無抵觸) 方法
如何在頁面上同時使用 jQuery 和其他框架？
jQuery 和其他 JavaScript 框架：
正如您已經瞭解到的，jQuery 使用 $ 符號作為 jQuery 的簡寫。
noConflict() 方法，會釋放對 $ 識別符號的控制，這樣其他指令碼就可以使用它了，您也可以建立自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變數，以供稍後使用。
如果你的 jQuery 程式碼塊使用 $ 簡寫，並且您不願意改變這個快捷方式，那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函式內使用 $ 符號了 - 而在函式外，依舊不得不使用 “jQuery”。
JSONP(跨域) 教程
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取資料。
為什麼我們從不同的域（網站）訪問資料需要一個特殊的技術(JSONP )呢？這是因為同源策略。
同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支援JavaScript 的瀏覽器都會使用這個策略。