為了給下一章分析動(dòng)畫處理做準(zhǔn)備，先來看一下一些工具。其中隊(duì)列工具在動(dòng)畫處理中被經(jīng)常使用。

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(獲取或設(shè)置當(dāng)前匹配元素上待執(zhí)行的函數(shù)隊(duì)列. 如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素：獲取隊(duì)列時(shí)，只獲取第一個(gè)匹配元素上的隊(duì)列；設(shè)置隊(duì)列(替換隊(duì)列、追加函數(shù))時(shí)，則為每個(gè)匹配元素都分別進(jìn)行設(shè)置。如果需要移除并執(zhí)行隊(duì)列中的第一個(gè)函數(shù)，請(qǐng)使用dequeue()函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊(duì)列）

jQuery.fn. dequeue([ dequeueName ])（移除每個(gè)匹配元素的指定隊(duì)列中的第一個(gè)函數(shù)，并執(zhí)行被移除的函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊(duì)列(不會(huì)執(zhí)行其中的函數(shù))）

jQuery.fn. clearQueue([ dequeueName ])（清空每個(gè)匹配元素的指定隊(duì)列中所有尚未執(zhí)行的項(xiàng)）

jQuery.error(msg)（拋出一個(gè)包含指定字符串信息的異常。）

jQuery.each(object, callback )（遍歷指定的對(duì)象和數(shù)組，并以對(duì)象的每個(gè)屬性(或數(shù)組的每個(gè)成員)作為上下文來遍歷執(zhí)行指定的函數(shù)。所謂的上下文，意即該函數(shù)內(nèi)部的this指針引用了該元素。該函數(shù)屬于全局jQuery對(duì)象。請(qǐng)注意，這與jQuery對(duì)象(實(shí)例)的each()函數(shù)不同，不過jQuery對(duì)象(實(shí)例)的each()實(shí)現(xiàn)也是調(diào)用jQuery.each）

jQuery.proxy()（改變函數(shù)的上下文。你可以將指定函數(shù)傳入該函數(shù)，該函數(shù)將返回一個(gè)新的函數(shù)，其執(zhí)行代碼不變，但函數(shù)內(nèi)部的上下文(this)已經(jīng)被更改為指定值

　　用法一：

jQuery.proxy( function, context [, additionalArguments ] )

　　將函數(shù)function的上下文對(duì)象更改為指定的context。

　　用法二：

jQuery.proxy( context, name [, additionalArguments ] )

　　將名為name的函數(shù)的上下文更改為指定的context。函數(shù)name應(yīng)是context對(duì)象的一個(gè)屬性。

jQuery.map(object, callback)（使用指定函數(shù)處理數(shù)組中的每個(gè)元素(或?qū)ο蟮拿總€(gè)屬性)，并將處理結(jié)果封裝為新的數(shù)組返回。jQuery庫(kù)中還有一個(gè)同名的實(shí)例方法jQuery.fn.map()，它僅用于對(duì)當(dāng)前jQuery對(duì)象所匹配的元素進(jìn)行遍歷處理）

jQuery.fn.data([ key [, value ] ])（在當(dāng)前jQuery對(duì)象所匹配的所有元素上存取數(shù)據(jù)）

jQuery.fn.removeData(keys)（移除在當(dāng)前jQuery對(duì)象所匹配的每一個(gè)元素上存儲(chǔ)的指定鍵名的數(shù)據(jù)項(xiàng)）

jQuery.support（返回用戶當(dāng)前使用的瀏覽器的特性或bug信息。該屬性是一個(gè)對(duì)象。該對(duì)象的屬性并不是一成不變的，jQuery也并不保證指定的屬性在未來的版本中一定可用，這些屬性主要供插件或內(nèi)核開發(fā)人員使用）

jQuery.contains(container, contained)（判斷指定元素內(nèi)是否包含另一個(gè)元素。簡(jiǎn)而言之，該函數(shù)用于判斷另一個(gè)DOM元素是否是指定DOM元素的后代）

jQuery.extend([ deep ], target , object1 [, objectN... ])（將一個(gè)或多個(gè)對(duì)象的內(nèi)容合并到目標(biāo)對(duì)象。該函數(shù)可以將一個(gè)或多個(gè)對(duì)象的成員屬性和方法復(fù)制到指定的對(duì)象上，參數(shù)deep用于指示是否深度遞歸合并）

jQuery.fn.extend(object)（為jQuery擴(kuò)展一個(gè)或多個(gè)實(shí)例屬性和方法(主要用于擴(kuò)展方法)）

jQuery.globalEval(code)（全局性地執(zhí)行一段JavaScript代碼，該函數(shù)作用與常規(guī)的JavaScript eval()函數(shù)相似。不同的是，jQuery.globalEval()執(zhí)行代碼的作用域?yàn)槿肿饔糜颍?/p>

jQuery.grep(array, function [, invert ])（使用指定的函數(shù)過濾數(shù)組中的元素，并返回過濾后的數(shù)組。源數(shù)組不會(huì)受到影響，過濾結(jié)果只反映在返回的結(jié)果數(shù)組中）

jQuery.inArray(value, array [, fromIndex ])（在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1）

jQuery.isArray(object)（判斷指定參數(shù)是否是一個(gè)數(shù)組）

jQuery.isEmptyObject(object)（判斷指定參數(shù)是否是一個(gè)空對(duì)象。所謂"空對(duì)象"，即不包括任何可枚舉(自定義)的屬性。簡(jiǎn)而言之，就是該對(duì)象沒有屬性可以通過for...in迭代）

jQuery.isPlainObject(object)(判斷指定參數(shù)是否是一個(gè)純粹的對(duì)象。所謂"純粹的對(duì)象"，就是該對(duì)象是通過"{}"或"new Object"創(chuàng)建的)

jQuery.isFunction(object)（判斷指定參數(shù)是否是一個(gè)函數(shù)）

jQuery.isNumeric(value)（判斷指定參數(shù)是否是一個(gè)數(shù)字值）

jQuery.isWindow(object)（判斷指定參數(shù)是否是一個(gè)窗口）

jQuery.isXMLDoc(node)(判斷一個(gè)DOM節(jié)點(diǎn)是否位于XML文檔中，或者其本身就是XML文檔。該函數(shù)主要用于判斷指定文檔是一個(gè)XML文檔還是一個(gè)HTML(或XHTML)文檔)

jQuery.makeArray(object)（將一個(gè)類數(shù)組對(duì)象轉(zhuǎn)換為真正的數(shù)組對(duì)象。所謂"類數(shù)組對(duì)象"就是一個(gè)常規(guī)的Object對(duì)象，但它和數(shù)組對(duì)象非常相似：具備length屬性，并以0、1、2、3……等數(shù)字作為屬性名。不過它畢竟不是數(shù)組，沒有從數(shù)組的原型對(duì)象上繼承下來的內(nèi)置方法(例如：push()、 sort()等)）

jQuery.noop()（是一個(gè)空函數(shù)，它什么也不做。當(dāng)某些時(shí)候你需要傳入函數(shù)參數(shù)，而且希望它什么也不做的時(shí)候，你可以使用該函數(shù)，也無需再新建一個(gè)空的函數(shù)）

jQuery.now()（返回當(dāng)前時(shí)間距1970年1月1日午夜所經(jīng)過的毫秒數(shù)。該函數(shù)的作用類似于new Date().getTime()）

jQuery.parseHTML(htmlString [, context ] [, keepScripts ])（將HTML字符串解析為對(duì)應(yīng)的DOM節(jié)點(diǎn)數(shù)組。該函數(shù)將使用原生的DOM元素創(chuàng)建函數(shù)把HTML字符串轉(zhuǎn)換為一個(gè)DOM元素的集合，你可以將這些DOM元素插入到文檔中）

jQuery.parseJSON(jsonString )（將格式完好的JSON字符串轉(zhuǎn)為與之對(duì)應(yīng)的JavaScript對(duì)象。所謂"格式完好"，就是要求指定的字符串必須符合嚴(yán)格的JSON格式，例如：屬性名稱必須加雙引號(hào)、字符串值也必須用雙引號(hào)。如果傳入一個(gè)格式不"完好"的JSON字符串將拋出一個(gè)JS異常）

jQuery.parseXML(XMLString)（將字符串解析為對(duì)應(yīng)的XML文檔。該函數(shù)將使用瀏覽器內(nèi)置的解析函數(shù)來創(chuàng)建一個(gè)有效的XML文檔，該文檔可以傳入jQuery()函數(shù)來創(chuàng)建一個(gè)典型的jQuery對(duì)象，從而對(duì)其進(jìn)行遍歷或其他操作）

jQuery.trim(str)（去除字符串兩端的空白字符。該函數(shù)可以去除字符串開始和末尾兩端的空白字符(直到遇到第一個(gè)非空白字符串為止)。它會(huì)清除包括換行符、空格、制表符等常見的空白字符）

jQuery.type(object)（確定JavaScript內(nèi)置對(duì)象的類型，并返回小寫形式的類型名稱。JavaScript也自帶有一個(gè)typeof運(yùn)算符，可以確定數(shù)據(jù)的類型。不過，對(duì)于絕大多數(shù)對(duì)象而言，typeof運(yùn)算符都返回"object"，無法區(qū)分具體的類型。jQuery.type()可以更加精確地確定JS內(nèi)置對(duì)象的類型。例如：對(duì)于new Number(5)，typeof返回"object"，jQuery.type()返回"number"；對(duì)于new Date()，typeof返回"object"，jQuery.type()返回"date"。type的返回的結(jié)果有"Boolean Number String Function Array Date RegExp Object Error"的小寫）

jQuery.unique(array)（根據(jù)元素在文檔中出現(xiàn)的先后順序?qū)OM元素?cái)?shù)組進(jìn)行排序，并移除重復(fù)的元素。

　　注意：該函數(shù)僅作用于DOM元素?cái)?shù)組，而不是數(shù)字、字符串或其他類型。此外，這里的重復(fù)指的是兩個(gè)元素實(shí)際上是同一個(gè)元素(通過全等"==="來判斷)，而不是指兩個(gè)屬性相同的元素。

　　警告：通過實(shí)際測(cè)試發(fā)現(xiàn)，該函數(shù)并不能按照預(yù)期返回正確的結(jié)果。在不同的瀏覽器中、在不同版本的jQuery中，其返回結(jié)果可能不一致(請(qǐng)參考下面的演示代碼)）

jQuery.fn.promise([type,] obj)（獲取已解決的延時(shí)對(duì)象的promise，并和obj對(duì)象合并。并給指定類型的隊(duì)列清空的時(shí)候（默認(rèn)的類型是FX）添加解決處理）

a.jQuery.trim源碼詳解

　　trim函數(shù)有兩個(gè)分支，第一個(gè)分支是：如果瀏覽器支持trim函數(shù)，則使用瀏覽器本地的trim函數(shù)；否則走第二個(gè)分支使用正則去除前后兩邊的空白。

//如果可以則使用瀏覽器支持的trim函數(shù)
// core_version.trim
jQuery.trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
function( text ) {
  return text == null ?
  "" :
  core_trim.call( text );
} :
//否則使用正則去除前后兩端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null ?
  "" :
  ( text + "" ).replace( rtrim, "" );
},

b. 隊(duì)列（queue）詳解

jQuery.fn.queue( type, data )
　　處理步驟如下：
　　默認(rèn)隊(duì)列是fx類型的標(biāo)準(zhǔn)動(dòng)畫效果隊(duì)列。如果隊(duì)列類型不是字符串，則需要按默認(rèn)類型調(diào)整數(shù)據(jù)。
if ( typeof type !== "string" ) {
  data = type;
  type = "fx";
  setter--;
}

　　根據(jù)參數(shù)判斷是獲取還是設(shè)置指定類型的隊(duì)列。

　　如果是獲取直接獲取當(dāng)前jQuery匹配的元素的第一個(gè)元素對(duì)應(yīng)類型的隊(duì)列；

//獲取指定類型的隊(duì)列
if ( arguments.length < setter ) {
  return jQuery.queue( this[0], type );
}

　　如果是設(shè)置，則遍歷當(dāng)前jQuery匹配的元素，給每個(gè)元素都設(shè)置指定類型的隊(duì)列，并給每一個(gè)元素設(shè)置相應(yīng)的hooks(用來做拓展處理，比如最后清除隊(duì)列使用)

return data === undefined ?
this :
//每一個(gè)jQuery的元素都添加隊(duì)列
this.each(function() {
  var queue = jQuery.queue( this, type, data );
  //確保隊(duì)列有一個(gè)hooks。執(zhí)行完這段代碼以后保存了一個(gè)清空隊(duì)列的函數(shù)empty
  jQuery._queueHooks( this, type );
  //如果為"fx"(表示jQuery中的標(biāo)準(zhǔn)動(dòng)畫效果隊(duì)列)，并且隊(duì)列中第一個(gè)函數(shù)沒有正在執(zhí)行
  //則執(zhí)行隊(duì)列中第一個(gè)函數(shù)。可見動(dòng)畫隊(duì)列添加后會(huì)立馬執(zhí)行動(dòng)畫
  if ( type === "fx" && queue[0] !== "inprogress" ) {
    jQuery.dequeue( this, type );
  }
})

　　函數(shù)中使用了低級(jí)api jQuery.queue函數(shù)，是獲取/設(shè)置隊(duì)列的基礎(chǔ)接口，源碼如下

queue: function( elem, type, data ) {
  var queue;
  if ( elem ) {
    //先獲取相應(yīng)類型的隊(duì)列
    type = ( type || "fx" ) + "queue";
    queue = jQuery._data( elem, type );
    //在隊(duì)列末尾添加函數(shù)
    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

　　移除每個(gè)匹配元素的指定隊(duì)列中的第一個(gè)函數(shù)，并執(zhí)行被移除的函數(shù)。內(nèi)部調(diào)用jQuery.dequeue來實(shí)現(xiàn)。jQuery.dequeue的源碼如下

　　jQuery.dequeue中需要特別注意的是對(duì)FX動(dòng)畫隊(duì)列的處理

dequeue: function( elem, type ) {
  type = type || "fx";
  var queue = jQuery.queue( elem, type ),
    startLength = queue.length,
    fn = queue.shift(),//取出隊(duì)列中第一個(gè)函數(shù)
    hooks = jQuery._queueHooks( elem, type ),
    next = function() {
      jQuery.dequeue( elem, type );
    };
  //如果FX隊(duì)列中出列，總是取出進(jìn)度點(diǎn)
  if ( fn === "inprogress" ) {
    fn = queue.shift();
    startLength--;
  }
  hooks.cur = fn;
  if ( fn ) {
    // 添加進(jìn)度定點(diǎn)，以防止FX隊(duì)列自動(dòng)dequeue
    if ( type === "fx" ) {
      queue.unshift( "inprogress" );
    }
    // 清理最后一個(gè)隊(duì)列停止函數(shù)
    delete hooks.stop;
    //next和hooks會(huì)傳遞給回調(diào)
    fn.call( elem, next, hooks );
  }
  //隊(duì)列長(zhǎng)度為0且hooks存在，則刪除隊(duì)列
  if ( !startLength && hooks ) {
    hooks.empty.fire();
  }
}

　　注意執(zhí)行隊(duì)列中函數(shù)傳遞的參數(shù)( elem, next, hooks )。

以上所述就是小編給大家分享的jQuery 1.9.1源碼分析系列（十四）之常用jQuery工具，希望大家喜歡。

最新評(píng)論