第10章jQuery（下）《JavaScript+jQuery交互式Web前端開發（第2版）》學習目標/Target

掌握jQuery元素操作，能夠實現元素的遍歷、查找、過濾、追加、復制、替換

和刪除操作

掌握jQuery尺寸和位置操作，能夠靈活應用尺寸和位置操作方法獲取或設置元

素的尺寸、位置

掌握jQuery事件操作，能夠根據實際場景完成事件注冊、觸發、委托等操作

掌握jQuery動畫，能夠根據不同場景使用jQuery實現元素的顯示、隱藏、滑動、

停止、淡入淡出和自定義動畫的效果

了解jQuery其他方法，能夠描述$.extend()方法和$.ajax()方法的作用章節概述/Summary第9章講解了jQuery的基本使用，相信讀者已經掌握了使用jQuery開發常見網頁交互功能的技能。在jQuery中還提供了元素操作、尺寸和位置操作、事件操作、動畫等方法，使用這些方法可以高效地開發更豐富的網頁交互功能。本章將對jQuery（下）進行講解。目錄/Contents10.110.2jQuery元素操作jQuery尺寸和位置操作10.3jQuery事件操作目錄/Contents10.410.5jQuery動畫jQuery其他方法10.6【案例】使用jQuery實現購物車功能jQuery元素操作10.1掌握元素遍歷操作，能夠使用each()方法實現元素遍歷操作

先定一個小目標！10.1.1元素遍歷操作在jQuery中，當需要對多個元素進行相同的操作時，可以使用元素遍歷操作，從而減少代碼量。jQuery提供了each()方法用于快速實現元素遍歷操作，each()方法的語法格式如下。$(selector).each(function(index,domEle)){//具體操作});在上述語法格式中，selector表示選擇器，each()方法的參數是一個函數，該函數用于遍歷匹配的元素集合中的每個元素，函數的index參數表示元素的索引，domEle參數表示DOM元素對象。10.1.1元素遍歷操作$.each()方法可以遍歷任何對象，包括數組。$.each()方法的語法格式如下。$.each(collection,function(index,element)){//具體操作});上述語法格式中，collection表示被遍歷的對象，index表示數組元素索引或對象成員名，element表示數組元素值或對象成員值。10.1.1元素遍歷操作$.each()方法多學一招掌握元素查找和過濾操作，能夠靈活應用jQuery中常用的元素查找方法和過濾方法10.1.2元素查找和過濾操作

先定一個小目標！在前面的學習中，已經了解了如何使用jQuery的選擇器獲取滿足某個條件的元素，jQuery還提供了一些查找和過濾元素的方法，用于快速獲取元素。10.1.2元素查找和過濾操作下面列舉jQuery中常用的元素查找方法和過濾方法，具體如下表所示。分類方法說明查找元素find(selector|ele)獲取當前匹配元素集中每個元素的后代元素，通過選擇器selector或元素ele過濾parents([selector])獲取當前匹配元素集中每個元素的祖先元素（不包含根元素）parent([selector])獲取當前匹配元素集中每個元素的父元素siblings([selector])獲取當前匹配元素集中每個元素的兄弟元素（不分前后）next([selector])獲取當前匹配元素集中每個元素緊鄰的后一個兄弟元素prev([selector])獲取當前匹配元素集中每個元素緊鄰的前一個兄弟元素10.1.2元素查找和過濾操作>>續上一頁表分類方法說明過濾元素eq(index)獲取索引index對應的元素filter(selector|obj|ele|fn)使用選擇器selector、對象obj、元素ele或函數fn完成指定元素的篩選hasClass(class)檢查當前的元素是否含有某個特定的類，如果有，則返回true，否則返回falseis(selector|obj|ele|fn)根據選擇器selector、對象obj、元素ele或函數fn檢查當前匹配的一組元素，如果這些元素中至少有一個與給定的參數匹配，則返回truehas(selector|ele)保留包含特定后代元素的元素，去掉不含有特定后代元素的元素10.1.2元素查找和過濾操作掌握精品展示的案例，能夠編寫代碼實現案例

先定一個小目標！10.1.3【案例】精品展示在電商網站的首頁設計中，通常會有精品展示的功能，該功能用于推送熱賣的商品，并支持快速切換商品。本案例將通過jQuery實現精品展示的功能，要求鼠標指針經過左側菜單時，在右側的圖片區域顯示對應的商品圖。10.1.3【案例】精品展示掌握元素追加操作，能夠靈活應用jQuery中常用的元素追加操作方法

先定一個小目標！10.1.4元素追加操作10.1.4元素追加操作在網頁開發中，當需要根據用戶行為動態地添加頁面內容時，可以使用元素追加操作。例如，用戶單擊某個按鈕時，頁面會展示新的圖片或打開新的菜單列表。10.1.4元素追加操作元素追加是指在現有的元素中進行子元素或兄弟元素的添加。jQuery提供了元素追加方法，可以幫助開發者快速更新頁面內容、改善用戶體驗、增強頁面交互性。下面列舉jQuery中常用的元素追加方法，具體如下表所示。分類方法說明追加子元素append(content|fn)將參數指定的內容插入匹配元素集中每個元素內部的末尾prepend(content|fn)將參數指定的內容插入匹配元素集中每個元素內部的開頭appendTo(target)將匹配元素集中的每個元素插入目標元素內部的末尾prependTo(target)將匹配元素集中的每個元素插入目標元素內部的開頭10.1.4元素追加操作>>續上一頁表分類方法說明追加兄弟元素after(content|fn)在匹配元素集中的每個元素之后插入由參數指定的內容before(content|fn)在匹配元素集中的每個元素之前插入由參數指定的內容insertAfter(target)在目標元素之后插入匹配元素集中的每個元素insertBefore(target)在目標元素之前插入匹配元素集中的每個元素10.1.4元素追加操作掌握元素復制操作，能夠使用clone()方法實現元素復制操作

先定一個小目標！10.1.5元素復制操作10.1.5元素復制操作在實際開發中，當使用元素追加操作將匹配元素插入目標元素的末尾或者開頭時，通常會移動匹配元素的位置。若要實現在不移動元素位置的情況下夠將匹配元素插入目標元素中，可以使用元素復制操作。在jQuery中，使用clone()方法可以實現元素復制操作，該方法的語法格式如下。element.clone([Events][,deepEvents])10.1.5元素復制操作上述語法格式中，參數Events表示是否復制元素的事件驅動程序和數據，默認為false；參數deepEvents表示是否深層復制，默認為false。掌握元素替換和刪除操作，能夠靈活應用jQuery中常用的元素替換和刪除方法

先定一個小目標！10.1.6元素替換和刪除操作元素替換是指將選中的元素替換為指定的元素，元素刪除是指將選中的元素或某個元素的子元素刪除。在實際開發中，當需要替換或刪除某個元素時，可以使用jQuery提供的元素替換方法或元素刪除方法。10.1.6元素替換和刪除操作下面列舉jQuery中常用的元素替換和刪除方法，具體如下表所示。分類方法說明元素替換replaceWith(newContent)將所有匹配的元素替換成新內容，參數newContent表示新內容，可以是HTML字符串、DOM元素、元素數組或jQuery對象replaceAll(selector)用匹配的元素替換掉所有selector匹配到的元素元素刪除empty()刪除元素下的子元素，但不刪除元素本身remove([selector])刪除元素下的子元素和元素本身，可選參數selector用于篩選元素10.1.6元素替換和刪除操作jQuery尺寸和位置操作10.2掌握尺寸操作方法的使用，能夠靈活應用jQuery中常用的尺寸操作方法10.2.1

尺寸操作方法

先定一個小目標！jQuery提供的尺寸操作方法用于獲取或設置元素的高度和寬度，下面列舉jQuery中常用的尺寸操作方法，具體如下表所示。方法說明width()獲取第一個匹配元素的當前寬度，返回數字型結果width(value)為所有匹配的元素設置寬度，value可以是字符串或數字height()獲取第一個匹配元素的當前高度，返回數字型結果height(value)為所有匹配的元素設置高度，value可以是字符串或數字outerWidth([includeMargin])匹配獲取元素集中第一個元素的當前計算的外部寬度，includeMargin表示是否包括邊距，默認為false，表示不包括outerHeight(value[,includeMargin])為所有匹配的元素設置高度為value10.2.1

尺寸操作方法掌握位置操作方法的使用，能夠靈活應用jQuery中常用的位置操作方法10.2.2位置操作方法

先定一個小目標！jQuery提供的位置操作方法用于獲取或設置元素的位置，下面列舉jQuery中常用的位置操作方法，具體如下表所示。方法說明offset()獲取元素的位置，返回的是一個對象，包含left屬性和top屬性offset(coordinates)使用對象coordinates設置元素的位置，必須包含left屬性和top屬性scrollTop()和scrollLeft()獲取匹配元素相對滾動條頂部和左部的位置scrollTop(value)和scrollLeft(value)設置匹配元素相對滾動條頂部和左部的位置10.2.2位置操作方法jQuery事件操作10.3掌握頁面加載事件，能夠靈活應用頁面加載事件實現將jQuery代碼寫在DOM元素前面

先定一個小目標！10.3.1頁面加載事件10.3.1頁面加載事件頁面加載事件用于實現頁面的初始化。在使用jQuery操作DOM元素時，為了確保jQuery代碼能夠生效，需要將jQuery代碼寫在DOM元素后面，否則代碼不會生效。如果想要將jQuery代碼寫在DOM元素前面，就需要使用頁面加載事件來實現。10.3.1頁面加載事件在jQuery中，頁面加載事件的語法格式有3種，具體如下。$(document).ready(function(){}) //語法格式1$().ready(function(){}) //語法格式2$(function(){}) //語法格式3在上述語法格式中，ready()方法用于監聽頁面加載事件。在頁面DOM元素加載完成后，將需要運行的代碼寫到function()函數中，并傳遞給jQuery，由jQuery在合適的時機運行。掌握事件注冊，能夠靈活應用事件方法或on()方法實現事件注冊

先定一個小目標！10.3.2事件注冊在前面學習DOM的相關知識時，講解了如何通過標簽的屬性進行事件注冊，以及如何在JavaScript代碼中獲取元素后使用“元素對象.事件屬性”完成事件的注冊。在jQuery中，實現事件注冊的方式有兩種，第1種方式是通過事件方法實現事件注冊，第2種方式是通過on()方法實現事件注冊。10.3.2事件注冊10.3.2事件注冊1.通過事件方法實現事件注冊在jQuery中通過調用某個事件方法，并傳入事件處理函數就可以實現事件注冊。jQuery的事件處理方法和DOM中的事件屬性相比，省略了開頭的“on”，例如，jQuery中的click()方法對應DOM中的onclick事件屬性。jQuery中的事件方法允許多次調用，從而可以為一個事件注冊多個事件處理函數。下面列舉jQuery中常用的事件方法，具體如下表所示。10.3.2事件注冊分類方法說明表單事件blur([eventData][,handler])當元素失去焦點時觸發focus([eventData][,handler])當元素獲得焦點時觸發change([eventData][,handler])當元素的值發生改變時觸發focusin([eventData][,handler])在父元素上檢測子元素獲取焦點的情況focusout([eventData][,handler])在父元素上檢測子元素失去焦點的情況select([eventData][,handler])當文本框（包括<input>和<textarea>）中的文本被選中時觸發submit([eventData][,handler])當表單提交時觸發>>續上一頁表10.3.2事件注冊分類方法說明鍵盤事件keydown([eventData][,handler])按鍵盤按鍵時觸發keypress([eventData][,handler])按鍵盤按鍵（“Shift”“Fn”“CapsLock”等非字符鍵除外）時觸發keyup([eventData][,handler])鍵盤按鍵彈起時觸發鼠標事件mouseover([eventData][,handler])當鼠標指針移入元素或其子元素時觸發mouseout([eventData][,handler])當鼠標指針移出元素或其子元素時觸發mouseenter([eventData][,handler])當鼠標指針移入元素時觸發mouseleave([eventData][,handler])當鼠標指針移出元素時觸發10.3.2事件注冊分類方法說明鼠標事件click([eventData][,handler])當單擊元素時觸發dblclick([eventData][,handler])當雙擊元素時觸發mousedown([eventData][,handler])當鼠標指針移動到元素上方，并按鼠標按鍵時觸發mouseup([eventData][,handler])當在元素上放松鼠標按鍵時會被觸發瀏覽器事件scroll([eventData][,handler])當滾動條發生變化時觸發resize([eventData][,handler])當調整瀏覽器窗口的大小時會被觸發>>續上一頁表10.3.2事件注冊2.通過on()方法實現事件注冊jQuery提供的on()方法用于為元素注冊一個或多個事件，也可以為不同事件注冊相同的事件處理函數，通過on()方法注冊一個事件的語法格式如下。element.on(event,fn)通過on()方法注冊多個事件的語法格式如下。element.on({event:fn},{event:fn},…)通過on()方法為不同的事件注冊相同的事件處理函數的語法格式如下。element.on(events,fn)使用jQuery的排他操作清除元素樣式多學一招前面的章節講解了如何使用JavaScript排他操作實現高亮顯示被單擊的按鈕，在實際開發中，還可以使用jQuery的排他操作清除元素樣式。例如，頁面中有3個按鈕，當單擊任意一個按鈕時，該按鈕的背景顏色將顯示為粉色，其他兩個按鈕的背景顏色不顯示。10.3.2事件注冊多學一招若要實現這樣的效果，則可以使用jQuery的排他操作，示例代碼如下。<body>

<button>按鈕1</button>

<button>按鈕2</button>

<button>按鈕3</button>

<script>

$('button').click(function(){

$(this).css('background','pink');

$(this).siblings('button').css('background','');

});

</script></body>10.3.2事件注冊掌握事件觸發，能夠靈活應用事件方法、trigger()方法和triggerHandler()方法實現事件觸發

先定一個小目標！10.3.3事件觸發通常在為元素注冊事件后，由用戶或瀏覽器觸發事件，若希望某個事件在程序中被觸發，就需要手動觸發這個事件。在jQuery中，實現事件觸發的方式有3種，第1種方式是通過事件方法實現事件觸發；第2種方式是通過trigger()方法實現事件觸發；第3種方式是通過triggerHandler()方法實現事件觸發。10.3.3事件觸發1.通過事件方法實現事件觸發在jQuery中，調用事件方法還可以實現事件觸發，兩者的區別在于是否傳入參數（傳入參數表示事件注冊，不傳入參數則表示事件觸發），示例代碼如下。<body>

<div>通過事件方法實現事件觸發</div>

<script>

//事件注冊

$('div').click(function(){

alert('Hello');

});

//事件觸發

$('div').click();

</script></body>10.3.3事件觸發2.通過trigger()方法實現事件觸發使用trigger()方法可以觸發指定事件，示例代碼如下。<body>

<div>通過trigger()方法實現事件觸發</div>

<script>

//事件注冊

$('div').click(function(){

alert('Hello');

});

//事件觸發

$('div').trigger('click');

</script></body>10.3.3事件觸發3.通過triggerHandler()方法實現事件觸發通過事件方法和trigger()方法觸發事件時，都會運行元素的默認行為，而通過triggerHandler()方法觸發事件時不會運行元素的默認行為。元素的默認行為是指用戶執行某個動作后元素自動產生的行為，例如，文本框獲取焦點時有光標閃爍的現象。10.3.3事件觸發掌握事件委托，能夠使用on()方法實現事件委托

先定一個小目標！10.3.4事件委托事件委托是指把原本要給子元素注冊的事件委托給父元素，也就是將子元素的事件注冊到父元素上。事件委托的優勢在于，可以為未來動態創建的元素注冊事件，其原理是將事件委托給父元素后，在父元素中動態創建的子元素也會擁有事件。10.3.4事件委托在jQuery中，事件委托通過on()方法實現，on()方法的語法格式如下。element.on(event,selector,fn)10.3.4事件委托上述語法格式中，event表示事件類型，selector表示子元素選擇器，fn表示事件處理函數。掌握事件解除，能夠使用off()方法實現事件解除

先定一個小目標！10.3.5事件解除事件解除是指移除元素所注冊的事件，在jQuery中，事件解除通過off()方法實現。off()方法的語法格式如下。element.off(event,selector)上述語法格式中，當off()方法中不傳入參數時，表示解除元素上的所有事件；當off()方法中只傳入event參數時，表示解除元素上注冊的指定事件；當off()方法中傳入event參數和selector參數時，表示解除元素上的事件委托。10.3.5事件解除one()方法多學一招one()方法用于注冊一次性事件。在網頁開發中，若希望元素的某個事件只觸發一次，可以使用one()方法實現。例如，為div元素注冊一次性單擊事件，示例代碼如下。10.3.5事件解除<body>

<div>div元素</div>

<script>

$('div').one('click',function(){

console.log('為div元素注冊一次性單擊事件');

});

</script></body>掌握事件對象，能夠使用事件對象阻止默認行為和事件冒泡

先定一個小目標！10.3.6事件對象10.3.6事件對象當事件被觸發時，就會產生事件對象，在事件處理函數中可以使用參數接收事件對象。除此之外，還可以使用事件對象阻止默認行為和事件冒泡。下面通過代碼演示如何查看事件對象。<body>

<div>單擊事件對象</div>

<script>

$('div').click(function(event){

console.log(event);

});

</script></body>10.3.6事件對象首先單擊頁面中的“單擊事件對象”，然后查看事件對象的輸出結果，如下圖所示。10.3.6事件對象下面通過代碼演示如何使用事件對象阻止默認行為和事件冒泡。

<body>

<ahref="1.html">請單擊</a>

<script>

$(document).on('click',function(){

console.log('單擊了document');

});

$('a').on('click',function(event){

event.preventDefault();

//阻止事件默認行為

console.log('單擊了a');

});

</script></body>10.3.6事件對象若要阻止事件冒泡，可以添加如下代碼。event.stopPropagation() //阻止事件冒泡掌握Tab欄切換的案例，能夠編寫代碼實現案例

先定一個小目標！10.3.7【案例】Tab欄切換Tab是指頁面中的標簽，Tab欄切換是一種常見的網頁特效，在網頁開發中，使用Tab欄切換可以提高用戶的體驗，當用戶單擊頁面中的標簽時，會顯示當前標簽下的內容。10.3.7【案例】Tab欄切換10.3.7【案例】Tab欄切換下面將通過一個案例演示Tab欄切換的實現，本案例的具體實現思路如下。編寫頁面結構。使用div元素、ul元素和li元素分別定義Tab欄列表結構和展示當前標簽下的頁面結構。編寫頁面樣式。當單擊當前標簽時，當前標簽的背景顏色為綠色。通過jQuery實現業務邏輯。當單擊頂部標簽欄中的li元素時，當前li元素添加current類名，其他兄弟元素移除current類名，并且同時得到當前li元素的索引，讓內容區域中相應索引的內容顯示，其他內容隱藏。在瀏覽器中進行測試，運行結果如下圖所示。10.3.7【案例】Tab欄切換當單擊列表標簽中的“規格與包裝”時，運行結果如下圖所示。jQuery動畫10.4掌握顯示和隱藏效果，能夠靈活應用控制元素顯示和隱藏的方法

先定一個小目標！10.4.1顯示和隱藏效果10.4.1顯示和隱藏效果在某個電商平臺的頁面開發中，假設需要給用戶提供商品篩選的功能，由于頁面空間有限，需要當用戶單擊“展開篩選條件”按鈕時，展開篩選條件，用戶完成篩選后將篩選條件收起。若要實現這個開發需求，則可以使用jQuery中的顯示和隱藏效果。jQuery中控制元素顯示和隱藏效果的方法如下表所示。方法說明show([duration][,easing][,complete])顯示被隱藏的匹配元素hide([duration][,easing][,complete])隱藏已顯示的匹配元素toggle([duration][,easing][,complete])元素顯示和隱藏切換掌握滑動效果，能夠靈活應用控制元素上滑和下滑的方法

先定一個小目標！10.4.2滑動效果在網頁開發中，使用滑動效果可以提升用戶體驗，例如，在開發垂直導航菜單時，可以通過滑動效果設置當用戶單擊導航菜單后，子菜單下拉顯示，再次單擊則收起子菜單。jQuery中常用slideDown()方法和slideUp()方法實現滑動效果，其中，slideDown()方法可以讓HTML元素或者文本自上而下逐漸顯示，而slideUp()方法則是將HTML元素或者文本自下而上逐漸隱藏。10.4.2滑動效果jQuery中控制元素上滑和下滑的方法和說明，具體如下表所示。方法說明slideDown([duration][,easing][,complete])垂直滑動顯示匹配元素（自上而下逐漸顯示）slideUp([duration][,easing][,complete])垂直滑動隱藏匹配元素（自下而上逐漸隱藏）slideToggle([duration][,easing][,complete])在slideDown()和slideUp()兩種方法實現的效果之間切換10.4.2滑動效果掌握停止效果，能夠使用stop()方法停止動畫

先定一個小目標！10.4.3停止效果如果在同一個元素上調用了一個以上的動畫方法，則該元素除了當前正在運行的動畫，其他的動畫將被放到一個隊列中，這樣就形成了動畫隊列。動畫隊列中的動畫都是按照順序運行的，默認只有當第1個動畫運行完畢，才會運行下一個動畫。如果想運行動畫隊列中的第2個動畫或其他動畫，則需要停止元素當前正在運行的動畫。當需要停止動畫時，可以使用jQuery提供的stop()方法，其語法格式如下。10.4.3停止效果element.stop([clearQueue][,jumpToEnd])在程序中調用stop()方法時，如果設置的參數不同，則會實現不同的效果。下面以div元素為例，演示使用stop()方法的3種常用方式，示例代碼如下。10.4.3停止效果$('div').stop();$('div').stop(true);$('div').stop(true,true);掌握淡入淡出效果，能夠靈活應用控制元素淡入和淡出的方法

先定一個小目標！10.4.4淡入淡出效果在某個電商網站的開發中，為了提高用戶體驗，需要在首頁展示熱門商品，并提供一個“查看更多”的按鈕。當用戶單擊該按鈕時，若要讓新加載的商品平滑漸顯，就可以使用jQuery中控制元素淡入和淡出的方法。10.4.4淡入淡出效果下面列舉jQuery中控制元素淡入和淡出的方法，具體如下表所示。方法說明fadeIn([duration][,easing][,complete])淡入顯示匹配元素fadeOut([duration][,easing][,complete])淡出隱藏匹配元素fadeTo(duration,opacity[,easing][,complete])以淡入淡出方式將匹配元素調整到指定的透明度fadeToggle([duration][,easing][,complete])在fadeIn()和fadeOut()兩種方法實現的效果間切換10.4.4淡入淡出效果下面通過代碼進行演示，實現鼠標指針移入盒子時突出顯示，其他盒子以0.2透明度顯示。10.4.4淡入淡出效果初始效果、當鼠標指針移入第1個盒子時效果，如下圖所示。掌握自定義動畫的實現，能夠使用jQuery提供的animate()方法自定義動畫

先定一個小目標！10.4.5自定義動畫在網頁開發中，當顯示、隱藏、滑動、停止和淡入淡出的動畫效果無法滿足用戶的實際需求時，可以使用jQuery提供的animate()方法自定義動畫，該方法的語法格式如下。10.4.5自定義動畫element.animate(properties[,duration][,easing][,complete])上述語法格式中，參數properties表示一組包含動畫最終屬性值的集合，如果屬性名由兩個單詞組成，需要使用駝峰命名法，如background-color，需要寫為backgroundColor。掌握手風琴效果的案例，能夠編寫代碼實現案例

先定一個小目標！10.4.6【案例】手風琴效果下面將通過jQuery動畫實現手風琴效果的案例進行講解，本案例的具體實現思路如下。編寫頁面結構。在頁面中定義7個不同顏色的小方塊，將每個小方塊的寬度和高度都設置為69px，當鼠標指針經過不同顏色的小方塊時，小方塊將變為長度為224px，高度為69px的大方塊。編寫頁面樣式。為7個小方塊設置不同的背景顏色，并且采用十六進制來區分。為了使頁面樣式更加美觀，大方塊的背景顏色采用接近于當前小方塊的背景顏色。10.4.6【案例】手風琴效果通過jQuery實現交互效果。當鼠標指針移動到小方塊時，會觸發鼠標指針移入事件。在使用選擇器獲取頁面中的小方塊時，通過fadeIn()方法和fadeOut()方法控制方塊的顯示與隱藏。10.4.6【案例】手風琴效果初始效果、當鼠標指針移入第3個小方塊時效果，如下圖所示。jQuery其他方法10.5了解$.extend()方法的使用，能夠描述$.extend()方法的作用

先定一個小目標！10.5.1$.extend()方法$.extend()方法可以將一個對象的成員賦值給另一個對象使用，其語法格式如下。$.extend([deep],target,object1[,objectN])上述語法格式中，參數deep為可選參數，如果設置為true表示深復制，默認值為false，表示淺復制；參數target表示需要復制的目標對象，后面可以跟多個對象（object1~objectN）；參數object1表示待復制的第一個對象；參數objectN表示待復制的第N個對象。當不同對象中存在相同的成員名時，后面的對象的成員會覆蓋前面的對象的成員。10.5.1$.extend()方法了解$.ajax()方法的使用，能夠描述$.ajax()方法的作用

先定一個小目標！10.5.2$.ajax()方法jQuery提供了$.ajax()方法用于通過Ajax（AsynchronousJavaScriptAndXML，異步JavaScript和XML）技術請求服務器，獲取服務器的響應結果。Ajax技術用于在瀏覽器中通過JavaScript向服務器發送請求，接收服務器返回的結果。10.5.2$.ajax()方法除$.ajax()方法外，jQuery還提供了get()方法、post()方法和load()方法發送Ajax請求。下面列舉jQuery中常用的Ajax操作方法，具體如下表所示。分類方法說明高級應用$.get(url[,data][,fn][,type])通過GET請求載入信息$.post(url[,data][,fn][,type])通過POST請求載入信息$.getJSON(url[,data][,fn])通過GET請求載入JSON數據$.getScript(url[,fn])通過GET請求載入并執行一個JavaScript文件底層應用對象.load(url[,data][,fn])載入遠程HTML文件代碼并將其插入DOM$.ajax(url[,options])請求加載遠程數據$.ajaxSetup(options)設置全局Ajax默認選項10.5.2$.ajax()方法常用的Ajax選項如下表所示。選項名稱說明url處理Ajax請求的服務器地址data發送Ajax請求時傳遞的參數（字符串型）successAjax請求成功時所觸發的回調函數type發送的HTTP請求方式，如GET、POSTdatatype期待的返回值類型，如XML、JSON、SCRIPT或HTML數據類型10.5.2$.ajax()方法>>續上一頁表選項名稱說明async是否異步，true