Analyse de l'utilisation des opérations en chaîne sur les objets jQuery

Les exemples de cet article décrivent l'utilisation d'opérations en chaîne sur des objets jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Opération en chaîne d'objets jQuery

Regardons d'abord un exemple :

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good")

Appelle d'abord la fonction css() pour modifier le style d'un objet jQuery, puis utilise la fonction attr() pour modifier les attributs. Cette méthode d'appel est comme une chaîne, c'est pourquoi elle est appelée "opération en chaîne".

Les opérations en chaîne peuvent rendre le code plus concis, car il est souvent possible d'accomplir des tâches dans une seule instruction qui ne pouvaient être complétées que dans plusieurs instructions dans le passé. Par exemple, si les opérations en chaîne ne sont pas utilisées, deux instructions sont nécessaires pour effectuer la tâche ci-dessus :

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

En plus d'augmenter la quantité de code, le sélecteur est également appelé deux fois, ce qui réduit la vitesse.

Dans une opération en chaîne plus courte, les instructions sont souvent plus claires et diverses opérations sur les objets jQuery peuvent être implémentées étape par étape. Cependant, l'opération en chaîne ne doit pas être trop longue, sinon l'instruction sera difficile à comprendre, car il n'est pas facile de vérifier l'état actuel de l'objet jQuery, surtout s'il s'agit d'ajouter et de supprimer des éléments dans l'objet jQuery, c'est encore plus difficile à juger.

Toutes les fonctions jQuery ne peuvent pas utiliser des opérations chaînées. Ceci est lié au principe des opérations chaînées. La raison pour laquelle des opérations chaînées peuvent être réalisées est que chaque fonction renvoie l'objet jQuery lui-même. Dans l'implémentation interne de la bibliothèque de classes jQuery, bien que de nombreuses fonctions renvoient l'objet jQuery lui-même, elles sont toutes implémentées en appelant un nombre limité de fonctions internes. Par exemple, la fonction attr() définit la pierre d'attribut "jQuery". . méthode each(object,callback,args)". Notez que cette méthode n'est pas une méthode objet jQuery. La méthode objet jQuery a également une fonction each(), qui est "jQuery.fn.each(callback,args)". :

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

Regardons le résultat de retour de la fonction jQuery.each :

Each.function(object,callback,args){
  Retumobject;
}

Object est l'objet jQuery.fn, c'est-à-dire l'objet jQuery. L'objet final renvoyé est toujours l'objet jQuery.

Vous pouvez utiliser les principes suivants pour déterminer si une fonction renvoie un objet jQuery, c'est-à-dire si elle peut être utilisée pour des opérations en chaîne.

En plus des fonctions permettant d'obtenir certaines données, comme l'obtention de la valeur d'attribut "attr(name)" et l'obtention de la taille de la collection "size()", ces fonctions renvoient évidemment des données. En plus de ces fonctions, les fonctions jQuery peuvent être utilisées pour des opérations en chaîne, telles que la définition de l'attribut « attr(name.value) ».

Utilisation de la variable "$"

La variable "$" est une référence à la variable "jQuery". La variable "jQuery" est une variable globale, et l'objet jQuery fait référence à "jQUEry.fn", ne vous y trompez pas. Les variables "jQuery" sont similaires aux classes statiques. Les méthodes ci-dessus sont des méthodes statiques et peuvent être appelées à tout moment. Par exemple "jQuery.each". "jQuery.fn" est une méthode d'instance et ne peut être appelée que sur l'objet jQuery. Par exemple, la méthode "jQuery.fn.each()" ne peut être appelée que sous la forme "$('#id').each".

Comme mentionné précédemment, vous pouvez utiliser "$" au lieu de "jQuery", car il existe l'implémentation suivante dans jQuery :

jQuery=window.jQuery=window.$

Donc, la variable "$" et le "jQuery " Les variables sont en fait C'est une propriété de l'objet Window, qui est une variable globale. Peut être appelé n’importe où sur la page.

J'espère que cet article sera utile à tout le monde dans la programmation jquery.