Elemente mit jQuery auswählen

Hallo,

jQuery verwendet die XPath-Syntax, um DOM-Elemente auszuwählen.

Wenn Sie also CSS verwenden oder bereits XPath zur Auswahl von Knoten in XML verwendet haben, wissen Sie bereits, wie man Elemente mit jQuery auswählt!

Setzen wir sie mit jQuery ein 🚀

Klassenselektor

Das Element mit der gewünschten Klasse wird mithilfe des Punktoperators (.) ausgewählt.

Im folgenden Beispiel werden alle Elemente ausgewählt, die die Klasse title besitzen, und ihre Farbe wird geändert. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

In den folgenden Lektionen stellen wir die css()-Methode vor. 

Merken Sie sich vorerst nur, dass die css()-Methode zum Festlegen des Stils eines Elements verwendet wird.

ID-Selektor

Das Element mit der gewünschten ID kann mithilfe des #-Operators (Rautezeichen) ausgewählt werden. Wie wir wissen, kann derselbe ID-Wert nur einem Element auf der HTML-Seite zugewiesen werden.

Im folgenden Beispiel wird das Element mit der ID title ausgewählt und seine Farbe geändert.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

Tag-Selektor

Das Element mit dem gewünschten Tag kann einfach anhand des Tagnamens ausgewählt werden.

Im folgenden Beispiel wird das Element mit dem span-Tag ausgewählt und seine Farbe geändert.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Kindselektor

Wenn wir die untergeordneten Elemente eines Elements auswählen möchten, verwenden wir den Größer-als-Operator (>).

Im folgenden Beispiel werden alle untergeordneten Elemente des gewünschten Elements ausgewählt.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Attributselektor

Wir können das gewünschte Element auswählen, indem wir prüfen, ob das Attribut eines Elements einen Wert besitzt.

Im folgenden Beispiel werden die Elemente ausgewählt, die das <a>-Tag und das target-Attribut mit dem Wert _blank besitzen.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery erleichtert die Auswahl im DOM, indem es neben XPath-Selektoren auch einige Methoden bereitstellt.

Sehen wir uns diese an.

parent()-Methode

Wir können das übergeordnete Element des gewünschten Elements mithilfe der von jQuery bereitgestellten parent()-Methode auswählen.

Im folgenden Beispiel wird das übergeordnete Element des Elements ausgewählt und seine Textfarbe geändert.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

children()-Methode

Wir können alle untergeordneten Elemente des gewünschten Elements mithilfe der von jQuery bereitgestellten children()-Methode auswählen.

Im folgenden Beispiel werden alle untergeordneten Elemente des Elements ausgewählt und die Textfarbe der untergeordneten Elemente geändert.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

parents()-Methode

Wir können die übergeordneten Elemente des gewünschten Elements mithilfe der von jQuery bereitgestellten parents()-Methode auswählen.

Im folgenden Beispiel wird das übergeordnete Element des Elements ausgewählt und seine Textfarbe geändert.

Der Unterschied dieser Methode zu den anderen Methoden, die wir kennengelernt haben, besteht darin, dass sie einen Parameter annehmen kann.

Wir übergeben daher einen XPath-Selektor als Parameter, um festzulegen, welcher Vorfahr ausgewählt werden soll.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

next()-Methode

Die next()-Methode wählt das nächste gleichrangige Element des gewünschten Elements aus.

Im folgenden Beispiel wird das erste nächste gleichrangige Element des Elements mit dem Tag a ausgewählt.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

nextAll()-Methode

Die nextAll()-Methode wird verwendet, um die nachfolgenden gleichrangigen Elemente des gewünschten Elements auszuwählen.

Im folgenden Beispiel werden alle gleichrangigen Elemente ausgewählt, die nach dem Element mit dem div-Tag stehen.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

siblings()-Methode

Sie können alle gleichrangigen Elemente des gewünschten Elements mithilfe der siblings()-Methode auswählen.

Im folgenden Beispiel werden alle gleichrangigen Elemente von Elementen mit dem p-Tag ausgewählt.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

prev()-Methode

Die prev()-Methode wird verwendet, um das vorherige gleichrangige Element eines Elements auszuwählen.

Es wird das erste vorherige gleichrangige Element des Elements mit dem Tag a ausgewählt.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

prevAll()-Methode

Die prevAll()-Methode wird verwendet, um die vorherigen gleichrangigen Elemente des gewünschten Elements auszuwählen.

Im folgenden Beispiel werden alle gleichrangigen Elemente ausgewählt, die vor dem Element mit dem div-Tag stehen.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Herzlichen Glückwunsch 🎉

In diesem Abschnitt haben wir gelernt, DOM-Elemente auszuwählen.

Im nächsten Abschnitt setzen wir das Lernen über DOM-Manipulationen fort.