jQuery自帶的一些常用方法總結(jié)
本身方法（$.each,$.map,$.contains,$ajax）
常用工具方法
（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方法也是用來遍歷數(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開始）。如果該值不在數(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ì)象，用來繼承原有對(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ì)象是“淺拷貝”，也就是說，如果某個(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) // 無輸出
.on("click", $.proxy(o.test, o)) // object
上面的代碼中，第一個(gè)回調(diào)函數(shù)沒有綁定上下文，所以結(jié)果為空，沒有任何輸出；第二個(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)
// or
jQuery.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方法可以用來在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沒有提供類似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提供一系列工具方法，用來判斷數(shù)據(jù)類型，以彌補(bǔ)JavaScript原生的typeof運(yùn)算符的不足。以下方法對(duì)參數(shù)進(jìn)行判斷，返回一個(gè)布爾值。
jQuery.isArray()：是否為數(shù)組。
jQuery.isEmptyObject()：是否為空對(duì)象（不含可枚舉的屬性）。
jQuery.isFunction()：是否為函數(shù)。
jQuery.isNumeric()：是否為數(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]]屬性（參見《標(biāo)準(zhǔn)庫(kù)》的Object對(duì)象一節(jié)）。
$.type(/test/) // "regexp"
Ajax操作
$.ajax
jQuery對(duì)象上面還定義了Ajax方法（$.ajax()），用來處理Ajax操作。調(diào)用該方法后，瀏覽器就會(huì)向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求。
$.ajax()的用法有多種，最常見的是提供一個(gè)對(duì)象參數(shù)。
$.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) {
$('<h1/>').text(json.title).appendTo('body');
}
function errorCallback(xhr, status){
console.log('出問題了！');
}
function completeCallback(xhr, status){
console.log('Ajax請(qǐng)求已結(jié)束。');
}
上面代碼的對(duì)象參數(shù)有多個(gè)屬性，含義如下：
async：該項(xiàng)默認(rèn)為true，如果設(shè)為false，則表示發(fā)出的是同步請(qǐng)求。
cache: 該項(xiàng)默認(rèn)為true，如果設(shè)為false，則瀏覽器不緩存返回服務(wù)器返回的數(shù)據(jù)。注意，瀏覽器本身就不會(huì)緩存POST請(qǐng)求返回的數(shù)據(jù)，所以即使設(shè)為false，也只對(duì)HEAD和GET請(qǐng)求有效。
url：服務(wù)器端網(wǎng)址。這是唯一必需的一個(gè)屬性，其他屬性都可以省略。
type：向服務(wù)器發(fā)送信息所使用的HTTP動(dòng)詞，默認(rèn)為GET，其他動(dòng)詞有POST、PUT、DELETE。
dataType：向服務(wù)器請(qǐng)求的數(shù)據(jù)類型，可以設(shè)為text、html、script、json、jsonp和xml。
data：向服務(wù)器發(fā)送的數(shù)據(jù)，如果使用GET方法，此項(xiàng)將轉(zhuǎn)為查詢字符串，附在網(wǎng)址的最后。
success：請(qǐng)求成功時(shí)的回調(diào)函數(shù)，函數(shù)參數(shù)為服務(wù)器傳回的數(shù)據(jù)、狀態(tài)信息、發(fā)出請(qǐng)求的原始對(duì)象。
timeout: 等待的最長(zhǎng)毫秒數(shù)。如果過了這個(gè)時(shí)間，請(qǐng)求還沒有返回，則自動(dòng)將請(qǐng)求狀態(tài)改為失敗。
error：請(qǐng)求失敗時(shí)的回調(diào)函數(shù)，函數(shù)參數(shù)為發(fā)出請(qǐng)求的原始對(duì)象以及返回的狀態(tài)信息。
complete：不管請(qǐng)求成功或失敗，都會(huì)執(zhí)行的回調(diào)函數(shù)，函數(shù)參數(shù)為發(fā)出請(qǐng)求的原始對(duì)象以及返回的狀態(tài)信息。
這些參數(shù)之中，url可以獨(dú)立出來，作為ajax方法的第一個(gè)參數(shù)。也就是說，上面代碼還可以寫成下面這樣。
$.ajax('/url/to/json',{
type: 'GET',
dataType: 'json',
success: successCallback,
error: errorCallback
})
簡(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)前元素之中。
一般來說，這些簡(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方法接受兩個(gè)參數(shù)，分別為服務(wù)器端網(wǎng)址和請(qǐng)求成功后的回調(diào)函數(shù)。post方法在這兩個(gè)參數(shù)中間，還有一個(gè)參數(shù)，表示發(fā)給服務(wù)器的數(shù)據(jù)。
上面的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 ); // Success
console.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ù)。
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)求開始發(fā)出，即沒有還未完成ajax請(qǐng)求。
.ajaxStop()：所有ajax請(qǐng)求完成之后。
.ajaxSuccess()：ajax請(qǐng)求成功之后。
下面是示例。
$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});
返回值
ajax方法返回的是一個(gè)deferred對(duì)象，可以用then方法為該對(duì)象指定回調(diào)函數(shù)（詳細(xì)解釋參見《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)求。但是，通過在當(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);
}
);
- jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
- jQuery中的常用事件總結(jié)
- Jquery 常用方法經(jīng)典總結(jié)
- JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
- JQuery設(shè)置和去除disabled屬性的5種方法總結(jié)
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
- jQuery實(shí)用函數(shù)用法總結(jié)
- jquery學(xué)習(xí)總結(jié)（超級(jí)詳細(xì)）
相關(guān)文章
在閱讀本文之前，相信大家對(duì) jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
我原以為我對(duì)jQuery的使用還過得去，可是經(jīng)過昨天的工作，我才發(fā)現(xiàn)，原來，我才算是剛剛?cè)腴T。好吧。下面，我簡(jiǎn)單講一下，我昨天遇到的問題以及解決方案2012-08-08
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因?yàn)轫?xiàng)目中樹形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達(dá)到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺(tái)供大家參考2017-08-08
漢化英文版的Dreamweaver CS5并自動(dòng)提示jquery
如果從Adobe Dreamweaver CS5的官網(wǎng)上下載了一個(gè)Adobe Dreamweaver CS5，那么Adobe Dreamweaver CS5默認(rèn)你是英文版的，我們中國(guó)人還是比較習(xí)慣看漢字的。2010-11-11
JQUERY插件THICKBOX的功能很強(qiáng)大,但是它的基本使用卻很簡(jiǎn)單容易.但是要研究的更深,運(yùn)用得更加靈活的話,還是有點(diǎn)難度，根據(jù)其官方站點(diǎn)介紹2008-08-08
這篇文章主要介紹了Jquery如何在指定DIV加載HTML,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
javascript jQuery $.post $.ajax用法
這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。2008-07-07
這里給大家推薦幾款比較好用實(shí)用易用的jQuery帶箭頭提示框tooltips插件，兼容性都很不錯(cuò)，大家根據(jù)需要自由選擇吧2014-11-11
jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評(píng)測(cè)網(wǎng)站會(huì)為用戶提供產(chǎn)品對(duì)比的功能，用戶只需勾選多個(gè)需要對(duì)比的產(chǎn)品，就可以進(jìn)行比對(duì),下文給大家?guī)砹薺Query實(shí)現(xiàn)產(chǎn)品對(duì)比功能，一起看下吧2016-08-08