jQuery實(shí)用函數(shù)用法總結(jié)

更新時(shí)間：2014年08月29日 11:30:37 投稿：shichen2014

這篇文章主要介紹了jQuery實(shí)用函數(shù)用法總結(jié),匯總了jQuery常用的函數(shù)及相關(guān)技巧,需要的朋友可以參考下

本文以實(shí)例的形式總結(jié)了jQuery的常見(jiàn)實(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ù)組。先來(lái)看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方法的第二個(gè)參數(shù)是回調(diào)函數(shù)，該回調(diào)函數(shù)接收2個(gè)參數(shù)，一個(gè)是數(shù)組的元素，一個(gè)是數(shù)組的索引。
② grep方法的第三個(gè)參數(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的第三個(gè)參數(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

可見(jiàn)，當(dāng)把grep方法的第三個(gè)參數(shù)設(shè)置為true后，會(huì)把不符合回調(diào)函數(shù)的數(shù)組元素過(guò)濾出來(lái)。

舉例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ù)組的每一個(gè)元素調(diào)用回調(diào)函數(shù)，并返回一個(gè)新的數(shù)組

給數(shù)組的每一個(gè)元素加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.返回?cái)?shù)組元素的索引

使用$.inArray(value, array)返回傳入的值第一次出現(xiàn)的下標(biāo)，即索引。

var index = $.inArray(2, [1, 2, 3]);

6.將對(duì)象轉(zhuǎn)換成數(shù)組

$.makeArray(object)將傳入類似數(shù)組的對(duì)象轉(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個(gè)div
var divs = $("div").get();
//再把3個(gè)class名為dup的div合并到前面的6個(gè)div
divs = divs.concat($(".dup").get());
alert(divs.length); //9個(gè)div
//過(guò)濾去掉重復(fù)
divs = jQuery.unqiue(divs);
alert(divs.length);//6個(gè)div

8.合并2個(gè)數(shù)組

$.merge(array1, array2)把第二個(gè)數(shù)組合并到第一個(gè)數(shù)組中，并返回第一個(gè)數(shù)組。

var a1 = [1, 2];
var a2 = [2, 3];
$.merge(a1, a2);
console.log(a1);//[1, 2, 2, 3]

9.把對(duì)象序列化成查詢字符串

$.param(params)把傳入的jquery對(duì)象或javascript對(duì)象轉(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對(duì)象數(shù)組，返回false
$.isEmptyObject(o) 如果o是不包含屬性的javascript對(duì)象，則返回true
$.isFunction(o) 如果o是javascript函數(shù)就返回true
$.isPlainObject(o) 如果o是通過(guò){}或new Object()創(chuàng)建的對(duì)象，則返回true
$.isXMLDoc(node) 如果node是XML文檔或者是XML文檔中的節(jié)點(diǎn)，則返回true

11.判斷一個(gè)元素是否包含在另外一個(gè)元素中

$.contains(container, containee)第二個(gè)參數(shù)是被包含

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

12.把值存儲(chǔ)到某元素上

$.data(element, key, value)第一個(gè)是javascript對(duì)象，第二、第三個(gè)是鍵值。

//得到一個(gè)div的javascript對(duì)象
var div = $("div")[0];
//把鍵值存儲(chǔ)到div上
jQuery.data(div, "test",{
  first: 16,
  last: 'pizza'
})
//根據(jù)鍵讀出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last

13.移除存儲(chǔ)到某元素上的值

<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 ];
//存儲(chǔ)值
jQuery.data( div, "test1", "VALUE-1" );
//移除值
jQuery.removeData( div, "test1" );

14.綁定函數(shù)的上下文

jQuery.proxy( function, context)返回一個(gè)新的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方法，不過(guò)test方法的上下文做了設(shè)置。

15.解析JSON

jQuery.parseJSON( json )第一個(gè)參數(shù)json的類型是字符串。

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

16.表達(dá)式求值

有時(shí)候，希望一段代碼在全局上下文中執(zhí)行，可以使用jQuery.globalEval( code )。code的類型是字符串。

function test() {
 jQuery.globalEval( "var newVar = true;" )
}
test();

17.動(dòng)態(tài)加載腳本

$(selector).getScript(url,success(response,status))用來(lái)動(dòng)態(tài)加載js文件，第一個(gè)參數(shù)是js的文件路徑，第二個(gè)參數(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." );
});

相信本文所述對(duì)大家的jQuery程序設(shè)計(jì)有一定的借鑒價(jià)值。

您可能感興趣的文章: