Objets jQuery et objets DOM

Préface

Pour écrire un programme JavaScript, nous devons d'abord obtenir l'objet. Le sélecteur jQuery peut changer complètement la façon dont nous obtenons habituellement des objets. Il peut obtenir des objets avec presque toutes les sémantiques. , tel que "propre attribut de titre et la valeur contient l'élément <a> du test". Pour effectuer ces tâches, il vous suffit d'écrire une chaîne de sélecteur jQuery. L'apprentissage des sélecteurs jQuery est l'étape la plus importante de l'apprentissage de jQuery.

Objet Dom et ensemble de wrapper jQuery

Que nous écrivions un programme ou lisions la documentation de l'API, nous devons toujours faire attention à la distinction entre les objets Dom et les ensembles de wrapper jQuery.

1. Objet Dom

Dans le développement JavaScript traditionnel, nous obtenons d'abord l'objet Dom, tel que :

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Nous utilisons souvent le document The . La méthode getElementById obtient un seul objet Dom basé sur l'identifiant, ou la méthode document.getElementsByTagName obtient une collection d'objets Dom basée sur les noms de balises HTML.

De plus, dans la fonction événement, vous pouvez l'utiliser dans la fonction méthode pour référencer l'objet déclencheur d'événement (mais il y a un problème avec IE6 dans la fonction événement multicast), ou utiliser la cible de l'événement object (Firefox) ou srcElement (IE6 ) pour obtenir l'objet Dom qui a déclenché l'événement.

Notez que ce que nous obtenons ici sont tous des objets Dom. Les objets Dom ont également différents types tels que input, div, span, etc. Les objets Dom ont des propriétés et des méthodes limitées.

2. L'ensemble d'emballage jQuery

L'ensemble d'emballage jQuery peut être considéré comme une extension de l'objet Dom. Dans le monde de jQuery, tous les objets, qu'ils soient un ou un groupe, sont encapsulés dans un ensemble de wrapper jQuery. Par exemple, obtenir un ensemble de wrapper jQuery contenant un élément :

var jQueryObject = $("#testDiv");

jQuery wrapper set est traité comme un objet. convoqués ensemble. L'ensemble de wrapper jQuery possède un riche ensemble de propriétés et de méthodes.

3. Conversion des objets Dom et des objets jQuery

(1) Ensemble d'emballage Dom en jQuery

Si vous souhaitez utiliser les fonctions fournies par jQuery, vous devez d'abord construire un ensemble de wrapper jQuery. Nous pouvons utiliser le sélecteur jQuery qui sera présenté dans cet article pour construire directement un ensemble de wrapper jQuery, tel que :

$("#testDiv");

L'ensemble de wrapper construit par l'instruction ci-dessus ne contient qu'un seul élément dont l'identifiant est testDiv.

Ou nous avons déjà obtenu un élément Dom, tel que :

var div = document.getElementById("testDiv");

Dans le code ci-dessus, div est un élément Dom Nous pouvons convertir l'élément Dom en un ensemble de wrapper jQuery : <🎜. >

var domToJQueryObject = $(div);

(2) le wrapper jQuery défini sur un objet DOM

l'ensemble de wrapper jQuery est une collection, nous pouvons donc accéder à l'un de ses éléments via l'indexeur :

var domObject = $("#testDiv")[0];

Notez que ce qui est renvoyé via l'indexeur n'est plus un ensemble packagé jQuery, mais un objet Dom !

Certaines méthodes de parcours des ensembles packagés jQuery, telles que each(), peuvent transmettre la fonction de parcours In. la fonction de traversée C'est aussi un élément Dom, par exemple :

$("#testDiv").each(function() {
  alert(this)
});

Et si nous voulons utiliser la méthode de jQuery pour faire fonctionner l'objet Dom ? Utilisez simplement la méthode de conversion présentée ci-dessus :

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

Résumé : Tout d'abord, laissez tout le monde comprendre les concepts des objets Dom et des ensembles d'empaquetage jQuery, ce qui accélérera considérablement notre apprentissage. Tant que vous pouvez faire la distinction entre les deux, vous pouvez être clair lors de l'écriture de programmes.