Logo Diario Intimo
INTRODUZIONE A jQUERY

jQuery: Inclusione nella pagina web

Sullivan |

La libreria jQuery può essere scaricata da questo indirizzo: jquery.com/download/. Le versioni disponibili sono 2: una compressa (minified) più adatta ad essere inclusa nella pagina web, l'altra molto più utile per la consultazione. Risulta inoltre possibile optare per la versione online della libreria stessa sul server CDN (Content Delivery Network) di Google, raggiungibile a questo indirizzo: jQuery 1.9.1 CDN. Proprio in questi giorni è stata rilasciata una nuova versione: jQuery 2.0.0 CDN, che però non supporta Internet Explorer nelle versioni 6-7-8 (jQuery 2.0 has the same API as jQuery 1.9, but does not support Internet Explorer 6, 7, or 8).
La mia scelta è per la libreria online (sia per maggior velocità che per minore consumo di banda del server). Per ciò che riguarda invece la versione 2.0 la scelta, lette le specifiche, non potrà che essere personale.

  Modalità di inclusione di jQuery nella pagina web
  
  Inclusione della libreria nella sezione <head></head>:
  <script type="text/javascript" src="../assets/js/jquery-2.0.0.min.js"></script>
  
  oppure (per la versione CDN):
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Inclusione del codice (come file .js esterno) che utilizza le funzionalità di jQuery: <script type="text/javascript" src="../assets/js/jquery-2.0.0.min.js"></script> o versione CDN <script type="text/javascript" src="../assets/js/jq-custom.js"></script>

HTML e il Document Object Model (DOM)

Sullivan |

Il codice HTML è costituito da elementi (oggetti) realizzati con apposita marcatura: <html>, <body>, <div>, <p>, <span>… Questi oggetti, che possono essere vuoti o contenere al loro interno altri elementi con caratteristiche analoghe, vengono a costituire una sorta di albero genealogico.
La struttura gerarchica che si viene così a creare è divenuta un modello standard di rappresentazione da parte dei browser. I rapporti di discendenza tra gli elementi del DOM sono infatti molto importanti ai fini dell'utilizzo e dell'applicazione dei fogli di stile (CSS) e di tutte quelle tecnologie in grado di operare sulla formattazione dei contenuti.

          Albero genealogico in un frammento di HTML
          
          <html>              // elemento 'radice' (root)
            <head>
              <title>
            </head>
            <body>
              <div></div>
              <article>
                <h1></h1>
                <p>
                  <a href></a>
                  <a href></a>
                </p>
              </article>
            </body>
          </html>
          

Appena il browser finisce di caricare il DOM (e dunque prima che siano caricate eventuali immagini e tutti gli elementi esterni definiti nel codice html) si verifica l'evento ready. Quest'ultimo, che precede l'evento window.onload (generato quando ogni componente della pagina è stato caricato), viene catturato da jQuery con la seguente sintassi: $(document).ready(function()