目錄

• 常用工具方法
• 判斷數(shù)據(jù)類型的方法
• Ajax操作
• $.ajax
• 簡(jiǎn)便寫法
• Ajax事件
• 返回值
• JSONP
• 文件上傳
• 參考鏈接

jQuery函數(shù)庫(kù)提供了一個(gè)jQuery對(duì)象（簡(jiǎn)寫為$），這個(gè)對(duì)象本身是一個(gè)構(gòu)造函數(shù)，可以用來(lái)生成jQuery對(duì)象的實(shí)例。有了實(shí)例以后，就可以調(diào)用許多針對(duì)實(shí)例的方法，它們定義jQuery.prototype對(duì)象上面（簡(jiǎn)寫為$.fn）。

除了實(shí)例對(duì)象的方法以外，jQuery對(duì)象本身還提供一些方法（即直接定義jQuery對(duì)象上面），不需要生成實(shí)例就能使用。由于這些方法類似“通用工具”的性質(zhì)，所以我們把它們稱為“工具方法”（utilities）。

常用工具方法

（1）$.trim

$.trim方法用于移除字符串頭部和尾部多余的空格。

$.trim(' Hello ') // Hello

（2）$.contains

$.contains方法返回一個(gè)布爾值，表示某個(gè)DOM元素（第二個(gè)參數(shù)）是否為另一個(gè)DOM元素（第一個(gè)參數(shù)）的下級(jí)元素。

$.contains(document.documentElement, document.body); // true$.contains(document.body, document.documentElement); // false

（3）$.each，$.map

$.each方法用于遍歷數(shù)組和對(duì)象，然后返回原始對(duì)象。它接受兩個(gè)參數(shù)，分別是數(shù)據(jù)集合和回調(diào)函數(shù)。

$.each([ 52, 97 ], function( index, value ) {console.log( index + ": " + value ); }); // 0: 52 // 1: 97 var obj = {p1: "hello",p2: "world" }; $.each( obj, function( key, value ) {console.log( key + ": " + value ); }); // p1: hello // p2: world

需要注意的，jQuery對(duì)象實(shí)例也有一個(gè)each方法（$.fn.each），兩者的作用差不多。

$.map方法也是用來(lái)遍歷數(shù)組和對(duì)象，但是會(huì)返回一個(gè)新對(duì)象。

var a = ["a", "b", "c", "d", "e"]; a = $.map(a, function (n, i){return (n.toUpperCase() + i); }); // ["A0", "B1", "C2", "D3", "E4"]

（4）$.inArray

$.inArray方法返回一個(gè)值在數(shù)組中的位置（從0開(kāi)始）。如果該值不在數(shù)組中，則返回-1。

var a = [1,2,3,4]; $.inArray(4,a) // 3

（5）$.extend

$.extend方法用于將多個(gè)對(duì)象合并進(jìn)第一個(gè)對(duì)象。

var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'};$.extend(o1,o2); o1.p1 // "c"

$.extend的另一種用法是生成一個(gè)新對(duì)象，用來(lái)繼承原有對(duì)象。這時(shí)，它的第一個(gè)參數(shù)應(yīng)該是一個(gè)空對(duì)象。

var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'};var o = $.extend({},o1,o2); o // Object {p1: "c", p2: "b"}

默認(rèn)情況下，extend方法生成的對(duì)象是“淺拷貝”，也就是說(shuō)，如果某個(gè)屬性是對(duì)象或數(shù)組，那么只會(huì)生成指向這個(gè)對(duì)象或數(shù)組的指針，而不會(huì)復(fù)制值。如果想要“深拷貝”，可以在extend方法的第一個(gè)參數(shù)傳入布爾值true。

var o1 = {p1:['a','b']};var o2 = $.extend({},o1); var o3 = $.extend(true,{},o1);o1.p1[0]='c';o2.p1 // ["c", "b"] o3.p1 // ["a", "b"]

上面代碼中，o2是淺拷貝，o3是深拷貝。結(jié)果，改變?cè)紨?shù)組的屬性，o2會(huì)跟著一起變，而o3不會(huì)。

（6）$.proxy

$.proxy方法類似于ECMAScript 5的bind方法，可以綁定函數(shù)的上下文（也就是this對(duì)象）和參數(shù)，返回一個(gè)新函數(shù)。

jQuery.proxy()的主要用處是為回調(diào)函數(shù)綁定上下文對(duì)象。

var o = {type: "object",test: function(event) {console.log(this.type);} };$("#button").on("click", o.test) // 無(wú)輸出.on("click", $.proxy(o.test, o)) // object

上面的代碼中，第一個(gè)回調(diào)函數(shù)沒(méi)有綁定上下文，所以結(jié)果為空，沒(méi)有任何輸出；第二個(gè)回調(diào)函數(shù)將上下文綁定為對(duì)象o，結(jié)果就為object。

這個(gè)例子的另一種等價(jià)的寫法是：

$("#button").on( "click", $.proxy(o, test))

上面代碼的$.proxy(o, test)的意思是，將o的方法test與o綁定。

這個(gè)例子表明，proxy方法的寫法主要有兩種。

jQuery.proxy(function, context)// orjQuery.proxy(context, name)

第一種寫法是為函數(shù)（function）指定上下文對(duì)象（context），第二種寫法是指定上下文對(duì)象（context）和它的某個(gè)方法名（name）。

再看一個(gè)例子。正常情況下，下面代碼中的this對(duì)象指向發(fā)生click事件的DOM對(duì)象。

$('#myElement').click(function() {$(this).addClass('aNewClass'); });

如果我們想讓回調(diào)函數(shù)延遲運(yùn)行，使用setTimeout方法，代碼就會(huì)出錯(cuò)，因?yàn)閟etTimeout使得回調(diào)函數(shù)在全局環(huán)境運(yùn)行，this將指向全局對(duì)象。

$('#myElement').click(function() {setTimeout(function() {$(this).addClass('aNewClass');}, 1000); });

上面代碼中的this，將指向全局對(duì)象window，導(dǎo)致出錯(cuò)。

這時(shí)，就可以用proxy方法，將this對(duì)象綁定到myElement對(duì)象。

$('#myElement').click(function() {setTimeout($.proxy(function() {$(this).addClass('aNewClass'); }, this), 1000); });

（7）$.data，$.removeData

$.data方法可以用來(lái)在DOM節(jié)點(diǎn)上儲(chǔ)存數(shù)據(jù)。

// 存入數(shù)據(jù) $.data(document.body, "foo", 52 );// 讀取數(shù)據(jù) $.data(document.body, "foo");// 讀取所有數(shù)據(jù) $.data(document.body);

上面代碼在網(wǎng)頁(yè)元素body上儲(chǔ)存了一個(gè)鍵值對(duì)，鍵名為“foo”，鍵值為52。

$.removeData方法用于移除$.data方法所儲(chǔ)存的數(shù)據(jù)。

$.data(div, "test1", "VALUE-1"); $.removeData(div, "test1");

（8）$.parseHTML，$.parseJSON，$.parseXML

$.parseHTML方法用于將字符串解析為DOM對(duì)象。

$.parseJSON方法用于將JSON字符串解析為JavaScript對(duì)象，作用與原生的JSON.parse()類似。但是，jQuery沒(méi)有提供類似JSON.stringify()的方法，即不提供將JavaScript對(duì)象轉(zhuǎn)為JSON對(duì)象的方法。

$.parseXML方法用于將字符串解析為XML對(duì)象。

var html = $.parseHTML("hello, <b>my name is</b> jQuery."); var obj = $.parseJSON('{"name": "John"}');var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>"; var xmlDoc = $.parseXML(xml);

（9）$.makeArray

$.makeArray方法將一個(gè)類似數(shù)組的對(duì)象，轉(zhuǎn)化為真正的數(shù)組。

var a = $.makeArray(document.getElementsByTagName("div"));

（10）$.merge

$.merge方法用于將一個(gè)數(shù)組（第二個(gè)參數(shù)）合并到另一個(gè)數(shù)組（第一個(gè)參數(shù)）之中。

var a1 = [0,1,2]; var a2 = [2,3,4]; $.merge(a1, a2);a1 // [0, 1, 2, 2, 3, 4]

（11）$.now

$.now方法返回當(dāng)前時(shí)間距離1970年1月1日00:00:00 UTC對(duì)應(yīng)的毫秒數(shù)，等同于(new Date).getTime()。

$.now() // 1388212221489

判斷數(shù)據(jù)類型的方法

jQuery提供一系列工具方法，用來(lái)判斷數(shù)據(jù)類型，以彌補(bǔ)JavaScript原生的typeof運(yùn)算符的不足。以下方法對(duì)參數(shù)進(jìn)行判斷，返回一個(gè)布爾值。

• jQuery.isArray()：是否為數(shù)組。
• jQuery.isEmptyObject()：是否為空對(duì)象（不含可枚舉的屬性）。
• jQuery.isFunction()：是否為函數(shù)。
• jQuery.isNumeric()：是否為數(shù)值（整數(shù)或浮點(diǎn)數(shù)）。
• jQuery.isPlainObject()：是否為使用“{}”或“new Object”生成的對(duì)象，而不是瀏覽器原生提供的對(duì)象。
• jQuery.isWindow()：是否為window對(duì)象。
• jQuery.isXMLDoc()：判斷一個(gè)DOM節(jié)點(diǎn)是否處于XML文檔之中。

下面是一些例子。

$.isEmptyObject({}) // true $.isPlainObject(document.location) // false $.isWindow(window) // true $.isXMLDoc(document.body) // false

除了上面這些方法以外，還有一個(gè)$.type方法，可以返回一個(gè)變量的數(shù)據(jù)類型。它的實(shí)質(zhì)是用Object.prototype.toString方法讀取對(duì)象內(nèi)部的[[Class]]屬性（參見(jiàn)《標(biāo)準(zhǔn)庫(kù)》的Object對(duì)象一節(jié)）。

$.type(/test/) // "regexp"

Ajax操作

$.ajax

jQuery對(duì)象上面還定義了Ajax方法（$.ajax()），用來(lái)處理Ajax操作。調(diào)用該方法后，瀏覽器就會(huì)向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求。

$.ajax()的用法主要有兩種。

$.ajax(url[, options]) $.ajax([options])

上面代碼中的url，指的是服務(wù)器網(wǎng)址，options則是一個(gè)對(duì)象參數(shù)，設(shè)置Ajax請(qǐng)求的具體參數(shù)。

$.ajax({async: true,url: '/url/to/json',type: 'GET',data : { id : 123 },dataType: 'json',timeout: 30000,success: successCallback,error: errorCallback,complete: completeCallback,statusCode: {404: handler404,500: handler500} })function successCallback(json) {$('<h1/>').text(json.title).appendTo('body'); }function errorCallback(xhr, status){console.log('出問(wèn)題了！'); }function completeCallback(xhr, status){console.log('Ajax請(qǐng)求已結(jié)束。'); }

上面代碼的對(duì)象參數(shù)有多個(gè)屬性，含義如下：

• accepts：將本機(jī)所能處理的數(shù)據(jù)類型，告訴服務(wù)器。
• async：該項(xiàng)默認(rèn)為true，如果設(shè)為false，則表示發(fā)出的是同步請(qǐng)求。
• beforeSend：指定發(fā)出請(qǐng)求前，所要調(diào)用的函數(shù)，通常用來(lái)對(duì)發(fā)出的數(shù)據(jù)進(jìn)行修改。
• cache：該項(xiàng)默認(rèn)為true，如果設(shè)為false，則瀏覽器不緩存返回服務(wù)器返回的數(shù)據(jù)。注意，瀏覽器本身就不會(huì)緩存POST請(qǐng)求返回的數(shù)據(jù)，所以即使設(shè)為false，也只對(duì)HEAD和GET請(qǐng)求有效。
• complete：指定當(dāng)HTTP請(qǐng)求結(jié)束時(shí)（請(qǐng)求成功或請(qǐng)求失敗的回調(diào)函數(shù)，此時(shí)已經(jīng)運(yùn)行完畢）的回調(diào)函數(shù)。不管請(qǐng)求成功或失敗，該回調(diào)函數(shù)都會(huì)執(zhí)行。它的參數(shù)為發(fā)出請(qǐng)求的原始對(duì)象以及返回的狀態(tài)信息。
• contentType：發(fā)送到服務(wù)器的數(shù)據(jù)類型。
• context：指定一個(gè)對(duì)象，作為所有Ajax相關(guān)的回調(diào)函數(shù)的this對(duì)象。
• crossDomain：該屬性設(shè)為true，將強(qiáng)制向相同域名發(fā)送一個(gè)跨域請(qǐng)求（比如JSONP）。
• data：向服務(wù)器發(fā)送的數(shù)據(jù)，如果使用GET方法，此項(xiàng)將轉(zhuǎn)為查詢字符串，附在網(wǎng)址的最后。
• dataType：向服務(wù)器請(qǐng)求的數(shù)據(jù)類型，可以設(shè)為text、html、script、json、jsonp和xml。
• error：請(qǐng)求失敗時(shí)的回調(diào)函數(shù)，函數(shù)參數(shù)為發(fā)出請(qǐng)求的原始對(duì)象以及返回的狀態(tài)信息。
• headers：指定HTTP請(qǐng)求的頭信息。
• ifModified：如果該屬性設(shè)為true，則只有當(dāng)服務(wù)器端的內(nèi)容與上次請(qǐng)求不一樣時(shí)，才會(huì)發(fā)出本次請(qǐng)求。
• jsonp：指定JSONP請(qǐng)求“callback=?”中的callback的名稱。
• jsonpCallback: 指定JSONP請(qǐng)求中回調(diào)函數(shù)的名稱。
• mimeType：指定HTTP請(qǐng)求的mime type。
• password：指定HTTP認(rèn)證所需要的密碼。
• statusCode：值為一個(gè)對(duì)象，為服務(wù)器返回的狀態(tài)碼，指定特別的回調(diào)函數(shù)。
• success：請(qǐng)求成功時(shí)的回調(diào)函數(shù)，函數(shù)參數(shù)為服務(wù)器傳回的數(shù)據(jù)、狀態(tài)信息、發(fā)出請(qǐng)求的原始對(duì)象。
• timeout: 等待的最長(zhǎng)毫秒數(shù)。如果過(guò)了這個(gè)時(shí)間，請(qǐng)求還沒(méi)有返回，則自動(dòng)將請(qǐng)求狀態(tài)改為失敗。
• type：向服務(wù)器發(fā)送信息所使用的HTTP動(dòng)詞，默認(rèn)為GET，其他動(dòng)詞有POST、PUT、DELETE。
• url：服務(wù)器端網(wǎng)址。這是唯一必需的一個(gè)屬性，其他屬性都可以省略。
• username：指定HTTP認(rèn)證的用戶名。
• xhr：指定生成XMLHttpRequest對(duì)象時(shí)的回調(diào)函數(shù)。

這些參數(shù)之中，url可以獨(dú)立出來(lái)，作為ajax方法的第一個(gè)參數(shù)。也就是說(shuō)，上面代碼還可以寫成下面這樣。

$.ajax('/url/to/json',{type: 'GET',dataType: 'json',success: successCallback,error: errorCallback })

作為向服務(wù)器發(fā)送的數(shù)據(jù)，data屬性也可以寫成一個(gè)對(duì)象。

$.ajax({url: '/remote/url',data: {param1: 'value1',param2: 'value2',...} });// 相當(dāng)于 $.ajax({url: '/remote/url?param1=value1&param2=value2...' }});

簡(jiǎn)便寫法

ajax方法還有一些簡(jiǎn)便寫法。

• $.get()：發(fā)出GET請(qǐng)求。
• $.getScript()：讀取一個(gè)JavaScript腳本文件并執(zhí)行。
• $.getJSON()：發(fā)出GET請(qǐng)求，讀取一個(gè)JSON文件。
• $.post()：發(fā)出POST請(qǐng)求。
• $.fn.load()：讀取一個(gè)html文件，并將其放入當(dāng)前元素之中。

一般來(lái)說(shuō)，這些簡(jiǎn)便方法依次接受三個(gè)參數(shù)：url、數(shù)據(jù)、成功時(shí)的回調(diào)函數(shù)。

（1）$.get()，$.post()

這兩個(gè)方法分別對(duì)應(yīng)HTTP的GET方法和POST方法。

$.get('/data/people.html', function(html){$('#target').html(html); });$.post('/data/save', {name: 'Rebecca'}, function (resp){console.log(JSON.parse(resp)); });

get方法和post方法的參數(shù)相同，第一個(gè)參數(shù)是服務(wù)器網(wǎng)址，該參數(shù)是必需的，其他參數(shù)都是可選的。第二個(gè)參數(shù)是發(fā)送給服務(wù)器的數(shù)據(jù)，第三個(gè)參數(shù)是操作成功后的回調(diào)函數(shù)。

上面的post方法對(duì)應(yīng)的ajax寫法如下。

$.ajax({type: 'POST',url: '/data/save',data: {name: 'Rebecca'},dataType: 'json',success: function (resp){console.log(JSON.parse(resp));} });

（2）$.getJSON()

ajax方法的另一個(gè)簡(jiǎn)便寫法是getJSON方法。當(dāng)服務(wù)器端返回JSON格式的數(shù)據(jù)，可以用這個(gè)方法代替$.ajax方法。

$.getJSON('url/to/json', {'a': 1}, function(data){console.log(data); });

上面的代碼等同于下面的寫法。

$.ajax({dataType: "json",url: '/url/to/data',data: {'a': 1},success: function(data){console.log(data);} });

（3）$.getScript()

$.getScript方法用于從服務(wù)器端加載一個(gè)腳本文件。

$.getScript('/static/js/myScript.js', function() {functionFromMyScript(); });

上面代碼先從服務(wù)器加載myScript.js腳本，然后在回調(diào)函數(shù)中執(zhí)行該腳本提供的函數(shù)。

getScript的回調(diào)函數(shù)接受三個(gè)參數(shù)，分別是腳本文件的內(nèi)容，HTTP響應(yīng)的狀態(tài)信息和ajax對(duì)象實(shí)例。

$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){console.log( data ); // test.js的內(nèi)容console.log( textStatus ); // Successconsole.log( jqxhr.status ); // 200 });

getScript是ajax方法的簡(jiǎn)便寫法，因此返回的是一個(gè)deferred對(duì)象，可以使用deferred接口。

jQuery.getScript("/path/to/myscript.js").done(function() {// ...}).fail(function() {// ... });

（4）$.fn.load()

$.fn.load不是jQuery的工具方法，而是定義在jQuery對(duì)象實(shí)例上的方法，用于獲取服務(wù)器端的HTML文件，將其放入當(dāng)前元素。由于該方法也屬于ajax操作，所以放在這里一起講。

$('#newContent').load('/foo.html');

$.fn.load方法還可以指定一個(gè)選擇器，將遠(yuǎn)程文件中匹配選擇器的部分，放入當(dāng)前元素，并指定操作完成時(shí)的回調(diào)函數(shù)。

$('#newContent').load('/foo.html #myDiv h1:first',function(html) {console.log('內(nèi)容更新！'); });

上面代碼只加載foo.html中匹配“#myDiv h1:first”的部分，加載完成后會(huì)運(yùn)行指定的回調(diào)函數(shù)。

$('#main-menu a').click(function(event) {event.preventDefault();$('#main').load(this.href + ' #main *'); });

上面的代碼將指定網(wǎng)頁(yè)中匹配“#main *”，加載入當(dāng)前的main元素。星號(hào)表示匹配main元素包含的所有子元素，如果不加這個(gè)星號(hào)，就會(huì)加載整個(gè)main元素（包括其本身），導(dǎo)致一個(gè)main元素中還有另一個(gè)main元素。

load方法可以附加一個(gè)字符串或?qū)ο笞鳛閰?shù)，一起向服務(wù)器提交。如果是字符串，則采用GET方法提交；如果是對(duì)象，則采用POST方法提交。

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {console.log( "已經(jīng)載入" ); });

上面代碼將{?limit:?25?}通過(guò)POST方法向服務(wù)器提交。

load方法的回調(diào)函數(shù)，可以用來(lái)向用戶提示操作已經(jīng)完成。

$('#main-menu a').click(function(event) {event.preventDefault();$('#main').load(this.href + ' #main *', function(responseText, status) {if (status === 'success') {$('#notification-bar').text('加載成功！');} else {$('#notification-bar').text('出錯(cuò)了！');}}); });

Ajax事件

jQuery提供以下一些方法，用于指定特定的AJAX事件的回調(diào)函數(shù)。

• .ajaxComplete()：ajax請(qǐng)求完成。
• .ajaxError()：ajax請(qǐng)求出錯(cuò)。
• .ajaxSend()：ajax請(qǐng)求發(fā)出之前。
• .ajaxStart()：第一個(gè)ajax請(qǐng)求開(kāi)始發(fā)出，即沒(méi)有還未完成ajax請(qǐng)求。
• .ajaxStop()：所有ajax請(qǐng)求完成之后。
• .ajaxSuccess()：ajax請(qǐng)求成功之后。

下面是示例。

$('#loading_indicator') .ajaxStart(function (){$(this).show();}) .ajaxStop(function (){$(this).hide();});

下面是處理Ajax請(qǐng)求出錯(cuò)（返回404或500錯(cuò)誤）的例子。

$(document).ajaxError(function (e, xhr, settings, error) {console.log(error); });

返回值

ajax方法返回的是一個(gè)deferred對(duì)象，可以用then方法為該對(duì)象指定回調(diào)函數(shù)（詳細(xì)解釋參見(jiàn)《deferred對(duì)象》一節(jié)）。

$.ajax({url: '/data/people.json',dataType: 'json' }).then(function (resp){console.log(resp.people); })

JSONP

由于瀏覽器存在“同域限制”，ajax方法只能向當(dāng)前網(wǎng)頁(yè)所在的域名發(fā)出HTTP請(qǐng)求。但是，通過(guò)在當(dāng)前網(wǎng)頁(yè)中插入script元素（<script>），可以向不同的域名發(fā)出GET請(qǐng)求，這種變通方法叫做JSONP（JSON with Padding）。

ajax方法可以發(fā)出JSONP請(qǐng)求，方法是在對(duì)象參數(shù)中指定dataType為JSONP。

$.ajax({url: '/data/search.jsonp',data: {q: 'a'},dataType: 'jsonp',success: function(resp) {$('#target').html('Results: ' + resp.results.length);} });)

JSONP的通常做法是，在所要請(qǐng)求的URL后面加在回調(diào)函數(shù)的名稱。ajax方法規(guī)定，如果所請(qǐng)求的網(wǎng)址以類似“callback=?”的形式結(jié)尾，則自動(dòng)采用JSONP形式。所以，上面的代碼還可以寫成下面這樣。

$.getJSON('/data/search.jsonp?q=a&callback=?',function(resp) {$('#target').html('Results: ' + resp.results.length);} );

文件上傳

假定網(wǎng)頁(yè)有一個(gè)文件控件。

<input type="file" id="test-input">

下面就是如何使用Ajax上傳文件。

var file = $('#test-input')[0].files[0]; var formData = new FormData();formData.append('file', file);$.ajax('myserver/uploads', {method: 'POST',contentType: false,processData: false,data: formData });

上面代碼是將文件作為表單數(shù)據(jù)發(fā)送。除此之外，也可以直接發(fā)送文件。

var file = $('#test-input')[0].files[0];$.ajax('myserver/uploads', {method: 'POST',contentType: file.type,processData: false,data: file });

參考鏈接

• David Walsh,?Loading Scripts with jQuery
• Nguyen Huu Phuoc,?Best jQuery practices

from:?http://javascript.ruanyifeng.com/jquery/utility.html

總結(jié)

以上是生活随笔為你收集整理的jQuery工具方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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