jQuery - Panoramica

Cos'è jQuery?

jQuery è una libreria JavaScript veloce e concisa creata da John Resig nel 2006 con un bel motto: Write less, do more. jQuery semplifica l'attraversamento dei documenti HTML, la gestione degli eventi, l'animazione e le interazioni Ajax per un rapido sviluppo web. jQuery è un toolkit JavaScript progettato per semplificare varie attività scrivendo meno codice. Ecco l'elenco delle funzionalità principali importanti supportate da jQuery:

  • DOM manipulation - Il jQuery ha reso facile selezionare gli elementi DOM, negoziarli e modificare il loro contenuto utilizzando il motore di selezione open source cross-browser chiamato Sizzle.

  • Event handling - Il jQuery offre un modo elegante per catturare un'ampia varietà di eventi, come un utente che fa clic su un collegamento, senza la necessità di ingombrare il codice HTML stesso con gestori di eventi.

  • AJAX Support - Il jQuery ti aiuta molto a sviluppare un sito reattivo e ricco di funzionalità utilizzando la tecnologia AJAX.

  • Animations - Il jQuery viene fornito con molti effetti di animazione incorporati che puoi utilizzare nei tuoi siti web.

  • Lightweight - La jQuery è una libreria molto leggera - circa 19 KB di dimensione (ridotta a icona e compresso con gzip).

  • Cross Browser Support - Il jQuery ha il supporto cross-browser e funziona bene in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome e Opera 9.0+

  • Latest Technology - Il jQuery supporta i selettori CSS3 e la sintassi XPath di base.

Come usare jQuery?

Esistono due modi per utilizzare jQuery.

  • Local Installation - Puoi scaricare la libreria jQuery sulla tua macchina locale e includerla nel tuo codice HTML.

  • CDN Based Version - Puoi includere la libreria jQuery nel tuo codice HTML direttamente da Content Delivery Network (CDN).

Installazione locale

  • Vai al https://jquery.com/download/ per scaricare l'ultima versione disponibile.

  • Ora metti scaricato jquery-2.1.3.min.js file in una directory del tuo sito web, ad esempio / jquery.

Esempio

Ora puoi includere la libreria jquery nel tuo file HTML come segue:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Questo produrrà il seguente risultato:

Versione basata su CDN

Puoi includere la libreria jQuery nel tuo codice HTML direttamente da Content Delivery Network (CDN). Google e Microsoft forniscono contenuti per la versione più recente.

Stiamo utilizzando la versione di Google CDN della libreria in questo tutorial.

Esempio

Ora riscriviamo l'esempio precedente utilizzando la libreria jQuery da Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Questo produrrà il seguente risultato:

Come chiamare le funzioni di una libreria jQuery?

Come quasi tutto ciò che facciamo quando usiamo jQuery legge o manipola il Document Object Model (DOM), dobbiamo assicurarci di iniziare ad aggiungere eventi ecc. Non appena il DOM è pronto.

Se vuoi che un evento funzioni sulla tua pagina, dovresti chiamarlo all'interno della funzione $ (document) .ready (). Tutto al suo interno verrà caricato non appena il DOM viene caricato e prima che i contenuti della pagina vengano caricati.

Per fare ciò, registriamo un evento pronto per il documento come segue:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Per richiamare qualsiasi funzione della libreria jQuery, utilizzare i tag script HTML come mostrato di seguito:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Come utilizzare gli script personalizzati?

È meglio scrivere il nostro codice personalizzato nel file JavaScript personalizzato: custom.js, come segue -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Ora possiamo includere custom.js file nel nostro file HTML come segue:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Utilizzo di più librerie

È possibile utilizzare più librerie tutte insieme senza creare conflitti tra loro. Ad esempio, puoi usare insieme le librerie jQuery e MooTool javascript. Puoi controllare jQuery noConflict Method per maggiori dettagli.

Cosa c'è dopo ?

Non preoccuparti troppo se non hai capito gli esempi sopra. Li afferrerai molto presto nei capitoli successivi.

Il prossimo capitolo cercherà di coprire alcuni concetti di base che provengono dal JavaScript convenzionale.