5 Tipps für effizientere JQuery -Selektoren

Der Kern von JQuery liegt in der Abfrage. Es verwendet die CSS -Selektorsyntax, um DOM -Elemente zu finden und Methoden für diese Elementssammlungen auszuführen. JQuery verwendet native Browser -API -Methoden, um DOM -Sammlungen abzurufen. Neuere Browser unterstützen getElementsByClassName, querySelector und querySelectorAll, die die CSS -Syntax analysieren können. Ältere Browser bieten jedoch nur getElementById und getElementByTagName an. Im schlimmsten Fall muss JQuery's Sizzle -Motor die Selektorschnur analysieren und nach passenden Elementen suchen. Hier sind fünf Tipps, mit denen Sie Ihren JQuery -Selektor optimieren können:

1. bevorzugt ID -Selektor

HTML -ID -Attribute sind auf jeder Seite eindeutig, und sogar ältere Browser können einzelne Elemente sehr schnell lokalisieren:

$("#myelement");

2. Vermeiden Sie die Verwendung von nur Klassenauswahlern

Die folgenden Klassenauswahlern laufen in modernen Browsern sehr schnell:

$(".myclass");

Aber in älteren Browsern wie IE6/7 und Firefox 2 muss JQuery jedes Element auf der Seite überprüfen, um festzustellen, ob "Myclass" angewendet wird. Wenn wir es mit einem Tag -Namen qualifizieren, ist der Selektor effizienter, zum Beispiel:

$("div.myclass");

jQuery kann jetzt die Suche auf Divelemente beschränken.

3. Halten Sie den Selektor einfach

Vermeiden Sie übermäßig komplexe CSS -Selektoren. Sofern Ihr HTML -Dokument nicht äußerst komplex ist, ist es selten, dass mehr als zwei oder drei Qualifikationen erforderlich sind. Betrachten Sie die folgenden komplexen Selektoren:

$("body #page:first-child article.main p#intro em");

p#intro muss eindeutig sein, sodass der Selektor vereinfacht werden kann zu:

$("p#intro em");

4. Verbesserung der Selektorspezifität von links nach rechts

Es ist nützlich zu verstehen, wie JQuery's Selector Engine funktioniert. Es funktioniert aus dem letzten Selektor, also in älteren Browsern eine solche Abfrage:

$("p#intro em");

lädt alle em Elemente in ein Array. Anschließend iteriert es nach oben durch den übergeordneten Knoten jedes Knotens und lehnt die Knoten ab, die nicht gefunden werden können. Wenn auf der Seite Hunderte von p#intro Tags vorhanden sind, ist die Abfrage besonders ineffizient. Abhängig von Ihrer Dokumentation können Sie die Abfrage optimieren, indem Sie zuerst den qualifiziertesten Selektor abrufen. Es kann dann als Ausgangspunkt für den Subselektor verwendet werden, zum Beispiel: em

$("em", $("p#intro")); // 或
$("p#intro").find("em");

5. Vermeiden Sie die Duplikation des Selektors

Es ist selten, denselben Selektor zweimal zu verwenden. Der folgende Code wählt jedes P -Tag dreimal aus:

$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

Denken Sie daran, dass JQuery Kettenoperationen unterstützt. Daher kann der gleiche Code neu geschrieben werden, um nur für einen einzelnen Selektor zu gelten:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

Wenn Sie mehrmals dieselbe Elemente verwenden müssen, sollten Sie das JQuery -Objekt in einer Variablen zwischenspeichern, z. B.

$("#myelement");

Im Gegensatz zu Standard -DOM -Sammlungen sind JQuery -Sammlungen nicht dynamisch und Objekte werden nicht aktualisiert, wenn Absatz -Tags aus dem Dokument hinzugefügt oder entfernt werden. Sie können diese Einschränkung lösen, indem Sie eine DOM -Sammlung erstellen und bei Bedarf an die JQuery -Funktion weitergeben, z. B.

$(".myclass");

Haben Sie andere Tipps zur Optimierung von JQuery Selector?

häufig gestellte Fragen zu effizienten jQuery -Selektoren (FAQ)

(Der FAQ-Teil wird hier weggelassen, da er stark mit dem ursprünglichen FAQ-Inhalt dupliziert wird, ist die Pseudooriginalität schwierig und zu lang. Einige FAQ-Probleme können nach Bedarf optional aufbewahrt oder umgeschrieben werden.)

Das obige ist der detaillierte Inhalt von5 Tipps für effizientere JQuery -Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!