2013-01-24 6 views
10

Mit jQuery gibt es einen Vorteil für die Verwendung $(selector).get(0) über $(selector)[0], wenn ich nur das erste Element im jQuery-Array als ein DOM-Element erhalten möchte?Warum jQuery (Selektor) .get (0) anstelle von jQuery (Selektor) [0] verwenden, um ein DOM-Element zu erhalten?

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() ist mehr Zeichen eingeben.
  • Beide Methoden liefern das gleiche Ergebnis, wenn die $(selector) leer ist (undefined)
  • The jQuery documentation on .get() Notizen, die Sie einfach den Index Accessor verwenden können die n-te Element zu bekommen, aber Sie haben nicht die anderen Vorteile von .get() so erhalten, wie mit eine negative Zahl, um Elemente vom Ende des Arrays zurückzugeben.
  • Sie können auch .get() ohne Argumente aufrufen, um alle DOM-Elemente des jQuery-Arrays zurückzugeben.
+6

ich glaube, Sie Ihre Frage beantwortet –

Antwort

21

.get können Sie negative Indizes verwenden. Zum Beispiel:

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

$("span").get(-1); bezieht sich auf die dritte span. Wenn Sie diese Funktion nicht benötigen und nur ein Element auswählen möchten, sind .get(0) und [0] identisch. Beachten Sie die 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

ich die Frage nicht gelesen hat .. Er weist bereits auf diesen Vorteil hin ... –

+1

Matt - Ihre Antwort ist immer noch wertvoll, weil Sie auf den jQuery-Quellcode hingewiesen haben. Ich hätte daran denken sollen, es einfach anzuschauen! –

5

Im Interesse der Geschwindigkeit habe ich eine jsfiddle, die über jeweils 10 Millionen mal Schleifen. Ich habe zwei Tests mit einem Formular am Anfang des Dokuments erstellt und das Ende mit 1200 Zeilen Dummy-HTML dazwischen. Hier sind einige vorläufige Ergebnisse:

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 

Es sieht aus wie kein signifikanter Unterschied in der Geschwindigkeit gesehen werden kann. Allerdings müssten Sie in verschiedenen Browsern einchecken, um sicher zu gehen.

Sie können hier die Geige check out: http://jsfiddle.net/AFfYx/ (dauert etwa eine Minute zu laufen)

5

Ich habe eine zu niedrige rep auf ericbowden Antwort zu kommentieren, aber hier ist ein jsperf Test Vergleich der beiden Operationen:

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

Consensus (auf Chrome 32): Im Grunde das gleiche, sehr geringen Vorteil gegenüber [0]