jQuery Iniziare

Esempio

Crea un file hello.html con il seguente contenuto:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

Live Demo su JSBin

Apri questo file in un browser web. Di conseguenza vedrai una pagina con il testo: Hello, World!

Spiegazione del codice

  1. Carica la libreria jQuery dal CDN di jQuery:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    

    Questo introduce la variabile $ globale, un alias per la funzione jQuery e lo spazio dei nomi.

    Tieni presente che uno degli errori più comuni commessi quando si include jQuery non riesce a caricare la libreria PRIMA di altri script o librerie che potrebbero dipendere da o farne uso.

  1. Rinvia una funzione da eseguire quando viene rilevato che il DOM ( Document Object Model ) è "pronto" da jQuery:

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
     
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
    
  1. Una volta che il DOM è pronto, jQuery esegue la funzione di callback mostrata sopra. All'interno della nostra funzione, c'è solo una chiamata che fa 2 cose principali:

    1. Ottiene l'elemento con l'attributo id uguale a hello (il nostro selettore #hello ). L'utilizzo di un selettore come argomento passato è il nocciolo della funzionalità e della denominazione di jQuery; l'intera libreria essenzialmente si è evoluta dall'estensione di document.querySelectorAll MDN .

    2. Imposta il text() all'interno dell'elemento selezionato su Hello, World! .

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element
      

Per ulteriori informazioni, consultare la pagina jQuery - Documentazione .