Valg af elementer med jQuery

Vi introducerer css()-metoden i de følgende lektioner. 

Indtil videre skal du blot vide, at css()-metoden bruges til at definere elementets typografi

Elementet med det ønskede id kan vælges ved hjælp af #-operatoren (hashtag). Som du ved, kan den samme id-værdi kun tildeles ét element på HTML-siden.

I eksemplet nedenfor vælges det element, der har id'et title, og dets farve ændres.

<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>

Elementet med det ønskede tag kan vælges ved blot at bruge taggets navn

I eksemplet nedenfor vælges det element, der har span-tagget, og dets farve ændres.

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

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

Hvis vi vil vælge et elements børn, bruger vi større end-operatoren (>).

I eksemplet nedenfor vælges alle børnene af det ønskede element.

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

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

Vi kan vælge det ønskede element ved at kontrollere, om en attribut for et element har en værdi.

I eksemplet nedenfor vælges de elementer, der har <a>-tagget og target-attributten med værdien _blank.

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

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

jQuery gør det lettere at vælge elementer i DOM'en ved at tilbyde en række metoder samt XPath-selektorer.

Lad os lære dem at kende.

parent()-metoden

Vi kan vælge det ønskede elements parent-element ved hjælp af parent()-metoden, som leveres af jQuery.

I eksemplet nedenfor vælges elementets parent-element, og parent-elementets tekstfarve ændres.

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

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

children()-metoden

Vi kan vælge alle børnene af det ønskede element ved hjælp af children()-metoden, som leveres af jQuery.

I eksemplet nedenfor vælges alle elementets børn, og børnenes tekstfarve ændres.

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

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

parents()-metoden

Vi kan vælge det ønskede elements overordnede elementer ved hjælp af parents()-metoden, som leveres af jQuery.

I eksemplet nedenfor vælges elementets overordnede element, og det overordnede elements tekstfarve ændres.

Forskellen på denne metode og de andre metoder, vi har lært, er, at den kan have en parameter.

Derfor sender vi en XPath-selektor som parameter for at angive, hvilken forfader der skal vælges.

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

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

next()-metoden

next()-metoden vælger det ønskede elements næste søskendeelement.

I eksemplet nedenfor vælges det første søskendeelement efter elementet med a-tagget.

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

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

nextAll()-metoden

nextAll()-metoden bruges til at vælge det ønskede elements næste søskendeelementer.

I eksemplet nedenfor vælges alle søskendeelementer efter elementet med div-tagget.

<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()-metoden

Du kan vælge alle det ønskede elements søskendeelementer ved hjælp af siblings()-metoden.

I eksemplet nedenfor vælges alle søskendeelementer til elementer med p-tagget.

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

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

prev()-metoden

prev()-metoden bruges til at vælge et elements forrige søskendeelement.

Vælger det første søskendeelement før elementet med a-tagget.

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

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

prevAll()-metoden

prevAll()-metoden bruges til at vælge det ønskede elements tidligere søskendeelementer.

I eksemplet nedenfor vælges alle søskendeelementer før elementet med div-tagget.

<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>

Tillykke 🎉

I dette afsnit lærte vi at vælge DOM-elementer.

I næste afsnit fortsætter vi med at lære om DOM-manipulation.