Was ist jQuery querySelector?

jQuery querySelector wählt oder findet ein DOM-Element (Document Object Model) in einem HTML-Dokument. Mit JQuery können wir die HTML-Elemente bearbeiten. Es wird verwendet, um ein oder mehrere HTML-Elemente basierend auf ID, Name, Typen, Attributen, Klasse, Attributwerten usw. auszuwählen. Es basiert auf vorhandenen CSS-Selektoren.

Einführung in querySelector

Die querySelector () -Methode gibt nur das erste Element zurück, das mit einem oder mehreren angegebenen CSS-Selektoren im Dokument übereinstimmt. Wenn eine ID im Dokument mehrmals verwendet wird, wird das erste übereinstimmende Element zurückgegeben.

Syntax von querySelector

Nachfolgend finden Sie die Syntax von querySelector:

  • querySelector (CSS-Selektoren)
  • Es gibt das erste Element zurück, das den angegebenen Selektoren entspricht.
  • Um alle übereinstimmenden Elemente zurückzugeben, verwenden wir die querySelectorAll () -Methode.
  • Die CSS-Selektoren, die wir übergeben, sollten vom Typ string sein.
  • Es ist obligatorisch, die CSS-Selektoren zu übergeben.
  • Die Zeichenfolge, die wir übergeben, muss ein gültiger CSS-Selektor sein.
  • Wenn die übergebene Zeichenfolge ungültig ist, wird eine SYNTAX_ERRexception ausgelöst.
  • Wenn keine Übereinstimmung gefunden wird, wird null zurückgegeben.
  • Der Abgleich des ersten Elements erfolgt unter Verwendung einer Vorbestellungsdurchquerung des Dokuments mit der Tiefe zuerst.
  • Gibt einen oder mehrere CSS-Selektoren an, die dem Element entsprechen.
  • Trennen Sie mehrere Selektoren mit einem Komma.
  • Zeichen, die nicht Teil der Standard-CSS-Syntax sind, müssen mit einem Backslash-Zeichen maskiert werden.

Beispiele für die querySelector () -Methode

Unten sind die Beispiele für querySelector () -Methoden aufgeführt:

In jQuery können Sie Elemente auf einer Seite unter Verwendung vieler verschiedener Eigenschaften des Elements auswählen, z. B. Typ, Klasse, ID, Besitz von Attributen, Attributwerte usw. Nachfolgend finden Sie das Beispiel für JQuery unter Verwendung von Typ.

Beispiel 1 - Auswahl nach Typ

1. Der folgende Abfrageselektor enthält zwei <a>

Erklärung des obigen Codes: In diesem Beispiel können wir beobachten, dass wir zwei Ankertags verwendet haben und innerhalb des Ankertags den Hyperlink von zwei Bildern übergeben haben. Mit dem querySelector ("a"). Style.backgroundColor = "red"; Wir haben das Anchor-Tag ("a") an den querySelector übergeben. Wenn wir in der querySelector () -Methode mehrere Selektoren übergeben, wird das erste Element zurückgegeben, das den angegebenen Selektoren entspricht. Obwohl es zwei Ankertags enthält, wendete das erste gefundene Ankertag seinen Stil an. BackgroundColor = "red"; bis nur für das erste Ankertag.

Ausgang 1: Vor dem Klicken auf die Schaltfläche ("Klick mich").

Ausgang 2: Nach Anklicken der Schaltfläche („Klick mich“) wechselt die Hintergrundfarbe der Blume auf „rot“.

Ausgabe 3: Durch Anklicken der Hyperlinks werden die jeweiligen Bilder geöffnet.

2. Dieser querySelector enthält auch zwei. Im folgenden Beispiel habe ich die Reihenfolge des Bildes geändert. Ich habe zuerst den Wüsten-Hyperlink und dann den Hyperlink der Blume beibehalten.

Erklärung des obigen Codes: Auch in diesem Beispiel können wir beobachten, dass wir zwei Ankertags verwendet haben und innerhalb des Ankertags den Hyperlink von zwei Bildern übergeben haben. Mit dem querySelector ("a"). Style.backgroundColor = "red"; Wir haben das Ankertag ("a") an den Abfrageselektor übergeben. Dieses Mal wird im querySelector () zuerst der Hyperlink "Desert" ermittelt, während wir die Reihenfolge geändert haben. Obwohl es zwei Ankertags enthält, wendete das erste gefundene Ankertag seinen Stil an. BackgroundColor = "red"; bis nur für das erste Ankertag.

Ausgabe 1: In der Ausgabe können wir beobachten, dass das erste Bild Wüste ist. Aufgrund der querySelector () -Methode wurde die Hintergrundfarbe der Wüste in Rot geändert.

Ausgang 2: Mit Klick auf den Hyperlink wird das Wüstenbild geöffnet.

Ausgabe 3: Wenn Sie auf den Hyperlink der Blume klicken, wird das Blumenbild geöffnet.

Beispiel # 2 - Auswahl nach Klasse

In diesem Beispiel wählen wir anhand des Klassennamens aus.

Erklärung des obigen Codes: Im obigen Beispiel verwenden wir den Klassennamen und hier ist der Klassenname Selector. Sowohl für h2 (Überschriften-Tag) als auch für das Absatz-Tag wird derselbe Klassenname übergeben. Für die querySelector () -Methode übergeben wir den Klassennamen, der für den bestimmten Klassennamen im Programm überprüft wird. Jetzt hat es die Tags gefunden, die den gleichen Klassennamen wie erwähnt haben. Unter Verwendung der Durchquerung des Dokuments mit der Tiefe vor der Bestellung wird der Abgleich des ersten Elements durchgeführt. Das erste Element im Beispiel, das den Klassennamen als Selector enthält, ist h2 (Heading Tag). Die querySelector () -Methode ruft das h2-Tag ab und wendet nach style.backgroundColor die jeweilige Hintergrundfarbe auf das h2-Tag an.

Ausgabe 1: Vor dem Klicken auf die Schaltfläche („Klick mich“) ändert der Inhalt des h2-Tags die Hintergrundfarbe nicht in blau.

Ausgabe 2: Nach dem Klicken auf die Schaltfläche („Klick mich“) ändert der Inhalt des h2-Tags seine Hintergrundfarbe in blau.

Beispiel # 3 - Auswahl nach ID

In diesem Beispiel wählen wir mit id aus.

Erklärung des obigen Codes: In dem Beispiel wählen wir mit id aus, wobei id hier Selector ist. Für die querySelector () -Methode übergeben wir die ID, die für den bestimmten ID-Namen im Programm überprüft wird. Jetzt hat es das Tag gefunden, das den gleichen ID-Namen wie erwähnt hat. Unter Verwendung der Durchquerung des Dokuments mit der Tiefe vor der Bestellung wird der Abgleich des ersten Elements durchgeführt. Das Element im Beispiel, das den ID-Namen als Selektor enthält, ist ein Absatz-Tag. Die querySelector () -Methode ruft das Absatz-Tag ab und wendet die jeweiligen Änderungen entsprechend dem genannten Code auf den Inhalt an.

Ausgabe 1: Bevor Sie auf die Schaltfläche "click me" klicken, lautet der Inhalt des Absatz-Tags "This is ap element with id =" selector ".

Ausgabe 2: Nach dem Klicken auf die Schaltfläche „Klick mich“ wird der Inhalt des Absatz-Tags in „Änderung im Text“ geändert.

Verwendung von jQuery querySelector

Im Folgenden werden die beiden Verwendungszwecke von querySelector erläutert:

  • Die Codes von jQuery sind präziser, kürzer und einfacher als die Standard-JavaScript-Codes. Es kann eine Vielzahl von Funktionen ausführen.
  • Der Aufruf von querySelector () gibt das erste Element zurück, während es ein Element auswählt, sodass es schneller und auch kürzer zu schreiben ist.

Empfohlene Artikel

Dies ist eine Anleitung zu jQuery querySelector. Hier diskutieren wir, was jQuery querySelector ist, eine Einführung in querySelector, die Syntax und das Beispiel von Jquery unter Verwendung von type. Sie können auch unsere anderen verwandten Artikel durchgehen, um mehr zu erfahren -

  1. jQuery-Ereignisse
  2. Verwendung von JQuery
  3. jQuery-Methoden
  4. Wie installiere ich Jquery?
  5. HTML-Ereignisse
  6. Top 5 HTML-Ereignisattribute mit Beispielen
  7. Werfen vs wirft | Die 5 wichtigsten Unterschiede, die Sie kennen sollten
  8. Leitfaden zu JQuery-Fortschrittsbalken-Beispielen

Kategorie:

Software-Entwicklung