jQuery之工具函數

  jquery為我們提供了操作陣列和物件的工具函數，方便和簡化了我們對它們的操作。今天我們就進入jQuery的工具函數的複習。

  jQuery提供了我們主要有5類別工具函數：

• #URL

# #操作

陣列與物件操作

#測試操作

瀏覽器

1：

URL運算

：

$.param(obj)

返回：string;

說明：將jquery物件依name/value 或key/value序列化為URL參數，以&連接。

範例：

var obj ={name:zh,age:20};
alert(jQuery.param(obj));

//alert "name=zh&age =20";

 

2:字串運算：

jQuery.trim(str)

傳回：string;

說明：去掉字串首尾空格。

範例：

alert($.trim(" 123 "));

//alert "123";

3: 陣列與對象操作：

(1) :

&.each(obj,callback)

說明：

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

不同於例遍 jQuery 物件的 $().each() 方法，此方法可用於例遍任何物件。


回呼函數

有兩個參數：第一個為物件的成員或陣列的索引，第二個為對應變數或內容。

如果需要退出 each 循環可使回呼函數傳回 false，其它傳回值將被忽略。

範例：

var a =[0,1,2,3,4,5]; $.each(a,function(i,n){document.write (""+i+" and " +n +"
");});

#//result:

/*0 and 0

1 and 1

2 and 2

3 and 3

4 and 4

5 and 5I*/

 

##(2):

#$.extend(obj,default,option)

說明：

在開發外掛程式的時候最常用此函數函數來處理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);

/*result：

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參數的用法.

#(3):篩選

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;
});

//results:[1,2] 

(4) .轉換

jQuery.map( array, callback )

傳回值:

Array

##說明:

將一個陣列中的元素轉換到另一個陣列中。

作為參數的轉換函數會為每個數組元素調用，並且會給這個轉換函數一個表示被轉換的元素作為參數。

轉換函數可以傳回轉換後的值、null（刪除陣列中的項目）或一個包含值的陣列，並擴展至原始陣列中。

範例：

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

$("p" ).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; }) ;

alert(arr.join(", "));

//alert  A0A0, B1B1, C2C2, D3D3, E4E4(5)

jQuery.makeArray( obj ) , jQuery.inArray( value, array ) ,jQuery.merge( first, second ) ,

jQuery.unique( array )

就不再一一介紹了，

還有

JavaScript

的join（）和split（）方法也很重要。

###4：測試操作:######(1):######$.isFunction(fn)######傳回：Boolean;#### ##說明：測試是否為函數；######範例：######var fn =function（）{};#######alert($.isFunction(fn));## #

//alert true;

(2):

$.isArray(obj);

傳回：Boolean;

##說明：測試是否為陣列：

範例：略；

（3）：

JavaScript只帶的isNan（）和isFinite（）：非數字和無限大；

 

5：瀏覽器物件：

 

jQuery的優秀就在於其跨瀏覽器的特性, 通常我們不用再針對不同瀏覽器書寫不同的程式碼.  但是如果是jQuery開發人員或外掛程式開發人員就要自行處理瀏覽器差異, 以便為使用者提供跨瀏覽器的特性.

jQuery提供了下列屬性用於取得瀏覽器特性:

#1.3後版本新增已廢除已廢除jQuery.boxModel#已廢除

jQuery.support
jQuery.browser
jQuery.browser.version

##$ .support:

jQuery 1.3 新增。一組用來展示不同瀏覽器各自特性和bug的屬性集合。

jQuery提供了一系列屬性，你也可以自由增加你自己的屬性。其中許多屬性是很低級的，所以很難說他們能否在日新月異的發展中一直保持有效，但這這些主要用於插件和核心開發者。

所有這些支援的屬性值都透過特性檢測來實現，而不是用任何瀏覽器來偵測。以下有一些非常棒的資源用於解釋這些特性檢測是如何運作的：

• http://peter.michaux.ca/articles/feature-detection-state-of- the-art-browser-scripting

• http://yura.thinkweb2.com/cft/

• http://www.jibbering .com/faq/faq_notes/not_browser_detect.html

#jQuery.support主要包含以下測試：

boxModel

: 如果這個頁面和瀏覽器是以W3C CSS盒式模型來渲染的，則等於true。通常在IE 6和IE 7的怪癖模式中這個值是false。在document準備好前，這個值是null。

cssFloat

: 如果用cssFloat來存取CSS的float的值，則傳回true。目前在IE中會回傳false,他用styleFloat代替。

hrefNormalized

: 如果瀏覽器從getAttribute("href")傳回的是原封不動的結果，則傳回true。在IE中會回傳false，因為他的URLs已經常規化了。

htmlSerialize

: 如果瀏覽器透過innerHTML插入連結元素的時候會序列化這些鏈接，則傳回true，目前IE中傳回false。

leadingWhitespace

: 如果在使用innerHTML的時候瀏覽器會保持前導空白字符，則傳回true，目前在IE 6-8中傳回false。

noCloneEvent: 如果瀏覽器在複製元素的時候不會連同事件處理

函數一起複製，則傳回true，目前在IE中傳回false。

objectAll: 如果在某個元素物件上執行getElementsByTagName

("*")會傳回所有子孫元素，則為true，目前在IE 7中為false。

opacity

: 如果瀏覽器能適當解釋透明度樣式屬性，則傳回true，目前在IE中傳回false，因為他用alpha濾鏡取代。

scriptEval

: 使用 appendChild/createTextNode 方法插入腳本程式碼時，瀏覽器是否執行腳步，目前在IE中傳回false，IE使用 .text 方法插入腳本程式碼以執行。

style

: 如果getAttribute("style")傳回元素的行內樣式，則為true。目前IE中為false，因為他用cssText代替。

tbody

: 如果瀏覽器允許table元素不包含tbody元素，則傳回true。目前在IE中會回傳false，他會自動插入缺少的tbody。

  本部落格中同類文章還有，請見：我jQuery系列之目錄摘要

###

以上是jQuery之工具函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！