為了給下一章分析動畫處理做準備,先來看一下一些工具。其中隊列工具在動畫處理中被經常使用。
jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(獲取或設置當前匹配元素上待執行的函數隊列. 如果當前jQuery對象匹配多個元素:獲取隊列時,只獲取第一個匹配元素上的隊列;設置隊列(替換隊列、追加函數)時,則為每個匹配元素都分別進行設置。如果需要移除并執行隊列中的第一個函數,請使用dequeue()函數。你也可以使用clearQueue()函數清空指定的隊列)
jQuery.fn. dequeue([ dequeueName ])(移除每個匹配元素的指定隊列中的第一個函數,并執行被移除的函數。你也可以使用clearQueue()函數清空指定的隊列(不會執行其中的函數))
jQuery.fn. clearQueue([ dequeueName ])(清空每個匹配元素的指定隊列中所有尚未執行的項)
jQuery.error(msg)(拋出一個包含指定字符串信息的異常。)
jQuery.each(object, callback )(遍歷指定的對象和數組,并以對象的每個屬性(或數組的每個成員)作為上下文來遍歷執行指定的函數。所謂的上下文,意即該函數內部的this指針引用了該元素。該函數屬于全局jQuery對象。請注意,這與jQuery對象(實例)的each()函數不同,不過jQuery對象(實例)的each()實現也是調用jQuery.each)
jQuery.proxy()(改變函數的上下文。你可以將指定函數傳入該函數,該函數將返回一個新的函數,其執行代碼不變,但函數內部的上下文(this)已經被更改為指定值
用法一:
jQuery.proxy( function, context [, additionalArguments ] )
將函數function的上下文對象更改為指定的context。
用法二:
jQuery.proxy( context, name [, additionalArguments ] )
將名為name的函數的上下文更改為指定的context。函數name應是context對象的一個屬性。
jQuery.map(object, callback)(使用指定函數處理數組中的每個元素(或對象的每個屬性),并將處理結果封裝為新的數組返回。jQuery庫中還有一個同名的實例方法jQuery.fn.map(),它僅用于對當前jQuery對象所匹配的元素進行遍歷處理)
jQuery.fn.data([ key [, value ] ])(在當前jQuery對象所匹配的所有元素上存取數據)
jQuery.fn.removeData(keys)(移除在當前jQuery對象所匹配的每一個元素上存儲的指定鍵名的數據項)
jQuery.support(返回用戶當前使用的瀏覽器的特性或bug信息。該屬性是一個對象。該對象的屬性并不是一成不變的,jQuery也并不保證指定的屬性在未來的版本中一定可用,這些屬性主要供插件或內核開發人員使用)
jQuery.contains(container, contained)(判斷指定元素內是否包含另一個元素。簡而言之,該函數用于判斷另一個DOM元素是否是指定DOM元素的后代)
jQuery.extend([ deep ], target , object1 [, objectN... ])(將一個或多個對象的內容合并到目標對象。該函數可以將一個或多個對象的成員屬性和方法復制到指定的對象上,參數deep用于指示是否深度遞歸合并)
jQuery.fn.extend(object)(為jQuery擴展一個或多個實例屬性和方法(主要用于擴展方法))
jQuery.globalEval(code)(全局性地執行一段JavaScript代碼,該函數作用與常規的JavaScript eval()函數相似。不同的是,jQuery.globalEval()執行代碼的作用域為全局作用域)
jQuery.grep(array, function [, invert ])(使用指定的函數過濾數組中的元素,并返回過濾后的數組。源數組不會受到影響,過濾結果只反映在返回的結果數組中)
jQuery.inArray(value, array [, fromIndex ])(在數組中搜索指定的值,并返回其索引值。如果數組中不存在該值,則返回 -1)
jQuery.isArray(object)(判斷指定參數是否是一個數組)
jQuery.isEmptyObject(object)(判斷指定參數是否是一個空對象。所謂"空對象",即不包括任何可枚舉(自定義)的屬性。簡而言之,就是該對象沒有屬性可以通過for...in迭代)
jQuery.isPlainObject(object)(判斷指定參數是否是一個純粹的對象。所謂"純粹的對象",就是該對象是通過"{}"或"new Object"創建的)
jQuery.isFunction(object)(判斷指定參數是否是一個函數)
jQuery.isNumeric(value)(判斷指定參數是否是一個數字值)
jQuery.isWindow(object)(判斷指定參數是否是一個窗口)
jQuery.isXMLDoc(node)(判斷一個DOM節點是否位于XML文檔中,或者其本身就是XML文檔。該函數主要用于判斷指定文檔是一個XML文檔還是一個HTML(或XHTML)文檔)
jQuery.makeArray(object)(將一個類數組對象轉換為真正的數組對象。所謂"類數組對象"就是一個常規的Object對象,但它和數組對象非常相似:具備length屬性,并以0、1、2、3……等數字作為屬性名。不過它畢竟不是數組,沒有從數組的原型對象上繼承下來的內置方法(例如:push()、 sort()等))
jQuery.noop()(是一個空函數,它什么也不做。當某些時候你需要傳入函數參數,而且希望它什么也不做的時候,你可以使用該函數,也無需再新建一個空的函數)
jQuery.now()(返回當前時間距1970年1月1日午夜所經過的毫秒數。該函數的作用類似于new Date().getTime())
jQuery.parseHTML(htmlString [, context ] [, keepScripts ])(將HTML字符串解析為對應的DOM節點數組。該函數將使用原生的DOM元素創建函數把HTML字符串轉換為一個DOM元素的集合,你可以將這些DOM元素插入到文檔中)
jQuery.parseJSON(jsonString )(將格式完好的JSON字符串轉為與之對應的JavaScript對象。所謂"格式完好",就是要求指定的字符串必須符合嚴格的JSON格式,例如:屬性名稱必須加雙引號、字符串值也必須用雙引號。如果傳入一個格式不"完好"的JSON字符串將拋出一個JS異常)
jQuery.parseXML(XMLString)(將字符串解析為對應的XML文檔。該函數將使用瀏覽器內置的解析函數來創建一個有效的XML文檔,該文檔可以傳入jQuery()函數來創建一個典型的jQuery對象,從而對其進行遍歷或其他操作)
jQuery.trim(str)(去除字符串兩端的空白字符。該函數可以去除字符串開始和末尾兩端的空白字符(直到遇到第一個非空白字符串為止)。它會清除包括換行符、空格、制表符等常見的空白字符)
jQuery.type(object)(確定JavaScript內置對象的類型,并返回小寫形式的類型名稱。JavaScript也自帶有一個typeof運算符,可以確定數據的類型。不過,對于絕大多數對象而言,typeof運算符都返回"object",無法區分具體的類型。jQuery.type()可以更加精確地確定JS內置對象的類型。例如:對于new Number(5),typeof返回"object",jQuery.type()返回"number";對于new Date(),typeof返回"object",jQuery.type()返回"date"。type的返回的結果有"Boolean Number String Function Array Date RegExp Object Error"的小寫)
jQuery.unique(array)(根據元素在文檔中出現的先后順序對DOM元素數組進行排序,并移除重復的元素。
注意:該函數僅作用于DOM元素數組,而不是數字、字符串或其他類型。此外,這里的重復指的是兩個元素實際上是同一個元素(通過全等"==="來判斷),而不是指兩個屬性相同的元素。
警告:通過實際測試發現,該函數并不能按照預期返回正確的結果。在不同的瀏覽器中、在不同版本的jQuery中,其返回結果可能不一致(請參考下面的演示代碼))
jQuery.fn.promise([type,] obj)(獲取已解決的延時對象的promise,并和obj對象合并。并給指定類型的隊列清空的時候(默認的類型是FX)添加解決處理)
a.jQuery.trim源碼詳解
trim函數有兩個分支,第一個分支是:如果瀏覽器支持trim函數,則使用瀏覽器本地的trim函數;否則走第二個分支使用正則去除前后兩邊的空白。
//如果可以則使用瀏覽器支持的trim函數 // core_version.trim jQuery.trim: core_trim && !core_trim.call("uFEFFxA0") ? function( text ) { return text == null ? "" : core_trim.call( text ); } : //否則使用正則去除前后兩端的空白符 //rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g, function( text ) { return text == null ? "" : ( text + "" ).replace( rtrim, "" ); },
b. 隊列(queue)詳解
jQuery.fn.queue( type, data ) 處理步驟如下: 默認隊列是fx類型的標準動畫效果隊列。如果隊列類型不是字符串,則需要按默認類型調整數據。 if ( typeof type !== "string" ) { data = type; type = "fx"; setter--; }
根據參數判斷是獲取還是設置指定類型的隊列。
如果是獲取直接獲取當前jQuery匹配的元素的第一個元素對應類型的隊列;
//獲取指定類型的隊列 if ( arguments.length < setter ) { return jQuery.queue( this[0], type ); }
如果是設置,則遍歷當前jQuery匹配的元素,給每個元素都設置指定類型的隊列,并給每一個元素設置相應的hooks(用來做拓展處理,比如最后清除隊列使用)
return data === undefined ? this : //每一個jQuery的元素都添加隊列 this.each(function() { var queue = jQuery.queue( this, type, data ); //確保隊列有一個hooks。執行完這段代碼以后保存了一個清空隊列的函數empty jQuery._queueHooks( this, type ); //如果為"fx"(表示jQuery中的標準動畫效果隊列),并且隊列中第一個函數沒有正在執行 //則執行隊列中第一個函數。可見動畫隊列添加后會立馬執行動畫 if ( type === "fx" && queue[0] !== "inprogress" ) { jQuery.dequeue( this, type ); } })
函數中使用了低級api jQuery.queue函數,是獲取/設置隊列的基礎接口,源碼如下
queue: function( elem, type, data ) { var queue; if ( elem ) { //先獲取相應類型的隊列 type = ( type || "fx" ) + "queue"; queue = jQuery._data( elem, type ); //在隊列末尾添加函數 if ( data ) { if ( !queue || jQuery.isArray(data) ) { queue = jQuery._data( elem, type, jQuery.makeArray(data) ); } else { queue.push( data ); } } return queue || []; } }
c.jQuery.fn.dequeue
移除每個匹配元素的指定隊列中的第一個函數,并執行被移除的函數。內部調用jQuery.dequeue來實現。jQuery.dequeue的源碼如下
jQuery.dequeue中需要特別注意的是對FX動畫隊列的處理
dequeue: function( elem, type ) { type = type || "fx"; var queue = jQuery.queue( elem, type ), startLength = queue.length, fn = queue.shift(),//取出隊列中第一個函數 hooks = jQuery._queueHooks( elem, type ), next = function() { jQuery.dequeue( elem, type ); }; //如果FX隊列中出列,總是取出進度點 if ( fn === "inprogress" ) { fn = queue.shift(); startLength--; } hooks.cur = fn; if ( fn ) { // 添加進度定點,以防止FX隊列自動dequeue if ( type === "fx" ) { queue.unshift( "inprogress" ); } // 清理最后一個隊列停止函數 delete hooks.stop; //next和hooks會傳遞給回調 fn.call( elem, next, hooks ); } //隊列長度為0且hooks存在,則刪除隊列 if ( !startLength && hooks ) { hooks.empty.fire(); } }
注意執行隊列中函數傳遞的參數( elem, next, hooks )。
以上所述就是小編給大家分享的jQuery 1.9.1源碼分析系列(十四)之常用jQuery工具,希望大家喜歡。