#####第一章 認識jquery

---

頁面加載事件（可以寫多個ready()）

$(document).ready(function(){ alert("hello world"); })

鏈式操作：jquery允許你在一句代碼中操做任何與其相關聯的元素，包括其子元素、父元素等
選擇名稱為myDiv的元素，為其自身添加css1的樣式，然后再選擇其所有子元素a，為其移除css2樣式

$("#myDiv").addClass("css1″).children("a").removeClass("css2″);

jquery中獲得一個對象的所有子元素內容

$("#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對$符號的控制權

jquery.noConflict();

#####第二章 jquery選擇器

---

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") //選擇所有提交按鈕元素，返回：集合元素 $(":image") //選擇所有圖片按鈕元素，返回：集合元素 $(":reset") //選擇所有重置按鈕元素，返回：集合元素 $(":button") //選擇所有按鈕元素，返回：集合元素 $(":file") //選擇所有上傳域元素，返回：集合元素 $(":hidden") //選擇所有不可見域元素，返回：集合元素 $(":text") //選擇所有單選文本框元素，返回：集合元素

#####第三章 jquery中的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的元素滾動條距離左側的距離

#####第四章 jquery中的事件和動畫

---

加載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%

#####第五章 jquery對表單、表格的操作及更多應用

---

單選文本框應用（獲得焦點時，加了個特殊的樣式，失去焦點時還原，兼容所有瀏覽器）

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

表格應用

$("tr:odd").addClass("oddTr"); //給奇數行添加oddTr樣式 $("tr:even").addClass("evenTr"); //給偶數行添加evenTr樣式 $("tr:contains('王五')").addClass("highlightTr"); //查找包含"王五"的行，添加highlightTr樣式 $("tr").click(function(){ $(this).addClass("selectedTr") //給當前行添加選中樣式 .siblings().removeClass("selectedTr") //反選移除選中樣式 .end() //結束，返回$(this)，否則則是反選的行 .find(':radio").attr("checked",true); //在當前行查找單選框，選中它 });

#####第六章 jquery與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(); } );

總結

以上是生活随笔為你收集整理的锋利的jQuery（汇总）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。