jQuery, i selettori

Il selettore jQuery ti permette di trovare gli elementi DOM nella sua pagina web. La maggior parte delle volte inizierà con la funzione di selezione $() nella jQuery.

Sintassi:

$(espressione selettore, contesto)

Il parametro di espressione del selettore specifica uno schema che corrisponde agli elementi. La jQuery utilizza i modelli di selezione dei CSS. Il parametro del contesto è facoltativo. Esso specifica gli elementi in una gerarchia DOM da dove jQuery inizia la ricerca degli elementi corrispondenti.

Vediamo i selettori comunemente utilizzati in jQuery.

Selezionare gli elementi per nome

Il modello di selezione più comune è il nome dell'elemento. Specificando il nome di un elemento come stringa, ad esempio $('p') si restituisce un array di tutti gli elementi <p> di una pagina web.

Prova il codice html qui sotto.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
   </script>
   <script>
     $(document).ready(function () {
       $('p').append('Un paragrafo');
       $('div').append('Un div');
       });
   </script>
   <style>
     div{
       border: 1px solid;
       }
     p{
       border: 1px dashed;
       }
   </style>
</head>
<body>  
  <div>
    <p></p>
    <p></p>
  </div>
  <p></p>
  <div></div>
</body>
</html>

Il metodo jQuery append() inserisce il testo alla fine dell'elemento.

Seleziona gli elementi per Id

È possibile recuperare un elemento particolare utilizzando il metodo di selezione dell'id. Specifichi un id di un elemento per il quale vuoi ottenere il riferimento, iniziando con il simbolo #.

$('#par1').append('This element\'s id is "par1"');
$('#div2').append('This element\'s id is "div2"');

<div id="div1">
   <p></p>
</div>
<p id="par1"></p>
<div id="div2">
</div>

Selezionare gli elementi per attributo

jQuery ti permette inoltre di trovare un elemento in base agli attributi impostati su di esso. Specificando il nome di un attributo tra parentesi quadre, ad esempio $('[class]') restituirà tutti gli elementi che hanno l'attributo di classe indipendentemente dal valore.

$('[class]').append('Questo elemento ha l'attributo class.');

<div id="div1">
   <p></p>
</div>
<p id="par" class="grassetto"></p>
<div id="div2" class="sfondo-colorato">
</div>

Puoi anche specificare il nome della classe per selezionare una specifica classe.

$('[class="sfondo-colorato"]').append('Questo elemento ha l'attributo di classe sfondo-colorato.');

Modelli di selezione jQuery

jQuery offre diversi modi per selezionare uno o più elementi DOM specifici. La seguente tabella elenca i modelli più importanti.

Categoria Selettore Descrizione
Trova elemento $('div') Trova tutti gli elementi <div>.
$('p, div, code') Trovare gli elementi <p>,<div> e <code>.
Trovare elementi discendenti $('div p') Trovare tutti gli elementi <p> che sono discendenti di <div>.
$('div > p') Trovare <p> che è figlio di <div>.
$(*) Trova tutti gli elementi.
Trova per id $('#div1') Trova l'elemento il cui id è div1.
$('div#div1') Trova l'elemento <div> il cui id è div1.
$('#div1, #div2') Trova più elementi per id separati dalla virgola.
Trova per classe CSS $('.CSSClass') Trova tutti gli elementi con class=CSSClass.
$('.CSSClass1, .CSSClass2 ') Trova tutti gli elementi il cui attributo di classe è impostato su CSSClass1 o CSSClass2.
$('div.CSSClass') Trova tutti gli elementi <div> con class=CSSClass.
Trova elemento figlio $('p:first-child') Seleziona tutti gli elementi <p>, che è il primo figlio del suo elemento genitore. L'elemento genitore può essere qualsiasi cosa.
$("p:last-child") Seleziona tutti gli elementi <p> che sono l'ultimo figlio del suo elemento genitore. L'elemento genitore può essere qualsiasi cosa
$("p:nth-child(5)") Seleziona tutti gli elementi <p> che sono il 5° figlio del suo elemento genitore.
$("p:nth-last-child(2)") Seleziona tutti gli elementi <p> che è il 2° ultimo figlio del suo elemento genitore.
$("p:only-child") Seleziona tutti gli elementi <p> che sono figli unici dell'elemento genitore.
Trova per attributo $('[class]') Trova tutti gli elementi con l'attributo di classe (qualunque sia il valore).
$('div[class]') Trova tutti gli elementi <div> che hanno un attributo di classe (qualunque sia il valore).
Trova per il contenuto del valore dell'attributo $('div [class=cls1]') Trova tutti gli elementi <div> i cui attributi di classe sono uguali a cls1.
$('div [class|=cls1]') Trovate tutti gli elementi <div> i cui attributi di classe sono uguali a cls1 o iniziano con la stringa cls1 seguita da un trattino (-).
$('div [class *="cls1"]') Seleziona gli elementi <div> i cui attributi di classe contengono cls1.
$('div [class~=cls1]') Seleziona gli elementi <div> i cui attributi di classe contengono cls1, delimitati da spazi.
$("div [class $= 'cls1']") Seleziona gli elementi <div> il cui valore dell'attributo di classe termina con cls1. Il confronto è sensibile alle maiuscole e minuscole.
$("div [class != 'cls1']") Seleziona gli elementi <div> che non hanno l'attributo di classe o il valore non è uguale a cls1.
$("div [class ^= 'cls1']") Seleziona gli elementi <div> il cui valore dell'attributo di classe inizia con cls1.
$("div:contains ('Prova testo')") Seleziona tutti gli elementi <div> che contengono il testo 'Prova testo'.
Trova per tipo di ingresso $(":input") Seleziona tutti gli elementi in ingresso.
:button $(":button") Seleziona tutti gli elementi di ingresso dove type="button".
:radio $(":radio") Seleziona tutti i tipi di ingresso dove type="radio".
:text $(":text") Seleziona tutti gli elementi di input dove type="text".
:checkbox $(":checkbox") Seleziona tutti gli elementi delle checkbox.
:submit $(":submit") Seleziona tutti gli elementi di input dove type="submit".
:password $(":password") Seleziona tutti gli elementi di input dove type="password".
:reset $(":reset") Seleziona tutti gli elementi di ingresso dove type="reset".
:image $(':image') Seleziona tutti gli elementi di input dove type="image".
:file $(':file') Seleziona tutti gli elementi di input dove type="file".
:enabled $(':enabled') Seleziona tutti gli elementi di ingresso abilitati.
:disabled $(':disabled') Seleziona tutti gli elementi di ingresso disabilitati.
:selected $(':selected') Seleziona tutti gli elementi di ingresso selezionati.
:checked $(':checked') Seleziona tutti gli elementi di input controllati.
:hidden $(':hidden') Seleziona tutti gli elementi nascosti.
:visible $(':visible') Seleziona tutti gli elementi visibili.
:odd $('tr:odd') Seleziona tutte le righe dispari (1,3,5,7...).
:even $('tr:even') Seleziona tutte le righe pari (0,2,4,6...).