這期內容當中小編將會給大家?guī)碛嘘PjQuery中必知的工具函數(shù)有哪些，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
10年建站經(jīng)驗， 成都做網(wǎng)站、網(wǎng)站設計客戶的見證與正確選擇。創(chuàng)新互聯(lián)建站提供完善的營銷型網(wǎng)頁建站明細報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
jQuery也能提高我們操作對象和數(shù)組的效率. 并且可以將一些常用算法擴充到jQuery工具函數(shù)中, 實現(xiàn)腳本函數(shù)的復用.
51CTO推薦專題：jQuery從入門到精通
一.什么是工具函數(shù)
工具函數(shù)是指在jQuery對象(即變量"$")上定義的函數(shù). 這些函數(shù)都是工具類函數(shù).比如C#中最常用的trim()函數(shù):
$.trim(" text ");在原始javascript中并沒有提供同時去除前后空格的trim函數(shù). 所以這一類常用的工具函數(shù)統(tǒng)稱為 "Utilities" 函數(shù).對應jQuery官方文檔:
http://docs.jquery.com/Utilities
"$"其實是"window"對象的屬性, 所以下面幾句話是等價的:
二. 工具函數(shù)分類
工具函數(shù)主要分為下面幾類:
◆ 瀏覽器及特性檢測
◆ 數(shù)組和對象操作
◆ 測試操作
◆ 字符串操作
◆ Url操作
區(qū)別于前幾章的講解方式, 本文不在列舉函數(shù)列表. 大家在應用中, 比如遇到想操作一個字符串, 可以首先從在"API文檔/Utilities/字符串操作"中查找是否已經(jīng)提供了快捷的工具函數(shù). 如果沒有再考慮自己開發(fā).
下面使用實例具體的每個分類下常用的工具函數(shù).
三.瀏覽器及特性檢測
jQuery的優(yōu)秀就在于其跨瀏覽器的特性, 通常我們不用再針對不同瀏覽器書寫不同的代碼. 但是如果是jQuery開發(fā)人員或者插件開發(fā)人員就要自行處理瀏覽器差異, 以便為用戶提供跨瀏覽器的特性.
jQuery提供了下列屬性用于獲取瀏覽器特性:
| jQuery.support | 1.3版本新增 | | jQuery.browser | 已廢除 |
| jQuery.browser | 已廢除 |
| jQuery.browser | 已廢除 |
在1.3版本中已經(jīng)廢除了三個屬性, 這里不再講解. 讓我們將注意力放在 jQuery.support 函數(shù)上.
jQuery.support
返回值: Object
說明:
jQuery 1.3 新增。一組用于展示不同瀏覽器各自特性和bug的屬性集合。
jQuery提供了一系列屬性，你也可以自由增加你自己的屬性。其中許多屬性是很低級的，所以很難說他們能否在日新月異的發(fā)展中一直保持有效，但這這些主要用于插件和內核開發(fā)者。
所有這些支持的屬性值都通過特性檢測來實現(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:如果這個頁面和瀏覽器是以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已經(jīng)常規(guī)化了。
htmlSerialize:如果瀏覽器通過innerHTML插入鏈接元素的時候會序列化這些鏈接，則返回true，目前IE中返回false。
leadingWhitespace:如果在使用innerHTML的時候瀏覽器會保持前導空白字符，則返回true，目前在IE 6-8中返回false。
noCloneEvent:如果瀏覽器在克隆元素的時候不會連同事件處理函數(shù)一起復制，則返回true，目前在IE中返回false。
objectAll:如果在某個元素對象上執(zhí)行getElementsByTagName("*")會返回所有子孫元素，則為true，目前在IE 7中為false。
opacity:如果瀏覽器能適當解釋透明度樣式屬性，則返回true，目前在IE中返回false，因為他用alpha濾鏡代替。
scriptEval:使用 appendChild/createTextNode 方法插入腳本代碼時，瀏覽器是否執(zhí)行腳本，目前在IE中返回false，IE使用 .text 方法插入腳本代碼以執(zhí)行。
style:如果getAttribute("style")返回元素的行內樣式，則為true。目前IE中為false，因為他用cssText代替。
tbody:如果瀏覽器允許table元素不包含tbody元素，則返回true。目前在IE中會返回false，他會自動插入缺失的tbody。
講解:
針對上面眾多的瀏覽器特性屬性, 本文只講解兩個特性.
1.盒式模型 boxModel
下圖是W3C標準中的盒式模型圖:
假設如下元素:
.boxModel { width:200px; height:50px; padding:10px; border:solid 5px #FF0000; background-color:#acacac; }
顯示效果如圖:
在CSS中設定元素寬度為200px, 下面以此元素為例講解盒式模式.
W3C 盒式模型:
元素的寬度和高度為盒式模型圖中的Context部分, 不包括padding, border和margin部分.
目前除了IE所有的瀏覽器都僅支持W3C盒式模型. 在W3C盒式模型中, 示例中包含紅框在內的區(qū)域內容寬度為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:
div.style.styleFloat = "left"; //IE div.stlye.cssFloat = "left"; //FF
jQuery.support.cssFloat 屬性返回true則表示可以使用cssFloat來設置float樣式. IE中返回false;
注意, 我們可以通過CSS()方法設置float樣式, jQuery內部會自動幫我們判斷是使用styleFloat還是cssFloat:
$("#divResult").css("float","left"); //兼容IE和FF四. 數(shù)組和對象操作
實現(xiàn)UI我們常常操作DOM對象或者jQuery包裝集, 但是實現(xiàn)算法或者業(yè)務邏輯時往往操作的是數(shù)組和對象.
下面講解最常用的數(shù)組和對象相關的工具函數(shù).
1.迭代
jQuery.each( object, callback )
返回值:Object
說明:
通用例遍方法，可用于例遍對象和數(shù)組。
不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象?；卣{函數(shù)擁有兩個參數(shù)：***個為對象的成員或數(shù)組的索引，第二個為對應變量或內容。如果需要退出 each 循環(huán)可使回調函數(shù)返回 false，其它返回值將被忽略。
講解:
對于jQuery包裝集我們可以使用each(callback)方法迭代包裝集中的每一個元素. callback是一個會函數(shù), 接受一個參數(shù)表示當前訪問對象的索引.
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });對于數(shù)組我們可以使用 jQuery.each( object, callback )來遍歷, 這等同于使用for循環(huán).
注意傳入的***個參數(shù)可以是數(shù)組或者對象.如果數(shù)組,則遍歷數(shù)組中的每一個對象. ***個參數(shù)表示索引,第二個參數(shù)表示值, this表示當前遍歷的元素, 可以通過返回false終止迭代, 比如下面的示例遍歷到第二個元素后會終止:
$.each(["a", "b", "c"], function(i, n) { alert("Item #" + i + ": " + n);//可以獲取到i值 if (i >= 1) { return false; } }); $("#iterateArray").click(function(event) { var array = $.each(["a", "b", "c"], function(i, n) { alert("Item #" + i + ": " + n ); //***個參數(shù)i表示索引, this表示當前遍歷的對象 if (i >= 1) { return false; } }); });如果傳遞的是對象, 則遍歷對象的每一個屬性, 即使函數(shù)返回false也依然會遍歷完所有的屬性, ***個參數(shù)表示屬性key(屬性名稱,是obejct類型),第二個參數(shù)表示值,,this表示當前屬性的值:
$("#iterateObject").click(function(event) { $.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n) { alert("Item #" + i.toString() + ": " + n ); //***個參數(shù)i表示屬性的key(object), this表示屬性值 if (i >= 1) { return false; } }); });each將是我們最常使用的函數(shù), 特別注意each雖然迭代每一個元素或屬性, 但是在迭代函數(shù)中并不會改變當前元素的值, 也就是無法改變返回后的對象.如果需要改變數(shù)組中的每一個元素并且將結果返回, 因使用jQuery.map( array, callback )函數(shù).
2.篩選
jQuery.grep( array, callback, [invert] )
返回值:Array
說明:
使用過濾函數(shù)過濾數(shù)組元素。
此函數(shù)至少傳遞兩個參數(shù)：待過濾數(shù)組和過濾函數(shù)。過濾函數(shù)必須返回 true 以保留元素或 false 以刪除元素。
講解:
默認invert為false, 即過濾函數(shù)返回true為保留元素. 如果設置invert為true, 則過濾函數(shù)返回true為刪除元素.
下面的示例演示如何過濾數(shù)組中索引小于 0 的元素:
$.grep( [0,1,2], function(n,i){ return n > 0; });返回的結果是[1,2]
3.轉換
jQuery.map( array, callback )
返回值:Array
說明:
將一個數(shù)組中的元素轉換到另一個數(shù)組中。
作為參數(shù)的轉換函數(shù)會為每個數(shù)組元素調用，而且會給這個轉換函數(shù)傳遞一個表示被轉換的元素作為參數(shù)。轉換函數(shù)可以返回轉換后的值、null(刪除數(shù)組中的項目)或一個包含值的數(shù)組，并擴展至原始數(shù)組中。
講解:
1.3.2版本中此函數(shù)和each函數(shù)已經(jīng)幾乎相同(以前稍有不同), 現(xiàn)在唯一的區(qū)別就是回調函數(shù)可以改變當前元素.返回null則刪除當前元素.
下面是幾個例子:
var arr = [ "a", "b", "c", "d", "e" ] $("div").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; }); $("span").text(arr.join(", "));4.合并
合并對象是我們常常編寫的功能, 通常使用臃腫的for循環(huán)來進行.jQuery為我們提供了很多功能的合并函數(shù):
| 名稱 | 說明 | 舉例 | | jQuery.extend( [deep], target, object1, [objectN] ) | 用一個或多個其他對象來擴展一個對象，返回被擴展的對象。 如果不指定target，則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法。 如果***個參數(shù)設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結構。 為定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。 | 合并 settings 和 options，修改并返回 settings:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);結果:
settings == { validate: true, limit: 5, name: "bar" } |
| jQuery.makeArray( obj ) | 將類數(shù)組對象轉換為數(shù)組對象。 類數(shù)組對象有 length 屬性，其成員索引為 0 至 length - 1。實際中此函數(shù)在 jQuery 中將自動使用而無需特意轉換。 | 將DOM對象集合轉換為數(shù)組:
var arr = jQuery.makeArray(document.getElementsByTagName("div")); |
| jQuery.inArray( value, array ) | 確定***個參數(shù)在數(shù)組中的位置，從0開始計數(shù)(如果沒有找到則返回 -1 )。 | 查看對應元素的位置:
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //- |
| jQuery.merge( first, second ) | 合并兩個數(shù)組 返回的結果會修改***個數(shù)組的內容——***個數(shù)組的元素后面跟著第二個數(shù)組的元素。要去除重復項，請使用$.unique() | 合并兩個數(shù)組到***個數(shù)組上:
$.merge( [0,1,2], [2,3,4] )結果:
[0,1,2,2,3,4] |
| jQuery.unique( array ) | 刪除數(shù)組中重復元素。只處理刪除DOM元素數(shù)組，而不能處理字符串或者數(shù)字數(shù)組。 | 刪除重復 div 標簽:
$.unique(document.getElementsByTagName("div"));[ |
講解:
上面的函數(shù)看著有些混亂. 看看我們以后會常用的.
首先是jQuery.merge( first, second ), 將兩個數(shù)組合并. 下面這個示例說明如何使用此函數(shù):
jQuery Utilities - jQuery.merge $(function() { $("#go").click(function(event) { $("#divResult").html(""); var first = [1, 3, 5]; $("#divResult").append("first:[" + first.join(",") + "]").append("
"); var second = [2, 4, 6]; $("#divResult").append("second:[" + second.join(",") + "]").append("
"); var result = $.merge(first, second); $("#divResult").append("result:[" + result.join(",") + "]").append("
"); $("#divResult").append("first after merged:[" + first.join(",") + "]
"); $("#divResult").append("second after merged:[" + second.join(",") + "]
"); }); }); 合并數(shù)組
重慶分公司
重慶分公司