本文以實例的形式總結了jQuery的常見實用函數。分享給大家參考之用。具體範例如下：
1.修剪字串
$('#id').val($.trim($('#someid').val()))
2.遍歷集合
可能這樣寫：
var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
}
還有可能這樣寫：
var anObject = {one: 1, two: 2};
for(var p in anObject){
}
但有了$.each函數後，就可以這樣寫了：
var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
})
3.篩選數組
使用$.grep()方法能篩選數組。先來看grep方法的定義：
grep: function(elems, callback, inv){
var ret = [], retVal;
inv = !!inv;
for(var i = 0; length = elems.length; i < length; i++){
retVal = !!callback(elems[i],i)
if(inv !== retVal){
ret.push(elems[i]);
}
}
return ret;
}
以上範例中：
① grep方法的第二個參數是回呼函數，回呼函數接收2個參數，一個是陣列的元素，一個是陣列的索引。
② grep方法的第三個參數inv，預設是undefined，所以!!inv為false，即inv的預設值是false
舉例1：int型別陣列
var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
return val > 3;
})
console.log(arr);//结果是：4 5 6
如果把grep的第三個參數明確地設為true，結果呢？
var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
return val > 3;
}, true)
console.log(arr);//结果是：1 2 3
可見，當把grep方法的第三個參數設為true後，會把不符合回呼函數的陣列元素過濾出來。
舉例2：object型別數組
var arr = [
{
first: "Jeffrey",
last: 'Way'
},{
first: 'Allison',
last: 'Way'
},{
first: 'John',
last: 'Doe'
},{
first: 'Thomas',
last: 'Way'
};
arr = $.grep(arr, function(obj, index){
return obj.last === 'Way';
});
console.log(arr);
];
4.轉換數組
使用$.map(arr, callback)為陣列的每一個元素呼叫回呼函數，並傳回一個新的陣列
給陣列的每個元素加1:
var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})
把字串陣列轉換成整數數字數組，判斷數組元素是否是數字：
var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
var result = new Number(value);
return isNaN(result) ? null : result;
})
把轉換後的數組合併到原先的陣列中：
var chars = $.map(['this','that'], function(value){return value.split(' ')});
5.傳回陣列元素的索引
使用$.inArray(value, array)傳回傳入的值第一次出現的下標，即索引。
var index = $.inArray(2, [1, 2, 3]);
6.將物件轉換成陣列
$.makeArray(object)將傳入類似陣列的物件轉換成Javascript陣列。
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
var elems = document.getElementsByTagName("div");
var arr = jQuery.makeArray(elems);
arr.reverse();
$(arr).appendTo(document.body);
</script>
7.得到不含重複元素的陣列
使用$.unique(array)傳回由原始陣列中不重複的元素組成的陣列。
<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div，get方法转换成javascript数组，总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div
8.合併2個陣列
$.merge(array1, array2)把第二個數字組合併到第一個陣列中，並傳回第一個陣列。
var a1 = [1, 2]; var a2 = [2, 3]; $.merge(a1, a2); console.log(a1);//[1, 2, 2, 3]
9.把物件序列化成查詢字串
$.param(params)把傳入的jquery物件或javascript物件轉換成字串形式。
$(document).ready(function(){
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
結果：firstname=John&lastname=Doe&age=50&eyecolor=blue
10.一些判斷函數
$.isArray(o) 如果o是javascript數組，則傳回true,如果是類似數組的jquery物件數組，則傳回false
$.isEmptyObject(o) 如果o是不包含屬性的javascript對象，則傳回true
$.isFunction(o) 如果o是javascript函數就回傳true
$.isPlainObject(o) 如果o是透過{}或new Object()建立的對象，則傳回true
$.isXMLDoc(node) 如果node是XML文件或XML文件中的節點，則傳回true
11.判斷一個元素是否包含在另一個元素中
$.contains(container, containee)第二個參數是被包含
$.contains( document.documentElement, document.body ); // true $.contains( document.body, document.documentElement ); // false
12.把數值儲存在某元素上
$.data(element, key, value)第一個是javascript對象，第二、第三個是鍵值。
//得到一个div的javascript对象
var div = $("div")[0];
//把键值存储到div上
jQuery.data(div, "test",{
first: 16,
last: 'pizza'
})
//根据键读出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last
13.移除儲存在某元素上的值
<div>value1 before creation: <span></span></div> <div>value1 after creation: <span></span></div> <div>value1 after removal: <span></span></div> <div>value2 after removal: <span></span></div> var div = $( "div" )[ 0 ]; //存储值 jQuery.data( div, "test1", "VALUE-1" ); //移除值 jQuery.removeData( div, "test1" );
14.綁定函數的上下文
jQuery.proxy( function, context)傳回一個新的function函數，上下文是context。
$(document).ready(function(){
var objPerson = {
name: "John Doe",
age: 32,
test: function(){
$("p").after("Name: " + this.name + "<br> Age: " + this.age);
}
};
$("button").click($.proxy(objPerson,"test"));
});
以上，點選按鈕，執行的是test方法，不過test方法的上下文做了設定。
15.解析JSON
jQuery.parseJSON( json )第一個參數json的型別是字串。
var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );
16.表達式求值
有時候，希望一段程式碼在全域上下文中執行，可以使用jQuery.globalEval( code )。 code的類型是字串。
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();
17.動態載入腳本
$(selector).getScript(url,success(response,status))用來動態載入js文件，第一個參數是js的文件路徑，第二個參數可選，表示取得js檔案成功的回調。
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
相信本文所述對大家的jQuery程式設計有一定的借鏡價值。
