2013-01-24 19 views
10

Utilizzo di jQuery C'è qualche vantaggio nell'uso di $(selector).get(0) su $(selector)[0] se voglio solo ottenere il primo elemento nell'array jQuery come elemento DOM?Perché utilizzare jQuery (selettore) .get (0) anziché jQuery (selettore) [0] per ottenere l'elemento DOM?

HTML:

<form id="myForm"></form> 

Javascript:

var selector = '#myForm'; 
var domElement = $(selector).get(0); //Returns [object HTMLFormElement] 

//Or 
var domElement = $(selector)[0]; //Also returns [object HTMLFormElement] 
  • .get() è più caratteri da digitare.
  • Entrambi i metodi restituiscono lo stesso risultato se il $(selector) è vuota (undefined)
  • The jQuery documentation on .get() note che si può semplicemente utilizzare la funzione di accesso di indice per ottenere l'elemento n-esimo, ma non ottengono gli altri benefici di .get() come l'utilizzo un numero negativo per restituire gli articoli dalla fine dell'array.
  • Inoltre, è possibile chiamare .get() senza argomenti per restituire tutti gli elementi DOM dell'array jQuery.
+6

penso che hai risposto alla tua domanda –

risposta

21

.get consente di utilizzare indici negativi. Ad esempio:

<span>1</span> 
<span>2</span> 
<span>3</span> 

$("span").get(-1); riferisce alla terza span.

Ma se non è necessaria questa funzione e si desidera selezionare solo un elemento .get(0) e [0] sono uguali. Si noti la this[num]:

// jQuery code 
get: function (num) { 
    return num == null ? 

    // Return a 'clean' array 
    this.toArray() : 

    // Return just the object 
    (num < 0 ? this[this.length + num] : this[num]); 
}, 
+0

non ho letto la questione .. sta già rilevando questo vantaggio ... –

+1

Matt: la tua risposta è ancora valida perché hai sottolineato il codice sorgente di jQuery. Avrei dovuto pensarci solo a guardarlo! –

5

Nell'interesse di velocità ho creato un jsfiddle che loop su ogni 10.000.000 volte. Ho creato due test con un modulo all'inizio del documento e alla fine con 1200 righe di codice HTML fittizio. Ecco alcuni risultati preliminari:

Test1 
form at beginning with .get(0): 15981ms - faster 
form at beginning with [0]:  16089ms 
form at end with .get(0):  16554ms 
form at end with [0]:   15969ms - faster 

Test2 
form at beginning with .get(0): 14137ms 
form at beginning with [0]:  14034ms - faster 
form at end with .get(0):  13756ms - faster 
form at end with [0]:   14492ms 

Test3 
form at beginning with .get(0): 15952ms - faster 
form at beginning with [0]:  16810ms 
form at end with .get(0):  15905ms 
form at end with [0]:   15532ms - faster 

Sembra che nessuna differenza significativa nella velocità può essere visto. Tuttavia dovresti controllare diversi browser per essere sicuro.

È possibile controllare il violino qui: http://jsfiddle.net/AFfYx/ (richiede circa un minuto per l'esecuzione)

5

Ho troppo basso un rappresentante di commentare la risposta di ericbowden, ma qui è un test jsperf confronto tra le due operazioni:

http://jsperf.com/selector-get-0-vs-selector-0

Consensus (su Chrome 32): fondamentalmente la stessa, molto minore vantaggio nei confronti [0]