jQuery 1.9.1 ソースコード解析シリーズ (14) よく使う jQuery ツール

アニメーション処理を分析する次の章に備えるために、最初にいくつかのツールを見てみましょう。キューツールはアニメーション処理でよく使用されます。

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 オブジェクト (インスタンス) の each() 関数とは異なりますが、jQuery の each() 実装に属していることに注意してください。オブジェクト (インスタンス) も jQuery.each を呼び出します。

jQuery.proxy() (関数のコンテキストを変更します。指定された関数をこの関数に渡すことができ、新しい関数が返されます。その実行コードは変更されませんが、関数内のコンテキスト (this) は変更されています。指定された値

に対して変更されました。

使用法 1:

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

ログイン後にコピー

関数 function のコンテキストオブジェクトを指定されたコンテキストに変更します。

使用法 2:

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

ログイン後にコピー

name という名前の関数のコンテキストを、指定されたコンテキストに変更します。関数名はコンテキストオブジェクトの属性である必要があります。

jQuery.map(object, callback) (指定された関数を使用して配列内の各要素(またはオブジェクトの各属性)を処理し、処理結果を新しい配列としてカプセル化して返します。jQueryもあります同じ名前のライブラリインスタンスメソッド jQuery.fn.map()。これは、現在の jQuery オブジェクトに一致する要素を走査するためにのみ使用されます)

jQuery.fn.data([ key [, value ] ]) (現在の jQuery オブジェクトと一致するすべての要素のデータにアクセスします)

jQuery.fn.removeData(keys) (現在の jQuery オブジェクトと一致する各要素に格納されている指定されたキーを持つデータ項目を削除します)

jQuery.support (ユーザーが現在使用しているブラウザの機能またはバグ情報を返します。このプロパティはオブジェクトです。このオブジェクトのプロパティは不変ではなく、jQuery は指定されたプロパティが将来利用可能になることを保証しません) 、これらのプロパティは主にプラグインまたはカーネル開発者によって使用されます)

jQuery.contains(container, contains) (指定された要素に別の要素が含まれているかどうかを判断します。つまり、この関数は、別の DOM 要素が指定された DOM 要素の子孫であるかどうかを判断するために使用されます)

jQuery.extend([ deep ], target , object1 [, objectN... ]) (1 つ以上のオブジェクトの内容をターゲットオブジェクトにマージします。この関数は、1 つ以上のオブジェクトのメンバープロパティとメソッドを追加できます。指定されたオブジェクトに対して、パラメータ deep は再帰的に深くマージするかどうかを示すために使用されます)

jQuery.fn.extend(object) (jQuery の 1 つ以上のインスタンスプロパティとメソッドを拡張します (主に拡張メソッドに使用されます))

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) (指定されたパラメータが空のオブジェクトかどうかを判断します。いわゆる「空のオブジェクト」には、列挙可能な (カスタム) 属性が含まれません。つまり、オブジェクトには属性がありません。 ...で)

jQuery.isPlainObject(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 日の午前 0 時からのミリ秒数を返します。この関数は 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("\uFEFF\xA0") &#63;
function( text ) {
  return text == null &#63;
  "" :
  core_trim.call( text );
} :
//否则使用正则去除前后两端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null &#63;
  "" :
  ( 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 &#63;
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工具，希望大家喜欢。