一.摘要

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

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

二.前言

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

三.什么是工具函數

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

$.trim(" text  ");

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

 $.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標準中的盒式模型圖:

假設如下元素:

<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