jQuery 1.9.1 Quellcode-Analysereihe (14) Häufig verwendete jQuery Tools_jquery

Um uns auf das nächste Kapitel der Analyse der Animationsverarbeitung vorzubereiten, werfen wir zunächst einen Blick auf einige Tools. Das Warteschlangentool wird häufig bei der Animationsverarbeitung verwendet.

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback )) (Ruft die Funktionswarteschlange ab, die für das aktuelle übereinstimmende Element ausgeführt werden soll. Wenn das aktuelle jQuery-Objekt übereinstimmt Mehrere Elemente: Wenn Sie die Warteschlange abrufen, rufen Sie die Warteschlange nur für das erste übereinstimmende Element ab. Wenn Sie die Warteschlange festlegen (Ersetzungswarteschlange, Anhängefunktion), legen Sie sie für jedes übereinstimmende Element separat fest, wenn Sie das erste in der Warteschlange entfernen und ausführen müssen .-Funktion, bitte verwenden Sie die Funktion „dequeue()“. Sie können auch die Funktion „clearQueue()“ verwenden, um die angegebene Warteschlange zu löschen)

jQuery.fn. dequeue([ dequeueName ]) (entfernt die erste Funktion in der angegebenen Warteschlange jedes übereinstimmenden Elements und führt die entfernte Funktion aus. Sie können auch die Funktion „clearQueue()“ verwenden, um die angegebene Warteschlange zu löschen (Die Funktionen in es wird nicht ausgeführt))

jQuery.fn. clearQueue([ dequeueName ]) (alle nicht ausgeführten Elemente in der angegebenen Warteschlange jedes übereinstimmenden Elements löschen)

jQuery.error(msg) (Wirft eine Ausnahme aus, die die angegebenen Zeichenfolgeninformationen enthält.)

jQuery.each(object, callback) (durchläuft das angegebene Objekt und Array und verwendet jede Eigenschaft des Objekts (oder jedes Mitglieds des Arrays) als Kontext zum Durchlaufen und Ausführen der angegebenen Funktion. Der sogenannte Kontext bedeutet, dass der Zeiger this innerhalb der Funktion auf das Element verweist. Diese Funktion gehört zum globalen jQuery-Objekt. Beachten Sie, dass sich dies von der Funktion every() des jQuery-Objekts (Instanz) unterscheidet, aber von der Implementierung every() der jQuery Objekt (Instanz) ruft auch jQuery.each auf.

jQuery.proxy() (Ändern Sie den Kontext der Funktion. Sie können die angegebene Funktion an diese Funktion übergeben, die eine neue Funktion zurückgibt. Der Ausführungscode bleibt unverändert, aber der Kontext (dies) innerhalb der Funktion wurde geändert Für den angegebenen Wert

geändert

　Verwendung 1:

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

Ändern Sie das Kontextobjekt der Funktionsfunktion in den angegebenen Kontext.

Verwendung 2:

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

Ändern Sie den Kontext der Funktion namens name in den angegebenen Kontext. Der Funktionsname sollte ein Attribut des Kontextobjekts sein.

jQuery.map(object, callback) (Verwenden Sie die angegebene Funktion, um jedes Element im Array (oder jedes Attribut des Objekts) zu verarbeiten, kapseln Sie die Verarbeitungsergebnisse als neues Array und geben Sie es zurück. Es gibt auch eine jQuery Bibliothek mit demselben Namen Instanzmethode jQuery.fn.map(), die nur zum Durchlaufen der Elemente verwendet wird, die mit dem aktuellen jQuery-Objekt übereinstimmen)

jQuery.fn.data([ Schlüssel [, Wert ] ]) (Zugriffsdaten zu allen Elementen, die mit dem aktuellen jQuery-Objekt übereinstimmen)

jQuery.fn.removeData(keys) (entfernt das Datenelement mit dem angegebenen Schlüssel, der in jedem Element gespeichert ist, das mit dem aktuellen jQuery-Objekt übereinstimmt)

jQuery.support (gibt Funktions- oder Fehlerinformationen des aktuell vom Benutzer verwendeten Browsers zurück. Diese Eigenschaft ist ein Objekt. Die Eigenschaften dieses Objekts sind nicht unveränderlich und jQuery garantiert nicht, dass die angegebenen Eigenschaften in Zukunft verfügbar sein werden , diese Eigenschaften werden hauptsächlich von Plugin- oder Kernel-Entwicklern verwendet)

jQuery.contains(container, Included) (Bestimmen Sie, ob das angegebene Element ein anderes Element enthält. Kurz gesagt, diese Funktion wird verwendet, um zu bestimmen, ob ein anderes DOM-Element ein Nachkomme des angegebenen DOM-Elements ist)

jQuery.extend([ deep ], target , object1 [, objectN... ]) (Führen Sie den Inhalt eines oder mehrerer Objekte in das Zielobjekt ein. Diese Funktion kann Mitgliedseigenschaften und Methoden eines oder mehrerer Objekte hinzufügen Für das angegebene Objekt wird der Parameter deep verwendet, um anzugeben, ob tief rekursiv zusammengeführt werden soll)

jQuery.fn.extend(object) (erweitert eine oder mehrere Instanzeigenschaften und -methoden für jQuery (wird hauptsächlich für Erweiterungsmethoden verwendet))

jQuery.globalEval(code) (führt einen Teil des JavaScript-Codes global aus. Diese Funktion ähnelt der regulären JavaScript-Funktion eval(). Der Unterschied besteht darin, dass der Umfang des von jQuery.globalEval() ausgeführten Codes global ist Geltungsbereich)

jQuery.grep(array, function [, invert ]) (verwendet die angegebene Funktion, um die Elemente im Array zu filtern und gibt das gefilterte Array zurück. Das Quellarray wird nicht beeinflusst und die Filterergebnisse werden nur im angezeigt zurückgegebenes Ergebnisarray )

jQuery.inArray(value, array [, fromIndex ]) (Suchen Sie nach dem angegebenen Wert im Array und geben Sie seinen Indexwert zurück. Wenn der Wert nicht im Array vorhanden ist, wird -1 zurückgegeben)

jQuery.isArray(object) (bestimmt, ob der angegebene Parameter ein Array ist)

jQuery.isEmptyObject(object) (bestimmt, ob der angegebene Parameter ein leeres Objekt ist. Das sogenannte „leere Objekt“ enthält keine aufzählbaren (benutzerdefinierten) Attribute. Kurz gesagt, das Objekt hat keine Attribute. Iterieren Sie durch für ...in)

jQuery.isPlainObject(object) (bestimmt, ob der angegebene Parameter ein reines Objekt ist. Das sogenannte „reine Objekt“ bedeutet, dass das Objekt durch „{}“ oder „neues Objekt“ erstellt wird)

jQuery.isFunction(object) (bestimmt, ob der angegebene Parameter eine Funktion ist)

jQuery.isNumeric(value) (bestimmt, ob der angegebene Parameter ein numerischer Wert ist)

jQuery.isWindow(object) (bestimmt, ob der angegebene Parameter ein Fenster ist)

jQuery.isXMLDoc(node) (bestimmt, ob sich ein DOM-Knoten in einem XML-Dokument befindet oder selbst ein XML-Dokument ist. Diese Funktion wird hauptsächlich verwendet, um zu bestimmen, ob das angegebene Dokument ein XML-Dokument oder ein HTML (oder XHTML) ist ) Dokument)

jQuery.makeArray(object) (konvertiert ein Array-ähnliches Objekt in ein echtes Array-Objekt. Das sogenannte „Array-ähnliche Objekt“ ist ein reguläres Objektobjekt, aber es ist einem Array-Objekt sehr ähnlich: Es hat ein Längenattribut und endet mit 0 , 1, 2, 3... und anderen Zahlen als Attributnamen. Es handelt sich jedoch schließlich nicht um ein Array, und es gibt keine integrierten Methoden, die vom Prototypobjekt des Arrays geerbt werden. zum Beispiel: push(), sort() usw.)

jQuery.noop() (ist eine leere Funktion, sie macht nichts. Wenn Sie manchmal Funktionsparameter übergeben müssen und möchten, dass sie nichts tut, können Sie diese Funktion verwenden, und es ist nicht erforderlich, eine neue leere Funktion zu erstellen Funktion)

jQuery.now() (gibt die Anzahl der Millisekunden seit Mitternacht am 1. Januar 1970 zurück. Diese Funktion ähnelt new Date().getTime())

jQuery.parseHTML(htmlString [, context ] [, keepScripts ]) (analysieren Sie die HTML-Zeichenfolge in das entsprechende DOM-Knotenarray. Diese Funktion verwendet die native Funktion zur Erstellung von DOM-Elementen, um die HTML-Zeichenfolge in eine DOM-Elementsammlung zu konvertieren. Sie können diese DOM-Elemente in das Dokument einfügen)

jQuery.parseJSON(jsonString) (Konvertieren Sie einen wohlgeformten JSON-String in sein entsprechendes JavaScript-Objekt. Das sogenannte „wohlgeformt“ bedeutet, dass der angegebene String dem strengen JSON-Format entsprechen muss, zum Beispiel: das Attribut Name muss doppelte Anführungszeichen hinzufügen, und Zeichenfolgenwerte müssen ebenfalls doppelte Anführungszeichen verwenden. Wenn eine JSON-Zeichenfolge mit einem unvollständigen Format übergeben wird, wird eine JS-Ausnahme ausgelöst)

jQuery.parseXML(XMLString) (analysiert die Zeichenfolge in das entsprechende XML-Dokument. Diese Funktion verwendet die integrierte Analysefunktion des Browsers, um ein gültiges XML-Dokument zu erstellen, das an die Funktion jQuery() übergeben werden kann, um ein zu erstellen Ein typisches jQuery-Objekt, das es ermöglicht, es zu durchlaufen oder auf andere Weise zu manipulieren)

jQuery.trim(str) (Entfernen Sie Leerzeichen an beiden Enden der Zeichenfolge. Diese Funktion kann Leerzeichen an beiden Enden der Zeichenfolge entfernen (bis die erste Nicht-Leerzeichen-Zeichenfolge gefunden wird). Sie löscht einschließlich Zeilenumbruchsymbolen , Leerzeichen, Tabulatoren und andere gängige Leerzeichen)

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") ?
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. 队列（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工具，希望大家喜欢。