Nella lezione precedente abbiamo visto come integrare jQuery nelle pagine HTML. Ora, vediamo come iniziare ad utilizzare jQuery imparando la sintassi base di questa libreria.
Dove inserire jQuery
Come abbiamo visto nella prima lezione del corso jQuery, questa libreria si integra all'interno del codice JavaScript. Per questo motivo, il nostro script jQuery deve essere inserito all'interno del tag <script> in <head> (scopri come inserire script in una pagina HTML). Ecco un esempio della struttura di una pagina con jQuery:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// Qui va il codice jQuery
</script>
</head>
<body>
<!-- Il resto della pagina... -->
</body>
</html>Sintassi base di jQuery
Per inserire un'istruzione di jQuery, si utilizza il simbolo $. Vediamo la sintassi base:
$(selettore).metodo()Ecco cosa significano le varie parti di questa istruzione:
$ indica che è un'istruzione jQuery.selettore specifica l'elemento HTML all'interno della pagina.metodo indica l'azione che deve eseguire jQuery.Nota: parleremo di tutti i selettori e metodi nelle prossime lezioni.
Controllare eventuali conflitti di "$"
Se nella tua pagina HTML utilizzi altri framework, come Angular, potrebbero esserci dei conflitti con il simbolo $, in quando viene richiesto da più librerie insieme. Per questo motivo, si può sostituire $ con jQuery per scrivere le istruzioni. Prima dello script, però, bisogna specificare $.noConflict(): in questo modo, si specifica che jQuery non utilizzerà il simbolo $ per le sue istruzioni. Ecco un esempio:
$.noConflict();
jQuery(selettore).metodo();L'evento Document ready
L'evento Document ready è un evento molto utilizzato in jQuery. Quando il contenuto HTML è stato scaricato totalmente (quindi è "ready"), allora l'evento si attiva e vengono eseguite tutte le istruzioni al suo interno. Ecco la sintassi:
$(document).ready(function(){
// Qui la pagina è stata caricata completamente
});In questo modo, si evita l'esecuzione del codice jQuery prima che il contenuto HTML sia stato scaricato totalmente, causando potenziali errori.
Esiste anche una forma più breve dell'evento Document ready, che mantiene lo stesso funzionamento del normale:
$(function(){
// Qui la pagina è stata caricata completamente
});