首頁 > web前端 > js教程 > jQuery功能函數詳解_jquery

jQuery功能函數詳解_jquery

WBOY
發布: 2016-05-16 16:16:28
原創
1155 人瀏覽過

在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")
};
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板