.png){kind=small}
Usare jQuery
Quando apri la tua pagina web in un browser e carichi con successo la libreria jQuery, viene aggiunta una funzione globale chiamata jQuery(). Questa funzione può essere chiamata come window.jQuery() o jQuery() in qualsiasi punto della tua pagina web. $ è un alias della funzione jQuery, quindi puoi anche usare $() come forma abbreviata per richiamare jQuery().
window.jQuery = window.$ = jQuery = $
La funzione jQuery() (ovvero $) prende due parametri, selettore e contesto.
Il selettore può essere un selettore dei CSS per corrispondere ad un insieme di elementi in un documento. Per esempio, se vuoi fare qualcosa con tutti gli elementi del div, allora usa la funzione $ per abbinare tutti gli elementi del div come mostrato qui sotto.
window.$('div')
Qui, devi solo passare il nome del tag degli elementi che vuoi trovare. La funzione jQuery ($) restituirà un array di elementi specificati come selettore.
Il secondo parametro della funzione jQuery() è un contesto. Questo parametro può essere qualsiasi cosa, il riferimento di un altro elemento DOM o può essere un altro selettore jQuery. $ inizierà a cercare gli elementi dall'elemento specificato in un contesto. Il selettore jQuery può funzionare più velocemente se si fornisce questo parametro di contesto. Tuttavia, il contesto è opzionale.
In genere, jQuery interagisce con gli elementi del DOM ed esegue alcune operazioni su di essi. Pertanto è necessario rilevare quando il DOM (Document Object Model) viene caricato completamente, in modo che il codice jQuery inizi ad interagire con il DOM senza alcun errore.
Ad esempio, vogliamo scrivere "Ciao sono Mario" per div tag nella nostra pagina web. Il primo passo consiste nel verificare quando il DOM è completamente caricato, in modo da poter trovare l'elemento div e scrivervi "Ciao sono Mario". Se proviamo a scriverlo prima del caricamento del DOM, jQuery potrebbe non trovare l'elemento div se si scrive lo script nel tag <head>.
jQuery API include la funzione built-in ready(), che rileva se un particolare elemento è pronto (caricato) o meno. In questo caso è necessario verificare se un oggetto del documento è caricato o meno utilizzando la funzione ready(), perché il documento carica l'intera gerarchia del DOM. Quando il documento viene caricato con successo, possiamo essere sicuri che anche tutti gli elementi del DOM sono stati caricati con successo.
Per verificare se un oggetto documento è stato caricato o meno, è necessario trovare un oggetto documento utilizzando la funzione jQuery selector come illustrato di seguito (l'oggetto documento è un oggetto globale nel suo browser, quindi puoi anche scrivere window.document).
$(document)
//oppure
$(window.document)
//oppure
window.jQuery(document)
Il codice sopra troverà l'oggetto del documento globale. Ora deve verificare se è caricato o meno utilizzando la funzione " ready", come illustrato di seguito.
$(document).ready(function() {
// DOM è caricato...
// Ora scrivi il codice jQuery...
});
La funzione $(document).ready() determina quando viene caricata l'intera gerarchia DOM, mentre l'evento window.onload si attiva quando viene caricata l'intera finestra, compresi DOM, immagini, css e altre risorse necessarie. Il DOM si carica prima del caricamento dell'intera finestra.
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
window.onload = function () {
alert('finestra caricata');
};
$(document).ready(function () {
alert('documento caricato');
});
</script>
</head>
<body>
<h1>Demo: window.onload() e $(document).ready()</h1>
</body>
</html>
Un breve accenno al jQuery traversing che è il processo di utilizzo di jquery per selezionare elementi specifici da una pagina web. Questo può essere fatto utilizzando i selettori di jquery o i metodi per il traversing jQuery. I selettori consentono di selezionare elementi in base al loro id, classe o nome di tag. I metodi consentono di selezionare gli elementi in base alla loro posizione nell'albero del documento. Ad esempio, si può usare il metodo "first" per selezionare il primo elemento di un documento o il metodo "last" per selezionare l'ultimo elemento. È inoltre possibile utilizzare i metodi per trovare elementi che sono figli o antenati di altri elementi. Il traversing è uno strumento potente che consente di manipolare facilmente il contenuto di una pagina web.
<<<
>>>