本文以實(shí)例的形式總結(jié)了jQuery的常見實(shí)用函數(shù)。分享給大家供大家參考之用。具體示例如下：
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函數(shù)后，就可以這樣寫了：
var anArray = ['one','two'];$.each(anArray, funtion(n, value){ })var anObject = {one: 1, two: 2};$.each(anObjct, function(name,value){ })3.篩選數(shù)組
使用$.grep()方法能篩選數(shù)組。先來看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方法的第二個參數(shù)是回調(diào)函數(shù)，該回調(diào)函數(shù)接收2個參數(shù)，一個是數(shù)組的元素，一個是數(shù)組的索引。
② grep方法的第三個參數(shù)inv，默認(rèn)情況下是undefined，所以!!inv為false，即inv的默認(rèn)值是false
舉例1：int類型數(shù)組
var arr = [1, 2, 3, 4, 5, 6];arr = $.grep(arr, function(val, index){ return val > 3;})console.log(arr);//結(jié)果是：4 5 6如果把grep的第三個參數(shù)顯式地設(shè)置為true，結(jié)果怎樣呢？
var arr = [1, 2, 3, 4, 5, 6];arr = $.grep(arr, function(val, index){ return val > 3;}, true)console.log(arr);//結(jié)果是：1 2 3可見，當(dāng)把grep方法的第三個參數(shù)設(shè)置為true后，會把不符合回調(diào)函數(shù)的數(shù)組元素過濾出來。
舉例2：object類型數(shù)組
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.轉(zhuǎn)換數(shù)組
使用$.map(arr, callback)為數(shù)組的每一個元素調(diào)用回調(diào)函數(shù)，并返回一個新的數(shù)組
給數(shù)組的每一個元素加1:
var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})把字符串?dāng)?shù)組轉(zhuǎn)換成整型數(shù)字?jǐn)?shù)組，判斷數(shù)組元素是否是數(shù)字：
var strings = ['1', '2', '3','4','S','6'];var values = $.map(strings, function(value){ var result = new Number(value); return isNaN(result) ? null : result;})把轉(zhuǎn)換后的數(shù)組合并到原先的數(shù)組中：
var chars = $.map(['this','that'], function(value){return value.split(' ')});5.返回數(shù)組元素的索引
使用$.inArray(value, array)返回傳入的值第一次出現(xiàn)的下標(biāo)，即索引。
var index = $.inArray(2, [1, 2, 3]);
6.將對象轉(zhuǎn)換成數(shù)組
$.makeArray(object)將傳入類似數(shù)組的對象轉(zhuǎn)換成Javascript數(shù)組。
<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.得到不含重復(fù)元素的數(shù)組
使用$.unique(array)返回由原始數(shù)組中不重復(fù)的元素組成的數(shù)組。
<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方法轉(zhuǎn)換成javascript數(shù)組，總共6個divvar divs = $("div").get();//再把3個class名為dup的div合并到前面的6個divdivs = divs.concat($(".dup").get());alert(divs.length); //9個div//過濾去掉重復(fù)divs = jQuery.unqiue(divs);alert(divs.length);//6個div8.合并2個數(shù)組
$.merge(array1, array2)把第二個數(shù)組合并到第一個數(shù)組中，并返回第一個數(shù)組。
var a1 = [1, 2];var a2 = [2, 3];$.merge(a1, a2);console.log(a1);//[1, 2, 2, 3]
9.把對象序列化成查詢字符串
$.param(params)把傳入的jquery對象或javascript對象轉(zhuǎn)換成字符串形式。
$(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)); });});結(jié)果：firstname=John&lastname=Doe&age=50&eyecolor=blue
10.一些判斷函數(shù)
$.isArray(o) 如果o是javascript數(shù)組，則返回true,如果是類似數(shù)組的jquery對象數(shù)組，返回false
$.isEmptyObject(o) 如果o是不包含屬性的javascript對象，則返回true
$.isFunction(o) 如果o是javascript函數(shù)就返回true
$.isPlainObject(o) 如果o是通過{}或new Object()創(chuàng)建的對象，則返回true
$.isXMLDoc(node) 如果node是XML文檔或者是XML文檔中的節(jié)點(diǎn)，則返回true
11.判斷一個元素是否包含在另外一個元素中
$.contains(container, containee)第二個參數(shù)是被包含
$.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'})//根據(jù)鍵讀出值jQuery.data(div, "test").firstjQuey.data(div, "test").last13.移除存儲到某元素上的值
<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.綁定函數(shù)的上下文
jQuery.proxy( function, context)返回一個新的function函數(shù)，上下文是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"));});以上，點(diǎn)擊按鈕，執(zhí)行的是test方法，不過test方法的上下文做了設(shè)置。
15.解析JSON
jQuery.parseJSON( json )第一個參數(shù)json的類型是字符串。
var obj = jQuery.parseJSON( '{ "name": "John" }' );alert( obj.name === "John" );16.表達(dá)式求值
有時候，希望一段代碼在全局上下文中執(zhí)行，可以使用jQuery.globalEval( code )。code的類型是字符串。
function test() { jQuery.globalEval( "var newVar = true;" )}test();17.動態(tài)加載腳本
$(selector).getScript(url,success(response,status))用來動態(tài)加載js文件，第一個參數(shù)是js的文件路徑，第二個參數(shù)可選，表示獲取js文件成功的回調(diào)。
$.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程序設(shè)計有一定的借鑒價值。
新聞熱點(diǎn)
疑難解答
