JQuery
一．概要及基礎
1.輕量級
2.強大的選擇器
3.出色的dom操作的封裝
4.可靠的事件處理機制
5.完善的ajax
6.不污染頂級變量
釋放JQuery 對$符號的控制權
JQuery.noConflict();
7.出色的瀏覽器兼容性
8.鏈式操作方式
9.隱式迭代
10.行爲層與結構層的分離
11.豐富的插件支持
12.完善的文檔
13.開源
頁面加載事件（可以寫多個ready()）
$(document).ready(function(){
alert("hello world");
})
$(function(){
//Todo();
});
鏈式操作：JQuery 允許你在一句代碼中操做任何與其相關聯的元素，包括其子元素、父元
素等
//選擇名稱爲myDiv 的元素，爲其自身添加css1 的樣式，然後再選擇其所有子元素a，爲其
移除css2 樣式
$("#myDiv").addClass("css1").children("a").removeClass("css2");
Query 中獲得一個對象的所有子元素內容
$("#myDiv").html()
JQuery 中的變量與DOM 中的變量
var $myVar = "";
var myVar = "";
DOM 對象轉換成JQuery 對象
var obj = documnet.getElementById("myDiv");
var $obj = $(obj);
JQuery 對象轉換成DOM 對象
var $obj = $("#myDiv");
var obj = $obj.get(0); //或者var obj = $obj[0];
二．選擇器
JQuery 完善的處理機制
document.getElementById("test").style.color ="red"; //如果test 不存在，則頁面出
現異常
$("#test").css("color","red"); //哪怕頁面沒有名稱爲test 的元素，也不會報錯。它是
一個JQuery 對象
判斷頁面是否選擇的對象
if( $(".class").length >0 ){
// todo something
}
基本選擇器
$("#myDiv") //根據給定的ID 選擇匹配的元素，返回：單個元素
$(".myClass") //根據給定的樣式名稱選擇匹配的元素，返回：集合元素
$("div") //根據給定的元素名稱選擇匹配的元素，返回：集合元素
$("#myDiv,div.myClass,span") //根據給定的規則選擇匹配的元素，返回：集合元素
$("*") //選擇頁面所有元素，返回：集合元素
層次選擇器
$("div span") //選擇所有DIV 元素下的所有SPAN 元素（所有後代元素），返回：集合元
素
$("div>span") //選擇所有DIV 元素下的SPAN 子元素（僅子元素），返回：集合元素
$(".myClass+div") //選擇樣式名稱爲myClass 的下一個DIV 元素，返回：集合元素
$(".myClass+div") //等價於$(".myClass").next("div");
$(".myClass~div") //選擇樣式名稱爲myClass 之後的所有DIV 元素，返回：集合元素
$(".myClass~div") //等價於$(".myClass").nextAll();
$(".myClass").siblings("div") //選擇樣式名稱爲myClass 的元素的所有同輩DIV 元素
（無論前後），返回集合元素
過濾選擇器（index從0開始）
$("div:first") //選擇所有DIV 元素下的第一個DIV 元素，返回：單個元素
$("div:last") //選擇所有DIV 元素下的最後一個DIV 元素，返回：單個元素
$("div:not(.myClass)") //選擇所有樣式不包括myClass 的DIV 元素，返回：集合元素
$("div:even") //選擇所有索引是偶數的DIV 元素，返回：集合元素
$("div:odd") //選擇所有索引是奇數的DIV 元素，返回：集合元素
$("div:eq(index)") //選擇所有索引等於index 的DIV 元素，返回：集合元素
$("div:gt(index)") //選擇所有索引大於index 的DIV 元素，返回：集合元素
$("div:lt(index)") //選擇所有索引小於index 的DIV 元素，返回：集合元素
$(":header") //選擇所有標題元素（h1,h2,h3），返回：集合元素
$("div:animated") //選擇所有正在執行去畫的DIV 元素，返回：集合元素
子元素過濾選擇器（index從1開始）
$(":nth-child(index/even/odd)") //選擇每個父元素下的第index/偶數/奇數個子元素，
返回：集合元素
$(":first-child") //選擇每個父元素下的第一個子元素，返回：集合元素
$(":last-child") //選擇每個父元素下的最後一個子元素，返回：集合元素
$("ul li:only-child") //在UL 元素中選擇只有一個LI 元素的子元素，返回：集合元素
內容過濾選擇器
$(":contains(text)") //選擇所有內容包含text 的元素，返回：集合元素
$("div:empty") //選擇所有內容爲空的DIV 元素，返回：集合元素
$("div:has(span)") //選擇所有含有SPAN 子元素的DIV 元素，返回：集合元素
$("div:parent") //選擇所有含有子元素的DIV 元素，返回：集合元素
可見性選擇器
$(":hidden") //選擇所有不可見的元素（type="hidden" style="display:none"
style="visibility:none"），返回：集合元素
$(":visible") //選擇所有可見的元素，返回：集合元素
屬性過濾選擇器
$("[id]") //選擇所有含有id 屬性的元素，返回：集合元素
$("[class=myClass]") //選擇所有class 屬性值是myClass 的元素，返回：集合元素
$("[class!=myClass]") //選擇所有class 屬性值不是myClass 的元素，返回：集合元素
$("[alt^=begin]") //選擇所有alt 屬性值以begin 開始的元素，返回：集合元素
$("[alt^=end]") //選擇所有alt 屬性值以end 結束的元素，返回：集合元素
$("[alt*=some]") //選擇所有alt 屬性值含有some 的元素，返回：集合元素
$("div[id][class=myClass]") //選擇所有含有id 屬性的並且class 屬性值是myClass 的
元素，返回：集合元素
表單對象屬性選擇器
$("#myForm:enabled") //選擇ID 屬性爲myForm 的表單的所有可用元素，返回：集合元素
$("#myForm:disabled") //選擇ID 屬性爲myForm 的表單的所有不可用元素，返回：集合元
素
$("#myForm:checked") //選擇ID 屬性爲myForm 的表單的所有所有被選中的元素，返回：
集合元素
$("#myForm:selected") //選擇ID 屬性爲myForm 的表單的所有所有被選中的元素，返回：
集合元素
表單選擇器
$(":input") //選擇所有<input> <select> <button> <textarea>元素，返回：集合元素
$(":text") //選擇所有單行文本框元素，返回：集合元素
$(":password") //選擇所有密碼框元素，返回：集合元素
$(":radio") //選擇所有單選框元素，返回：集合元素
$(":checkbox") //選擇所有複選框元素，返回：集合元素
$(":submit") //選擇所有提交按鈕元素，返回：集合元素
$(":p_w_picpath") //選擇所有圖片按鈕元素，返回：集合元素
$(":reset") //選擇所有重置按鈕元素，返回：集合元素
$(":button") //選擇所有按鈕元素，返回：集合元素
$(":file") //選擇所有上傳域元素，返回：集合元素
$(":hidden") //選擇所有不可見域元素，返回：集合元素
$(":text") //選擇所有單選文本框元素，返回：集合元素
$(function(){
var $category = $("ul li:gt(5):not(:last)");
$category.hide();
var $toggleBtn = $("div.showmore >a");
$toggleBtn.click(funtion(){
if($category.is(":visible"))
{
$category.hide();
$(".showmore a span").css("backgroud", "url(down.gif)");
.text("顯示全部");
$("ul li").removeClass("promoted");
}
else
{
$category.show();l
$(".showmore a span").css("background","url(up.gif)");
.text("簡單顯示");
$("ul li").filter(":contains(' 佳能'),:contains(' 尼康
')").addClass("promoted");
}
return false;
});
});
三．DOM操作
查找元素節點
var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：123
查找屬性節點
var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：hello
創建元素節點
var $li1 = $("<span></span>"); //傳入元素標記，自動包裝並創建第一個li 元素對象
var $li2 = $("<span></span>"); //第二個,創建時需要遵循XHTML 規則（閉合、小寫）
$("#myDiv").append($li1); //往id 爲myDiv 的元素中添加一個元素
$("#myDiv").append($li2); //結果：<div
id="myDiv"><span></span><span></span></div>
$("#myDIv").append($li1).append($li2); //客串：傳說中的鏈式寫法，省一行代碼^_^
創建文本節點
var $li1 = $("<span>first</span>");
var $li2 = $("<span>second</span>");
$("#myDIv").append($li1).append($li2);
//結果：<div id="myDiv"><span>first</span><span>second</span></div>
創建屬性節點
var $li1 = $("<span title="111">first</span>");
var $li2 = $("<span title="222">second</span>");
$("#myDIv").append($li1).append($li2);
//結果：<div id="myDiv"><span title="111">first</span><span
title="222">second</span></div>
插入節點
$("#myDiv").append("<span></span>"); //往id 爲myDiv 的元素插入span 元素
$("<span></span>").appendTo("#myDiv"); //倒過來，將span 元素插入到id 爲myDiv 的
元素
$("#myDiv").prepend("<span></span>"); //往id 爲myDiv 的元素內最前面插入span 元
素
$("<span></span>").prependTo("#myDiv"); //倒過來，將span 元素插入到id 爲myDiv 的
元素內的最前面
$("#myDiv").after("<span></span>"); //往id 爲myDiv 的元素後面插入span 元素（同
級，不是子元素）
$("<span></span>").insertAfter("#myDiv"); //倒過來，將span 元素插入到id 爲myDiv
的元素後面（同級，不是子元素）
$("#myDiv").before("<span></span>"); //往id 爲myDiv 的元素前面插入span 元素（同
級，不是子元素）
$("<span></span>").insertBefore("#myDiv"); //倒過來，將span 元素插入到id 爲myDiv
的元素前面（同級，不是子元素）
刪除節點
$("#myDiv").remove(); //將id 爲myDiv 的元素移除
清空節點
$("#myDiv").remove("span"); //將id 爲myDiv 的元素內的所有span 元素移除
複製節點
$("#myDiv span").click( function(){ //點擊id 爲myDiv 的元素內的span 元素，觸發
click 事件
$(this).clone().appendTo("#myDiv"); //將span 元素克隆，然後再添加到id 爲myDiv 的
元素內
$(this).clone(true).appendTo("#myDiv"); //如果clone 傳入true 參數，表示同時複製
事件
})
替換節點
$("p").replaceWith("<strong>您好</strong>"); //將所有p 元素替換成後者<p>您好
</p> –> <strong>您好</strong>
$("<strong>您好</strong>").replaceAll("p"); //倒過來寫，同上
包裹節點
$("strong").wrap("<b></b>"); //用b 元素把所有strong 元素單獨包裹起來<b><strong>
您好</strong></b><b><strong>您好</strong></b>
$("strong").wrapAll("<b></b>"); //用b 元素把所有strong 元素全部包裹起來
<b><strong>您好</strong><strong>您好</strong></b>
$("strong").wrapInner("<b></b>"); //把b 元素包裹在strong 元素內<strong><b>您好
</b></strong>
屬性操作
var txt = $("#myDiv").arrt("title"); //獲取id 爲myDiv 的元素的title 屬性
$("#myDiv").attr("title","我是標題內容"); //設置id 爲myDiv 的元素的title 屬性的
值
$("#myDiv").attr({"title":"我是標題內容", "alt":"我還是標題"); //一次性設置多個
屬性的值
$("#myDiv").removeArrt("alt"); //移除id 爲myDiv 的元素的title 屬性
樣式操作
var txt = $("#myDiv").arrt("class"); //獲取id 爲myDiv 的元素的樣式
$("#myDiv").attr("class","myClass"); //設置id 爲myDiv 的元素的樣式
$("#myDiv").addClass("other"); //在id 爲myDiv 的元素中追加樣式
$("#myDiv").removeClass("other"); //在id 爲myDiv 的元素中移除other 樣式
$("#myDiv").removeClass("myClass other"); //在id 爲myDiv 的元素中移除myClass 和
other 多個樣式
$("#myDiv").removeClass(); //在id 爲myDiv 的元素中移除所有樣式
$("#myDiv").toggleClass("other"); //切換樣式，在有other 樣式和沒other 樣式之間切
換
$("#myDiv").hasClass("other"); //判斷是否有other 樣式
設置和獲取HTML、文本和值
alert( $("#myDiv").html() ); //獲取id 爲myDiv 的元素的HTML 代碼（相當於innerHTML）
$("#myDiv").html("<span>hello</span>"); //設置id 爲myDiv 的元素的HTML 代碼
alert( $("#myDiv").text() ); //獲取id 爲myDiv 的元素的HTML 代碼（相當於innerText）
$("#myDiv").text("hello"); //設置id 爲myDiv 的元素的HTML 代碼
alert( $("#myInput").val() ); //獲取id 爲myDiv 的元素的value 值（支持文本框、下
拉框、單選框、複選框等）
$("#myInput").val("hello"); //設置id 爲myDiv 的元素的value 值（下拉框、單選框、
複選框帶有選中效果）
遍歷節點
var $cList = $("#myDiv").children(); //獲取id 爲myDiv 的元素的子元素（只考慮子元
素，不考慮後代元素）
var $sNext = $("#myDiv").next(); //獲取id 爲myDiv 的元素的下一個同輩元素
var $sPrev = $("#myDiv").prev(); //獲取id 爲myDiv 的元素的上一個同輩元素
var $sSibl = $("#myDiv").siblings(); //獲取id 爲myDiv 的元素的所有同輩元素
var $pClos = $("#myDiv").closest("span"); //獲取id 爲myDiv 的元素本身開始，最接
近的span 元素（向上查找）
CSS-DOM 操作
$("#myDiv").css("color"); //獲取id 爲myDiv 的元素的color 樣式的值
$("#myDiv").css("color", "blue"); //設置id 爲myDiv 的元素的color 樣式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //設置id 爲myDiv 的元素的
color 樣式的值（多個）
$("#myDiv").css("opacity", "0.5"); //設置id 爲myDiv 的元素的透明度（兼容瀏覽器）
$("#myDiv").css("height"); //獲取id 爲myDiv 的元素的高度（單位：px，兼容瀏覽器）
$("#myDiv").height(); //同上（實際高度）
$("#myDiv").css("width"); //獲取id 爲myDiv 的元素的寬度（單位：px，兼容瀏覽器）
$("#myDiv").width(); //同上（實際寬度）
var offset = $("#myDiv").offset(); //獲取id 爲myDiv 的元素在當前窗口的相對偏移量
alert( offset.top + "|" + offset.left );
var offset = $("#myDiv").position(); //獲取id 爲myDiv 的元素相對於最近一個
position 設置爲relative 或absolute 的父元素的相對偏移量
alert( offset.top + "|" + offset.left );
$("#txtArea").scrollTop(); //獲取id 爲txtArea 的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(); //獲取id 爲txtArea 的元素滾動條距離左側的距離
$("#txtArea").scrollTop(100); //設置id 爲txtArea 的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(100); //設置id 爲txtArea 的元素滾動條距離左側的距離
四．事件及動畫
加載DOM
$(window).load() 等價於window.onload 事件
$(document).ready() 相當於window.onload 事件，但有些區別：
(1)執行時機：
window.onload 是在網頁中所有元素（包括元素的所有關聯文件）完全加載後才執行
$(document).ready() 是在DOM 完全就緒時就可以被調用，此時，並不意味着這些元素關係
的文件都已經下載完畢
(2)多次使用：可以在同一個頁面註冊多個$(document).ready()事件
(3)簡寫方式：可以縮寫成$(function(){ }) 或$().ready()
事件綁定
當文檔裝載完成後，可以通過bind()方法，爲特定的元素進行事件的綁定，可重複多次使用
bind( type, [data, ] fn );
type：指事件的類型:
blur（失去焦點）、focus（獲得焦點）
load（加載完成）、unload（銷燬完成）
resize（調整元素大小）、scroll（滾動元素）
click（單擊元素事件）、dbclick（雙擊元素事件）
mousedown（按下鼠標）、mouseup（鬆開鼠標）
mousemove（鼠標移過）、mouseover（鼠標移入）、mouseout（鼠標移出）
mouseenter（鼠標進入）、mouseleave（鼠標離開）
change（值改變）、select（下拉框索引改變）、submit（提交按鈕）
keydown（鍵盤按下）、keyup（鍵盤松開）、keypress（鍵盤單擊）
error（異常）
data：指事件傳遞的屬性值，event.data 額外傳遞給對象事件的值
fn：指綁定的處理函數，在此函數體內，$(this)指攜帶相應行爲的DOM 元素
合併事件
hover(enter,leave)：鼠標移入執行enter、移出事件執行leave
$("#myDiv").hover( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
toggle(fn1,fn2,…fnN)：鼠標每點擊一次，執行一個函數，直到最後一個後重復
$("#myDiv").toggle( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
事件冒泡
下面的例子，BODY 元素下有DIV 元素，DIV 元素下有SPAN 元素，分別將三種元素都註冊
click 事件。
那麼，click 事件會按照DOM 的層次結構，像水泡一樣不斷向上直到頂端，所以稱之爲事件
冒泡。
<body><div><span>我是SPAN 我怕誰</span></div></body>
$("span").bind("click", function(){ alert(‘span click’); });
$("div").bind("click", function(){ alert(‘div click’); });
$("body").bind("click", function(){ alert(‘body click’); });
阻止冒泡
解決這個問題的辦法是：在SPAN 執行完click 事件後，停止事件冒泡。
$("span").bind("click", function(event){
alert(‘span click’);
event.stopPropagation(); //停止冒泡
});
阻止默認行爲
提交按鈕在提交前做相應的邏輯判斷，當不滿足時
$("#btnSubmit").bind("click", function(event){
event.preventDefault(); //阻止默認行爲相當於return false;
});
事件對象的屬性
$("#myDiv").bind("click", function(event){ });
event.type() //返回：click
event.target() //獲取當前元素
event.relatedTarget() //引發事件的元素
event.pageX()/event.pageY() //獲取鼠標相對於頁面的X 和Y 座標
event.which() //在單擊事件中獲取到對應的按鍵鼠標左中右分別是123
event.metaKey() //獲取操作中的相關功能鍵（ctrl/alt/shift）
移除事件
$("#myDiv").bind("click", fn1 = function(){
alert("function1");
}).bind("click", fn2 = function(){
alert("function2");
}).bind("click", fn3 = function(){
alert("function3");
});
$("#myDiv").unbind(); //移除id 爲myDiv 的元素的所有事件
$("#myDiv").unbind("click"); //移除id 爲myDiv 的元素的所有click 事件
$("#myDiv").unbind("click",fn1); //移除id 爲myDiv 的元素的名稱爲fn1 的click 事
件
一次性事件：綁定的事件執行一次後自動移除
$("#myDiv").one("click", [data], function(){
alert("function1");
});
觸發事件
$("#btn").trigger("click", [data]); //代碼方式觸發click 事件
$("#btn").click(); //另一種簡寫方式
事件命名空間
$("#myDiv").bind("click.hello", function(){
alert("function1");
});
$("#myDiv").bind("click", function(){
alert("function1");
})
$("div").unbind("click"); //兩個事件都被移除
$("div").unbind(".hello"); //只移除第一個
$("div").unbind("click!"); //只移除第二個（注意感嘆號，指沒有名字空間的）
JQuery 中的動畫
$("div").hide(); //隱藏所有DIV 元素，相當於sytle="display:none"
$("div").show(); //顯示所有DIV 元素
$("div").hide(1000); //一秒內隱藏所有DIV 元素，其它參數還有：slow(600) normal(400)
fast(200)
$("div").show(1000); //一秒內顯示所有DIV 元素
$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度參數，不會改變寬高）
$("div").fadeIn(); //升高元素的不透明度，直至顯示
$("div").slideUp(); //由下至上收縮元素，直至消失（支持速度參數）
$("div").slideDown(); //由上至下展開元素，直至顯示
自定義動畫animate
$(elem).animate(params, speed, callback);
params：樣式屬性及值的映射{protected:"value", protected:"value"}
speed: 速度參數
callback: 動畫完成後執行函數，可選
$("#myDiv").animate({left:"500px"}, 2000); //兩秒內ID 爲myDiv 的元素移至左邊距
500px 的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累減
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重動畫，同時
執行
$("#myDiv").animate({opacity:"0.5"}, 1000) //先變成50%透明
.animate({top:"500px"}, 500) //移至離頂端500px
.animate({left:"500px"}, 500) //移至離左邊500px
.fadeOut(1000); //顯示出來（四個動作爲隊列，一步步執行）
$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止動畫，參數爲boolean
$("#myDiv").is(":animate") //判斷元素是否在執行動畫
其它動畫
$("#myDiv").toggle(); //顯示與隱藏元素
$("#myDiv").slideToggle(); //展開與收縮元素
$("#myDiv").fadeTo(1000, 0.2); //一秒內將元素透明度調整到20%
五．Ajax應用及插件使用
單選文本框應用（獲得焦點時，加了個特殊的樣式，失去焦點時還原，兼容所有瀏覽器）
$(":input").focus(function(){ this.addClass("inputFocus"); })
.blur(function(){ this.removeClass("inputFocus"); });
多行文本框的應用（放大、縮小多行文本框的高度，限制最大500px，兼容所有瀏覽器）
var $txt = $("#textArea");
$(".bigger").click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() – 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
複選框的應用（實現全選、全不選、反選）
$("#btnCheckedAll").click(function(){ //全選
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不選
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反選
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
下拉框的應用（將一個下拉列表的選中項搬至另一個下拉列表）
$("#btnAdd").click(function(){ //將選中選項搬過去
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //將全部選項搬過去
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //雙擊項搬過去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
表單驗證
<form>
<div>
<label>用戶名：</label>
<input type="text" id="txtUid" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每個class 有required 樣式的input
元素後面添加*號
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦點時驗證域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>驗證正確</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用戶每點一個鍵觸發
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦點時觸發
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //讓所有需要驗證的域失去焦點
var errNum = $("form .error").length;
if( errNum ){
alert("有驗證字段失敗，請重新填寫");
return false;
Ajax 應用
load( url [,data] [,callback] )方法
url：要請求的頁面的地址
data：要發送的相關參數
callback：回調函數
$("#myDiv").load("hello.html"); //向myDiv 元素加載hello.html 的內容
$("#myDiv").load("hello.html .myClass"); //篩選，只加載hello.html 中myClass 樣式
的內容
$("#myDiv").load("hello.html", function(){} ); //沒參數的，使用GET 方式
$("#myDiv").load("hello.html", {id:’123′, name:’dier’}, function(){} ); //
有參數的，使用POST 方式
$("#myDiv").load("hello.html", function(responseText, textStatus,
XMLHttpRequest){ //回調函數
//responseText : 請求返回的內容
//textStatus : 請求狀態success error notmodified timeout
//XMLHttpRequest : Ajax 對象
});
$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])
方法
url：要請求的頁面的地址
data：要發送的相關參數
callback：回調函數
type：指定服務器返回內容的格式xml html script json text _default
$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回調函
數只有當狀態是success 才觸發
//data : 請求返回的內容
//textStatus : 請求狀態success error notmodified timeout
//當data 是HTML 時，直接加載
$("#myDiv").html(data);
//當data 是XML 時，可篩選<user id="123" name="dier" age="27" />
var age = $(data).find("user").attr("age");
//當data 是JSON 時，可直接點出屬性來{id:"123", name:"dier", age:"27"}
var age = data.age;
});
getScript(url [,callback])方法
$(function(){ //動態加載JS 腳本
$.getScript("test.js");
$.getScript("test.js", function(){ //回調函數
//do something..
});
});
getJSON(url [,callback])方法
$(function(){ //動態加載JS 腳本
$.getJSON("test.js");
$.getJSON("test.js", function(data){ //回調函數
//do something..
//data : 返回的數據
$.each( data, function(index, item){ //遍歷，相當於foreach
//index : 索引
//item : 當前項內容
//return false; 退出循環
});
});
});
ajax(options)方法
url : 請求的地址
type : 請求的方式GET POST 默認爲GET
timeout : 請求超時時間(單位：毫秒）
data : 請求時發送的參數（String,Object）
dataType : 預期返回的數據類型xml html script json jsonp text
bdforeSend : 發送請求前觸發事件，如果return false 則取消發送
function(XmlHttpRequest){}
complete : 請求完成後觸發事件，不管成功與否function(XmlHttpRequest, textStatus){}
success : 請求完成並且成功時觸發事件function(data, textStatus){}
error : 請求完成並且失敗時觸發事件function(XmlHttpRequest, textStatus,
errorThrown){}
global : 是否爲全局請求，默認爲true，可使用AjaxStart、AjaxStop 控制各種事件
$.ajax({
url : "test.aspx",
type : "POST",
timeout : "3000",
data : {id:"123", name:"dier"},
dataType : "HTML",
success : function(data,textStatus){
$("#myDiv").html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$("#myDiv").html( "請求失敗：" + errThrown );
}
});
序列化字符串serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
//將form1 整個表單中的所有域序列化成提交的參數，支持自動編碼
});
序列化數組serializeArray()
var arr = $(":checkbox, :radio").serializeArray();
對象序列化param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27
JQuery 中的全局Ajax 事件
ajaxStart(callback) //請求開始時觸發
ajaxStop(callback) //請求結束時觸發
ajaxComplete(callback) //請求完成時觸發
ajaxSuccess(callback) //請求成功時觸發
ajaxError(callback) //請求失敗時觸發
ajaxSend(callback) //請求發送前觸發
$("#loading").ajaxStart(function(){ //當有AJAX 請求時顯示，完成時隱藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);