====== Elementi di Base ======

Il contenuto di questa pagina è preso da: [[https://aulab.it/guide-avanzate/struttura-di-base-di-uno-script-jquery|Aulab]]

[[namespace:javascript|Pagina princiapale di Javascript]]

=====La sintassi di base di jQuery=====

La sintassi di base di jQuery è costruita intorno a **$** che è un alias per jQuery. 
Questo simbolo funge da punto di partenza per quasi tutte le operazioni jQuery. La sintassi generale è:

<Code:javascript linenums:1 | Selettori>
$(selettore).metodo()
</Code>

      * **Selettore**: identifica gli elementi HTML su cui si desidera operare. E' un slettore CSS, come quello che si usa in querySelector() o querySelectorALl().
      * **metodo**: azioni che vogliamo compiere sugli elementi selezionati, es:cambiare lo stile, gestire un evento, ecc.

=====Il Document Ready Event in jQuery=====

Uno degli aspetti più importanti di jQuery è garantire che il codice venga eseguito solo dopo che il DOM (Document Object Model) è stato completamente caricato. Questo è possibile grazie all’evento `$(document).ready()`. Ad esempio:

 

<Code:javascript linenums:1 | document ready>
$(document).ready(function() {
    // Il tuo codice jQuery va qui
});
</Code>

In jQuery, è anche comune utilizzare la forma abbreviata:
<Code:javascript linenums:1 | document ready forma abbreviata>
$(function() {
    // Il tuo codice jQuery
}); 
</Code>

=====Manipolare il DOM con jQuery=====

La manipolazione del DOM è una dei princiapli utilizzi di Javascript, jQuery semplifica molto queste operazioni con dei metodi dedicati.

<Code;javacript linenums:1 | DOM > 
$(document).ready(function() {
    $("#idElemento").text("Testo cambiato!");
    $(".classeElemento").css("color", "blue");
});
</Code>

=====Gestione deglli eventi con jQuery=====

Gestire eventi come click, hover, o keypress è molto più semplice con jQuery. Vediamo un esempio di un gestore di eventi click:

 
<Code;javacript linenums:1 | gestione eventi >
$(document).ready(function() {
    $("button").click(function() {
        alert("Bottone cliccato!");
    });
});
</Code>