it-swarm.com.de

jQuery vs document.querySelectorAll

Ich habe mehrmals gehört, dass der größte Vorteil von jQuery die Art und Weise ist, wie Elemente im DOM abgefragt und bearbeitet werden: Mit CSS-Abfragen können komplexe Abfragen erstellt werden, die mit normalem Javascript nur sehr schwer möglich wären. Soweit ich weiß, können Sie jedoch mit document.querySelector Oder document.querySelectorAll, Die in Internet Explorer 8 und höher unterstützt werden, dasselbe Ergebnis erzielen.

Die Frage ist also, warum das Risiko des Overheads von jQuery besteht, wenn der größte Nutzen mit reinem JavaScript erzielt werden kann.

Ich weiß, dass jQuery mehr als nur CSS-Selektoren hat, zum Beispiel Cross-Browser-AJAX, Nice Event Attaching usw. Aber sein abfragender Teil ist ein sehr großer Teil der Stärke von jQuery!

Irgendwelche Gedanken?

149
Joel_Blum

document.querySelectorAll() weist mehrere Inkonsistenzen zwischen den Browsern auf und wird in älteren Browsern nicht unterstütztDies wird heutzutage wahrscheinlich keine Probleme mehr bereiten. Es hat eine sehr unintuitive Scoping-Mechanismus und einige andere nicht so schöne Funktionen . Auch mit Javascript fällt es Ihnen schwerer, mit den Ergebnismengen dieser Abfragen zu arbeiten, was Sie in vielen Fällen tun möchten. jQuery bietet Funktionen, mit denen Sie arbeiten können: filter(), find(), children(), parent(), map(), not() und einige mehr. Ganz zu schweigen von der Fähigkeit von jQuery, mit Pseudoklassen-Selektoren zu arbeiten.

Ich würde diese Dinge jedoch nicht als die stärksten Features von jQuery betrachten, sondern als andere Dinge wie das "Arbeiten" auf dem Dom (Ereignisse, Styling, Animation & Manipulation) in einer Crossbrowser-kompatiblen Weise oder auf der Ajax-Oberfläche.

Wenn Sie nur die Selector-Engine von jQuery verwenden möchten, können Sie diejenige verwenden, die jQuery selbst verwendet: Sizzle Auf diese Weise verfügen Sie über die Leistung der jQuerys Selector-Engine, ohne den unangenehmen Overhead .

EDIT: Nur zur Veranschaulichung, ich bin ein großer Vanilla JavaScript-Fan. Trotzdem ist es eine Tatsache, dass Sie manchmal 10 Zeilen JavaScript benötigen, in denen Sie 1 Zeile jQuery schreiben würden.

Natürlich muss man diszipliniert sein, um jQuery nicht so zu schreiben:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Dies ist äußerst schwer zu lesen, während letzteres ziemlich klar ist:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

Das entsprechende JavaScript wäre durch den obigen Pseudocode weitaus komplexer dargestellt:

1) Finde das Element, nimm das ganze Element oder nur das erste.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Durchlaufen Sie das Array der untergeordneten Knoten über einige (möglicherweise verschachtelte oder rekursive) Schleifen und überprüfen Sie die Klasse (Klassenliste nicht in allen Browsern verfügbar!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) Wenden Sie den CSS-Stil an

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Dieser Code würde mindestens zwei Mal so viele Codezeilen enthalten, wie Sie mit jQuery schreiben. Außerdem müssten Sie browserübergreifende Probleme berücksichtigen, die den schwerwiegenden Geschwindigkeitsvorteil (abgesehen von der Zuverlässigkeit) des nativen Codes gefährden.

119
Christoph

Wenn Sie Ihre Seite für IE8 oder neuer optimieren, sollten Sie wirklich überlegen, ob Sie eine Abfrage benötigen oder nicht. Moderne Browser verfügen über viele native Ressourcen, die von jquery bereitgestellt werden.

Wenn Sie Wert auf Leistung legen, können Sie mit nativem Javascript unglaubliche Leistungsvorteile erzielen (2-10 schneller): - http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Ich habe eine div-tagcloud von jquery nach native javascript (IE8 + kompatibel) transformiert, die Ergebnisse sind beeindruckend. 4 mal schneller mit nur ein wenig Overhead.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Möglicherweise benötigen Sie Jquery nicht, um einen wirklich guten Überblick zu erhalten, welche nativen Methoden für welche Browserversion gelten.

http://youmightnotneedjquery.com/


Anhang: Weitere Geschwindigkeitsvergleiche, wie native Methoden mit jquery konkurrieren

58
Pascalius

Um zu verstehen, warum jQuery so beliebt ist, ist es wichtig zu verstehen, woher wir kommen!

Vor etwa einem Jahrzehnt waren IE6, Netscape 8 und Firefox 1.5 die wichtigsten Browser. Damals gab es neben Document.getElementById() nur wenige browserübergreifende Möglichkeiten, ein Element aus dem DOM auszuwählen.

Als jQuery 2006 veröffentlicht wurde, war es ziemlich revolutionär. Damals setzte jQuery den Standard für das einfache Auswählen/Ändern von HTML-Elementen und das Auslösen von Ereignissen, da seine Flexibilität und Browserunterstützung beispiellos waren.

Jetzt, mehr als ein Jahrzehnt später, sind viele Funktionen, die jQuery so beliebt gemacht haben, in den JavaScript-Standard aufgenommen worden:

Diese waren 2005 noch nicht allgemein verfügbar. Die Tatsache, dass sie heute vorliegen, wirft offensichtlich die Frage auf, warum wir überhaupt jQuery verwenden sollten. Tatsächlich fragen sich die Leute zunehmend , ob wir überhaupt jQuery verwenden sollen .

Wenn Sie also der Meinung sind, dass Sie JavaScript gut genug verstehen, um auf jQuery zu verzichten, tun Sie dies bitte! Fühlen Sie sich nicht gezwungen, jQuery zu verwenden, nur weil es so viele andere tun!

12
John Slegers

die Sizzle-Auswahl-Engine von jQuery kann querySelectorAll verwenden, sofern verfügbar. Es gleicht auch Inkonsistenzen zwischen Browsern aus, um einheitliche Ergebnisse zu erzielen. Wenn Sie nicht alle Funktionen von jQuery verwenden möchten, können Sie Sizzle auch separat verwenden. Dies ist ein ziemlich grundlegendes Rad zu erfinden.

Hier sind einige Beispiele aus der Quelle, die zeigen, welche Aufgaben jQuery (mit Sizzle) für Sie erledigt:

Safari-Macken-Modus:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Wenn dieser Schutz nicht funktioniert, handelt es sich um eine Version von Sizzle, die nicht mit querySelectorAll erweitert wurde. Weiter unten gibt es spezielle Handles für Inkonsistenzen in IE, Opera und dem Blackberry-Browser.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

Und wenn alles andere fehlschlägt, wird das Ergebnis von oldSizzle(query, context, extra, seed) zurückgegeben.

7
KGZM

Das liegt daran, dass jQuery viel mehr kann als querySelectorAll.

Erstens funktioniert jQuery (und insbesondere Sizzle) mit älteren Browsern wie IE7-8, die CSS2.1-3-Selektoren nicht unterstützen.

Außerdem bietet Ihnen Sizzle (die Selektor-Engine hinter jQuery) eine Reihe erweiterter Selektor-Instrumente, wie die Pseudo-Klasse :selected, Einen erweiterten :not()-Selektor und eine komplexere Syntax wie diese in $("> .children") und so weiter.

Und es funktioniert auch über mehrere Browser hinweg und bietet alles, was jQuery bieten kann (Plugins und APIs).

Ja, wenn Sie glauben, dass Sie sich auf einfache Klassen- und ID-Selektoren verlassen können, ist jQuery zu viel für Sie und Sie würden eine übertriebene Auszahlung zahlen. Wenn Sie dies jedoch nicht tun und alle Vorteile von jQuery nutzen möchten, verwenden Sie es.

6
MaxArt

Hier ist ein Vergleich, wenn ich dasselbe Attribut anwenden möchte, z. verstecke alle Elemente der Klasse "my-class". Dies ist ein Grund, jQuery zu verwenden.

jQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

JQuery ist bereits so beliebt, dass document.querySelector () sich genau wie $ () verhält. Stattdessen wählt document.querySelector () nur das erste übereinstimmende Element aus, wodurch es nur halbwegs nützlich ist.

5
Steven

In Bezug auf die Pflege des Codes gibt es mehrere Gründe, an einer weit verbreiteten Bibliothek festzuhalten.

Eine der wichtigsten ist, dass sie gut dokumentiert sind und Communitys wie ... say ... stackexchange haben, in denen Hilfe bei den Bibliotheken zu finden ist. Mit einer benutzerdefinierten codierten Bibliothek verfügen Sie über den Quellcode und möglicherweise über eine Anleitung, es sei denn, die Codierer haben mehr Zeit damit verbracht, den Code zu dokumentieren als ihn zu schreiben, was äußerst selten vorkommt.

Das Schreiben einer eigenen Bibliothek könnte für Sie funktionieren, aber der Praktikant am nächsten Schreibtisch könnte es einfacher haben, sich mit so etwas wie jQuery vertraut zu machen.

Nennen Sie es Netzwerkeffekt, wenn Sie möchten. Dies soll nicht heißen, dass der Code in jQuery überlegen ist. Nur dass die prägnante Art des Codes es einfacher macht, die Gesamtstruktur für Programmierer aller Schwierigkeitsgrade zu erfassen, schon allein deshalb, weil in der angezeigten Datei mehr funktionaler Code auf einmal sichtbar ist. In diesem Sinne sind 5 Codezeilen besser als 10.

Zusammenfassend sehe ich die Hauptvorteile von jQuery in prägnantem Code und der Allgegenwart.

4
Dom Day

Ich denke, die wahre Antwort ist, dass jQuery lange bevor querySelector/querySelectorAll In allen gängigen Browsern verfügbar war, entwickelt wurde.

Erstveröffentlichung von jQuery war im Jahr 2006 . Tatsächlich war sogar jQuery nicht das erste, das CSS-Selektoren implementierte .

IE war der letzte Browser um querySelector/querySelectorAll Zu implementieren. Seine 8. Version wurde 2009 veröffentlicht .

Daher ist die Auswahl von DOM-Elementen nicht mehr die größte Stärke von jQuery. Es sind jedoch noch viele Extras auf Lager, z. B. Verknüpfungen zum Ändern des CSS- und HTML-Inhalts von Elementen, Animationen, verbindliche Ereignisse und Ajax.

2
Vanuan

wie die offizielle Website sagt: "jQuery: Weniger schreiben, mehr tun, JavaScript-Bibliothek"

versuchen Sie, den folgenden jQuery-Code ohne Bibliothek zu übersetzen

$("p.neat").addClass("ohmy").show("slow");
2
simon xu

Alte Frage, aber ein halbes Jahrzehnt später lohnt es sich, noch einmal darüber nachzudenken. Hier gehe ich nur auf den Selektoraspekt von jQuery ein.

document.querySelector[All] wird von all aktuellen Browsern bis hinunter zu IE8 unterstützt, sodass die Kompatibilität kein Problem mehr darstellt. Ich habe auch keine nennenswerten Leistungsprobleme festgestellt (es sollte langsamer sein als document.getElementById, aber meine eigenen Tests legen nahe, dass es etwas schneller ist).

Wenn es darum geht, ein Element direkt zu manipulieren, ist es daher jQuery vorzuziehen.

Beispielsweise:

var element=document.querySelector('h1');
element.innerHTML='Hello';

ist sehr überlegen gegenüber:

var $element=$('h1');
$element.html('hello');

Um überhaupt etwas zu tun, muss jQuery hundert Codezeilen durchlaufen (ich habe einmal Code wie den obigen durchgesehen, um zu sehen, was jQuery tatsächlich damit gemacht hat). Dies ist eindeutig eine Zeitverschwendung für alle.

Die anderen erheblichen Kosten von jQuery sind die Tatsache, dass alles in ein neues jQuery-Objekt eingeschlossen wird. Dieser Overhead ist besonders verschwenderisch, wenn Sie das Objekt erneut auspacken oder eine der Objektmethoden verwenden müssen, um mit Eigenschaften umzugehen, die bereits für das ursprüngliche Element verfügbar sind.

Der Vorteil von jQuery liegt jedoch in der Art und Weise, wie mit Sammlungen umgegangen wird. Wenn die Anforderung darin besteht, set Eigenschaften mehrerer Elemente festzulegen, verfügt jQuery über eine integrierte each -Methode, die Folgendes ermöglicht:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Wenn Sie dies mit Vanilla JavaScript tun möchten, benötigen Sie Folgendes:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

was manche entmutigend finden.

jQuery-Selektoren unterscheiden sich ebenfalls geringfügig, moderne Browser (außer IE8) werden jedoch keinen großen Nutzen daraus ziehen.

In der Regel warne ich davor, jQuery für neue Projekte zu verwenden:

  • jQuery ist eine externe Bibliothek, die den Overhead des Projekts und Ihre Abhängigkeit von Dritten erhöht.
  • die jQuery-Funktion ist sehr teuer, was die Verarbeitung betrifft.
  • jQuery legt eine Methodik fest, die erlernt werden muss und mit anderen Aspekten Ihres Codes konkurrieren kann.
  • jQuery macht neue Funktionen in JavaScript nur langsam verfügbar.

Wenn keine der oben genannten Fragen zutrifft, tun Sie, was Sie wollen. Allerdings ist jQuery für die plattformübergreifende Entwicklung nicht mehr so ​​wichtig wie früher, da modernes JavaScript und CSS viel weiter gehen als früher.

Dies erwähnt keine anderen Funktionen von jQuery. Ich denke jedoch, dass auch sie einen genaueren Blick brauchen.

1
Manngo
$ ("# id") vs document.querySelectorAll ("# id")

Der Deal ist, dass mit der Funktion $ () ein Array erstellt und dann für Sie getrennt wird, aber mit document.querySelectorAll () wird ein Array erstellt und Sie müssen es aufteilen.

0
user8903269

Nur ein Kommentar dazu: Wenn Sie Material Design Lite verwenden, gibt jquery selector die Eigenschaft für Material Design aus irgendeinem Grund nicht zurück.

Zum:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Das funktioniert:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Das tut nicht:

$('#myinputfield').parentNode.MaterialTextfield.change();
0
Ashvin Bhuttoo