web-dev-qa-db-fra.com

Que signifie $ (sélecteur) [0] dans jQuery?

La syntaxe que je ne comprends pas est la suivante:

$("#profilePhotoFileUpload")[0]

Je vois cette syntaxe assez souvent et je l'ignore depuis un moment parce que je n'ai jamais eu à l'utiliser. Mais maintenant, afin de comprendre le code de ce post Comment puis-je télécharger une image en utilisant le javascriptSDK Parse.com? , je ne peux plus l'ignorer.

Je sais que [0] cette syntaxe est généralement utilisée pour faire référence à un tableau. Mais il semble un peu étrange qu'une référence à id génère un tableau quelconque.

javascriptjqueryarrays
12
Jae Kim

En ajoutant [0] à l'objet jQuery, vous retournerez l'élément first DOM.

Comme vous utilisez ici id selector, il n'y aura qu'un seul élément dans le tableau. Il est donc logique d'utiliser [0]. Si vous sélectionnez plusieurs éléments, vous pouvez également utiliser un nombre compris entre 0 et le nombre d'éléments, vous pouvez obtenir l'élément DOM correspondant.

De jQuery Docs

Un objet jQuery contient une collection d'éléments DOM (Document Object Model) créés à partir d'une chaîne HTML ou sélectionnés à partir d'un document. Étant donné que les méthodes jQuery utilisent souvent des sélecteurs CSS pour faire correspondre les éléments d'un document, l'ensemble des éléments d'un objet jQuery est souvent appelé un ensemble "d'éléments correspondants" ou "d'éléments sélectionnés".

L'objet jQuery lui-même se comporte un peu comme un tableau; il possède une propriété length et les éléments de l'objet sont accessibles par leurs index numériques [0] à [length-1]. Notez qu'un objet jQuery n'est pas réellement un objet Javascript Array. Il ne possède donc pas toutes les méthodes d'un objet Array réel tel que join().

12
Tushar

Eh bien, ne confondez pasObjet jQueryavecnœud DOM/élément. 

this devrait être aussi simple que 

$(this)[0] === this

et 

$("#target")[0] === document.getElementById("target");

par exemple.

// Setting the inner HTML with jQuery.     
var target = document.getElementById("target");     

// Comparing DOM elements.
alert($(target)[0] === target); // alerts "true"

// Comparing DOM element and jQuery element
alert($(target)[0] === $(target).eq(0)); // alerts "false"

Nous devons garder à l'esprit que $(target)[0] et $(target).get(0) Renvoient le même élément DOM qui possède des propriétés DOM telles que .innerHTML Et des méthodes telles que .appendChild(), mais pas les méthodes jQuery telles que .html() ou .after()$(target).eq(0) renvoie un objet jQuery qui contient des méthodes utiles telles que .html() et .after().

quoi de plus

var logo1 = $("#logo");
var logo1Elem = logo1.get(0);

var logo2 = $("#logo");
var logo2Elem = $("#logo")[0];

Bien que logo1 et logo2 soient créés de la même manière (et enveloppent le même élément DOM), ils ne sont pas le même objet.

// Comparing jQuery objects. 
alert($("#logo") === $("#logo")); // alerts "false"

// Comparing DOM elements.     
alert(logo1Elem === logo2Elem); // alerts "true"

Réf.: https://learn.jquery.com/using-jquery-core/jquery-object/

4
kolunar

Selon la documentation de jQuery, $ () renvoie une collection d’éléments correspondants trouvés dans le DOM en fonction du ou des arguments passés ou créés en transmettant une chaîne HTML. En ajoutant le [0], vous retirez le wrapper de la collection de l'élément et vous ne renvoyez que l'élément DOM réel lorsqu'il s'agit d'un identifiant. Lorsque vous traitez avec une classe, vous renvoyez l'élément à la position des tableaux passée par la notation entre crochets (dans ce cas, le premier, puisque les tableaux sont à 0 et basés sur JavaScript).

0
rphuber

Dans le cas d'un sélecteur d'identifiant, y ajouter [0] n'a aucun sens car $("#theIdOfTheElement") retournera toujours le premier élément. 

0
Zakaria Ra