Selettori jQuery: selezionare elementi DOM in modo mirato
La redazione di IONOS3 mins
I selettori jQuery, che costituiscono un componente importante della libreria jQuery, facilitano la manipolazione e l’interazione con gli elementi HTML. Ti presentiamo i selettori più usati con esempi pratici.
Cosa sono i selettori jQuery?
I selettori jQuery selezionano elementi in base ai loro attributi, classi, ID, tipi o posizioni in DOM. È anche possibile combinare più condizioni per creare selettori complessi. Dopo aver selezionato gli oggetti puoi eseguire azioni come aggiungere gestori di eventi con jQuery.on(), modificare gli stili CSS o leggere contenuti di elementi. I selettori sono utili anche in un CMS come WordPress: lavorando in WordPress con jQuery puoi così selezionare ed elaborare gli elementi in modo veloce ed efficiente.
Con lo spazio web di IONOS ottieni l’accesso a uno spazio di archiviazione dedicato per i tuoi progetti web. Le applicazioni Click&Build, che si installano con 1 clic, ti offrono la possibilità di creare un sito web su misura in base alle tue esigenze.
Come si usano i selettori in jQuery?
La sintassi generale per l’uso dei selettori jQuery è:
$(selector)selector è il criterio in base al quale puoi selezionare elementi sul tuo sito web. Combinando i selettori con funzioni come jQuery.ajax() o jQuery.each() è inoltre possibile accedere a elementi DOM selezionati, richiamare dati in modo asincrono ed eseguire cicli su di essi. Puoi così visualizzare e aggiornare facilmente i contenuti dinamici sul tuo sito web.
Integrando l’API di IONOS nei tuoi progetti di hosting puoi gestire i processi di lavoro in tutta sicurezza ed efficienza. La documentazione sull’API di IONOS fornisce ampie informazioni e supporto per sfruttare appieno il potenziale delle API.
Una lista dei più importanti selettori jQuery
Di seguito alcuni esempi dei selettori più usati in jQuery:
Selettori di elementi:
// seleziona tutti gli elementi <p> sulla pagina
$("p")Selettori di classi:
// seleziona tutti gli elementi con la classe "classname"
$(".classname")Selettori di ID:
// seleziona l'elemento con l'ID "elementID"
$("#elementID")Selettori di attributi:
// seleziona tutti gli elementi <input> con l'attributo "type" uguale a "text"
$("input[type='text']")Selettori gerarchici:
// seleziona tutti gli elementi <li> che sono figli diretti di elementi <ul>
$("ul > li")Selettori filtro:
// seleziona il primo elemento <p> nella pagina
$("p:first")Nel nostro tutorial su jQuery ti mostriamo come puoi integrare jQuery nel tuo progetto e ti forniamo una panoramica compatta dei selettori e della loro sintassi.
Un esempio di applicazione dei selettori jQuery
Di seguito utilizziamo i selettori jQuery per selezionare tutti gli elementi <p> in un sito web e modificarne i contenuti di testo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("Un nuovo testo per tutti i paragrafi.");
});
</script>
</head>
<body>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
<p>Terzo paragrafo</p>
</body>
</html>La funzione $(document).ready() assicura che il codice jQuery venga eseguito soltanto quando il DOM è completamente caricato. Con il selettore $("p") selezioniamo quindi tutti gli elementi <p> sulla pagina. Il metodo text() cambia infine il contenuto di testo di tutti gli elementi <p> selezionati in “un nuovo testo per tutti i paragrafi”.
Deploy Now di IONOS offre una soluzione a misura di utente per distribuire le tue pagine web in modo automatizzato tramite GitHub. Nei file YAML puoi modificare il flusso di lavoro delle azioni secondo le tue esigenze. Per informazioni sull’incremento dei visitatori, la durata delle sessioni e l’andamento delle visite è disponibile la dashboard gratuita.
