Come utilizzare jQuery per selezionare gli elementi



Eccoci qui a riparlare della libreria jQuery e di come ci può aiutare nel realizzare le nostre pagine web.

Nel mio precedente articolo (http://www.mondoinformatico.info/introduzione-a-jquery_post-4315.html) ho introdotto la libreria jQuery con un esempio pratico.

Ora proviamo ad usarla per selezionare qualsiasi elemento presente in una nostra pagina.
La sintassi concisa di jQuery ci consente di operare sugli elementi in modo semplice, ma, contemporaneamente, molto efficace.

Queste funzioni sono definite selettori (in inglese selector).

Per chiarire meglio, con un esempio, cosa si potrebbe fare agli elementi selezionati negli esempi seguenti basta appendergli, sfruttanto la chainability dei comandi, il codice:

.css({color: 'white', backgroundColor: 'black'});

per applicare il colore di sfondo e di scrittura a tutti (uno o più di uno che siano) gli elementi ritornati dalla query in oggetto.

Prima è necessario capire alcune regole dei selettori:

  • Quando un nome è preceduto dal carattere # (es: “#miodiv”) significa che si vuole selezionare l’elemento che ha l’ID indicato.
  • Quando un nome è preceduto dal carattere . (es: “.miodiv”) significa che si vuole selezionare gli elementi che ha la CLASS indicata.
  • Quando un nome è un tag dell’HTML (es: “div”) significa che si vuole selezionare gli elementi di quel tipo.

Ovviamente è possibile combinare queste regole tra di loro, per esempio per selezionare tra tutti i tag di un tipo quelli che hanno una CLASS particolare si può scrivere:

$('div.SoloQuelloConQuestaClass')

Proseguiamo con alcuni altri esempi.

Ritorna tutti gli elementi con ID=’miodiv’
$('#miodiv')

Ritorna tutti i DIV con class=’pannello’:
$('div.pannello')

Ritorna il DIV con id=’introduzione’:
$('div#introduzione')

Ritorna tutti i links (A) visibili presenti nel DIV con id=’contenuto’:
$('div#contenuto a:visible')

Tutti i campi di input con il name=’email’:
$('input[@name=email]')

Le righe dispari di una tabella (TABLE) con class=’ordini’:
$('table.ordini tr:odd')

Tutti i links (A) che iniziano con ‘http://’ :
$('a[@href^="http://"]')

Tutti i DIV con contengono uno o più links (A):
$('div[a]')

Ritorna tutti i DIV che non hanno un ID:
$('div').not('[@id]')

Ritorna gli elementi che sono padri di un H2:
$('h2').parent()

Ritorna tutti gli elementi che sono figli di un DIV:
$('div').children()

L’elenco completo dei selettori è disponibile sul sito  ABspace-ComputerSpace

Spero che questa panoramica sui selettori vi sia stata utile ed alla prossima puntata.

alberto bellina

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Ciao, bell’articolo.
    Io ho un problema. Dei feed Rss “ignettano” in un tag P un tag che devo eliminare.
    Questi feed vengono importati via rss e messi in un div con ID=”mieiPOST”.

    Potrei fare una funzione per richiamare:
    $(‘div#mieiPOST’).(‘img’)

    O qualcosa del genere?
    grazie

Pinterest