jQuery自備的一些常用方法總結_jquery

本身方法（$.each,$.map,$.contains,$ajax）

常用工具方法

（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, my name is jQuery.");
var obj = $.parseJSON('{"name": "John"}');
var xml = "";
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({
  async: true,
  url: '/url/to/json',
  type: 'GET',
  data : { id : 123 },
  dataType: 'json',
  timeout: 30000,
  success: successCallback,
  error: errorCallback,
  complete: completeCallback
})
function successCallback(json) {
    $('

').text(json.title).appendTo('body');
}
function errorCallback(xhr, status){
    console.log('出問題了！');
}
function completeCallback(xhr, status){
    console.log('Ajax請求已結束。');
}

上面程式碼的物件參數有多個屬性，意義如下：

async：此項預設為true，如果設為false，則表示發出的是同步請求。
cache: 該項目預設為true，如果設為false，則瀏覽器不會快取傳回伺服器傳回的資料。注意，瀏覽器本身就不會快取POST請求傳回的數據，所以即使設為false，也只對HEAD和GET請求有效。
url：伺服器端網址。這是唯一必需的一個屬性，其他屬性都可以省略。
type：傳送訊息給伺服器所使用的HTTP動詞，預設為GET，其他動詞有POST、PUT、DELETE。
dataType：向伺服器請求的資料類型，可以設為text、html、script、json、jsonp和xml。
data：傳送給伺服器的數據，如果使用GET方法，此項目將轉為查詢字串，附在網址的最後。
success：請求成功時的回呼函數，函數參數為伺服器傳回的資料、狀態資訊、發出請求的原始物件。
timeout: 等待的最長毫秒數。如果過了這個時間，請求還沒有返回，則自動將請求狀態改為失敗。
error：請求失敗時的回呼函數，函數參數為發出請求的原始物件以及傳回的狀態資訊。
complete：不管請求成功或失敗，都會執行的回呼函數，函數參數為發出請求的原始物件以及傳回的狀態資訊。
在這些參數之中，url可以獨立出來，作為ajax方法的第一個參數。也就是說，上面程式碼還可以寫成下面這樣。

複製程式碼 程式碼如下:

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

簡單寫法

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」的部分，載入完成後會執行指定的回呼函數。

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元素（<script>），可以向不同的網域發出GET請求，這種變通方法叫做JSONP（JSON with Padding）。 </script>

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);
  }
);