Selezione degli elementi con jQuery

Salve,

jQuery utilizza la sintassi XPath per selezionare gli elementi del DOM.

Quindi, se utilizza CSS o ha già utilizzato XPath per selezionare nodi in XML, sa già come selezionare gli elementi con jQuery!

Utilizziamoli con jQuery 🚀

Selettore di classe

L'elemento appartenente alla classe desiderata viene selezionato utilizzando l'operatore punto (.).

Nell'esempio seguente verranno selezionati tutti gli elementi che hanno la classe title e ne verrà modificato il colore. 

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

Presentiamo il metodo css() nelle lezioni successive. 

Per ora, sappia soltanto che il metodo css() viene utilizzato per definire lo stile dell'elemento

Selettore di ID

L'elemento con l'ID desiderato può essere selezionato utilizzando l'operatore # (cancelletto). Come sappiamo, lo stesso valore di ID può essere assegnato a un solo elemento nella pagina HTML.

Nell'esempio seguente verrà selezionato l'elemento con l'ID title e ne verrà modificato il colore.

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

Selettore di tag

L'elemento con il tag desiderato può essere selezionato utilizzando semplicemente il nome del tag

Nell'esempio seguente verrà selezionato l'elemento con il tag span e ne verrà modificato il colore.

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

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

Selettore dei figli

Se vogliamo selezionare i figli di un elemento, utilizziamo l'operatore maggiore di (>).

Nell'esempio seguente verranno selezionati tutti i figli dell'elemento desiderato.

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

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

Selettore di attributo

Possiamo selezionare l'elemento desiderato verificando se l'attributo di un elemento ha un valore.

Nell'esempio seguente vengono selezionati gli elementi che hanno il tag <a> e l'attributo target con valore _blank.

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

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

jQuery semplifica la selezione degli elementi nel DOM fornendo alcuni metodi oltre ai selettori XPath.

Impariamo a conoscerli.

Metodo parent()

Possiamo selezionare l'elemento padre dell'elemento desiderato utilizzando il metodo parent() fornito da jQuery.

Nell'esempio seguente, viene selezionato l'elemento padre dell'elemento e ne viene modificato il colore del testo.

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

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

Metodo children()

Possiamo selezionare tutti i figli dell'elemento desiderato utilizzando il metodo children() fornito da jQuery.

Nell'esempio seguente vengono selezionati tutti i figli dell'elemento e ne viene modificato il colore del testo.

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

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

Metodo parents()

Possiamo selezionare gli elementi antenati dell'elemento desiderato utilizzando il metodo parents() fornito da jQuery.

Nell'esempio seguente vengono selezionati gli antenati dell'elemento e viene modificato il colore del testo dell'elemento padre.

La differenza tra questo metodo e gli altri metodi che abbiamo imparato è che può ricevere un parametro.

Quindi inviamo un selettore XPath come parametro per definire quale antenato scegliere.

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

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

Metodo next()

Il metodo next() seleziona l'elemento fratello successivo dell'elemento desiderato.

Nell'esempio seguente viene selezionato il primo elemento fratello successivo dell'elemento con tag a.

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

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

Metodo nextAll()

Il metodo nextAll() viene utilizzato per selezionare gli elementi fratelli successivi dell'elemento desiderato.

Nell'esempio seguente vengono selezionati tutti gli elementi fratelli successivi dell'elemento con tag div.

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

Metodo siblings()

È possibile selezionare tutti gli elementi fratelli dell'elemento desiderato utilizzando il metodo siblings().

Nell'esempio seguente vengono selezionati tutti gli elementi fratelli degli elementi con tag p.

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

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

Metodo prev()

Il metodo prev() viene utilizzato per selezionare l'elemento fratello precedente di un elemento.

Seleziona il primo elemento fratello precedente dell'elemento con tag a.

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

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

Metodo prevAll()

Il metodo prevAll() viene utilizzato per selezionare gli elementi fratelli precedenti dell'elemento desiderato.

Nell'esempio seguente vengono selezionati tutti gli elementi fratelli precedenti dell'elemento con tag div.

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

Congratulazioni 🎉

In questa sezione abbiamo imparato a selezionare gli elementi del DOM.

Nella prossima sezione continueremo a imparare le manipolazioni del DOM.