日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
一篇文章教會(huì)你jQuery應(yīng)用

一 認(rèn)識(shí)jQuery

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鐵門(mén)關(guān)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

jQuery是JavaScript Query的縮寫(xiě)形式。jQuery是一款非常優(yōu)秀的JavaScript庫(kù)，即便是MVVM框架盛行的今天，也有超過(guò)半數(shù)的網(wǎng)頁(yè)及應(yīng)用直接或間接的使用了jQuery。jQuery的設(shè)計(jì)理念是“Write Less, Do More“，即寫(xiě)的更少，做的更多！使用jQuery可以大大簡(jiǎn)化我們的JS代碼，從而提高開(kāi)發(fā)效率。

jQuery現(xiàn)在有3個(gè)大的版本，分別是1.x，2.x，3.x。你可以從jQuery官方網(wǎng)站下載需要的版本，然后從本地引入到自己的項(xiàng)目，也可以使用CDN引入。在你下載jQuery時(shí)一般有兩個(gè)可選的版本，一個(gè)是壓縮版（不包含換行和空格，體積更小，多用于實(shí)際項(xiàng)目開(kāi)發(fā)），另一個(gè)是未壓縮版（包含換行和空格，體積稍大，多用于學(xué)習(xí)和測(cè)試）。

  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.  
    3.    
  
  
  
  3.  
    4.    
  
  
  
  4.  
    5.

另外，jQuery從第二個(gè)大的版本開(kāi)始，為了優(yōu)化網(wǎng)絡(luò)響應(yīng)和使語(yǔ)法更加簡(jiǎn)潔，拋棄了對(duì)IE6、7、8的支持，并且從2.1.0開(kāi)始，壓縮版本的文件中也不再包含注釋信息了。為了獲得更好的兼容性，我們這里使用的jQuery文件版本號(hào)是1.12.4。

二 jQuery核心

1，$符號(hào)

jQuery實(shí)際上是一個(gè)函數(shù)對(duì)象。事實(shí)上，jQuery通過(guò)全局變量jQuery引用該函數(shù)對(duì)象，$符號(hào)是jQuery變量的一個(gè)別名，為了寫(xiě)的更少，我們通常都使用$符號(hào)表示該對(duì)象。

  
 
 
 
    
   
  
  
  
  1. window.jQuery === window.$; //true 
    2.    
  
  
  
  2. jQuery === $;// true 
    3.    
  
  
  
  3. typeof($);// 'function' 
    4.

如果你還使用了其他框架，或自定義了$變量，那么有可能和jQuery的$符號(hào)造成沖突。

  
 
 
 
    
   
  
  
  
  1. jQuery.noConflict(); 
    2.

在使用jQuery編程之前，首先調(diào)用noConflict()方法，解除jQuery對(duì)$符號(hào)的占用，這樣就可以解決這一問(wèn)題了。但往后就只能通過(guò)變量jQuery來(lái)使用jQuery的所有功能了。

2，參數(shù)

$核心函數(shù)可以接收3種類(lèi)型的參數(shù)，分別是函數(shù)引用、字符串、DOM對(duì)象。

a) 接收一個(gè)函數(shù)

  
 
 
 
    
   
  
  
  
  1. $(function(){ 
    2.    
  
  
  
  2. //some code 
    3.    
  
  
  
  3. }); 
    4.    
  
  
  
  4. //這種方式的完整寫(xiě)法應(yīng)該是： 
    5.    
  
  
  
  5. //$(document).ready(function(){some code}); 
    6.

這種方式類(lèi)似原生JS的window.DOMContentLoaded方法，只要HTML文檔解析完畢并生成DOM tree就會(huì)觸發(fā)該事件。但是在jQuery中可以同時(shí)存在多個(gè)該方法。

b) 接收字符串

  
 
 
 
    
   
  
  
  
  1. var box1 = $('div'); 
    2.    
  
  
  
  2. //接收css選擇器字符串，可以拿到DOM tree中相應(yīng)的DOM元素，并把它包裝成jQuery對(duì)象 
    3.    
  
  
  
  3. var box2 = $('
    '); 
    4.    
  
  
  
  4. //接收HTML代碼片段，可以創(chuàng)建相應(yīng)的DOM元素，并把它包裝秤jQuery對(duì)象 
    5.

c) 接收DOM元素

  
 
 
 
    
   
  
  
  
  1. var box = document.getElementById('#box'); 
    2.    
  
  
  
  2. var jBox = $(box);//jQuery obj 
    3.

如果核心函數(shù)接收一個(gè)DOM元素，那么它會(huì)把該DOM元素包裝成一個(gè)jQuery對(duì)象，并返回。

jQuery對(duì)象事實(shí)上是一個(gè)類(lèi)數(shù)組，保存了獲取到的DOM元素。只有通過(guò)jQuery對(duì)象才可以訪(fǎng)問(wèn)jQuery提供的屬性和方法。

3，靜態(tài)方法

jQuery提供了一些靜態(tài)方法，例如遍歷數(shù)組，字符串去空格，判斷數(shù)據(jù)類(lèi)型等等，這些方法在ES5之前都是很實(shí)用的方法，但ES5之后，原生JS就已經(jīng)實(shí)現(xiàn)了這類(lèi)似的方法，所以這里就不再詳細(xì)講解了，有興趣可以自行查看官方文檔。jQuery把a(bǔ)jax相關(guān)操作也封裝為靜態(tài)方法，稍后會(huì)專(zhuān)門(mén)講解。這里要講的只有holdReady方法。

  
 
 
 
    
   
  
  
  
  1. $.holdReady(true); 
    2.    
  
  
  
  2. $(function(){ 
    3.    
  
  
  
  3. //some code 
    4.    
  
  
  
  4. }); 
    5.    
  
  
  
  5. $.joldReady(false); 
    6.    
  
  
  
  6. //參數(shù)true，暫停ready方法的執(zhí)行，參數(shù)false，恢復(fù)ready方法的執(zhí)行 
    7.

三 jQuery 屬性和節(jié)點(diǎn)

1，選擇器

選擇器是jQuery的核心功能。絕大多數(shù)css支持的選擇器都可以在jQuery得到支持。

  
 
 
 
    
   
  
  
  
  1. $('p');//標(biāo)簽選擇器 
    2.    
  
  
  
  2. $('.class');//類(lèi)選擇器 
    3.    
  
  
  
  3. $('#id');//id選擇器 
    4.    
  
  
  
  4. $('[type=text]');//屬性選擇器 
    5.    
  
  
  
  5. $('input[type=email]');//組合選擇器 
    6.    
  
  
  
  6. $(#id p);//后代選擇器 
    7.    
  
  
  
  7. $(#id p:first-child);//篩選選擇器 
    8.    
  
  
  
  8. //... 
    9.

通過(guò)核心函數(shù)獲取到的DOM元素都被包裝成jQuery對(duì)象，以類(lèi)數(shù)組的形式存儲(chǔ)。我們可以通過(guò)eq方法獲取其中某一個(gè)，還可以通過(guò)get方法獲取DOM對(duì)象。1

  
 
 
 
    
   
  
  
  
  1. var divList = $('div');//獲取所有div 
    2.    
  
  
  
  2. var domDiv = divList.get(0);//獲取第一個(gè)Dom元素，如果有的話(huà) 
    3.    
  
  
  
  3. var jqDiv = divList.eq(0);//獲取第一個(gè)jq對(duì)象，如果有的話(huà) 
    4.    
  
  
  
  4. var another = $(domDiv);//把Dom元素轉(zhuǎn)化成jq對(duì)象 
    5.

另外jQuery還提供了一些通過(guò)層級(jí)結(jié)構(gòu)查找元素的方法。

  
 
 
 
    
   
  
  
  
  1. $('div').find('span');//查找div內(nèi)部的span，等同于$('div span') 
    2.    
  
  
  
  2. $('li').first();//獲取匹配的元素中的第一個(gè) 
    3.    
  
  
  
  3. $('li').last();//獲取匹配的元素中的最后一個(gè) 
    4.    
  
  
  
  4. $('div').next();//獲取所有匹配到的div的下一個(gè)兄弟元素的集合 
    5.    
  
  
  
  5. $('div').prev();//獲取所欲匹配到的div的上一個(gè)兄弟元素的集合 
    6.    
  
  
  
  6. $('div').parent();//獲取匹配到的div的共同父元素 
    7.    
  
  
  
  7. $('div').children();//獲取div的子元素集合 
    8.    
  
  
  
  8. $('div').siblings();//獲取div的兄弟元素集合 
    9.    
  
  
  
  9. //... 
    10.

2，屬性操作

獲取DOM元素之后，jQuery把它們包裝成jq對(duì)象，然后你就可以通過(guò)jQuery提供的方法修改相應(yīng)的DOM元素了，包括CSS，文本，屬性節(jié)點(diǎn)，HTML結(jié)構(gòu)等等。

屬性及屬性節(jié)點(diǎn)相關(guān)：

  
 
 
 
    
   
  
  
  
  1. $('div').attr('name','test');//設(shè)置屬性名：name，屬性值：test 
    2.    
  
  
  
  2. $('div').attr('name');//獲取屬性name的值 
    3.    
  
  
  
  3. $('div').removeAttr('name');//刪除屬性name 
    4.    
  
  
  
  4. ****************************** 
    5.    
  
  
  
  5. $('div').prop('name','test'); 
    6.    
  
  
  
  6. $('div').prop('name'); 
    7.    
  
  
  
  7. $('div').removeProp('name'); 
    8.    
  
  
  
  8. //prop的用法和attr一模一樣，唯一不同的是prop既可以操作DOM元素的屬性，也可以操作它的屬性節(jié)點(diǎn) 
    9.

當(dāng)屬性沒(méi)有被顯示的設(shè)置時(shí)，通過(guò)attr()方法獲取將返回undefined，而prop()方法可以返回true或者false，所以，如果你要檢索和更改DOM屬性，比如元素的checked，selected，或disabled狀態(tài)，推薦使用prop()方法，其他時(shí)候都使用attr方法。

注意，使用上訴方法獲取屬性值時(shí)，返回的只是第一個(gè)匹配的DOM元素的相應(yīng)屬性值。但是設(shè)置的時(shí)候卻是為所有匹配的DOM元素都添加該屬性。

class類(lèi)相關(guān)：

  
 
 
 
    
   
  
  
  
  1. $('div').addClass('test');//添加類(lèi)，如需添加多個(gè)類(lèi)，使用空格隔開(kāi)即可 
    2.    
  
  
  
  2. $('div').removeClass('test');//刪除類(lèi)，如需刪除多個(gè)類(lèi)，也用空格隔開(kāi)即可 
    3.    
  
  
  
  3. $('div').toggleClass('test');//切換類(lèi)，如果DOM元素已經(jīng)有該類(lèi)了，那么就刪除，如果沒(méi)有則添加 
    4.

文本及結(jié)構(gòu)相關(guān)：

  
 
 
 
    
   
  
  
  
  1. $('div').html();//獲取第一個(gè)匹配到的div的內(nèi)容 
    2.    
  
  
  
  2. $('div').html('
    我是段落
    ');//設(shè)置所有匹配到的div的內(nèi)容 
    3.    
  
  
  
  3. $('div').text();//獲取所有匹配元素的文本內(nèi)容 
    4.    
  
  
  
  4. $('div').text('hello');//設(shè)置所有匹配到的div的文本內(nèi)容 
    5.    
  
  
  
  5. $('input').val();//獲取匹配元素value值 
    6.    
  
  
  
  6. $('input').val('hello');//獲取匹配元素value值 
    7.

css相關(guān)：

  
 
 
 
    
   
  
  
  
  1. $('div').css('background-color','red');//設(shè)置元素的單個(gè)css屬性 
    2.    
  
  
  
  2. $('div').css({ 
    3.    
  
  
  
  3. width:'200px', 
    4.    
  
  
  
  4. height:'200px', 
    5.    
  
  
  
  5. background-color:'red' 
    6.    
  
  
  
  6. });//通過(guò)對(duì)象設(shè)置多個(gè)css屬性 
    7.

尺寸及位置相關(guān)：

  
 
 
 
    
   
  
  
  
  1. $('div').width();//獲取div的內(nèi)容區(qū)寬度，可傳參設(shè)置 
    2.    
  
  
  
  2. $('div').height();//獲取div的內(nèi)容區(qū)高度，可傳參設(shè)置 
    3.    
  
  
  
  3. //innerWidth，innerHeight表示content+padding的寬高 
    4.    
  
  
  
  4. //outerWidth，outerHeight表示content+padding+border的寬高 
    5.    
  
  
  
  5. $('div').offset();//獲取div相對(duì)視口的偏移量，返回值是一個(gè)包含top和left屬性，且值為數(shù)字的對(duì)象 
    6.    
  
  
  
  6. $('div').position();//獲取div相對(duì)父元素的偏移量，返回值是一個(gè)包含top和left屬性，且值為數(shù)字的對(duì)象 
    7.    
  
  
  
  7. //offset和position都以像素計(jì)，并且只對(duì)可見(jiàn)的元素起作用 
    8.

3，節(jié)點(diǎn)

jQuery也提供了節(jié)點(diǎn)的增、刪、改、查相關(guān)方法。

  
 
 
 
    
   
  
  
  
  1. $("div").append("
    Hello
    ");//在div內(nèi)部的末尾插入元素 
    2.    
  
  
  
  2. $("div").prepend("
    Hello
    ");//在div內(nèi)部的開(kāi)頭插入元素 
    3.    
  
  
  
  3. $("div").after("
    Hello
    ");//緊挨著div的后面插入元素 
    4.    
  
  
  
  4. $("div").before("
    Hello
    ");//緊挨著div的前面插入元素 
    5.    
  
  
  
  5. $("div").remove();//刪除div元素，但是會(huì)保留文本 
    6.    
  
  
  
  6. $("div").empty();//清空div中的所有內(nèi)容 
    7.

四 jQuery 事件

1，事件綁定和移除

jQuery提供了兩種綁定事件的方式，第一種是on+事件名稱(chēng)的具體事件方法，第二種是直接使用on方法。

  
 
 
 
    
   
  
  
  
  1. $('div').onclick(function(){}); 
    2.    
  
  
  
  2. $('div').on('click',function(){}); 
    3.    
  
  
  
  3. //事件處理函數(shù)可以是匿名函數(shù)，也可以是函數(shù)引用，如果涉及到解除事件綁定，建議使用函數(shù)引用的方式 
    4.

jQuery的事件綁定類(lèi)似原生JS的addEventListener方法，可以同時(shí)綁定同一類(lèi)型的多個(gè)事件，而不會(huì)相互覆蓋。

jQuery通過(guò)off方法解除事件綁定。

  
 
 
 
    
   
  
  
  
  1. function test(){}; 
    2.    
  
  
  
  2. $('div').on('click',test); 
    3.    
  
  
  
  3. $('div').off();//移除div綁定的所有事件 
    4.    
  
  
  
  4. $('div').off('click');//移除div綁定的所有click事件 
    5.    
  
  
  
  5. $('div').off('click',test);//移除div綁定的具體事件 
    6.

2，阻止事件冒泡和默認(rèn)行為

使用jQuery阻止事件冒泡和默認(rèn)行為與原生JS一樣。不太清楚的可以查看我的《DOM之事件（一）》。

  
 
 
 
    
   
  
  
  
  1. $('div').on('click',function(){ 
    2.    
  
  
  
  2. //some code 
    3.    
  
  
  
  3. e.stopPropagation(); 
    4.    
  
  
  
  4. }); 
    5.    
  
  
  
  5. //阻止事件冒泡 
    6.    
  
  
  
  6. $('a').on('click',function(){ 
    7.    
  
  
  
  7. //some code 
    8.    
  
  
  
  8. return false；//簡(jiǎn)單方式 
    9.    
  
  
  
  9. //e.preventDefault();//W3C標(biāo)準(zhǔn)方式 
    10.    
  
  
  
  10. }); 
    11.    
  
  
  
  11. //阻止默認(rèn)行為 
    12.

3，一次性事件和自動(dòng)觸發(fā)事件

通常我們給元素綁定的事件處理程序需要特定的事件才能觸發(fā)，比如click，mouseover等等，jQuery提供了triggerHandler方法，你可以通過(guò)該方法手動(dòng)觸發(fā)元素綁定的事件處理程序，而不用等到特定事件發(fā)生。

  
 
 
 
    
   
  
  
  
  1. $('div').on('click',function(){ 
    2.    
  
  
  
  2. //some code 
    3.    
  
  
  
  3. }); 
    4.    
  
  
  
  4. //一般需要等到用戶(hù)點(diǎn)擊div，函數(shù)才會(huì)被執(zhí)行 
    5.    
  
  
  
  5. $('div').triggerHandler('click'); 
    6.    
  
  
  
  6. //自動(dòng)觸發(fā)div的click事件，不用等到用戶(hù)點(diǎn)擊 
    7.

jQuery還提供了另一個(gè)方法：trigger。它的功能和triggerHandler方法一樣。他們的不同之處在于triggerHandler不會(huì)觸發(fā)事件的默認(rèn)行為和冒泡。

  
 
 
 
    
   
  
  
  
  1. $('div').one('click',function(){ 
    2.    
  
  
  
  2. //some code 
    3.    
  
  
  
  3. }); 
    4.    
  
  
  
  4. //jQuery通過(guò)one方法綁定一個(gè)只會(huì)被觸發(fā)一次的事件處理程序 
    5.

4，事件委托

jQuery通過(guò)delegate方法實(shí)現(xiàn)事件委托。該方法使用上和原生JS有一些區(qū)別，原生JS實(shí)現(xiàn)事件委托也請(qǐng)移步《DOM之事件（一）》。

  
 
 
 
    
   
  
  
  
  1. $("ul").delegate("li", "click", function(){  
    2.    
  
  
  
  2. $(this).toggleClass("test"); 
    3.    
  
  
  
  3. }); 
    4.    
  
  
  
  4. //把li的點(diǎn)擊事件委托給ul，被委托元素一般是委托元素的父元素 
    5.

五 jQuery 動(dòng)畫(huà)

1，顯示和隱藏

jQuery通過(guò)show方法和hide方法實(shí)現(xiàn)元素的顯示和隱藏。它的原理是修改元素的display和寬高及opacity屬性。

  
 
 
 
    
   
  
  
  
  1. $('div').show(1000); 
    2.    
  
  
  
  2. //使div顯示，1000表示整個(gè)過(guò)程持續(xù)時(shí)間，單位是ms 
    3.    
  
  
  
  3. $('div').hide(1000); 
    4.    
  
  
  
  4. //使div隱藏 
    5.

這兩個(gè)方法還可以接受一個(gè)回調(diào)函數(shù)作為第二個(gè)參數(shù)，用于設(shè)置動(dòng)畫(huà)完成后需要執(zhí)行的操作。

2，展開(kāi)和收起

jQuery通過(guò)slideDown，slideUp實(shí)現(xiàn)平緩的展開(kāi)和收起元素。該方法是通過(guò)高度變化（向下增大或減?。﹣?lái)動(dòng)態(tài)地顯示元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

  
 
 
 
    
   
  
  
  
  1. $("p").slideDown(1000); 
    2.    
  
  
  
  2. //展開(kāi)，可以設(shè)置一個(gè)時(shí)間，表示整個(gè)過(guò)程持續(xù)時(shí)間，單位ms 
    3.    
  
  
  
  3. $("p").slideUp(1000); 
    4.    
  
  
  
  4. //收起 
    5.    
  
  
  
  5. $("p").slideToggle(1000); 
    6.    
  
  
  
  6. //切換 
    7.

展開(kāi)后收起動(dòng)畫(huà)常用來(lái)做下拉菜單。

3，淡入淡出

jQuery通過(guò)fadeIn和fadeOut實(shí)現(xiàn)淡入淡出效果。該方法的原理是修改元素的opacity屬性，不會(huì)改變?cè)氐膶捀?。也可接收一個(gè)回調(diào)函數(shù)。

  
 
 
 
    
   
  
  
  
  1. $("div").fadeIn(1000); 
    2.    
  
  
  
  2. //淡入，可一接收一個(gè)數(shù)字作為參數(shù)，表示過(guò)程持續(xù)時(shí)間，單位ms 
    3.    
  
  
  
  3. $("div").fadeOut(1000); 
    4.    
  
  
  
  4. //淡出 
    5.    
  
  
  
  5. $("div").fadeTo(1000,0.5); 
    6.    
  
  
  
  6. //調(diào)整到指定值 
    7.    
  
  
  
  7. $("div").fadeToggle(1000); 
    8.    
  
  
  
  8. //切換 
    9.

4，自定義動(dòng)畫(huà)

jQuery通過(guò)animate方法實(shí)現(xiàn)自定義動(dòng)畫(huà)效果。

  
 
 
 
    
   
  
  
  
  1. $('div').animate({ 
    2.    
  
  
  
  2. width:500px, 
    3.    
  
  
  
  3. opacity:0.8 
    4.    
  
  
  
  4. },1000); 
    5.    
  
  
  
  5. //該方法接收一個(gè)對(duì)象，表示動(dòng)畫(huà)結(jié)束時(shí)元素的狀態(tài)，第二參數(shù)是一個(gè)數(shù)字，表示持續(xù)時(shí)長(zhǎng)，單位ms，也可以接收一個(gè)回調(diào)函數(shù)作為第三個(gè)參數(shù) 
    6.

注意，jQuery的動(dòng)畫(huà)采用隊(duì)列形式，每編寫(xiě)一個(gè)動(dòng)畫(huà)，就向動(dòng)畫(huà)隊(duì)列中插入一個(gè)，只能等前面的執(zhí)行完后才執(zhí)行后面的。

5，停止和延遲

jQuery的stop方法可以暫停正在執(zhí)行的動(dòng)畫(huà)。

  
 
 
 
    
   
  
  
  
  1. $('div').stop(); 
    2.    
  
  
  
  2. //立即停止當(dāng)前動(dòng)畫(huà)，直接開(kāi)始執(zhí)行隊(duì)列中后續(xù)的動(dòng)畫(huà)，如果有的話(huà) 
    3.    
  
  
  
  3. $('div').stop(true,true); 
    4.    
  
  
  
  4. //stop方法可以接收兩個(gè)blloean值作為參數(shù)。第一個(gè)規(guī)定在停止當(dāng)前動(dòng)畫(huà)的同時(shí)對(duì)否清除隊(duì)列中的其他動(dòng)畫(huà)，第二個(gè)規(guī)定在停止當(dāng)前動(dòng)畫(huà)的同時(shí)是否要直接完成隊(duì)列中其他動(dòng)畫(huà)。 
    5.

介于jQuery通過(guò)隊(duì)列形式控制動(dòng)畫(huà)執(zhí)行，我們建議在調(diào)用jQuery動(dòng)畫(huà)之前都先調(diào)用一次stop方法，以免造成動(dòng)畫(huà)混亂。

  
 
 
 
    
   
  
  
  
  1. $('div').stop(); 
    2.    
  
  
  
  2. $('div').animate({ 
    3.    
  
  
  
  3. //some code 
    4.    
  
  
  
  4. },1000); 
    5.

jQuery通過(guò)delay延遲動(dòng)畫(huà)的執(zhí)行。

  
 
 
 
    
   
  
  
  
  1. $('div').animate({ 
    2.    
  
  
  
  2. width:200px; 
    3.    
  
  
  
  3. height:200px; 
    4.    
  
  
  
  4. },1000).delay(1000).animate({ 
    5.    
  
  
  
  5. background-color:red; 
    6.    
  
  
  
  6. },1000); 
    7.    
  
  
  
  7. //在改變寬高后等待1000ms再改變背景顏色
    8.

六 jQuery Ajax

jQuery封裝了功能完整的Ajax方法，我們常用的jQuery方法有3個(gè)，分別是$.ajax()、$.get()、$.post()。

1，ajax()方法

ajax方法接收一個(gè)對(duì)象作為參數(shù)，對(duì)象的屬性名為ajax的設(shè)置參數(shù)，屬性值為ajax的設(shè)置值。

 
  
 
 
 
    
   
  
  
  
  1. $.ajax({ 
    2.    
  
  
  
  2. type: "POST", 
    3.    
  
  
  
  3. url: "some.php", 
    4.    
  
  
  
  4. data: "name=ren&age=12", 
    5.    
  
  
  
  5. cache: false; 
    6.    
  
  
  
  6. dataType:"text", 
    7.    
  
  
  
  7. success: function(msg){ 
    8.    
  
  
  
  8. //some code 
    9.    
  
  
  
  9. }, 
    10.    
  
  
  
  10. error:function(msg){ 
    11.    
  
  
  
  11. //some code 
    12.    
  
  
  
  12. } 
    13.    
  
  
  
  13.  }); 
    14.

常用的參數(shù)有：

type：請(qǐng)求類(lèi)型，可選值有post和get。

url：發(fā)送請(qǐng)求的地址。

data：發(fā)送到服務(wù)器的數(shù)據(jù)。必須是“key0=value0&key1=value1“或鍵值對(duì)的形式（對(duì)象）。

cache：規(guī)定是否讀取緩存數(shù)據(jù)，true表示讀取，false表示不讀取，直接從服務(wù)器獲取。

dataType：期望服務(wù)器返回的數(shù)據(jù)類(lèi)型，可選值有xml，html，script，json，text。

success：ajax請(qǐng)求成功回調(diào)函數(shù)。

error：ajax請(qǐng)求失敗回調(diào)函數(shù)。

使用ajax()方法時(shí)，所有的設(shè)置參數(shù)都是可選的，除了上訴參數(shù)外，還有很多其他的參數(shù)可選，這讓我們?cè)谕ㄟ^(guò)jQuery實(shí)現(xiàn)ajax時(shí)有了更大的靈活性。如果你想了解更多相關(guān)參數(shù)的信息，請(qǐng)到j(luò)Query官網(wǎng)查詢(xún)。

2，get()方法

如果你覺(jué)得ajax()方法發(fā)送簡(jiǎn)單get請(qǐng)求還是太麻煩，那么你可以直接使用$.get()方法。

  
 
 
 
    
   
  
  
  
  1. $.get( 
    2.    
  
  
  
  2. "url", 
    3.    
  
  
  
  3. { name: "ren", age: "12" }, 
    4.    
  
  
  
  4. function(msg){ 
    5.    
  
  
  
  5. //some code 
    6.    
  
  
  
  6. }, 
    7.    
  
  
  
  7. "text" 
    8.    
  
  
  
  8. ); 
    9.

該方法只需要4個(gè)參數(shù)，發(fā)送請(qǐng)求的url，發(fā)送的數(shù)據(jù)，請(qǐng)求成功的回調(diào)函數(shù)，期望的返回值類(lèi)型。

3，post()方法

使用$.post()方法和$.get()一樣，他們都只需要4個(gè)參數(shù)。

  
 
 
 
    
   
  
  
  
  1. $.post( 
    2.    
  
  
  
  2. "url", 
    3.    
  
  
  
  3. { name: "ren", age: "12" }, 
    4.    
  
  
  
  4. function(msg){ 
    5.    
  
  
  
  5. //some code 
    6.    
  
  
  
  6. }, 
    7.    
  
  
  
  7.  "text" 
    8.    
  
  
  
  8. ); 
    9.

4，load()方法

load()方法可以直接請(qǐng)求服務(wù)器的數(shù)據(jù)并添加到DOM元素中。默認(rèn)使用get方式，如果你向服務(wù)器發(fā)送了數(shù)據(jù)，將自動(dòng)轉(zhuǎn)換為post方式。

  
 
 
 
    
   
  
  
  
  1. $("div").load( 
    2.    
  
  
  
  2. "test.html", 
    3.    
  
  
  
  3. {name:"ren",age:"12"}, 
    4.    
  
  
  
  4. function(){//some code} 
    5.    
  
  
  
  5. ); 
    6.    
  
  
  
  6. //載入一份新的html文檔到div中，并向服務(wù)器發(fā)送了數(shù)據(jù)。 
    7.

load()方法可以有3個(gè)參數(shù)，請(qǐng)求的url，向服務(wù)器發(fā)送的數(shù)據(jù)，請(qǐng)求成功后的回調(diào)函數(shù)。

寫(xiě)在最后：jQuery作為一款工具庫(kù)，我們只需要知道它能干什么和怎么干就好，不必完全深入的學(xué)習(xí)它。當(dāng)我們需要用它的時(shí)候配合官方文檔編寫(xiě)相關(guān)代碼即可。如果你在技術(shù)上有所追求，那么你還是可以仔細(xì)研讀jQuery源碼，相信一定會(huì)有不少收獲。其實(shí)不光jQuery，在你學(xué)習(xí)其他框架或庫(kù)或工具的時(shí)候，也可以按照這種方式學(xué)習(xí)，作為一個(gè)軟件工程師，計(jì)算機(jī)原理，操作系統(tǒng)，網(wǎng)絡(luò)技術(shù)等等才是構(gòu)造你上升的基石，其次才是各種編程語(yǔ)言，熱門(mén)框架及工具等等。


標(biāo)題名稱(chēng)：一篇文章教會(huì)你jQuery應(yīng)用
當(dāng)前路徑：http://www.5511xx.com/article/djiohjp.html