Jquery數組和對象操作

1.迭代

jQuery.each( object, callback )

返回值:Object

說明:

通用例遍方法，可用於例遍對象和數組。

不同於例遍 jQuery 對象的 $().each() 方法，此方法可用於例遍任何對象。回調函數擁有兩個參數：第一個爲對象的成員或數組的索引，第二個爲對應變量或內容。如果需要退出 each 循環可使回調函數返回 false，其它返回值將被忽略。

對於數組我們可以使用 jQuery.each( object, callback ) 來遍歷, 這等同於使用for循環.

注意傳入的第一個參數可以是數組或者對象.如果數組,則遍歷數組中的每一個對象. 第一個參數表示索引,第二個參數表示值, this表示當前遍歷的元素, 可以通過返回false終止迭代, 比如下面的示例遍歷到第二個元素後會終止：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$.each(["a", "b", "c"], function(i, n)                 {                     alert("Item #" + i + ": " + n);//可以獲取到i值                     if (i >= 1)                     {                         return false;                     }                 });               $("#iterateArray").click(function(event)             {                 var array = $.each(["a", "b", "c"], function(i, n)                 {                     alert("Item #" + i + ": " + n ); //第一個參數i表示索引, this表示當前遍歷的對象                     if (i >= 1)                     {                         return false;                     }                 });             });

如果傳遞的是對象, 則遍歷對象的每一個屬性, 即使函數返回false也依然會遍歷完所有的屬性, 第一個參數表示屬性key(屬性名稱,是obejct類型),第二個參數表示值,,this表示當前屬性的值：

1 2 3 4 5 6 7 8 9 10 11

$("#iterateObject").click(function(event)             {                 $.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n)                 {                     alert("Item #" + i.toString() + ": " + n ); //第一個參數i表示屬性的key(object), this表示屬性值                     if (i >= 1)                     {                         return false;                     }                 });             });

each將是我們最常使用的函數, 特別注意each雖然迭代每一個元素或屬性, 但是在迭代函數中並不會改變當前元素的值, 也就是無法改變返回後的對象.如果需要改變數組中的每一個元素並且將結果返回, 因使用jQuery.map( array, callback )函數.

2.篩選

jQuery.grep( array, callback, [invert] )

返回值: Array

說明:

使用過濾函數過濾數組元素。

此函數至少傳遞兩個參數：待過濾數組和過濾函數。過濾函數必須返回 true 以保留元素或 false 以刪除元素。

講解:

默認invert爲false, 即過濾函數返回true爲保留元素. 如果設置invert爲true, 則過濾函數返回true爲刪除元素.

下面的示例演示如何過濾數組中索引小於 0 的元素:

$.grep( [0,1,2], function(n,i){

  return n > 0;

});

返回的結果是[1,2]

3.轉換

jQuery.map( array, callback )

返回值:Array

說明:

將一個數組中的元素轉換到另一個數組中。

作爲參數的轉換函數會爲每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作爲參數。轉換函數可以返回轉換後的值、null（刪除數組中的項目）或一個包含值的數組，並擴展至原始數組中。

講解:

1.3.2版本中此函數和each函數已經幾乎相同(以前稍有不同),  現在唯一的區別就是回調函數可以改變當前元素.返回null則刪除當前元素.

下面是幾個例子:

var arr = [ "a", "b", "c", "d", "e" ]

    $("div").text(arr.join(", "));

 

    arr = jQuery.map(arr, function(n, i){

      return (n.toUpperCase() + i);

    });

    $("p").text(arr.join(", "));

 

    arr = jQuery.map(arr, function (a) { return a + a; });

    $("span").text(arr.join(", "));

4.合併

合併對象是我們常常編寫的功能, 通常使用臃腫的for循環來進行.jQuery爲我們提供了很多功能的合併函數:

名稱	說明	舉例
jQuery.extend( [deep], target, object1, [objectN] )	用一個或多個其他對象來擴展一個對象，返回被擴展的對象。 如果不指定target，則給jQuery命名空間本身進行擴展。這有助於插件作者爲jQuery增加新方法。 如果第一個參數設置爲true，則jQuery返回一個深層次的副本，遞歸地複製找到的任何對象。否則的話，副本會與原對象共享結構。 爲定義的屬性將不會被複制，然而從對象的原型繼承的屬性將會被複制。	合併 settings 和 options，修改並返回 settings:  var settings = { validate: false, limit: 5, name: "foo" };  var options = { validate: true, name: "bar" };  jQuery.extend(settings, options);  結果:  settings == { validate: true, limit: 5, name: "bar" }
jQuery.makeArray( obj )	將類數組對象轉換爲數組對象。 類數組對象有 length 屬性，其成員索引爲 0 至 length - 1。實際中此函數在 jQuery 中將自動使用而無需特意轉換。	將DOM對象集合轉換爲數組:  var arr = jQuery.makeArray(document.getElementsByTagName("div"));
jQuery.inArray( value, array )	確定第一個參數在數組中的位置，從0開始計數(如果沒有找到則返回 -1 )。	查看對應元素的位置:  var arr = [ 4, "Pete", 8, "John" ]; jQuery.inArray("John", arr); //3 jQuery.inArray(4, arr); //0 jQuery.inArray("David", arr); //-1
jQuery.merge( first, second )	合併兩個數組 返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素。要去除重複項，請使用$.unique()	合併兩個數組到第一個數組上:  $.merge( [0,1,2], [2,3,4] )  結果:  [0,1,2,2,3,4]
jQuery.unique( array )	刪除數組中重複元素。只處理刪除DOM元素數組，而不能處理字符串或者數字數組。	刪除重複 div 標籤:  $.unique(document.getElementsByTagName("div"));  [ , , ...]

講解:

上面的函數看着有些混亂.  看看我們以後會常用的.

首先是jQuery.merge( first, second ), 將兩個數組合並. 下面這個示例說明如何使用此函數：

+ View Code

結果如圖:

另外不能因爲有了jQuery就忘記我們的原始javascript. 比merge更常用的其實是join和split函數.

      merge函數會改變第一個合併的數組, 如果是我設計我就不會這麼做. 因爲返回值已經是合併後的數組了.如此設計讓函數產生歧義.

      列表中的那麼多函數不再一一講解. 先用先查. 除了 jQuery.extend 這個不得不提的函數. 下面單提一個小結講解。

5. jQuery.extend

     在開發插件的時候最常用此函數函數來處理options.

     下面是fancybox插件獲取options的代碼:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

    上面的代碼target是一個空對象, 將默認設置defaults作爲第一個對象,  將用戶傳入的設置setting合併到default上,  setting上有的屬性以setting爲準. setting沒有傳入的屬性則使用default的默認值. 然後將合併的結果複製給target並作爲函數返回值返回.

    看一個完整的示例：

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

   結果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

target參數要傳遞一個空對象是因爲target的值最後將被改變.比如：

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(defaults, options);

上面的代碼將defaults作爲target參數,  雖然最後settings的結果一樣, 但是defaults的值被改變了! 而插件中的默認值應該都是固定! 所以使用時請注意target參數的用法.

下面是我的完整示例和結果：

+ View Code

結果:

七.測試工具函數

測試工具函數主要用於判斷對象是否是某一種類型, 返回的都是Boolean值:

jQuery.isArray( obj )

jQuery.isFunction( obj )

同時別忘記了javascript中自帶的isNaN和isFinite:

var test = "123";
alert(isNaN(test));
alert(isFinite(test));

isNaN函數判斷參數是否是非數字. 如果是數字則返回false.

isFinite函數檢查其參數是否是無窮大.如果參數是 NaN（非數字）,或者是正、負無窮大的數,則返回 false.否則返回true.

八.字符處操作工具函數

目前核心類庫中只有一個字符串工具函數:

jQuery.trim( str )

返回值: string

說明:去掉字符串起始和結尾的空格。

舉例:

去掉字符串起始和結尾的空格:

$.trim("  hello, how are you?  ");

結果:

"hello, how are you?"

九.Url操作工具函數

jQuery.param( obj )

返回值:string

說明:

將表單元素數組或者對象序列化。是.serialize()的核心方法。

數組或jQuery對象會按照name/value對進行序列化，普通對象按照key/value對進行序列化

舉例:

 

    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);

 

結果:

width=1680&height=1050

jQuery將其歸爲Urls分類, 因爲此方法通常用於發送GET請求時將對象作爲urls參數傳遞給服務端.

十. 擴展工具函數與jQuery包裝集函數

擴展工具函數只需要對jQuery(即"$")進行擴展. 通常開發工具函數或者插件的人希望在開發時使用"$", 但因爲"$"有可能和其他腳本庫衝突, 所以通常我們使用下面的語法開發工具函數:

        (function($)
        {
            $.myExtendMethod = function(o)
            {
                alert(0);
            };            
        })(jQuery);

在函數體內的"$"能保證是代表jQuery對象.

然後使用這種方式開發不能享受到智能感知的便利. 一般我們將擴展工具函數和擴展jQuery包裝集函數都放在一個單獨的文件中.

下面這個示例演示如何添加自定義的jQuery工具方法和jQuery包裝集方法:

/// <reference path="jquery-1.3.2-vsdoc2.js" />
jQuery.myExtendMethod = function(o)
{
    ///    <summary>
    ///        擴展方法註釋.
    ///    </summary>
    ///    <param name="o" type="String">參數提示文字</param>
    ///    <returns type="string" >返回值提示文字</returns>
    alert(0);
};

jQuery.fn.myExtendMethod = function(o)
{
    ///    <summary>
    ///        擴展方法註釋.
    ///    </summary>
    ///    <param name="o" type="String">參數提示文字</param>
    ///    <returns type="string" >返回值提示文字</returns>
    alert(0);
};

通過第一行reference, 我們可以在此js文件中繼續使用jQuery腳本智能感知.

jQuery.myExtendMethod方法擴展的工具函數.

jQuery.fn.myExtendMethod方法擴展的是jQuery包裝集函數, 即爲使用$()獲取到的對象添加了方法.

同理使用XML註釋, 比如<summary> 還可以爲自定義方法添加智能感知提示.腳本中的XML註釋和.NET中的一樣, 有關.NET中的XML註釋可以參考我的另外一篇文章:

使用.NET中的XML註釋(一) -- XML註釋標籤講解

十一.總結

jQuery提供了許多的工具函數,  在一般情況下可以滿足我們的需要. 但是對於像JSON格式化一類的操作, 需要我們自己擴展, 現有的各種擴展組件資源將提高我們的開發效率, 本系列Ajax章節就介紹的一個JSON序列化的組件jQuery.json. 更多的組件需要大家在工作中挖掘.