JQuery

Core

Il core di jQuery fornisce:

• I costruttori per l'utilizzo della libreria stessa
  • Per ottenere elementi tramite un selettore (vedere sotto)
  • Per ottenere un elemento referenziandolo come parametro
  • Per creare ex novo un elemento partendo da codice HTML grezzo
• I metodi e le proprietà per accedere agli elementi contenuti in un oggetto jQuery
  • Per conoscere il numero di elementi (funzione size() oppure proprietà length)
  • Per iterare ogni elemento (funzione each())
  • Per conoscere il selettore utilizzato o l'elemento DOM referenziato (proprietà selector o context)
  • Per ottenere e manipolare elementi nativi (funzioni get() e index())
• I metodi per creare e utilizzare liste e code (di oggetti e funzioni)
• I metodi per estendere il framework mediante plugin (funzione extend() e fn.extend())
• I metodi per eseguire animazioni mediante le funzioni show(), hide() e animate()

Selettori

I selettori sono gli strumenti utilizzati per ottenere l'accesso agli elementi HTML della pagina, utilizzando la stessa sintassi dei selettori Cascading Style Sheet, ovvero:

• Per selezionare un elemento in base al suo id (#immagine_24)
• Per selezionare uno o più elementi in base alla classe (.thumb oppure div.modale oppure .class1.subclass)
• Per selezionare in modo gerarchico, mediante l'utilizzo di parole chiave come ancestor, sibling, prev e altre
• Per selezionare in base a pseudo-classi (:first, :last, :not, ecc.)
• Per selezionare in base ad attributi o contenuti (:contain, :has, :hidden, [type="text"], ecc.)

Attributi

Gli attributi sono ottenuti o modificati in maniera diversa a seconda del browser; jQuery aiuta lo sviluppatore offrendo un'unica funzione di frontend valida sia come getter (ottenere un valore), sia come setter (impostare un valore), a seconda che sia specificato o no un parametro:

• Metodo per gli attributi generici (attr())
• Metodi per le classi
  • Per conoscere se un elemento appartiene ad una specifica classe (hasClass())
  • Per impostare o rimuovere una classe (addClass(), removeClass() e lo switch toggleClass())
• Metodi per il contenuto
  • Per il codice HTML, come la proprietà innerHTML (html())
  • Per il contenuto testuale (text())
  • Per il valore, solitamente per i campi di un form, che siano campi testuali, campi multiriga, liste dropdown o checkbox (val())

DOM Traversing

Per risalire a elementi padre, figli, per i nodi foglia o per elementi successivi, il framework propone numerosi metodi e funzioni per attraversare e scorrere il DOM del documento.

Manipolazione

La manipolazione del DOM è semplificata da numerosi metodi:

• Per aggiungere e rimuovere elementi alla pagina, o in una posizione specifica
• Per sostituire elementi, o per circondarli con del nuovo contenuto
• Per eliminare tutti gli elementi contenuti in un certo nodo, o per copiarli

CSS

Per controllare lo stile degli elementi, in maniera semplificata e standardizzata. Sono forniti i metodi:

• Per cambiare, rimuovere o aggiungere proprietà grafiche di tutti gli elementi selezionati
• Per ottenere e sostituire velocemente proprietà solitamente difficili da manipolare
  • Lo scroll di pagina o di un elemento
  • Le dimensioni (height() e width())
  • Le dimensioni interne (escludendo quindi il margine)
  • L'offset rispetto ai bordi

Eventi

Il framework riconosce gli oggetti di tipo event e provvede a modificare le loro proprietà rendendoli uniformi, semplificando la loro gestione, la loro propagazione, e fornendo un'utile modalità per impedire al browser di continuare l'esecuzione (ad esempio sulla onclick di un link). L'assegnazione di eventi quali click, load, mouseover è gestita in maniera efficace e non invadente.

Effetti bidimensionali

Gli effetti messi a disposizione dal framework, servono a manipolare la visibilità degli elementi selezionati. È possibile mostrarli o nasconderli con vari effetti, tra i quali:

• Effetto fading, la dissolvenza in entrata o uscita
• Effetto sliding, l'effetto scivolata
• Nascondimento o visualizzazione piatta

È possibile definire facilmente effetti personalizzati specificando la proprietà CSS da manipolare (per esempio: altezza, bordo e altro), come è pure possibile specificare la durata dell'effetto e una funzione di callback da eseguire dopo l'animazione.

Effetti tridimensionali

Con JQuery si possono creare visite virtuali e alcuni effetti che simulano il web 3D.

AJAX

La gestione delle chiamate asincrone (AJAX) è davvero semplificata, e sono fornite le funzioni:

• Per caricare contenuti dinamicamente
  • Funzione di caricamento semplice
  • Funzione di caricamento di codice HTML con inserimento automatico
• Per eseguire richieste asincrone (con metodo GET/POST)
• Per l'interazione con JavaScript
  • Funzione per caricare un oggetto JSON
  • Funzione per caricare un file JavaScript remoto ed eseguirlo automaticamente

Anche gli eventi AJAX sono gestibili in modo semplificato, per il completamento dei form di immissione, la gestione degli errori e l'invio dei dati.

Utilità

La libreria fornisce scorciatoie per gestire vettori, per la manipolazione di stringhe e per il riconoscimento di browser e oggetti/funzioni.