12.2 jQuery工具方法 · JavaScript 標準參考教程

jQuery函數庫提供了一個jQuery對象（簡寫為$），這個對象本身是一個構造函數，可以用來生成jQuery對象的實例。有了實例以后，就可以調用許多針對實例的方法，它們定義jQuery.prototype對象上面（簡寫為$.fn）。除了實例對象的方法以外，jQuery對象本身還提供一些方法（即直接定義jQuery對象上面），不需要生成實例就能使用。由于這些方法類似“通用工具”的性質，所以我們把它們稱為“工具方法”（utilities）。 [TOC] ## 常用工具方法（1）$.trim $.trim方法用于移除字符串頭部和尾部多余的空格。 ~~~ $.trim(' Hello ') // Hello ~~~ （2）$.contains $.contains方法返回一個布爾值，表示某個DOM元素（第二個參數）是否為另一個DOM元素（第一個參數）的下級元素。 ~~~ $.contains(document.documentElement, document.body); // true $.contains(document.body, document.documentElement); // false ~~~ （3）$.each，$.map $.each方法用于遍歷數組和對象，然后返回原始對象。它接受兩個參數，分別是數據集合和回調函數。 ~~~ $.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對象實例也有一個each方法（$.fn.each），兩者的作用差不多。 $.map方法也是用來遍歷數組和對象，但是會返回一個新對象。 ~~~ 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方法返回一個值在數組中的位置（從0開始）。如果該值不在數組中，則返回-1。 ~~~ var a = [1,2,3,4]; $.inArray(4,a) // 3 ~~~ （5）$.extend $.extend方法用于將多個對象合并進第一個對象。 ~~~ var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'}; $.extend(o1,o2); o1.p1 // "c" ~~~ $.extend的另一種用法是生成一個新對象，用來繼承原有對象。這時，它的第一個參數應該是一個空對象。 ~~~ var o1 = {p1:'a',p2:'b'}; var o2 = {p1:'c'}; var o = $.extend({},o1,o2); o // Object {p1: "c", p2: "b"} ~~~ 默認情況下，extend方法生成的對象是“淺拷貝”，也就是說，如果某個屬性是對象或數組，那么只會生成指向這個對象或數組的指針，而不會復制值。如果想要“深拷貝”，可以在extend方法的第一個參數傳入布爾值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是深拷貝。結果，改變原始數組的屬性，o2會跟著一起變，而o3不會。（6）$.proxy $.proxy方法類似于ECMAScript 5的bind方法，可以綁定函數的上下文（也就是this對象）和參數，返回一個新函數。 jQuery.proxy()的主要用處是為回調函數綁定上下文對象。 ~~~ var o = { type: "object", test: function(event) { console.log(this.type); } }; $("#button") .on("click", o.test) // 無輸出 .on("click", $.proxy(o.test, o)) // object ~~~ 上面的代碼中，第一個回調函數沒有綁定上下文，所以結果為空，沒有任何輸出；第二個回調函數將上下文綁定為對象o，結果就為object。這個例子的另一種等價的寫法是： ~~~ $("#button").on( "click", $.proxy(o, test)) ~~~ 上面代碼的$.proxy(o, test)的意思是，將o的方法test與o綁定。這個例子表明，proxy方法的寫法主要有兩種。 ~~~ jQuery.proxy(function, context) // or jQuery.proxy(context, name) ~~~ 第一種寫法是為函數（function）指定上下文對象（context），第二種寫法是指定上下文對象（context）和它的某個方法名（name）。再看一個例子。正常情況下，下面代碼中的this對象指向發生click事件的DOM對象。 ~~~ $('#myElement').click(function() { $(this).addClass('aNewClass'); }); ~~~ 如果我們想讓回調函數延遲運行，使用setTimeout方法，代碼就會出錯，因為setTimeout使得回調函數在全局環境運行，this將指向全局對象。 ~~~ $('#myElement').click(function() { setTimeout(function() { $(this).addClass('aNewClass'); }, 1000); }); ~~~ 上面代碼中的this，將指向全局對象window，導致出錯。這時，就可以用proxy方法，將this對象綁定到myElement對象。 ~~~ $('#myElement').click(function() { setTimeout($.proxy(function() { $(this).addClass('aNewClass'); }, this), 1000); }); ~~~ （7）$.data，$.removeData $.data方法可以用來在DOM節點上儲存數據。 ~~~ // 存入數據 $.data(document.body, "foo", 52 ); // 讀取數據 $.data(document.body, "foo"); // 讀取所有數據 $.data(document.body); ~~~ 上面代碼在網頁元素body上儲存了一個鍵值對，鍵名為“foo”，鍵值為52。 $.removeData方法用于移除$.data方法所儲存的數據。 ~~~ $.data(div, "test1", "VALUE-1"); $.removeData(div, "test1"); ~~~ （8）$.parseHTML，$.parseJSON，$.parseXML $.parseHTML方法用于將字符串解析為DOM對象。 $.parseJSON方法用于將JSON字符串解析為JavaScript對象，作用與原生的JSON.parse()類似。但是，jQuery沒有提供類似JSON.stringify()的方法，即不提供將JavaScript對象轉為JSON對象的方法。 $.parseXML方法用于將字符串解析為XML對象。 ~~~ 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方法將一個類似數組的對象，轉化為真正的數組。 ~~~ var a = $.makeArray(document.getElementsByTagName("div")); ~~~ （10）$.merge $.merge方法用于將一個數組（第二個參數）合并到另一個數組（第一個參數）之中。 ~~~ var a1 = [0,1,2]; var a2 = [2,3,4]; $.merge(a1, a2); a1 // [0, 1, 2, 2, 3, 4] ~~~ （11）$.now $.now方法返回當前時間距離1970年1月1日00:00:00 UTC對應的毫秒數，等同于(new Date).getTime()。 ~~~ $.now() // 1388212221489 ~~~ ## 判斷數據類型的方法 jQuery提供一系列工具方法，用來判斷數據類型，以彌補JavaScript原生的typeof運算符的不足。以下方法對參數進行判斷，返回一個布爾值。 * jQuery.isArray()：是否為數組。 * jQuery.isEmptyObject()：是否為空對象（不含可枚舉的屬性）。 * jQuery.isFunction()：是否為函數。 * jQuery.isNumeric()：是否為數值（整數或浮點數）。 * jQuery.isPlainObject()：是否為使用“{}”或“new Object”生成的對象，而不是瀏覽器原生提供的對象。 * jQuery.isWindow()：是否為window對象。 * jQuery.isXMLDoc()：判斷一個DOM節點是否處于XML文檔之中。下面是一些例子。 ~~~ $.isEmptyObject({}) // true $.isPlainObject(document.location) // false $.isWindow(window) // true $.isXMLDoc(document.body) // false ~~~ 除了上面這些方法以外，還有一個$.type方法，可以返回一個變量的數據類型。它的實質是用Object.prototype.toString方法讀取對象內部的[[Class]]屬性（參見《標準庫》的Object對象一節）。 ~~~ $.type(/test/) // "regexp" ~~~ ## Ajax操作 ### $.ajax jQuery對象上面還定義了Ajax方法（$.ajax()），用來處理Ajax操作。調用該方法后，瀏覽器就會向服務器發出一個HTTP請求。 $.ajax()的用法主要有兩種。 ~~~ $.ajax(url[, options]) $.ajax([options]) ~~~ 上面代碼中的url，指的是服務器網址，options則是一個對象參數，設置Ajax請求的具體參數。 ~~~ $.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('出問題了！'); } function completeCallback(xhr, status){ console.log('Ajax請求已結束。'); } ~~~ 上面代碼的對象參數有多個屬性，含義如下： * accepts：將本機所能處理的數據類型，告訴服務器。 * async：該項默認為true，如果設為false，則表示發出的是同步請求。 * beforeSend：指定發出請求前，所要調用的函數，通常用來對發出的數據進行修改。 * cache：該項默認為true，如果設為false，則瀏覽器不緩存返回服務器返回的數據。注意，瀏覽器本身就不會緩存POST請求返回的數據，所以即使設為false，也只對HEAD和GET請求有效。 * complete：指定當HTTP請求結束時（請求成功或請求失敗的回調函數，此時已經運行完畢）的回調函數。不管請求成功或失敗，該回調函數都會執行。它的參數為發出請求的原始對象以及返回的狀態信息。 * contentType：發送到服務器的數據類型。 * context：指定一個對象，作為所有Ajax相關的回調函數的this對象。 * crossDomain：該屬性設為true，將強制向相同域名發送一個跨域請求（比如JSONP）。 * data：向服務器發送的數據，如果使用GET方法，此項將轉為查詢字符串，附在網址的最后。 * dataType：向服務器請求的數據類型，可以設為text、html、script、json、jsonp和xml。 * error：請求失敗時的回調函數，函數參數為發出請求的原始對象以及返回的狀態信息。 * headers：指定HTTP請求的頭信息。 * ifModified：如果該屬性設為true，則只有當服務器端的內容與上次請求不一樣時，才會發出本次請求。 * jsonp：指定JSONP請求“callback=?”中的callback的名稱。 * jsonpCallback: 指定JSONP請求中回調函數的名稱。 * mimeType：指定HTTP請求的mime type。 * password：指定HTTP認證所需要的密碼。 * statusCode：值為一個對象，為服務器返回的狀態碼，指定特別的回調函數。 * success：請求成功時的回調函數，函數參數為服務器傳回的數據、狀態信息、發出請求的原始對象。 * timeout: 等待的最長毫秒數。如果過了這個時間，請求還沒有返回，則自動將請求狀態改為失敗。 * type：向服務器發送信息所使用的HTTP動詞，默認為GET，其他動詞有POST、PUT、DELETE。 * url：服務器端網址。這是唯一必需的一個屬性，其他屬性都可以省略。 * username：指定HTTP認證的用戶名。 * xhr：指定生成XMLHttpRequest對象時的回調函數。這些參數之中，url可以獨立出來，作為ajax方法的第一個參數。也就是說，上面代碼還可以寫成下面這樣。 ~~~ $.ajax('/url/to/json',{ type: 'GET', dataType: 'json', success: successCallback, error: errorCallback }) ~~~ 作為向服務器發送的數據，data屬性也可以寫成一個對象。 ~~~ $.ajax({ url: '/remote/url', data: { param1: 'value1', param2: 'value2', ... } }); // 相當于 $.ajax({ url: '/remote/url?param1=value1&param2=value2...' }}); ~~~ ### 簡便寫法 ajax方法還有一些簡便寫法。 * $.get()：發出GET請求。 * $.getScript()：讀取一個JavaScript腳本文件并執行。 * $.getJSON()：發出GET請求，讀取一個JSON文件。 * $.post()：發出POST請求。 * $.fn.load()：讀取一個html文件，并將其放入當前元素之中。一般來說，這些簡便方法依次接受三個參數：url、數據、成功時的回調函數。（1）$.get()，$.post() 這兩個方法分別對應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方法的參數相同，第一個參數是服務器網址，該參數是必需的，其他參數都是可選的。第二個參數是發送給服務器的數據，第三個參數是操作成功后的回調函數。上面的post方法對應的ajax寫法如下。 ~~~ $.ajax({ type: 'POST', url: '/data/save', data: {name: 'Rebecca'}, dataType: 'json', success: function (resp){ console.log(JSON.parse(resp)); } }); ~~~ （2）$.getJSON() ajax方法的另一個簡便寫法是getJSON方法。當服務器端返回JSON格式的數據，可以用這個方法代替$.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方法用于從服務器端加載一個腳本文件。 ~~~ $.getScript('/static/js/myScript.js', function() { functionFromMyScript(); }); ~~~ 上面代碼先從服務器加載myScript.js腳本，然后在回調函數中執行該腳本提供的函數。 getScript的回調函數接受三個參數，分別是腳本文件的內容，HTTP響應的狀態信息和ajax對象實例。 ~~~ $.getScript( "ajax/test.js", function (data, textStatus, jqxhr){ console.log( data ); // test.js的內容 console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 }); ~~~ getScript是ajax方法的簡便寫法，因此返回的是一個deferred對象，可以使用deferred接口。 ~~~ jQuery.getScript("/path/to/myscript.js") .done(function() { // ... }) .fail(function() { // ... }); ~~~ （4）$.fn.load() $.fn.load不是jQuery的工具方法，而是定義在jQuery對象實例上的方法，用于獲取服務器端的HTML文件，將其放入當前元素。由于該方法也屬于ajax操作，所以放在這里一起講。 ~~~ $('#newContent').load('/foo.html'); ~~~ $.fn.load方法還可以指定一個選擇器，將遠程文件中匹配選擇器的部分，放入當前元素，并指定操作完成時的回調函數。 ~~~ $('#newContent').load('/foo.html #myDiv h1:first', function(html) { console.log('內容更新！'); }); ~~~ 上面代碼只加載foo.html中匹配“#myDiv h1:first”的部分，加載完成后會運行指定的回調函數。 ~~~ $('#main-menu a').click(function(event) { event.preventDefault(); $('#main').load(this.href + ' #main *'); }); ~~~ 上面的代碼將指定網頁中匹配“#main *”，加載入當前的main元素。星號表示匹配main元素包含的所有子元素，如果不加這個星號，就會加載整個main元素（包括其本身），導致一個main元素中還有另一個main元素。 load方法可以附加一個字符串或對象作為參數，一起向服務器提交。如果是字符串，則采用GET方法提交；如果是對象，則采用POST方法提交。 ~~~ $( "#feeds" ).load( "feeds.php", { limit: 25 }, function() { console.log( "已經載入" ); }); ~~~ 上面代碼將`{ limit: 25 }`通過POST方法向服務器提交。 load方法的回調函數，可以用來向用戶提示操作已經完成。 ~~~ $('#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('出錯了！'); } }); }); ~~~ ### Ajax事件 jQuery提供以下一些方法，用于指定特定的AJAX事件的回調函數。 * .ajaxComplete()：ajax請求完成。 * .ajaxError()：ajax請求出錯。 * .ajaxSend()：ajax請求發出之前。 * .ajaxStart()：第一個ajax請求開始發出，即沒有還未完成ajax請求。 * .ajaxStop()：所有ajax請求完成之后。 * .ajaxSuccess()：ajax請求成功之后。下面是示例。 ~~~ $('#loading_indicator') .ajaxStart(function (){$(this).show();}) .ajaxStop(function (){$(this).hide();}); ~~~ ### 返回值 ajax方法返回的是一個deferred對象，可以用then方法為該對象指定回調函數（詳細解釋參見《deferred對象》一節）。 ~~~ $.ajax({ url: '/data/people.json', dataType: 'json' }).then(function (resp){ console.log(resp.people); }) ~~~ ### JSONP 由于瀏覽器存在“同域限制”，ajax方法只能向當前網頁所在的域名發出HTTP請求。但是，通過在當前網頁中插入script元素（），可以向不同的域名發出GET請求，這種變通方法叫做JSONP（JSON with Padding）。 ajax方法可以發出JSONP請求，方法是在對象參數中指定dataType為JSONP。 ~~~ $.ajax({ url: '/data/search.jsonp', data: {q: 'a'}, dataType: 'jsonp', success: function(resp) { $('#target').html('Results: ' + resp.results.length); } });) ~~~ JSONP的通常做法是，在所要請求的URL后面加在回調函數的名稱。ajax方法規定，如果所請求的網址以類似“callback=?”的形式結尾，則自動采用JSONP形式。所以，上面的代碼還可以寫成下面這樣。 ~~~ $.getJSON('/data/search.jsonp?q=a&callback=?', function(resp) { $('#target').html('Results: ' + resp.results.length); } ); ~~~ ### 文件上傳假定網頁有一個文件控件。 ~~~ <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 }); ~~~ 上面代碼是將文件作為表單數據發送。除此之外，也可以直接發送文件。 ~~~ 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](http://davidwalsh.name/loading-scripts-jquery) * Nguyen Huu Phuoc,?[Best jQuery practices](http://programer.tips/2014/09/best-jquery-practices.html)