吐槽
資訊專欄INFORMATION COLUMN
摘要：相對論極大地改變了人類對宇宙和自然的常識性觀念，提出了同時的相對性四維時空彎曲時空等全新的概念。狹義相對性原理是相對論的兩個基本假定，在目前實驗的觀測下，物體的運動與相對論是吻合很好的，所以目前普遍認為相對論是正確的理論。
7. jQuery 里的事件機制
javascript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發的事件來處理的。jQuery不僅提供了更加優雅的事件處理語法，而且極大地增強了事件處理能力。7.1 加載 DOM
前面章節我們已經對比了window.onload()和$(document).ready()兩種方法的區別。兩種都是入口函數，只不過前者是js中的而后者是jQ中的。并且領著之間還是有區別的：
1、執行時機：
window.onload()方法是等到頁面中所有元素加載完畢之后，才執行，即javascript此時才可以訪問網頁中的任何元素。而jQuery使用$(document).ready()方法，可以在DOM載入就緒時就對其進行操縱并調用執行它所綁定的函數。也就是說在jQ中，不需要等待所有圖片加載完再執行。
但是就會有個問題，當獲取圖片寬高的時候，可能獲取不到。不過jQ中多帶帶提出了一個頁面加載的方法——load()方法，如果這個處理函數綁定給window對象則會在所有內容加載完畢之后觸發。
$(window).load(function(){
// 執行代碼
});
上面的代碼，等同于js中的：
window.onload = function(){
// 執行代碼
}
2、多次使用：
在javascript中入口函數只能寫一次，如果寫多個，下面會將上面的覆蓋掉：
window.onload = function(){
alert(123);
}
window.onload = function(){
alert(456); // 頁面只會彈出 456
}
在jQuery中，入口函數可以寫多次，不會出現覆蓋的情況：
$(document).ready(function(){
alert(123); // 123
});
$(document).ready(function(){
alert(456); // 456
});
3、簡寫方式：
javascript中沒有簡寫方式，但是在jQ中有簡寫方式：
// 1-原始版寫法
$(document).ready(function(){
// 執行代碼
});
// 2-簡化寫法，document可以省略
$().ready(function(){
// 執行代碼
});
// 3-簡化寫法
$(function(){
// 執行代碼
});
7.2 事件綁定
1、什么是事件綁定
在文檔裝載完成之后，如果打算為元素綁定事件來完成某些操作，則可以使用bind()方法，bind()方法的調用格式為：
bind(type [, data] ,fn);
bind()方法有三個參數：
type：事件類型，類型包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等。
[,data]：可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象。
fn：用來綁定的處理函數。
示例代碼： [ 38-jq事件機制-事件綁定.html ]
什么是相對論？
相對論是關于時空和引力的基本理論，主要由阿爾伯特·愛因斯坦創立，依據研究的對象不同分為狹義相對論和廣義相對論。相對論的基本假設是相對性原理，即物理定律與參照系的選擇無關。
狹義相對論和廣義相對的區別是，前者討論的是勻速直線運動的參照系（慣性參照系）之間的物理定律，后者則推廣到具有加速度的參照系中（非慣性系），并在等效原理的假設下，廣泛應用于引力場中。相對論極大地改變了人類對宇宙和自然的“常識性”觀念，提出了“同時的相對性”、“四維時空”、“彎曲時空”等全新的概念。它發展了牛頓力學，推動物理學發展到一個新的高度。
狹義相對性原理是相對論的兩個基本假定，在目前實驗的觀測下，物體的運動與相對論是吻合很好的，所以目前普遍認為相對論是正確的理論。
效果圖：
注意：
is()方法，可以用來判斷一個元素是否包含某一屬性。
當一個選擇器多次出現的時候，可以用一個變量將它緩存起來。
2、簡寫綁定事件
jQuery提供了一套簡寫的方法，簡寫的方法和bind()的使用方法類似，實現效果也相同，但是可以減少代碼量：
$(function(){
$("h2").click(function(){
// 執行代碼
});
});
7.3 合成事件
jQuery 有兩個合成事件：hover()方法和toggle()方法(這里的toggle跟另一個方法toggle不是一個方法，這里的toggle方法因為重名的原因，已經在jQ1.8版本以后棄用了)。
1、hover()方法：
hover(enter,leaver); // enter 和 leaver 是兩個函數
hover()方法用于模擬光標懸停事件。當光標移動到元素上的時候會觸發第一個函數(enter)，當光標離開元素的時候會觸發第二個函數(leaver)。
示例代碼： [ 39-jq事件機制-合成事件hover.html ]
$(function() {
// hover 方法
$("h2").hover(enter, leaver);
var $content = $("h2").next();
// 鼠標進入的時候觸發的函數
function enter() {
$content.show();
}
// 鼠標離開時觸發的函數
function leaver() {
$content.hide();
}
});
2、toggle()方法：此方法自1.8版本以后，已棄用
toggle(fn1,fn2,...fnN);
toggle()方法，模擬的是鼠標單擊事件，當點擊第一次的時候，觸發對應的第一個函數(fn1)，當點擊第二次的時候，觸發對應的第二個函數(fn2)，一直到最后一個函數的時候，再點擊就會循環到第一個函數，就這樣一直循環切換。
另外一個 toggle() 方法，是切換元素的可見狀態，如果元素是可見的，事件觸發之后，就會切換成不可見。
$("h2").click(function(){
$(this).next().toggle(); // 如果元素一開始是隱藏的，點擊之后就會切換成顯示。
});
7.4 事件冒泡
在前面特效篇里面，我們已經介紹了什么是事件冒泡，這里不再累贅，簡單來說，就是一個元素包含另一個元素，兩個元素同時綁定了點擊事件，當我點擊里面元素的時候，會同時觸發兩個事件函數，這就是事件冒泡。
具體產生的原理，和解決辦法請點擊這個鏈接，這里會有處理兼容性的詳細步驟。
示例代碼： [ 40-jq事件機制-事件冒泡.html ]
提示信息
提示信息
提示信息
效果圖：
我們可以看到，明明點擊的是最里面的盒子，但是三個點擊事件都同時觸發了。
1、事件對象：
由于在IE-DOM和標準DOM實現事件對象的方法各不相同，所以需要處理兼容性。在jQuery中，已經將我們封裝好了。 直接在觸發事件函數里面傳一個參數：
$("element").bind("click",function(event){
// 執行代碼
});
2、阻止事件冒泡：
阻止事件的方法存也在兼容性，同樣的jQ中已經封裝好，直接使用stopPropagation()方法來阻止事件冒泡。
示例代碼： [ 41-jq事件機制-阻止事件冒泡.html ]
$(function() {
$(".box").click(function(e) { // 事件對象
$(this).children("p").text(".box被觸發了");
e.stopPropagation(); // 阻止事件冒泡
});
$(".box1").click(function(e) {
$(this).children("p").text(".box1被觸發了");
e.stopPropagation();
});
$(".box2").click(function(e) {
$(this).children("p").text(".box2被觸發了");
e.stopPropagation();
});
});
效果圖：
3、阻止默認行為：
網頁中有很多元素都有默認行為，例如，單擊超鏈接后會跳轉、單擊提交按鈕后表單會提交，有時候我們需要阻止元素的默認行為。
在jQ中提供了一個方法來阻止元素的默認行為：preventDefault
不加阻止默認行為時的效果：
示例代碼： [ 42-jq事件機制-阻止默認行為.html ]
效果圖：
4、return false：
如果想要同時對事件停止冒泡和阻止默認行為，可以有一種默認的簡寫方式：return false。
5、事件捕獲：
在jQ中不支持事件捕獲，如果想要事件捕獲的話，請參考原生的js。7.5 事件對象的屬性
1、event.type：
該方法可以獲取到事件的類型。
$("a").click(function(event){
console.log(event.type); // 打印a標簽點擊之后的事件類型 打印 ==> click
return false; // 阻止a標簽默認跳轉事件
});
2、event.stopPropagation()方法：
上面已經提過了，該方法是阻止事件冒泡。
3、event.preventDefault()方法：
上面已經提過了，該方法是阻止事件默認行為。
4、event.target：
該方法的作用是獲取到觸發事件的元素。
$("a").click(function(event){
console.log(event.target); // 打印 ==> a
return false; // 阻止a標簽默認跳轉事件
});
5、event.pageX 和 event.pageY：
該方法的作用，是分別獲取到光標相對于頁面的x坐標和y坐標，如果頁面上有滾動條的話，還要加上滾動條的寬度和高度。
6、event.which
該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵。
比如獲取鼠標的按鍵：
$("a").mousedown(function(event){
console.log(event.which); // 鼠標左鍵==> 1 鼠標中鍵==> 2 鼠標右鍵==> 3
return false; // 阻止a標簽默認跳轉事件
});
比如獲取鍵盤的按鍵：
$("input[text]").keyup(function(event){
console.log(event.which); // 對應按下的鍵盤碼
});
7、event.metaKey：
該方法是針對不同瀏覽器，獲取到7.6 移除事件按鍵。
當我們想要移除一個事件的時候，可以使用unbind()方法。
unbind([type].[data]);
第一個參數是事件類型，第二個參數是將要移除的函數：
如果沒有參數，直接刪除所有的綁定的事件；
如果提供了事件類型作為參數，那只刪除該類型的綁定事件；
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
示例代碼： [ 43-jq事件機制-移除事件.html ]
效果圖：
7.7 模擬操作什么是模擬操作呢？我們可以看到前面的單擊事件，都需要手動去觸發，模擬操作就是可以自動觸發click，而不需要用戶主動點擊。
一進入頁面就會自動彈出“呵呵”，其中 $("#btn").click();，也可以達到同樣的效果。
trigger()方法觸發事件后，會執行瀏覽器默認操作：
$("input").trigger("focus");
上面的代碼不僅會觸發元素綁定的focus事件，也會使input元素本身得到焦點(這就是瀏覽器的默認操作)。
triggerHandler()方法：
如果你只想觸發綁定的focus事件，而不想執行瀏覽器默認操作，可以使用triggerHandler()方法。
$("input").triggerHandler("focus");
7.8 事件委托
事件委托，首先按字面的意思就能看出來，是將事件交由別人來執行，再聯想到事件冒泡，是不是想到了？對，就是將子元素的事件通過冒泡的形式交由父元素來執行。
舉個例子：
假如想要給多個li都注冊點擊事件，只需要給li循環遍歷，再添加點擊事件，這種方法固然簡單，但是假如有100個、1000個li的時候，這里的DOM操無形之中就繁瑣了。并且當我們動態添加li元素的時候，這些li是沒有點擊事件的。但是這些只要講點擊事件交給父元素來執行，就能實現了。
1、on + 注冊事件：
除了bind方法綁定事件之外，在jQuery1.7版本之后，新添了一種方法：on()方法用來綁定事件，off()方法用來解除綁定事件。on()方法既可以注冊事件，還可以注冊委托事件。
$(element).on(type,[selector],fn);
參數詳解：
type：字符串，事件類型，如：click、mouseover...；
selector：可選，字符串，用于過濾出被選中的元素中能觸發事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發事件；
fn：事件被觸發執行的函數。
示例代碼：
111111
111111
111111
111111
123456
效果圖：
第二個參數其實就相當于一個過濾器的作用，給div里面的p注冊委托事件。在執行順序上，會先執行元素自己的事件，再去執行綁定的事件，最后執行父元素的事件。
當第二個參數傳進去的時候，就想當于給過濾的元素注冊委托事件。
2、delegate 注冊委托事件：
delegate只能注冊委托事件。
$(fatheElement).delegate(selector,type,fn);
參數詳解：
fatheElement：父元素；
selector：可選，字符串，用于過濾出被選中的元素中能觸發事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發事件；
type：事件類型；
fn：事件被觸發執行的函數。
7.9 其他用法1、綁定多個事件類型：
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over"); // 當鼠標進入的時候，該元素的class屬性切換為over 鼠標離開時class切換為先前的值
});
2、添加事件的命名空間：
$("div").bind("click.plugin",function(){
alert(123);
});
$("div").bind("mouseover.plugin",function(){
alert(456);
});
$("div").bind("dbclick",function(){
alert(666);
});
$("button").click(function(){
$("div").unbind(".plugin");
});
其中.plugin就是命名空間，當點擊button按鈕的時候，就刪除了事件的命名空間.plugin，此時對應的事件也會被移除。
相同的事件，不同的命名空間：
$("div").bind("click.plugin",function(){
alert(456);
});
$("div").bind("click",function(){
alert(666);
});
$("button").click(function(){
$("div").trigger("click!"); // 注意后面的感嘆號
});
當點擊div的時候，會同時觸發click.plugin和click事件，如果點擊button只會觸發click事件，而不會觸發click.plugin事件。trigger("click!")，后面感嘆號表示的是匹配所有不在命名空間中的click方法。
8. jQuery 動畫相對于原生js，jQuery中的動畫更加的方便，更加的強大。8.1 show()方法 和 hide()方法
當一個元素調用show()方法的時候，會將該元素的display設置為block，當調用hide()方法的時候，會將該元素的display設置為none。
$("h2").bind("mouseover",function(){
$(this).next().show(); // 鼠標進入的時候 h2 下一個兄弟元素顯示
}).bind("mouseout",function(){
$(this).next().hide(); // 鼠標離開的時候 h2 下一個兄弟元素隱藏
})
此時還沒有動畫的效果，下面給他們加上動畫效果
下面的代碼表示的是，元素在600ms內顯示出來：
$("element").show(600);
下面的代碼表示的是，元素在300ms內隱藏起來：
$("element").hide(300);
示例代碼： [ 45-jq動畫-show&hide.html ]
鼠標經過&離開
相對論是關于時空和引力的基本理論，主要由阿爾伯特·愛因斯坦創立，依據研究的對象不同分為狹義相對論和廣義相對論。相對論的基本假設是相對性原理，即物理定律與參照系的選擇無關。
效果圖：
我們可以看到，不管是show還是hide的時候，元素的寬、高和不透明度都是在慢慢增加或者減小的。
8.2 fadeIn()方法 和 fadeOut()方法與show、hide方法不同的是，fadeIn和fadeOut方法只改變元素的不透明度，不會去改變寬高。
下面的代碼表示的是元素淡入的效果，其中也可以傳時間：
$("element").fadeIn();
下面的代碼表示的是元素淡出的效果：
$("element").fadeOut();
示例代碼： [ 46-jq動畫-fadeIn&fadeOut.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().fadeIn();
}).bind("mouseout", function() {
$(this).next().fadeOut();
});
});
效果圖：
8.3 slideUp()方法 和 slideDown()方法slideUp()方法和slideDown()方法只會改變元素的高度，如果一個元素的display屬性值為“none”，調用slideDown()方法的時候元素由上至下延伸顯示。slideUp()正好相反，元素將由下到上縮短隱藏。
示例代碼： [ 47-jq動畫-slideDown&slideUp.html ]
$(function() {
$("h4").bind("mouseover", function() {
$(this).next().slideDown();
}).bind("mouseout", function() {
$(this).next().slideUp();
});
});
效果圖：
8.4 自定義動畫方法 animate()前面幾種類型動畫，比較單一，很多時候不能滿足于用戶的需求，但是在jQ中還有一個自定義動畫animate，非常強大。
animate(params,speed,easing,callback);
參數說明如下：
params：一個包含樣式和值的對象，比如{p1:"val1",p2:"val2",...}；
speed：動畫執行速度(可選)，默認400；
easing：表示過度使用哪種緩動函數(默認swing，jQ內部還支持一個linear)
callback：在動畫執行完之后，執行的函數(可選)。
1、簡單的動畫：
效果圖：
2、累加、累減動畫：
通過累加一個值讓元素從當前位置，累加到900的位置
$("#box2").animate({
left: "+=900" // 在當前位置累加到 900
}, 1000);
3、多重動畫：
同時執行多個動畫
$("#box3").click(function() {
$(this).animate({
left: "300",
height: "200px",
width: "200px",
top: "200px"
}, 2000);
});
效果圖：
我們可以看到所有的變化都是同時進行的。
按順序執行多個動畫
$("#box4").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000).animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果圖：
4、延遲動畫：
在動畫執行中如果想要對某一段動畫進行延遲操作，可以使用delay()方法。
$("#box5").click(function() {
$(this).animate({
left: "400px",
height: "150px",
opacity: "1"
}, 3000)
.delay(1000)
.animate({
top: "150px",
width: "150px"
}, 3000).fadeOut("slow");
});
效果圖：
5、動畫隊列：
一組元素上的效果：
當在一個animate()方法中應用多個屬性時，動畫是同時發生的；
當以鏈式的寫法應用到動畫方法時，動畫是按照順序發生的。
多組元素上的動畫：
默認情況下，幾組動畫是同時發生的；
當以回調形式應用動畫方式時，動畫按照回調順序發生的。
6、停止動畫：
如果需要在某處停止動畫需要使用stop()方法。
stop([clearQueue],[gotoEnd]);
兩個參數都是可選的，都為布爾值，clearQueue表示是否要清空未執行完的動畫隊列。gotoEnd表示的是直接將正在執行的動畫跳轉到末狀態。直接使用stop()方法，則會立即停止當前正在執行的動畫。
不明白的小伙伴，參考8.6小節，第二個案例 《動畫下拉菜單欄》
8.5 其他動畫方法1、toggle()方法：
toggle()方法可以切換元素的可見狀態，如果元素是可見的，則切換為隱藏。如果元素是隱藏的，則切換為可見。
$("#btn1").click(function() {
$(this).next().toggle();
});
效果圖：
只要循環點擊h4，它的下一個兄弟元素就會循環切換。
2、slideToggle()方法：
通過高度變化來切換匹配元素的可見性。
$("#btn2").click(function() {
$(this).next().slideToggle();
});
效果圖：
3、fadeTo()方法：
fadeTo()方法可以將不透明度設置到指定的值。
$("#btn3").click(function() {
$(this).next().fadeTo(600, 0.5); // 600表示的是執行時間 0.5 表示目標值
});
效果圖：
4、fadeToggle()方法：
fadeToggle()方法可以切換不透明度。
$("#btn4").click(function() {
$(this).next().fadeToggle();
});
效果圖：
8.6 jQuery 動畫案例下面通過幾個簡單的例子，鞏固一下jQuery動畫的知識。
1、呼吸燈版輪播圖：
在實現原理上，與前面特效篇的是不同的，這里改變的是圖片的不透明度opacity，并且不需要讓所有li左浮動，ul也不需要設置一個很寬的寬度。在jQ中操作更加的簡單。
樣式上：
大盒子相對定位，圖片的li絕對定位，讓所有的圖片疊加在一起；
給所有的圖片li設置隱藏屬性，第一張圖片需要顯示；
js上：
定義一個index用來記錄當前點擊的張數；
當點擊右箭頭的時候，讓對應的圖片li，fadeIn，其余的兄弟元素fadeOut，同時讓對應的小圓點添加current類，其余的兄弟元素移除這個類；
點擊左箭頭只需將index--，再進行判斷一下，其他的與點擊右箭頭原理是一樣的。
示例代碼： [ 50-jq動畫-案例-呼吸燈版輪播圖.html ]
效果圖：
2、動畫下拉菜單欄：
動畫下拉菜單欄，主要實現原理還是運用jQ里面的兩個動畫slideDown和slideUp，并且配合stop方法。
先看一下，如果不加stop()方法，會是一個什么效果：
我們可以看到一個效果，當光標移到第一個“一級菜單”的時候，觸發動畫效果，但是動畫效果還沒結束，我就將光標移進了第二個菜單，觸發第二個菜單下拉效果。所以導致了動畫效果與光標不一致，此時只需要在光標移入、移出之前加上stop()方法，就能解決這個問題。
stop()方法會結束當前正在進行的動畫效果，并立即執行隊列中的下一個動畫。
示例代碼： [ 51-jq動畫-案例-動畫下拉菜單.html ]
效果圖：
3、手風琴：
實現原理：
給外部大盒子設置一個與圖片大小一致的寬高，并且設置相對定位
還是采用ul，li結構，li設置寬高，與圖片大小一致，設置絕對定
動態的給li添加背景圖片，因為li絕對定位的原因，此時所有的li都疊在一起
動態的給每個li設置left值(left*i)，這時候li就會依次排開
大盒子還要設置一個overflow-hidden屬性，將多余的隱藏掉
給每個li注冊鼠標鼠標經過事件，然后根據下面推算出的規律(當前鼠標經過的索引index，他之前包括他自己的left值都是，設定的最小值乘以對應的索引。而他后面的會將設定的最小值乘以對應的索引后再加上450，這里的450不是一個固定值，根據規律找出來的)進行判斷，設置各自的left值；
鼠標離開的時候再讓所有的盒子恢復到一開始的位置，每個li顯示等分的寬度
大盒子沒有overflow-hidden的時候：
畫個圖，理解一下：
找規律：
結合上面的圖片，我們可以找到一個規律
當鼠標在第1個li上的時候，li下標index為0：
index：0 left：0
index：1 left：500px
index：2 left：550px
index：3 left：600px
index：4 left：650px
當鼠標在第2個li上的時候，li下標index為1：
index：0 left：0
index：1 left：50px
index：2 left：550px
index：3 left：600px
index：4 left：650px
當鼠標在第3個li上的時候，li下標index為2：
index：0 left：0
index：1 left：50px
index：2 left：100px
index：3 left：600px
index：4 left：650px
看出規律了嗎？
當對應li的下標<=鼠標懸停的的下標上的時候left值 是50*i
當對應li的下標>鼠標懸停的的下標上的時候left值 是50*i + ,450(450不是固定的值，是經過計算出來的)
示例代碼： [ 52-jq動畫-案例-手風琴.html ]
效果圖：
4、彈幕效果：
獲取輸入框的的 value 值；并生成 span 標簽
將 span 標簽添加到 頁面中，隨機顏色 隨機高度 span動畫從右向左
到達最左邊的時候刪除 span 標簽(不刪除會隨著輸入的內容越來越多影響性能)
示例代碼： [ 53-jq動畫-案例-彈幕效果.html ]
吐槽
效果圖：
9. jQuery 里的 Ajax 操作Ajax全稱“Asynchronous JavaScript and XML”（異步的JavaScript和XML）。它的出現揭開了無刷新更新頁面的新時代。具體的實現方式以及Ajax的優缺點，在前面的一篇文章[《js 進階知識-Ajax篇》]()已經講得很詳細了，不明白的小伙伴，可以先去學習下原生js是如何實現Ajax的。
jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()和$.post()方法，第3層就是$.getScript()和$.getJSON()方法。
9.1 load()方法1、載入HTML文檔
load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼并插入DOM中。它的結構為：
load(url[,data][,callback]);
參數詳解：
| 參數名稱 | 類型 | 說明 |
|---|---|---|
| url | String | 請求HTML頁面的URL地址 |
| data（可選） | Object | 發送至服務器的key/value數據 |
| callback（可選） | Function | 請求完成時的回調函數，無論請求成功還是失敗 |
示例代碼：
首先新建一個data.html的文件，里面模擬的是請求的數據：
李四：
頂樓上
王五：
66666
再創建一個主頁面，index.html：
已有評論：
效果圖：
上面的例子可以看出來，開發人員只需要使用jQuery選擇器為HTML片段指定目標位置，然后將要加載的文件URL作為參數傳遞給load()方法即可。我們可以發現原本的data頁面是沒有為類comment設置樣式的，但是主頁面加載后同樣的樣式名會立即應用到新加載的內容上。
2、篩選載入的HTML文檔
上面的案例我們可以看到，點擊之后data.html里面的整個內容都被加載進來了。如果需要加載data.html頁面里的某些元素的時候該怎么辦呢？我們可以使用load()方法的URL參數來達到目的。只需要指定選擇符就ok了。
示例代碼：
// 選擇加載data.html頁面中class為“para”的內容，注意中間有一個空格
$(".resText").load("data.html .para");
效果圖：
我們可以看到，只有類名是“para”的被加載了。
3、傳遞方式：
load()方法的傳遞方式根據參數data來自動指定。如果沒有參數傳遞，則采用GET方式傳遞；反之則會自動轉換為POST方式：
// 1- 無data參數傳遞的時候，則是GET方式
$(".resText").load("data.php",function(){});
// 2- 有data參數傳遞的時候，則是POST方式
$(".resText").load("data.php",{name:"Levi",age:"18"},function(){});
4、回調函數：
回調函數是在頁面加載完成之后執行的操作，該函數有三個參數，分別是請求返回的內容、請求狀態、XMLHttpRequest對象：
$(".resText").load("data.php",function(responseText,textStatus,XMLHttpRequest){
// responseText ： 請求返回的內容
// textStatus：請求狀態：success、error、notmodified、timeout 4種
// XMLHttpRequest ：XMLHttpRequest對象
});
在load()方法中，無論Ajax請求是否成功，只要當請求完成之后，回調函數都會執行。
9.2 $.get()方法和$.post()方法load()方法通常是用來從WEB服務器上獲取靜態的數據的，如果需要向服務器傳遞參數的話，可以使用$.get()方法和$.post()方法還有后面的$.ajax方法。
1、$.get()方法
$.get()方法使用GET方式來進行異步請求：
$.get(url [,data] [,callback] [,type]);
參數詳解：
| 參數名稱 | 類型 | 說明 |
|---|---|---|
| url | String | 請求HTML頁面的URL地址 |
| data（可選） | Object | 發送至服務器的key/value數據，會作為字符串憑接在url的后面 |
| callback（可選） | Function | 請求完成時的回調函數(只有當Response的返回狀態是success的時候，才調用該函數) |
| type （可選） | String | 服務器返回內容的格式，包括xml、html、script、json、text、_default |
回調函數：
$.get()方法的回調函數只有兩個參數：
$.get("get.php",{useraname: "Levi",age:18},function(data,textStatus){
// data 返回的內容，可以是XML文檔、JSON文件、HTML片段等的
// textStatus 請求狀態：success、error、notmodified、timeout 4種。
})
data參數代表請求返回的內容，textStatus參數代表請求回來的狀態，注意：只有當數據成功返回success后才被調用。
2、$.post()方法
它與$.get()方法的結構和使用方式都相同，不過他們之間仍有以下區別：
get請求會將參數跟在URL的后面進行傳遞，而post請求則是作為HTTP消息的實體內容發送給Web服務器；
get對傳輸的數據大小有限制（通常不大于2KB），而使用post方式傳遞數據量要比get方式大得多；
get方式請求的數據會被瀏覽器緩存起來，因此可以通過瀏覽器的歷史記錄中讀到這些數據，存在安全性問題。
9.3 $.ajax()方法$.ajax()方式常用參數解析：
| 方法 | 作用 |
|---|---|
| url | 請求的地址 |
| type | 請求的方式 |
| dataType | 告訴jQuery，需要按照什么格式對服務器返回的數據進行解析，默認json |
| data | 數據 |
| success | 請求成功的回調函數 |
| error | 請求失敗的回調函數 |
| beforeSend | 請求發送之前調用的函數 |
| complete | 不論請求是成功還是失敗的，只要請求完成就會調用 |
| timeout | 設置請求超時時間 |
示例代碼：
$.ajax({
// 請求的地址
url: "04-data.php",
// 請求的方式
type: "get",
// 告訴jQuery，需要按照什么格式對服務器返回的數據進行解析，默認json
dataType: "json",
// 數據
data: {
msg: "我是來請求數據的"
},
// 請求成功的回調函數
success: function(data) {
console.log(data);
},
// 請求失敗的回調函數
error: function() {
console.log("失敗了");
},
// 請求發送之前調用的函數
beforeSend: function() {
console.log("請求發送之前調用的函數");
// 如果返回一個false，那么就會阻止整個請求的發送
// return false;
// 用法：可以用作表單驗證，當表單內容符合規范的時候發送ajax請求，當不符合的時候就不發送ajax請求
},
// 不論請求是成功還是失敗的，只要請求完成就會調用
complete: function() {
console.log("請求完成了");
},
// 設置請求超時時間(單位:ms)，超過這個時間后，就不會請求了
timeout:2000
});
9.3 jQuery中的serialize和serializeArray方法
1、jQuery中的serialize方法：
serialize方法會將表單中所有的內容拼接成key=value&key=value這樣的字符串。
通過這種方式就不要再去手動獲取表單中的內容的
2、jQuery中的serializeArray方法：
上面的方法我們可以看到，獲取整個數據的時候，是很簡單，但是想要進行校驗的話就很難，因為上面的方法獲取的是一個字符串，不能進行校驗，所以此時我們需要另外一個方法，jQuery中的serializeArray方法。
示例代碼：ajax模擬表單校驗及注冊
sing in page
用戶名不能為空
張三：
哈哈哈，真有趣