jQuery功能函數詳解_jquery

在javascript程式設計中，開發者通常需要寫很多小程式來實作一些特定的功能。例如瀏覽器偵測，字串處理、陣列的編輯等。 jQuery對這些常用的程式進行了總結，提供了許多實用的函數。

1.檢測瀏覽器。

jQuery透過$.browser物件取得瀏覽器資訊。

屬性 說明
msie 如果是ie為true,否則為false
mozilla 如果是mozilla相關的瀏覽器為true，否則為false
safari 如果是Safari瀏覽器為true,否則為false
poera 如果是opera瀏覽器為true,否則為false
version 瀏覽器的版本號碼
在使用時，開發者可以直接呼叫這些屬性來取得瀏覽器屬性。如下：

複製程式碼 程式碼如下:

       

2.盒子模型

在jQuery中提供了$.boxModel物件來偵測目前所遵循的盒​​子模型。它是一個布林值，當為true時，表示遵循w3c標準盒子模型，如果false則為ie的盒子模型

    var sBox = $.boxModel ? "標準W3C" : "IE";
                document.write("您的頁面目前支援：" sBox "盒子模型");
3.處理javascript物件。

在javascript程式設計中，可以說一切變數都是對象，例如字串，日期和數值等。

jQuery提供了一些編輯的方法來處理相關的對象，例如$.trim()函數(首尾去空格) 函數就是其中之一

i.使用$each()方法遍歷

前文介紹到each()方法，用於選擇器的中的元素遍歷，同樣對於javascript的數組和對象，可以使用$.each()方法進行遍歷。

$.each(object,fn);
其中，object為需要遍歷的對象，fn為object中每個元素都執行的函數，其中函數fn可以接受兩個參數，第一個參數為數組元素的序號或是對象的屬性。第二個參數為元素或屬性的值。

範例：用$.each()函數遍歷數組和物件

複製程式碼 程式碼如下:

從上面的例子可以看到，$.each()對遍歷數組和物件都十分方便，例如對未知的屬性$.browser,使用$.each進行遍歷

$.each($.browser, function(iNum, value) {
                //徵對陣列
                document.write("屬性" iNum "值" value "
");
            });
得值：

屬性chrome值true
屬性version值39.0.2171.99
屬性webkit值true
ii.過濾資料

對於數組中的數據，很多時候開發者需要對其進行篩選，如果使用純javascript,往往需for循環進行逐一檢查。 jQuery提供了$.grep()方法。能夠便捷的過濾數組的資料。

其文法如下：

$.grep(Array,fn,[invert])
其中，array是需要過濾的數組物件名稱，fn為過濾函數，對數組中的每個對象，如果返回true則保留，否則去除。可選的invert為布林值，如果設定為true.則函數fn取反，滿足條件的被移除。

複製程式碼 程式碼如下:

var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
            var aResult = $.grep(aArray, function(value) {
                return value >= 4;
            });        
            document.write(aResult.join());

先定義了陣列aArray,然後用$.grep()方法將值大於等於4挑選出來得到新的陣列

範例2，過濾陣列的高階方法。

複製程式碼 程式碼如下:

   

iii轉換數組

很多時候開發者希望某個數組中的元素能夠統一的轉化，例如將所有的元素都乘以2.雖然在javascript中例如for循環可以實現，但是jQuery提供了更為便利的$.map ()方法。這個方法如下

$.map(array,fn)
其中，array為要轉換的數組，fn為轉化函數，對數組中的每一項都執行，該函數同樣可以接受兩個函數，1個參數為元素的值。 2個參數為元素的序號，是可選參數。

複製程式碼 程式碼如下:

       

       

       

執行結果

a,b,c,d,e,f,g,h,i

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8
使用$.map()函數進行轉移後，陣列長度不一定與原來的陣列相同。可以透過設定null來刪除數組的元素。

複製程式碼 程式碼如下:

       

       

       

除了刪除元素外，$.map轉換數組時同樣可以增加陣列元素。

複製程式碼 程式碼如下:

   
       

       

執行結果

one,two,three,four,five

cArray長度：19值:o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e
以上程式碼在$.map轉換過程中，split("")方法將元素拆分為一個字母

iiii搜尋陣列元素

對於字串，可以透過indexOf()來搜尋特定字元所處的位置，對於陣列元素，javascript並沒有提供類似的方法。在jQ中，$.inArray()函數可以很好的陣列元素的搜尋功能。文法如下：

$.inArray(value,array)
其中，value為希望查找的對象，array為數組本身，如果找到了則返回第一個匹配元素在數組的位置。如果沒有則回傳-1.

複製程式碼 程式碼如下:

   
       

       

4.取得外部程式碼

在一些較大工程中，開發者將不同的js放在不同的js檔案中，有時會根據補貼的需求載入不同的程式碼。 jQuery提供了$.getScript()實作外邊的程式碼載入。使用方法如：

$.getScript(url,[callback])
其中，url為外部資源的位址，可以是相對的，也可以是絕對的位址。 callback為載入成功後的回呼函數，可選。

複製程式碼 程式碼如下:

       

點選1

       

點選2

其中1.js程式碼為

複製程式碼 程式碼如下:

alert("加載ok！")
function textfun(){
    alert("testfun")
};