Anfängerleitfaden zur DOM -Auswahl mit JQuery

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:

<code class="language-javascript">$("#elementID").val();</code>

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.

<code class="language-html"><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></code>

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.

<code class="language-javascript">var rows = $(".user_data");</code>

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.

<code class="language-javascript">$(".user_data").click(function(){
  $(this).parent().parent().remove();
});</code>

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:

<code class="language-javascript">$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});</code>

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:

<code class="language-javascript">$("#elementID").val();</code>

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:

<code class="language-html"><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></code>

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:

<code class="language-javascript">var rows = $(".user_data");</code>

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.

<code class="language-javascript">$(".user_data").click(function(){
  $(this).parent().parent().remove();
});</code>

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:

<code class="language-javascript">$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});</code>

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

enthält

<code class="language-html"><ul>
  <li class="role-developer role-designer">Mark</li>
  <li class="role-developer">Simon</li>
  <li class="role-developer role-manager">Kevin</li>
</ul></code>

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

ein Element aus

<code class="language-javascript">var selected_users = $('.role-developer.role-designer');</code>

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

<code class="language-javascript">var selected_users = $('.role-developer .role-designer');</code>

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

https://www.php.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.

<code class="language-javascript">$("#elementID").val();</code>

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!