Native JavaScript -Äquivalente von JQuery -Methoden: DOM und Formen

Kernpunkte

• jQuery ist ein nützliches Instrument für Entwickler, die Legacy Internet Explorer unterstützen oder Bibliotheken wie jQuery länger als die Entwicklung von Anwendungen schreiben müssen. In den meisten anderen Fällen ist die Verwendung von nativem JavaScript jedoch effizienter, da es nicht erforderlich ist, große Bibliotheken wie JQuery zu laden.
• native JavaScript -Äquivalente von häufig verwendeten JQuery -Methoden wie DOM -Selektoren und DOM -Operationen werden normalerweise schneller und effizienter ausgeführt als ihre JQuery -Gegenstücke. Beispielsweise kann die Verwendung von document.getElementsByClassName oder document.getElementById viel schneller sein als die Verwendung von JQuery $() Wrapper.
• HTML5 bietet eine integrierte Unterstützung für eine Vielzahl gemeinsamer Eingabetypen, ohne zusätzliche JavaScript- oder JQuery-Code zur Formularvalidierung hinzuzufügen. Alte Browser, die diese neuen Typen nicht unterstützen, werden in Standard-Texteingangsfeldern wiederhergestellt und erfordern die serverseitige Überprüfung.

über meine jüngste "Benötigen Sie wirklich jQuery? 》 Artikel, die Debatte geht weiter, aber kurz gesagt, es gibt zwei Gründe, JQuery zu verwenden: 1. Sie müssen IE6/7/8 unterstützen (denken Sie daran, Sie können nicht auf JQuery 2.0 migrieren) oder 2. ohne jQuery, Sie werden, Sie werden nicht Verbringen Sie mehr als die Entwicklung. Die Anwendung braucht länger, um eine Bibliothek wie JQuery zu schreiben.

Bitte seien Sie pragmatisch für alle anderen Situationen. JQuery ist eine 270 KB Universal Library. Es ist unwahrscheinlich, dass Sie alle Funktionen benötigen, die es bietet, auch wenn Sie bestimmte Module weglassen, es ist immer noch ein großer Code -Stück. Sie können eine minifizierte Version von 30 KB vom CDN laden, aber der Browser muss die Verarbeitung und den Code auf jeder Seite beenden und analysieren, bevor Sie andere Aktionen ausführen. Dies ist die erste in einer Reihe von Artikeln, die native JavaScript -Äquivalente für häufig verwendete JQuery -Methoden zeigen. Vielleicht möchten Sie einige davon in kürzeren, ähnlichen Aliased-Funktionen einwickeln, aber Sie müssen sicherlich keine eigene jQuery-ähnliche Bibliothek erstellen.

DOM -Selektor

jQuery ermöglicht die DOM -Knotenauswahl mithilfe der CSS -Selektorsyntax, zum Beispiel:

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

natives Äquivalent:

var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll wird in allen modernen Browsern und IE8 implementiert (obwohl dies nur CSS2.1 -Selektoren unterstützt). JQuery bietet zusätzliche Unterstützung für fortschrittlichere Selektoren, wird jedoch zum größten Teil innerhalb der $() -Wrapper ausgeführt. Native JavaScript bietet auch vier Alternativen an, die mit ziemlicher Sicherheit schneller als document.querySelectorAll sind, wenn Sie sie verwenden können: querySelectorAll

1. document.querySelector(selector) - Holen Sie sich nur den ersten passenden Knoten
2. document.getElementById(idname) - Holen Sie sich einen einzelnen Knoten mit seinem ID -Namen
3. document.getElementsByTagName(tagname) - Holen Sie sich den Knoten, der dem Element entspricht (wie H1, p, stark usw.).
4. document.getElementsByClassName(class) - Holen Sie sich einen Knoten mit einem bestimmten Klassennamen

Die Methoden

getElementsByTagName und getElementsByClassName können auch auf einen einzelnen Knoten angewendet werden, um das Ergebnis nur auf Nachkommen zu beschränken, beispielsweise:

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

Lassen Sie uns einige Tests durchführen. Ich habe einige kleine Skripte geschrieben, um von meinem "Brauchen Sie wirklich JQuery?" 》 Suchen Sie alle Kommentarknoten 10.000 Mal im Artikel. Ergebnisse:

代码	时间
// jQuery 2.0<br>var c = $("#comments .comment");	4,649 ms
// jQuery 2.0<br>var c = $(".comment");	3,437 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll("#comments .comment");	1,362 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll(".comment");	1,168 ms
// 原生 getElementById / getElementsByClassName<br>var n = document.getElementById("comments");<br>var c = n.getElementsByClassName("comment");	107 ms
// 原生 getElementsByClassName<br>var c = document.getElementsByClassName("comment");	75 ms

Ich kann keine strengen Laborbedingungen beanspruchen, und es spiegelt auch nicht die Verwendung der realen Welt wider, aber in diesem Fall ist der native JavaScript 60-mal schneller. Es heißt auch, dass das Erhalten von Knoten nach ID, Tag oder Klasse normalerweise besser ist als querySelectorAll.

DOM -Operation

jQuery bietet verschiedene Möglichkeiten, dem DOM mehr hinzuzufügen, wie z. B.

// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");

Unter der Oberfläche verwendet JQuery die native innerHTML Methode, zum Beispiel:

var n = document.querySelectorAll("article#first p.summary");

Sie können auch DOM -Build -Technologie verwenden. Diese sind sicherer, aber selten schneller als innerHTML:

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

Wir können auch alle untergeordneten Knoten in jQuery löschen:

$("#container").append("<p>more content</p>");

native Äquivalente zur Verwendung innerHTML:

document.getElementById("container").innerHTML += "<p>more content</p>";

oder eine kleine Funktion:

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

Schließlich können wir das gesamte Element aus dem DOM in jQuery löschen:

$("#container").empty();

oder natives JavaScript:

document.getElementById("container").innerHTML = null;

skalierbare Vektorgrafiken (SVG)

Core JQuery Library wurde entwickelt, um aktuelle Dokumente zu verarbeiten. SVG hat auch DOM, aber JQuery bietet diesen Objekten keine direkte Manipulation, da es normalerweise Methoden wie createElementNS und getAttributeNS erfordert. Es funktioniert und es sind mehrere Plugins verfügbar, aber es ist effizienter, Ihren eigenen Code zu schreiben oder eine dedizierte SVG -Bibliothek wie Raphaël oder Svg.Js.

html5 Form

Auch die grundlegendsten Webanwendungen haben ein oder zwei Formulare. Sie sollten die Benutzerdaten immer auf der Serverseite überprüfen, aber im Idealfall können Sie sie durch Client -Überprüfung ergänzen, damit die Fehler vor dem Senden des Formulars erfasst werden können. Die Client -Überprüfung ist einfach: 1. Führen Sie eine Funktion aus, wenn das Formular eingereicht wird. 2. Wenn Sie auf Probleme stoßen, hören Sie auf, einen Fehler einzureichen, und zeigen Sie einen Fehler an.

Sie können JQuery verwenden. Sie können native JavaScript verwenden. Welches sollten Sie wählen? wählt weder . HTML5 unterstützt eine Vielzahl von häufig verwendeten Eingabetypen wie E -Mail, Telefon, URL, Nummer, Uhrzeit, Datum, Farbe und benutzerdefinierte Felder, die auf regulären Ausdrücken basieren. Wenn Sie beispielsweise einen Benutzer zwingen möchten, eine E -Mail -Adresse einzugeben, verwenden Sie bitte:

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

Sofern Sie nicht komplexere Funktionen benötigen (z. B. zwei oder mehr Felder oder Anzeigen benutzerdefinierter Fehlermeldungen), müssen zusätzliche JavaScript- oder JQuery -Code nicht erforderlich sind. Ältere Browser (einschließlich IE9 und unten) verstehen den neuen Typ nicht und werden in Standard -Texteingangsfeldern wiederhergestellt. Diese Benutzer fallen auf die serverseitige Überprüfung zurück. In meinem nächsten Beitrag werden wir uns native CSS -Klassenoperationen und -animationen ansehen.

FAQs über JQuery und native JavaScript

(Der FAQ -Teil wird hier weggelassen, da der Inhalt dieses Teils schwach mit dem Bild und dem Artikel des Artikels zusammenhängt und der Artikel länger ist, sodass er separat verarbeitet werden kann.)

Das obige ist der detaillierte Inhalt vonNative JavaScript -Äquivalente von JQuery -Methoden: DOM und Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!