objet jQuery et de l'élément DOM

Question

J'aimerais comprendre la relation entre l'objet jQuery et de l'élément DOM..

Lorsque jQuery retourne un élément, il apparaît comme [object Object] dans une alerte. Lors de l' getElementByID renvoie un élément, il apparaît comme [object HTMLDivElement]. Ce que signifie exactement? Je veux dire, sont à la fois des objets avec une différence ?

Aussi quelles méthodes peuvent fonctionner sur l'objet jQuery vs élément du DOM? Pouvez un unique objet jQuery représenter plusieurs éléments du DOM ?

Answer 1

J'aimerais comprendre la relation entre l'objet jQuery et de l'élément DOM

Un objet jQuery est un tableau comme objet qui contient l'élément DOM(s). Un objet jQuery peut contenir plusieurs éléments DOM selon le sélecteur vous utilisez.

Aussi quelles méthodes peuvent fonctionner sur l'objet jQuery vs élément du DOM? Pouvez un unique objet jQuery représenter plusieurs éléments du DOM ?

fonctions jQuery (une liste complète est sur le site) fonctionne sur jQuery objets et non sur des éléments du DOM. Vous pouvez accéder aux éléments du DOM à l'intérieur d'une fonction à l'aide de jQuery .get() ou d'accéder à l'élément à l'index directement:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

En d'autres termes, ce qui suit devrait vous obtenir le même résultat:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

Pour plus d'informations sur l'objet jQuery, consultez la documentation. Consultez également la documentation pour .get()

Answer 2

Lorsque vous utilisez jQuery pour obtenir un élément du DOM, l'objet jQuery retourne contient une référence à l'élément. Lorsque vous utilisez une fonction native comme getElementById, vous obtenez la référence à l'élément directement, et non dans un objet jQuery.

Un objet jQuery est un tableau comme objet qui peut contenir plusieurs éléments du DOM:

var jQueryCollection = $("div"); //Contains all div elements in DOM

La ligne ci-dessus peut être effectuée sans jQuery:

var normalCollection = document.getElementsByTagName("div");

En fait, c'est exactement ce que jQuery fera en interne quand vous passez par un simple sélecteur comme div. Vous pouvez accéder aux éléments réels dans un jQuery collection à l'aide de l' get méthode:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

Lorsque vous avez un élément ou un ensemble d'éléments, à l'intérieur d'un objet jQuery, vous pouvez utiliser l'une des méthodes disponibles dans l'API jQuery, tandis que quand vous avez le raw élément que vous ne pouvez utiliser JavaScript natif méthodes.

Answer 3

J'ai juste commencé à jouer avec jQuery ce dernier mois, et j'ai eu une question similaire, à courir dans mon esprit. Toutes les réponses que vous avez reçues à ce jour sont valides et de la dot, mais très précise de la réponse peut être:

Disons que vous êtes dans une fonction, et de se référer à l'élément appelant, vous pouvez utiliser thisou $(this); mais quelle est la différence? S'avère, lorsque vous utilisez $(this), vous êtes habillage this à l'intérieur d'un objet jQuery. L'avantage est qu'une fois qu'un objet est un objet jQuery, vous pouvez utiliser toutes les fonctions jQuery.

C'est assez puissant, puisque vous pouvez même terminer une représentation de chaîne d'éléments, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', à l'intérieur d'un objet jQuery juste par littéralement en l'enveloppant dans $(): $(s). Maintenant, vous pouvez manipuler tous ces éléments avec jQuery.

Answer 4

La plupart jQuery membre Functions n'ont pas de valeur de retour, mais plutôt de retour l'actuel jQuery Object ou d'une autre, jQuery Object.

---

Donc,

console.log("(!!) jquery >> " + $("#id") ) ; 

sera de retour [object Object], soit une jQuery Object qui maintient la collection qui est le résultat de l'évaluation le sélecteur String ("#id") contre l' Document,

alors que ,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

sera de retour [object HTMLDivElement] (ou, en fait, [object Object] dans IE), car/si la valeur de retour est un div Element.

---

Aussi quelles méthodes peuvent fonctionner sur l'objet jQuery vs élément du DOM? (1) un objet jQuery représenter plusieurs éléments du DOM ? (2)

(1) Il existe une multitude de membres Functions en jQuery qui concernent les DOM Objects. La meilleure chose à faire omi est la recherche de la documentation de l'API de jQuery pour une Function une fois que vous avez une tâche spécifique (telles que la sélection d' Nodes ou de les manipuler).

• jQuery documentation

(2) Oui, un seul jQuery Object peut maintenir une liste de plusieurs DOM Elements. Il y a plusieurs Functions (comme jQuery.find ou jQuery.each) qui s'appuient sur ce la mise en cache automatique des comportements.

Answer 5

C'est simplement votre navigateur intelligent. Ils sont à la fois des objets mais DOMElements sont spéciaux objets. jQuery juste enveloppements DOMElements dans un objet Javascript.

Si vous souhaitez obtenir plus d'informations de débogage je vous recommande de regarder le débogage des outils comme Firebug pour Firefox et Chrome intégré dans l'inspecteur (très similaire à Firebug).