系列文章導航：

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件

一.摘要

本系列文章將帶您進入jQuery的精彩世界，其中有很多作者具體的使用經驗和解決方案，即使你會使用jQuery也能在閱讀中發現些許秘籍。

我們經常要使用腳本處理各種業務邏輯， 最常見的就是數組和對象的操作， jQuery工具函數為我們操作對象和數組提供了便利條件。

二.前言

大部分人僅僅使用jQuery的選擇器選擇對象，或者實現頁面動畫效果，在處理業務邏輯時常常自己編寫很多算法， 本文提醒各位jQuery也能提高我們操作對象和數組的效率， 并且可以將一些常用算法擴充到jQuery工具函數中，實現腳本函數的復用。

三.什么是工具函數

工具函數是指在jQuery對象(即變量"$")上定義的函數，這些函數都是工具類函數。比如C#中最常用的trim()函數：

Code
$.trim("  text   ");

在原始javascript中并沒有提供同時去除前后空格的trim函數。 所以這一類常用的工具函數統稱為 "Utilities" 函數.對應jQuery官方文檔：

http://docs.jquery.com/Utilities

"$"其實是"window"對象的屬性,  所以下面幾句話是等價的：

Code
$.trim("  text   ");
window.$.trim("  text   ");
window.jQuery("  text   ");
jQuery.trim("  text   ");

四.工具函數分類

工具函數主要分為下面幾類:

• 瀏覽器及特性檢測
• 數組和對象操作
• 測試操作
• 字符串操作
• Url操作

區別于前幾章的講解方式, 本文不在列舉函數列表。大家在應用中，比如遇到想操作一個字符串，可以首先從在"API文檔/Utilities/字符串操作"中查找是否已經提供了快捷的工具函數。 如果沒有再考慮自己開發。

下面使用實例具體的每個分類下常用的工具函數。

五.瀏覽器及特性檢測

jQuery的優秀就在于其跨瀏覽器的特性, 通常我們不用再針對不同瀏覽器書寫不同的代碼。 但是如果是jQuery開發人員或者插件開發人員就要自行處理瀏覽器差異， 以便為用戶提供跨瀏覽器的特性。

jQuery提供了下列屬性用于獲取瀏覽器特性：

在1.3版本中已經廢除了三個屬性，這里不再講解。 讓我們將注意力放在 jQuery.support  函數上。

jQuery.support

返回值： Object

說明：

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。

講解:

針對上面眾多的瀏覽器特性屬性,  本文只講解兩個特性.

1.盒式模型 boxModel

下圖是W3C標準中的盒式模型圖:

假設如下元素:

Code
<style type="text/css">
.boxModel
{
    width:200px;
    height:50px;
    padding:10px;
    border:solid 5px #FF0000;
    background-color:#acacac;
}
</style>
<div id="divBox" class="boxModel">

顯示效果如圖:

在CSS中設定元素寬度為200px, 下面以此元素為例講解盒式模式.

W3C 盒式模型:

元素的寬度和高度為盒式模型圖中的Context部分, 不包括padding, border和margin部分.

目前除了IE所有的瀏覽器都僅支持W3C盒式模型. 在W3C盒式模型中,  示例中包含紅框在內的區域內容寬度為200+2*10+2*5=230px, 高度為50+2*10+2*5=80px.

IE 盒式模型:

設置的寬度包括padding,border. 實際內容寬度content Width = width  - padding – border

在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上如果由于某些原因讓瀏覽器運行在怪異模式下則也會使用此盒式模式.所以需要在頁面上聲明正確的DOCTYPE. 有關DOCTYPE請參考此文:

http://www.cnblogs.com/zhangziqiu/archive/2009/01/15/doctype.html

下面是兩種盒式模式的對比:

我們可以使用 jQuery.support.boxModel 屬性來獲取瀏覽器是否使用了W3C盒式模型。 true表示使用W3C boxModel。

2.浮動樣式

通過javascript腳本設置元素的float樣式時, IE和FireFox存在不同, IE使用style.styleFloat, FireFox使用style.cssFloat：

Code
div.style.styleFloat = "left"; //IE
div.stlye.cssFloat = "left"; //FF

注意, 我們可以通過CSS()方法設置float樣式, jQuery內部會自動幫我們判斷是使用styleFloat還是cssFloat:

Code
$("#divResult").css("float","left"); //兼容IE和FF