從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)

來源： | 時(shí)間：2010/8/9 14:32:26 |

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件.

二.前言

大部分人僅僅使用jQuery的選擇器選擇對(duì)象, 或者實(shí)現(xiàn)頁面動(dòng)畫效果. 在處理業(yè)務(wù)邏輯時(shí)常常自己編寫很多算法. 本文提醒各位jQuery也能提高我們操作對(duì)象和數(shù)組的效率. 并且可以將一些常用算法擴(kuò)充到j(luò)Query工具函數(shù)中, 實(shí)現(xiàn)腳本函數(shù)的復(fù)用.

三.什么是工具函數(shù)

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

$.trim("  text   ");

在原始javascript中并沒有提供同時(shí)去除前后空格的trim函數(shù). 所以這一類常用的工具函數(shù)統(tǒng)稱為 "Utilities" 函數(shù).對(duì)應(yīng)jQuery官方文檔:

http://docs.jquery.com/Utilities

"$"其實(shí)是"window"對(duì)象的屬性, 所以下面幾句話是等價(jià)的:

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

四.工具函數(shù)分類

工具函數(shù)主要分為下面幾類:

瀏覽器及特性檢測
數(shù)組和對(duì)象操作
測試操作
字符串操作
Url操作

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

下面使用實(shí)例具體的每個(gè)分類下常用的工具函數(shù).

五.瀏覽器及特性檢測

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

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

在1.3版本中已經(jīng)廢除了三個(gè)屬性, 這里不再講解. 讓我們將注意力放在 jQuery.support 函數(shù)上.

jQuery.support

返回值: Object

說明:

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

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

所有這些支持的屬性值都通過特性檢測來實(shí)現(xiàn)，而不是用任何瀏覽器檢測。以下有一些非常棒的資源用于解釋這些特性檢測是如何工作的：

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: 如果這個(gè)頁面和瀏覽器是以W3C CSS盒式模型來渲染的，則等于true。通常在IE 6和IE 7的怪癖模式中這個(gè)值是false。在document準(zhǔn)備就緒前，這個(gè)值是null。

cssFloat: 如果用cssFloat來訪問CSS的float的值，則返回true。目前在IE中會(huì)返回false,他用styleFloat代替。

hrefNormalized: 如果瀏覽器從getAttribute("href")返回的是原封不動(dòng)的結(jié)果，則返回true。在IE中會(huì)返回false，因?yàn)樗腢RLs已經(jīng)常規(guī)化了。

htmlSerialize: 如果瀏覽器通過innerHTML插入鏈接元素的時(shí)候會(huì)序列化這些鏈接，則返回true，目前IE中返回false。

leadingWhitespace: 如果在使用innerHTML的時(shí)候?yàn)g覽器會(huì)保持前導(dǎo)空白字符，則返回true，目前在IE 6-8中返回false。

noCloneEvent: 如果瀏覽器在克隆元素的時(shí)候不會(huì)連同事件處理函數(shù)一起復(fù)制，則返回true，目前在IE中返回false。

objectAll: 如果在某個(gè)元素對(duì)象上執(zhí)行g(shù)etElementsByTagName("*")會(huì)返回所有子孫元素，則為true，目前在IE 7中為false。

opacity: 如果瀏覽器能適當(dāng)解釋透明度樣式屬性，則返回true，目前在IE中返回false，因?yàn)樗胊lpha濾鏡代替。

scriptEval: 使用 appendChild/createTextNode 方法插入腳本代碼時(shí)，瀏覽器是否執(zhí)行腳本，目前在IE中返回false，IE使用 .text 方法插入腳本代碼以執(zhí)行。

style: 如果getAttribute("style")返回元素的行內(nèi)樣式，則為true。目前IE中為false，因?yàn)樗胏ssText代替。

tbody: 如果瀏覽器允許table元素不包含tbody元素，則返回true。目前在IE中會(huì)返回false，他會(huì)自動(dòng)插入缺失的tbody。

講解:

針對(duì)上面眾多的瀏覽器特性屬性, 本文只講解兩個(gè)特性.

1.盒式模型 boxModel

下圖是W3C標(biāo)準(zhǔn)中的盒式模型圖:

假設(shè)如下元素:

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