通過對《鋒利的jQuery》（第二版）一書的學(xué)習(xí)，發(fā)現(xiàn)此書講解通俗易懂，是學(xué)習(xí)jQuery的一本很好的指導(dǎo)書，特作如下總結(jié)。此書主要講解了jQuery的常用操作，包括認識jQuery，jQuery選擇器，jQuery中的DOM操作，jQuery中的事件和動畫，jQuery對表單、表格的操作及更多應(yīng)用，jQuery與Ajax的應(yīng)用等。

第一章 認識jQuery

jQuery強調(diào)的理念是寫得少，做得多（write less，do more），其具有鏈式操作方式、隱式迭代、行為層和結(jié)構(gòu)層的分離等諸多優(yōu)點。
獲取jQuery的最新版本：http://jquery.com/

1、默認情況下jQuery用$作為自身的快捷方式，并且以下兩種形式等價：

1 $(document).ready(function(){ 2 //代碼 3 }); 4 相當于 5 $(function(){ 6 //代碼 7 });

2、jQuery對象和DOM對象的相互轉(zhuǎn)換

（1）jQuery對象轉(zhuǎn)換成DOM對象

jQuery提供了兩種方法將一個jQuery對象轉(zhuǎn)換成DOM對象，即[index]和get(index)。

1 var $ck = $("#ck");//jQuery對象 2 var ck= $ck[0];//或者var ck= $ck.get(0); 3 alert(ck.checked);//檢測這個checkbox是否被選中

（2）DOM對象轉(zhuǎn)換成jQuery對象

只需要使用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。

1 var ck= document.getElementById("ck");//DOM對象 2 var $ck = $(ck);

第二章 jQuery選擇器

1 //普通js判斷獲得元素是否存在 2 if(document.getElementById("mytt")){ 3 //do something 4 } 5 6 //juery判斷獲得元素是否存在 7 if($("#mytt").length > 0){ 8 //do something 9 } 1 //如果mytt元素不存在，則頁面出現(xiàn)異常 2 document.getElementById("mytt").style.color = "red"; 3 4 //即使頁面沒有名稱為mytt的元素，也不會報錯，它是一個jQuery對象 5 $("#mytt").css("color","red");

常用選擇器

1、基本選擇器：

1 //注意：基本選擇器中有id選擇器，但是沒有name選擇器 2 $("#mytt") //根據(jù)給定的id選擇匹配的元素，此處是選取id為mytt的元素，返回：單個元素 3 $(".myttClass") //根據(jù)給定的樣式名稱選擇匹配的元素，此處是選取所有class為myttClass的元素，返回：集合元素 4 $("p") //根據(jù)給定的元素名稱選擇匹配的元素，此處是選取所有的<p>元素，返回：集合元素 5 $("#mytt,.myttClass,p") //根據(jù)給定的規(guī)則選擇匹配的元素，此處是選取id為mytt的元素、class為myttClass的元素和<p>元素，返回：集合元素 6 $("*") //選擇頁面所有元素，返回：集合元素

2、層次選擇器：

1 $("div span") //選擇所有<div>元素下的所有<span>元素（即所有后代元素，包括兒子和孫子等層的），返回：集合元素 2 $("div>span") //選擇所有<div>元素下的<span>子元素（僅子元素），返回：集合元素 3 $(".myttClass+div") //選擇class樣式名稱為myttClass的下一個<div>元素（即緊接在myttClass元素后的同輩元素），等價于$(".myttClass").next("div")，返回：集合元素 4 $(".myttClass~div") //選擇樣式名稱為myttClass之后的所有<div>元素（myttClass元素之后的同輩元素），等價于 $(".myttClass").nextAll("div")，返回：集合元素 5 //注意：$(".myttClass").siblings("div") //選擇樣式名稱為myttClass的元素的所有同輩<div>元素（無論前后），返回集合元素

3、過濾選擇器

（1）、基本過濾選擇器

1 //注意：索引index從0開始2 $("div:first") //選擇所有<div>元素中的第一個<div>元素，返回：單個元素3 $("div:last") //選擇所有<div>元素中的最后一個<div>元素，返回：單個元素4 $("div:not(.myttClass)") //選擇所有樣式不包括myttClass的<div>元素，返回：集合元素5 $("div:even") //選擇所有索引是偶數(shù)的<div>元素，返回：集合元素6 $("div:odd") //選擇所有索引是奇數(shù)的<div>元素，返回：集合元素7 $("div:eq(index)") //選擇索引等于index的<div>元素，eq為equals的縮寫，返回：單個元素8 $("div:gt(index)") //選擇所有索引大于index的<div>元素，gt為great than的縮寫，返回：集合元素9 $("div:lt(index)") //選擇所有索引小于index的<div>元素，lt為less than的縮寫，返回：集合元素 10 $(":header") //選擇所有標題元素（如h1,h2,h3等），返回：集合元素 11 $("div:animated") //選擇所有正在執(zhí)行動畫的<div>元素，返回：集合元素 12 $(":focus") //選擇當前獲取焦點的元素，返回：集合元素

（2）、內(nèi)容過濾選擇器

1 $("div:contains('我')") //選擇所有文本內(nèi)容包含"我"的<div>元素，返回：集合元素 2 $("div:empty") //選擇所有不包含子元素或者文本的<div>空元素，返回：集合元素 3 $("div:has(p)") //選擇所有含有匹配子元素<p>的<div>元素，返回：集合元素 4 $("div:parent") //選擇所有含有子元素或者文本的<div>元素，返回：集合元素

（3）、可見性選擇器

1 $(":hidden") //選擇所有不可見的元素（如：<input type="hidden"/>、<div style="display:none;">和<div style="visibility:none">等元素），返回：集合元素 2 $(":visible") //選擇所有可見的元素，返回：集合元素

（4）、屬性過濾選擇器

1 $("[id]") //選擇所有含有id屬性的元素，返回：集合元素 2 $("[class=myttClass]") //選擇所有class屬性值是myttClass的元素，返回：集合元素 3 $("[class!=myClass]") //選擇所有class屬性值不是myClass的元素，注意：沒有title屬性的元素也會被選取，返回：集合元素 4 $("[title^=tt]") //選擇所有title屬性值以tt開始的元素，返回：集合元素 5 $("[title$=tt]") //選擇所有title屬性值以tt結(jié)束的元素，返回：集合元素 6 $("[title*=tt]") //選擇所有title屬性值含有tt的元素，返回：集合元素 7 $('[title|="tt"]') //選擇所有title屬性值等于tt或以tt為前綴（該字符串后跟一個連字符'-'）的元素，返回：集合元素 8 $('[title~="tt"]') //選擇所有title屬性值用空格分割的值中包含字符tt的元素，返回：集合元素 9 $("div[id][class=myttClass]") //選擇所有含有id屬性的并且class屬性值是myttClass的元素，返回：集合元素

（5）、子元素過濾選擇器

1 //index從1開始 2 $(":nth-child(index/even/odd)") //選擇每個父元素下的第index/偶數(shù)/奇數(shù)個子元素，返回：集合元素 3 $(":first-child") //選擇每個父元素下的第一個子元素，返回：集合元素 4 $(":last-child") //選擇每個父元素下的最后一個子元素，返回：集合元素 5 $("ul li:only-child") //在<ul>元素中選擇只有一個<li>元素的子元素，返回：集合元素

（6）、表單對象屬性選擇器

1 $("#myttForm:enabled") //選擇id屬性為myttForm表單內(nèi)的所有可用元素，返回：集合元素 2 $("#myttForm:disabled") //選擇id屬性為myttForm表單內(nèi)的所有不可用元素，返回：集合元素 3 $("input:checked") //選擇所有被選中的<input>元素（單選框、復(fù)選框），返回：集合元素 4 $("select:selected") //所有被選中的選項元素（下拉列表），返回：集合元素

4、表單選擇器

1 $(":input") //選擇所有<input>、<textarea>、<select>和<button>元素，返回：集合元素2 $(":text") //選擇所有單行文本框元素，返回：集合元素3 $(":password") //選擇所有密碼框元素，返回：集合元素4 $(":radio") //選擇所有單選框元素，返回：集合元素5 $(":checkbox") //選擇所有復(fù)選框元素，返回：集合元素6 $(":submit") //選擇所有提交按鈕元素，返回：集合元素7 $(":image") //選擇所有圖片按鈕元素，返回：集合元素8 $(":reset") //選擇所有重置按鈕元素，返回：集合元素9 $(":button") //選擇所有按鈕元素，返回：集合元素 10 $(":file") //選擇所有上傳域元素，返回：集合元素 11 $(":hidden") //選擇所有不可見域元素，返回：集合元素

注意：

　　$(":input")和$("input")是不同的選擇器，$(":input")是表單選擇器可以選擇<input>、<textarea>、<select>和<button>元素，而$("input")是標簽選擇器，只能匹配選擇出<input>標簽元素。
　　上面說到了，有id選擇器，但是沒有name選擇器，此處可以使用屬性選擇器來表示$("[name=mytt]")來獲取name="mytt"的元素。

第三章 jQuery中的DOM操作

1 <p title="choose your favourite fruit" >你最喜歡的水果是?</p> 2 <ul> 3 <li title='apple'>蘋果</li> 4 <li title='orange'>橘子</li> 5 <li title='pinapple'>菠蘿</li> 6 </ul>

1、查找節(jié)點

（1）查找元素節(jié)點

1 //使用上面介紹的jQuery選擇器來完成查找元素 2 var $li = $("ul li:eq(1)"); // 獲取第二個<li>元素節(jié)點 3 var li_txt = $li.text(); // 輸出第二個<li>元素節(jié)點的text 4 alert(li_txt);//得到橘子

（2）查找屬性節(jié)點

1 var $para = $("p");//獲取<p>節(jié)點 2 var p_txt = $para.attr("title");//獲的<p>元素節(jié)點屬性title值 3 alert(p_txt);//得到"choose your favourite fruit"

2、創(chuàng)建節(jié)點

1 var $li_1 = $("<li title='banana'>香蕉</li>");//創(chuàng)建一個<li>元素,包括元素節(jié)點，文本節(jié)點和屬性節(jié)點,其中title='banana'就是創(chuàng)建的屬性節(jié)點 2 var $li_2 = $("<li title='pear'>雪梨</li>");//創(chuàng)建一個<li>元素，包括元素節(jié)點,文本節(jié)點和屬性節(jié)點，其中title='pear' 就是創(chuàng)建的屬性節(jié)點 3 var $parent = $("ul");//獲取<ul>節(jié)點。<li>的父節(jié)點 4 $parent.append($li_1);//添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示 5 $parent.append($li_2);//等價于：$parent.append($li_1).append($li_2);

3、插入節(jié)點

1 $("p").append("<b>grape</b>");//結(jié)果為<p title="choose your favourite fruit" >你最喜歡的水果是?<b>grape</b></p>

4、刪除節(jié)點

1 //remove()方法的返回值是一個指向已被刪除的節(jié)點的引用 2 var $li = $("ul li:eq(1)").remove(); //獲取第二個<li>元素節(jié)點后，將它從網(wǎng)頁中刪除 3 $li.appendTo("ul");//把剛才刪除的節(jié)點又重新添加到<ul>元素里

5、復(fù)制節(jié)點

1 //使用clone()方法 2 $(this).clone().appendTo("ul"); //復(fù)制當前點擊的節(jié)點，并將它追加到<ul>元素 3 $(this).clone(true).appendTo("ul"); //注意參數(shù)true，復(fù)制元素的同事復(fù)制元素中所綁定的事件

6、替換節(jié)點

1 //replaceWith()和replaceAll()方法 2 $("p").replaceWith("<strong>你最不喜歡的水果是?</strong>"); 3 //同樣的實現(xiàn)： 4 $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p");

7、包裹節(jié)點

1 //使用wrap()方法 2 $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來。即<b><p title="choose your favourite fruit" >你最喜歡的水果是?</p></b>

8、屬性操作

1 //使用attr()方法來獲取和設(shè)置元素屬性2 //設(shè)置<p>元素的屬性'title'3 $("p").attr("title","choose");4 5 //獲取<p>元素的屬性'title'6 alert( $("p").attr("title"));7 8 //使用removeAttr()方法來刪除元素的屬性9 //刪除<p>元素的屬性'title' 10 $("p").removeAttr("title");

9、樣式操作

此處獲取和修改的是css樣式是class屬性。

1 //1.使用attr()方法來獲取樣式和設(shè)置樣式2 $("p").attr("class","hign");//設(shè)置<p>元素的class3 alert( $("p").attr("class"));//獲取<p>元素的'class'4 5 //2.使用addClass()方法來追加樣式6 $("p").addClass("another");//給<p>元素追加'another'樣式類7 8 //3.使用removeClass()方法來移除樣式9 $("p").removeClass()("high another");//使用空格來刪除多個樣式 10 11 //使用toggle()方法來控制行為上的重復(fù)切換 12 $toggleBtn.toggle(function(){ 13 //顯示元素 14 },function(){ 15 //隱藏元素 16 }) 17 18 //4.toggleClass()方法來控制樣式上的重復(fù)切換 19 $("p").toggleClass("another");//重復(fù)切換類名"another" 20 21 //5.hasClass()判斷是否含有某個樣式 22 $("p").hasClass("another");

10、設(shè)置和獲取HTML、文本和值

1 //1.html()方法2 alert($("p").html());//獲取<p>元素的HTML代碼3 $("p").html("<strong>你最喜歡的水果是?</strong>");//設(shè)置<p>元素的HTML代碼4 5 //2.text()方法6 alert($("p").text());//獲取<p>元素的文本7 $("p").text("你最喜歡的水果是?");//設(shè)置<p>元素的文本8 9 //3.val()方法 10 alert($(this).val());//獲取按鈕的value值 11 $(this).val("我被點擊了!");//設(shè)置按鈕的value值 12 13 //focus()方法相當于js中的onfocus()方法，blur()方法相當與js中的onblur()方法 14 //defaultValue屬性包含該表單元素的初始值

11、遍歷節(jié)點

children()方法用于取得匹配元素的子元素集合。
next()方法取得匹配元素后面緊鄰的同輩元素。
prev()方法取得匹配元素前面緊鄰的同輩元素。
siblings()方法取得匹配元素前后所有的同輩元素。

12、CSS-DOM操作

此處獲取和修改的是css樣式是style屬性。

主要有css()方法、width()方法、height()方法、offset()方法、position()方法、scollTop()和scroLeft()方法等。

1 //此處獲取和修改的是css樣式是style屬性 2 //使用css()方法獲取或者設(shè)置元素的樣式屬性 3 alert($("p").css("color"));//獲取<p>元素的color 4 $("p").css("color","red");//設(shè)置<p>元素的color

第四章 jQuery中的事件和動畫

jQuery中的事件

1、加載DOM

1 //jQuery代碼： 2 $(window).load(function(){ 3 //編寫代碼 4 }) 5 //等價于JavaScript代碼： 6 window.οnlοad=function(){ 7 //編寫代碼 8 } 1 $(document).reday(function(){ 2 //編寫代碼 3 }) 4 //等價于 5 $(function(){ 6 //編寫代碼 7 })

2、事件綁定

在文檔裝在完成后，如果打算為元素綁定事件來完成操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的調(diào)用格式為：

bind(type [, data], fn);

1 $(function(){2 $("#panel h5.head").bind("click",function(){3 $(this).next().show();4 })5 })6 //可以簡寫為：7 $(function(){8 $("#panel h5.head").click(function(){9 $(this).next().show(); 10 }) 11 })

3、合成事件

jQuery有兩個合成事件：hover()方法和toggle()方法。

hover()方法用于模擬光標懸停事件，語法結(jié)構(gòu)為hover(enter,leave)，當光標移動到元素上是，會觸發(fā)指定的第1個函數(shù)（enter）；當光標移出這個元素時，會觸發(fā)指定的第2個函數(shù)（leave）。

1 $(function(){ 2 $("#panel h5.head").hover(function(){ 3 $(this).next().show(); 4 },function(){ 5 $(this).next().hide(); 6 }) 7 })

toggle()方法用于模擬鼠標連續(xù)單擊事件，語法格式為toggle(fn1,fn2,...fnN)，每次單擊元素，都會依次執(zhí)行fn。

1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).addClass("highlight"); 4 $(this).next().show(); 5 },function(){ 6 $(this).removeClass("highlight"); 7 $(this).next().hide(); 8 }); 9 })

4、事件冒泡

event.stopPropagation()方法停止事件冒泡；

event.preventDefault()方法阻止默認行為；

5、事件對象的屬性

event.type可以獲取到事件的類型；

event.stopPropagation()方法停止事件冒泡；

event.preventDefault()方法阻止默認行為；

event.target獲取到觸發(fā)事件的元素；

event.relatedTarget獲取到相關(guān)元素；

event.pageX和event.pageY獲取到光標相對于頁面的x坐標和y坐標；

event.which獲取鼠標單擊時的左、中、右鍵；

event.metaKey獲取<ctrl>按鍵；

6、移除事件

使用unbind([type],[data])方法

1 //移除click中的所有事件 2 $('#delAll').click(function(){ 3 $('#btn').unbind("click");//移除click中的所有事件 4 }); 5 6 //移除click中的myFun2事件 7 $('#delTwo').click(function(){ 8 $('#btn').unbind("click",myFun2);//移除click中的myFun2事件 9 });

7、模擬操作

trigger()方法完成模擬操作

1 $('#btn').trigger("click");//模擬單擊操作 2 //可簡寫為 3 $('#btn').click();

jQuery中的動畫

1、show()方法和hide()方法

show()方法會將元素的display樣式改為"block"或者"inline"，hide()方法會將元素的display樣式改為"none"。方法中可以帶參數(shù)來控制顯示或者隱藏的速度。

1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().hide(); 4 },function(){ 5 $(this).next().show(); 6 }) 7 })

2、fadeIn()方法和fadeOut()方法

fadeIn()方法和fadeOut()方法改變元素的不透明度，即淡入淡出效果。

1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().fadeOut(); 4 },function(){ 5 $(this).next().fadeIn(); 6 }) 7 })

3、slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法會改變元素的高度，slideUp()方法由上到下縮短隱藏，slideDown()由上至下延伸顯示。

1 $(function(){ 2 $("#panel h5.head").toggle(function(){ 3 $(this).next().slideUp(); 4 },function(){ 5 $(this).next().slideDown(); 6 }) 7 })

4、自定義動畫animate()

1 $(function(){ 2 $("#panel").click(function(){ 3 $(this).animate({left: "500px"}, 3000); 4 }) 5 })

第五章 jQuery對表單、表格的操作及更多應(yīng)用

1 //復(fù)選框全選或不全選2 $("#CheckedAll").click(function(){3 //所有checkbox跟著全選的checkbox走4 $('[name=items]:checkbox').attr("checked", this.checked );5 });6 7 $('[name=items]:checkbox').click(function(){8 //定義一個臨時變量，避免重復(fù)使用同一個選擇器選擇頁面中的元素，提升程序效率。9 var $tmp=$('[name=items]:checkbox'); 10 //用filter方法篩選出選中的復(fù)選框。并直接給CheckedAll賦值。 11 $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length); 12 }); 13 14 //表格奇偶行才一共不同的樣式 15 $("tr:odd").addClass("oddTr"); //給奇數(shù)行添加oddTr樣式 16 $("tr:even").addClass("evenTr"); //給偶數(shù)行添加evenTr樣式

第六章 jQuery與Ajax的應(yīng)用

Ajax的核心是XMLHttpRequest對象，它是Ajax實現(xiàn)的關(guān)鍵——發(fā)送異步請求、接收相應(yīng)即執(zhí)行回調(diào)都是通過他來完成的。

jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。

load()方法是jQuery中最為簡單和常用的jQuery方法，能載入遠程HTML代碼和插入DOM中，一般用于獲取靜態(tài)的數(shù)據(jù)文件，語法格式為：load(url [,data] [,callback])。

1 //無參數(shù)傳遞，則是get方式；有參數(shù)傳遞，則是post方式2 $(function(){3 $("#send").click(function(){4 $("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){5 alert( $(this).html() );//在這里this指向的是當前的DOM對象，即 $("#iptText")[0]6 alert(responseText);//請求返回的內(nèi)容7 alert(textStatus);//請求狀態(tài)：success，error8 alert(XMLHttpRequest);//XMLHttpRequest對象9 }); 10 }) 11 })

$.get()方法和$.post()方法

$.get()方法的語法結(jié)構(gòu)為：$.get(url [,data] [,callback] [,type])，$.post()方法結(jié)構(gòu)與其類似，只是提交方式不一樣。
其中url表示被加載的數(shù)據(jù)的url地址；data表示發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對象；callback表示當數(shù)據(jù)被加載時，所執(zhí)行的函數(shù)；type表示被返回的數(shù)據(jù)的類型（html，xml，json，text等）。

form表單中的GET與POST的區(qū)別：
GET請求的數(shù)據(jù)會附在URL地址之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，而且提交的數(shù)據(jù)最多只能是2KB，而且GET方式提交的數(shù)據(jù)會給瀏覽器緩存起來，從瀏覽器的歷史記錄中可以找到，所以安全性較差；
POST請求會把提交的數(shù)據(jù)放置在HTTP包的包體中，不會附著在地址欄中，提交的數(shù)據(jù)理論上沒有大小限制，所以POST的安全性要比GET高。

1 $(function(){2 $("#send").click(function(){3 $.get("get3.php", { 4 username : $("#username").val() , 5 content : $("#content").val() 6 }, function (data, textStatus){7 var username = data.username;8 var content = data.content;9 var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; 10 $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁面上 11 },"json"); 12 }) 13 })

?

1 $(function(){2 $("#send").click(function(){3 $.post("get3.php", { 4 username : $("#username").val() , 5 content : $("#content").val() 6 }, function (data, textStatus){7 var username = data.username;8 var content = data.content;9 var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>"; 10 $("#resText").html(txtHtml); // 把返回的數(shù)據(jù)添加到頁面上 11 },"json"); 12 }) 13 })

$.getScript()方法和$.getJSON()方法

$.getScript(url[,data][,callback])方法，相當于$.get()方法的Script版本，相當于指定type參數(shù)為"script"；$.getJson(url[,data][,callback])方法，相當于$.get()方法的Json版本，相當于指定type參數(shù)為"json"；

1 $(function(){ 2 $.getScript('jquery.color.js',function(){ 3 $("<p>加載JavaScript完畢</p>").appendTo("body"); 4 $("#go").click(function(){ 5 $(".block").animate( { backgroundColor: 'pink' }, 1000) 6 .animate( { backgroundColor: 'blue' }, 1000); 7 }); 8 }); 9 })

?

1 $(function(){2 $('#send').click(function() {3 $.getJSON('test.json', function(data) {4 $('#resText').empty();5 var html = '';6 $.each( data , function(commentIndex, comment) {7 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';8 })9 $('#resText').html(html); 10 }) 11 }) 12 })

$.ajax()方法

$.ajax()方法的語法格式為：$.ajax(options)，參數(shù)以key/value的形式存在。
其中url表示發(fā)送請求的地址；dataType表示預(yù)期從服務(wù)器返回的數(shù)據(jù)類型；type表示請求方式，默認為GET；data表示發(fā)送到服務(wù)器的數(shù)據(jù)；async表示發(fā)送同步/異步請求，默認為true，表示異步；success表示請求成功后調(diào)用的回調(diào)函數(shù)；error表示請求失敗時調(diào)用的回調(diào)函數(shù)。
注意：同步請求將鎖住瀏覽器，用戶的其他操作必須等待請求完成后才可以繼續(xù)執(zhí)行。

1 $(function(){2 $('#send').click(function() {3 $.ajax({4 type: "GET",5 url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",6 dataType: "jsonp",7 success : function(data){8 $.each(data.items, function( i,item ){9 $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText"); 10 if ( i == 3 ) { 11 return false; 12 } 13 }); 14 } 15 }); 16 }); 17 })

Cookie與Session的區(qū)別：

Cookie是早期的會話跟蹤技術(shù)，它會將信息保存到客戶端瀏覽器中。瀏覽器訪問網(wǎng)站時會攜帶這些cookie信息，達到鑒別身份的目的。
Session是在Cookie的基礎(chǔ)上建立起來的會話跟蹤技術(shù)，它將信息保存在服務(wù)器端。Session中能夠存儲負責的Java對象，因此使用更加方便。Session依賴于名為JSESSIONID的Cookie。

轉(zhuǎn)載于:https://www.cnblogs.com/guchengnan/p/10507102.html

總結(jié)

以上是生活随笔為你收集整理的《锋利的jQuery》学习总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。