Als Front-End-Entwickler oder Designer müssen Sie das DOCM-Modell (DOM) in Ihren t?glichen Projekten verwenden. In den letzten Jahren ist die Auswahl von Elementen und die Anwendung dynamischer Funktionen im DOM immer h?ufiger. Daher müssen wir das Wissen über die Verwendung von DOM -Elementen beherrschen, um Konflikte zu vermeiden und die Leistung zu optimieren. JQuery ist eine der beliebtesten und am h?ufigsten verwendeten JavaScript -Bibliotheken mit erweiterten DOM -Auswahl- und Filterfunktionen. In diesem Artikel werden wir untersuchen, wie Sie DOM -Elemente filtern, indem wir das tats?chliche Szenario mit Hilfe von JQuery berücksichtigen. Fangen wir an.

Schlüsselpunkte

• jQuery ist eine h?ufig verwendete JavaScript -Bibliothek, die erweiterte DOM -Auswahl- und Filterfunktionen bietet. Für Front-End-Entwickler ist es wichtig, ein tiefes Verst?ndnis der DOM-Elemente zu haben, um Konflikte zu vermeiden und die Leistung zu optimieren.
• HTML -Element -Tags, IDs, Klasse und Datenattribute werden verwendet, um Elemente im DOM -Baum auszuw?hlen. ID ist eine eindeutige Kennung, die Klasse wird verwendet, um Elemente zu stylen und Elemente zu filtern und auszuw?hlen, und das Datenattribut definiert private Daten für Elemente.
• jQuery erm?glicht die Auswahl eindeutiger Elemente, die Auswahl mehrerer Elemente mit Klassen, die Auswahl von Elementen mit mehreren Klassen, die Auswahl von Elementen mit Datenattributen und Ausw?hlen von Elementen mit mehreren Datenattributen. Es ist entscheidend, die Duplikation von Elementen mit derselben ID zu verhindern und Stilklassen für Auswahl und funktionale Zwecke zu unterscheiden.

Einführung in ID-, Klasse- und Datenattribute

Normalerweise verwenden wir HTML -Element -Tags, IDs, Klassen und Datenattribute, um Elemente im DOM -Baum auszuw?hlen. Die meisten Entwickler sind mithilfe von HTML -Tags zur Auswahl vertraut. Anf?nger missbrauchen jedoch h?ufig IDs, Klassen und Datenattribute, ohne ihre genaue Bedeutung und Notwendigkeit in verschiedenen Szenarien zu kennen. Bevor wir uns mit dem eigentlichen Szenario befassen, bestimmen wir zuerst jede dieser drei Optionen.

• id - verwendet als eindeutige Kennung im Dokument. Daher sollten wir nicht dieselbe ID für mehrere Elemente verwenden, auch wenn dies m?glich ist. Normalerweise verwenden wir Element -ID, um Elemente mit JQuery auszuw?hlen.
• Klasse - Wird verwendet, um Elemente mit CSS zu stylen. Klassen werden jedoch normalerweise verwendet, um Elemente zu filtern und auszuw?hlen, wenn eine ID nicht gefiltert werden kann.
• Datenattribute - verwendet, um private Daten für Elemente zu definieren. Wir k?nnen mehrere Datenattribute für ein einzelnes Element festlegen, um alle von der Front-End-Funktion erforderlichen Daten zu speichern.

Praktische Szenarien unter Verwendung von ID-, Klassen- und Datenattributen

In diesem Abschnitt werden wir einige h?ufige Anwendungsf?lle für die Verwendung dieser Filter- und Auswahloptionen abdecken und wie jede Option an verschiedene Szenarien angepasst werden kann. Tats?chlich sind die M?glichkeiten, diese Optionen in verschiedenen Szenarien zu verwenden, endlos. Daher werden wir den Umfang dieses Artikels berücksichtigen und uns auf die wichtigsten Inhalte konzentrieren.

Szene 1 - W?hlen Sie das eindeutige Element im Dokument

aus

Dies ist das grundlegendste und h?ufigste Szenario, mit dem wir jedes Element ausw?hlen. Die Auswahl von Formularwerten für die Validierung kann als gutes Beispiel für solche Szenarien angesehen werden. Wir verwenden die HTML -Element -ID, um Elemente auszuw?hlen, wie im folgenden JQuery -Code gezeigt:

$("#elementID").val();

Bei dieser Methode ist es wichtig, die Duplikation von Elementen mit derselben ID zu verhindern.

Szene 2 - W?hlen Sie mehrere Elemente mit der Klasse

aus

Wenn wir in einem Dokument mehrere Elemente in einem Dokument filtern m?chten, verwenden wir normalerweise Klassenattribute. Im Gegensatz zur ID k?nnen wir mehrere Elemente mit derselben CSS -Klasse verwenden. Typischerweise werden diese Arten ?hnlicher Elemente durch Schleifen erzeugt. Angenommen, wir haben eine Liste von Datens?tzen, die Benutzerdaten enthalten, wie im folgenden HTML -Code gezeigt. Wir haben eine "L?schen" -Taste, mit der Benutzer Datens?tze l?schen k?nnen, indem sie auf sie klicken.

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

Jetzt haben wir mehrere Instanzen ?hnlicher Elemente, sodass wir die genauen Datens?tze nicht mit ID filtern k?nnen. Lassen Sie uns sehen, wie Sie Zeilen mit der angegebenen CSS -Klasse filtern.

var rows = $(".user_data");

Im vorherigen Code enth?lt die Zeilenvariable alle drei Zeilen mit der Klasse user_data. Lassen Sie uns nun sehen, wie Sie Zeilen l?schen, wenn Sie mit dem Klassenauswahl auf eine Schaltfl?che klicken.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

In dieser Technik iterieren wir alle übereinstimmenden Elemente und führen die Funktion im aktuellen Projekt mit dem $ (this) -Objekt aus, das auf die geschaltete Schaltfl?che zeigt. Dies ist die am weitesten verbreitete Methode, um mit mehreren Elementen umzugehen. Schauen wir uns nun einige h?ufige Fehler für Neulinge in solchen Szenarien an.

• Verwenden Sie die ID anstelle von Klasse

Es gibt viele F?lle, in denen Entwickler dieselbe ID in einer Schleife verwenden, um einen ?hnlichen HTML -Code anstelle von Klassen zu generieren. Sobald die gleiche ID verwendet wird, wirkt sich nur das erste Element aus. Der Rest der Elemente wird nicht wie erwartet funktionieren. Stellen Sie also sicher, dass Sie eine dynamische ID in der Schleife erstellen und den Klassennamen für die Elementauswahl verwenden.

• Verwenden Sie Klassennamen anstelle von $ (dieses) Objekt

Ein weiterer Fehler, den viele Anf?nger machen, ist das mangelnde Verst?ndnis des Kontextes und der aktuellen Objektverwendung. Bei der Iterierung mehrerer Elemente k?nnen wir JQuery $ (dies) verwenden, um das aktuelle Element zu verweisen. Viele Entwickler verwenden Klassennamen in Schleifen und k?nnen daher nicht die erwarteten Ergebnisse erzielen. Verwenden Sie daher niemals Klassennamen in einer Schleife, wie im folgenden Code gezeigt:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

Dies ist eine weit verbreitete Methode zur Auswahl von Elementen. Daher ist es wichtig zu verstehen, wie diese Methode effektiv verwendet wird. Die CSS -Klasse wird für Stilzwecke verwendet. Aber hier verwenden wir es für Elementauswahlzwecke. Die Verwendung einer CSS -Klasse für Auswahlzwecke ist nicht der beste Weg, dies zu tun, manchmal kann dies zu Layoutkonflikten führen. Bei der Zusammenarbeit mit einem Team verwenden Entwickler beispielsweise nur CSS -Klassen, um dynamische Funktionen für JQuery zu liefern. Der Designer kann feststellen, dass diese Klassen nicht für Stylingzwecke verwendet werden. Daher ist es m?glich, sie zu l?schen, ohne ihre Bedeutung zu kennen. Daher ist es am besten, ein Pr?fix für CSS -Klassen zu verwenden, die nur für verschiedene Funktionen und nicht für Stilzwecke verwendet werden.

Szene 3 - W?hlen Sie Elemente mit mehreren Klassen

aus

Einige Anwendungen und Websites basieren stark auf JavaScript und bieten eine hochdynamische Client -Funktionalit?t. In diesem Fall k?nnen wir eine gro?e Anzahl von Klassen und IDs verwenden, um Funktionen zu filtern, auszuw?hlen und anzuwenden. Angenommen, wir haben eine Liste von Benutzerdatens?tzen, die nach der Rolle im Client filtriert werden müssen. Wir k?nnen Rollen als CSS -Klassen definieren, um den Filterprozess zu vereinfachen. Betrachten Sie den folgenden Code -Snippet:

$("#elementID").val();

Angenommen, wir m?chten Benutzer mit Entwickler- und Designerrollen erwerben. In diesem Fall k?nnen wir mehrere CSS -Klassen verwenden, wie im folgenden Code gezeigt:

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

Wir k?nnen eine beliebige Anzahl von Klassen verwenden, um mehrere Klassen auf demselben Element eins nacheinander zu entsprechen. Stellen Sie sicher, dass Sie keine Leerzeichen zwischen Klassen verwenden, da dies die Bedeutung und das Ergebnis der Auswahl ?ndert. Betrachten Sie die gleiche Codezeile mit Leerzeichen:

var rows = $(".user_data");

Der Code sucht jetzt nach Designer mit übergeordneten Elementen, die als Entwickler bezeichnet werden. Gew?hnen Sie sich also an den Unterschied zwischen diesen beiden Implementierungen und verwenden Sie ihn mit Bedacht. In ?hnlicher Weise k?nnen wir IDs und Klassen mischen, wenn wir diese Technik verwenden.

Szene 4 - W?hlen Sie das Element mit Datenattributen

aus

HTML5 führt benutzerdefinierte Dateneigenschaften ein, bei denen wir Daten zu HTML -Elementen definieren k?nnen. Diese Datenattribute haben einen bestimmten Satz von Konventionen und gelten als private Daten. Jetzt k?nnen wir das Datenattribut verwenden, um Daten in Bezug auf jedes Element zu speichern, anstatt mehrere AJAX -Anforderungen an den Server zu erstellen. Sehen wir uns an, wie Sie Szenario 2 mit benutzerdefinierten Dateneigenschaften anstelle von CSS -Klassen implementieren.

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

Wie Sie sehen, k?nnen wir Dateneigenschaften anstelle von CSS -Klassen verwenden, um dasselbe Ergebnis zu erzielen. JQuery bietet erweiterte Attributauswahlern, um benutzerdefinierte Datenattribute zu unterstützen. Betrachten wir also einige erweiterte Selektoroptionen für benutzerdefinierte Eigenschaften. Angenommen, wir speichern Benutzer -E -Mails als benutzerdefinierte Eigenschaften und m?chten Benutzer basierend auf bestimmten Kriterien in der E -Mail ausw?hlen. Betrachten Sie den folgenden Code -Snippet mithilfe von Dateneigenschaften:

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

W?hlen Sie das Element aus, das "Google Mail" in der E -Mail

enth?lt

<ul>
  <li class='role-developer role-designer'>Mark</li>
  <li class='role-developer'>Simon</li>
  <li class='role-developer role-manager'>Kevin</li>
</ul>

W?hlen Sie ein Element mit der E -Mail -Adresse "UK"

ein Element aus

var selected_users = $('.role-developer.role-designer');

W?hlen Sie ein Element für ungültige E -Mails ohne das Symbol "@"

var selected_users = $('.role-developer .role-designer');

aus

für ungültige E -Mails Wie Sie sehen, sind Datenattribute leistungsstark bei der Behandlung von Daten im Zusammenhang mit HTML-Elementen, und JQuery bietet umfassende Unterstützung durch seine integrierten Funktionen. Sie finden die vollst?ndige Referenz für Eigenschaftswahl unter

http://www.miracleart.cn/link/2705e8fde87cd2883e9fc1f00335685f

.

Szene 5 - W?hlen Sie Elemente mit mehreren Datenattributen

aus Dies ?hnelt dem, was wir in Szene 3 besprochen haben und einige Erweiterungen haben. In erweiterten Szenarien kann die Verwendung von CSS -Klassen zum Umgang mehrerer Datenwerte kompliziert werden. Lassen Sie uns also sehen, wie mehrere Datenattribute für die Auswahl verwendet werden.

$("#elementID").val();

Hier k?nnen wir die Existenz mehrerer Datenattribute überprüfen und durch teilweise Suchwerte ausw?hlen. Jetzt sollten Sie in der Lage sein, den Unterschied zwischen CSS -Klassen und Datenattributen in der Elementauswahl zu verstehen. Datenattribute bieten eine M?glichkeit, die Verarbeitung von Elementardaten zu organisieren. Die hier diskutierten Techniken k?nnen in Verbindung mit anderen JQuery -Filtern verwendet werden, um jede Art von fortgeschrittener Situation zu begegnen, und es ist wichtig, sie mit Bedacht zu verwenden.

Zusammenfassung

Dieser Artikel soll Anf?ngern helfen, die Grundlagen von Element -IDs, Klassen und benutzerdefinierten Dateneigenschaften zu verstehen. Wir diskutieren jeden von ihnen mithilfe von JQuery-integrierten Funktionen durch tats?chliche Szenarien. Dabei haben wir auch einige Fehler von Newbies -Entwicklern identifiziert. Lassen Sie uns die in diesem Artikel er?rterten wichtigsten Punkte überprüfen, um einen nützlichen DOM -Auswahlhandbuch zu erstellen:

• Verwenden Sie IDs, wann immer m?glich für die Auswahl der Elemente, da sie im Dokument eine eindeutige Kennung liefert.
• Verwenden Sie Klasse oder Datenattribute in mehreren Elementszenarien, anstatt sich auf Element -IDs zu verlassen.
• Stellen Sie sicher, dass Sie zwischen Stilklassen und Klassen zu Selektions- und Funktionszwecken unterscheiden.
• Verwenden Sie Datenattribute in komplexen Szenarien, da Klassen nicht dazu gedacht sind, Daten über Elemente bereitzustellen.

Ich hoffe, dieser Artikel kann Ihnen eine gute Einführung in die Elementauswahl bieten. Wenn Sie bessere Anleitungen und Elementauswahltechniken haben, k?nnen Sie im Kommentarbereich gerne in den Kommentaren teilen.

FAQs über JQuery DOM -Auswahl (FAQ)

Was ist das DOMM -Modell (DOM) in JQuery?

Das Dokumentobjektmodell (DOM) in JQuery ist die Programmierschnittstelle für HTML- und XML -Dokumente. Es repr?sentiert die Struktur eines Dokuments und bietet eine M?glichkeit, Inhalte und Struktur zu manipulieren. Mit DOM k?nnen Programmierer Elemente und Inhalte in HTML- und XML -Dokumenten erstellen, navigieren und ?ndern.

Wie vereinfacht man DOM -Operationen in JQuery?

jQuery vereinfacht die DOM-Operationen, indem eine benutzerfreundliche API für Ereignisse verarbeitet, Animationen erstellt und AJAX-Anwendungen entwickelt werden. JQuery bietet auch eine einfache Syntax, um DOM zu navigieren und zu manipulieren. Es wird die zahlreichen Komplexit?t des Umgangs mit RAW -JavaScript und DOM -APIs abstrahiert und es den Entwicklern erleichtert, HTML -Dokumente zu verwenden.

Was sind die verschiedenen Arten von DOM -Selektoren in JQuery?

In JQuery befinden sich verschiedene Arten von DOM-Selektoren, einschlie?lich Elemente-Selektoren, ID-Selektoren, Klassenauswahl, Attribut-Selektoren und Pseudoklasse-Selektoren. Element Selector w?hlt Elemente basierend auf ihrem Elementnamen aus. Der ID -Selektor w?hlt Elemente basierend auf seinem ID -Attribut aus. Der Klassenw?hler w?hlt Elemente basierend auf seinen Klassenattributen aus. Der Attribut -Selektor w?hlt Elemente basierend auf Attributen oder Attributwerten aus. Der Pseudo-Klasse-Selektor w?hlt Elemente basierend auf einem bestimmten Zustand aus.

Wie w?hlst du ein Element nach seiner ID in JQuery aus?

Um ein Element nach seiner ID in JQuery auszuw?hlen, verwenden Sie das Pfundzeichen (#), gefolgt von der ID des Elements. Um beispielsweise ein Element mit der ID "Myelement" auszuw?hlen, verwenden Sie $ ("#myelement").

Wie w?hlst du Elemente nach ihrer Klasse in JQuery aus?

Verwenden Sie die Elemente nach ihrer Klasse in JQuery, verwenden Sie die Punktnotation (.), Gefolgt vom Klassennamen. Um beispielsweise ein Element mit der Klasse "MyClass" auszuw?hlen, verwenden Sie $ (". MyClass").

Was sind Eigenschaftsauswahlern in JQuery und wie funktionieren sie?

Der Attribut -Selektor in JQuery w?hlt Elemente basierend auf seinem Attribut- oder Attributwert aus. Sie sind in quadratischen Klammern geschrieben ([]). Um beispielsweise alle Elemente mit dem Attribut "Data-Beispiel" auszuw?hlen, verwenden Sie $ ("[Data-Exampe]").

Wie w?hlst du mehrere Elemente in JQuery aus?

Sie k?nnen mehrere Elemente in JQuery ausw?hlen, indem Sie jeden Selektor mit Kommas trennen. Um beispielsweise alle Elemente mit der Klasse "Myclass" und allen Elementen mit "Myid" auszuw?hlen, verwenden Sie $ (". MyClass, #myid").

Was ist ein Pseudoklasse-Selektor in JQuery?

Der Selektor der Pseudo-Klasse in JQuery w?hlt Elemente basierend auf einem bestimmten Zustand aus. Der Pseudo-Klasse-Selektor ": Checked" w?hlt beispielsweise alle ausgew?hlten Kontrollk?stchen oder Optionsfelder aus.

Wie kann ich JQuery verwenden, um DOM zu bedienen?

jQuery bietet verschiedene Methoden zur Manipulation von DOM, wie z. Mit diesen Methoden k?nnen Sie Elemente in die DOM einfügen, ersetzen und l?schen.

Wie geht JQuery mit Ereignissen in DOM um?

jQuery bietet Methoden zum Umgang mit Ereignissen im DOM, wie .Click (), .dblcick (), .hover (), .mouseDown (), .mouseUp (), .mousemove (), .mouseout (), . . Mit diesen Methoden k?nnen Sie definieren, was passiert, wenn diese Ereignisse bei Elementen im DOM auftreten.

Das obige ist der detaillierte Inhalt vonAnf?ngerleitfaden zur DOM -Auswahl mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!