jQuery è una libreria JavaScript veloce e concisa creata da John Resig nel 2006 con un bel motto: scrivi meno, fai di più. 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.
Di seguito è riportato l'elenco delle funzionalità principali importanti supportate da jQuery:
DOM manipulation - Il jQuery ha reso facile selezionare gli elementi DOM, attraversarli 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.
Usa la funzione $ (document) .ready (). Tutto al suo interno verrà caricato non appena il DOM viene caricato e prima che i contenuti della pagina vengano caricati.
JavaScript supporta molto bene il concetto di oggetto. È possibile creare un oggetto utilizzando l'oggetto letterale come segue:
var emp = {
name: "Zara",
age: 10
};È possibile scrivere e leggere le proprietà di un oggetto utilizzando la notazione del punto come segue:
// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20È possibile definire array utilizzando il letterale array come segue:
var x = [];
var y = [1, 2, 3, 4, 5];Un array ha una proprietà length utile per l'iterazione. Possiamo leggere gli elementi di un array come segue:
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}Una funzione denominata ha un nome quando è definita. Una funzione denominata può essere definita utilizzando la parola chiave function come segue:
function named(){
// do some stuff here
}Una funzione in JavaScript può essere denominata o anonima.
Una funzione anonima può essere definita in modo simile a una normale funzione ma non avrebbe alcun nome.
Sì! Una funzione anonima può essere assegnata a una variabile.
Sì! Una funzione anonima può essere passata come argomento a un'altra funzione.
Gli argomenti delle variabili JavaScript rappresentano gli argomenti passati a una funzione.
Usando l'operatore typeof, possiamo ottenere il tipo di argomenti passati a una funzione. Ad esempio:
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3Usando la proprietà arguments.length, possiamo ottenere il numero totale di argomenti passati a una funzione. Ad esempio:
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3L'oggetto arguments ha una proprietà callee, che si riferisce alla funzione in cui ti trovi. Ad esempio:
function func() {
return arguments.callee;
}
func(); // ==> funcLa famosa parola chiave JavaScript si riferisce sempre al contesto corrente.
L'ambito di una variabile è la regione del programma in cui è definita. La variabile JavaScript avrà solo due ambiti.
Global Variables - Una variabile globale ha un ambito globale, il che significa che è visibile ovunque nel codice JavaScript.
Local Variables- Una variabile locale sarà visibile solo all'interno di una funzione in cui è definita. I parametri della funzione sono sempre locali rispetto a quella funzione.
Una variabile locale ha la precedenza su una variabile globale con lo stesso nome.
Un callback è una semplice funzione JavaScript passata a un metodo come argomento o opzione. Alcuni callback sono solo eventi, chiamati per dare all'utente la possibilità di reagire quando viene attivato un determinato stato.
Le chiusure vengono create ogni volta che si accede a una variabile definita all'esterno dell'ambito corrente da un ambito interno.
L'esempio seguente mostra come il contatore della variabile è visibile all'interno delle funzioni di creazione, incremento e stampa, ma non al di fuori di esse -
function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1Il metodo charAt () restituisce il carattere all'indice specificato.
Il metodo concat () restituisce il carattere all'indice specificato.
Il metodo forEach () chiama una funzione per ogni elemento dell'array.
Il metodo indexOf () restituisce l'indice all'interno dell'oggetto String chiamante della prima occorrenza del valore specificato, o −1 se non trovato.
Il metodo length () restituisce la lunghezza della stringa.
Il metodo pop () rimuove l'ultimo elemento da un array e restituisce quell'elemento.
Il metodo push () aggiunge uno o più elementi alla fine di un array e restituisce la nuova lunghezza dell'array.
Il metodo reverse () inverte l'ordine degli elementi di un array: il primo diventa l'ultimo e l'ultimo diventa il primo.
Il metodo sort () ordina gli elementi di un array.
Il metodo substr () restituisce i caratteri in una stringa che inizia dalla posizione specificata fino al numero di caratteri specificato.
Il metodo toLowerCase () restituisce il valore della stringa chiamante convertito in minuscolo.
Il metodo toUpperCase () restituisce il valore della stringa chiamante convertito in maiuscolo.
Il metodo toString () restituisce la rappresentazione di stringa del valore del numero.
Un jQuery Selector è una funzione che fa uso di espressioni per trovare elementi corrispondenti da un DOM in base ai criteri dati. Puoi semplicemente dire che i selettori vengono utilizzati per selezionare uno o più elementi HTML utilizzando jQuery. Una volta selezionato un elemento, possiamo eseguire varie operazioni su quell'elemento selezionato. I selettori jQuery iniziano con il segno del dollaro e le parentesi - $ ().
La funzione factory $ () è un sinonimo della funzione jQuery (). Quindi, nel caso in cui utilizzi un'altra libreria JavaScript in cui $ sign è in conflitto con qualcos'altro, puoi sostituire $ sign con il nome jQuery e puoi usare la funzione jQuery () invece di $ ().
$ ('nome-tag') seleziona tutti gli elementi di tipo nome-tag nel documento. Ad esempio, $ ('p') seleziona tutti i paragrafi <p> nel documento.
$ ('# some-id') seleziona il singolo elemento nel documento che ha un ID di some-id.
$ ('. some-class') seleziona tutti gli elementi nel documento che hanno una classe di some-class.
$ ('*') seleziona tutti gli elementi disponibili in un DOM.
$ ('E, F, G') seleziona i risultati combinati di tutti i selettori specificati E, F o G dove i selettori possono essere qualsiasi selettore jQuery valido.
Il metodo attr () può essere utilizzato per recuperare il valore di un attributo dal primo elemento dell'insieme corrispondente.
Il metodo attr (nome, valore) può essere utilizzato per impostare l'attributo denominato su tutti gli elementi nel set avvolto utilizzando il valore passato.
Il metodo addClass (classes) può essere utilizzato per applicare fogli di stile definiti su tutti gli elementi corrispondenti. È possibile specificare più classi separate da uno spazio.
Il metodo removeAttr (nome) può essere utilizzato per rimuovere un attributo da ciascuno degli elementi corrispondenti.
Il metodo hasClass (class) restituisce true se la classe specificata è presente su almeno uno dei set di elementi corrispondenti.
Il metodo removeClass (classe) rimuove tutte o le classi specificate dall'insieme di elementi corrispondenti.
Il metodo toggleClass (class) aggiunge la classe specificata se non è presente, rimuove la classe specificata se è presente.
Il metodo html () ottiene il contenuto html (innerHTML) del primo elemento corrispondente.
Il metodo html (val) imposta il contenuto html di ogni elemento corrispondente.
Il metodo text () ottiene il contenuto di testo combinato di tutti gli elementi corrispondenti.
Il testo (val) imposta il contenuto del testo di tutti gli elementi corrispondenti.
Il metodo val () ottiene il valore di input del primo elemento corrispondente.
Il metodo val (val) imposta l'attributo del valore di ogni elemento corrispondente se viene chiamato su <input> ma se viene chiamato su <select> con il valore <option> passato, l'opzione passata sarebbe selezionata, se viene richiamata su casella di controllo o casella radio, quindi tutte le caselle di controllo e la casella radio corrispondenti verranno selezionate.
Il metodo filtro (selettore) può essere utilizzato per filtrare tutti gli elementi dall'insieme di elementi corrispondenti che non corrispondono ai selettori specificati. Il selettore può essere scritto utilizzando qualsiasi sintassi del selettore.
Il metodo eq (index) riduce l'insieme di elementi corrispondenti a un singolo elemento.
Il metodo is (selector) confronta la selezione corrente con un'espressione e restituisce true, se almeno un elemento della selezione si adatta al selettore specificato.
Il metodo not (selector) rimuove gli elementi che corrispondono al selettore specificato dall'insieme di elementi corrispondenti.
Il metodo slice (selector) seleziona un sottoinsieme degli elementi corrispondenti.
Il metodo add (selector) aggiunge più elementi, abbinati dal selettore dato, all'insieme di elementi corrispondenti.
Il metodo andSelf () aggiunge la selezione precedente alla selezione corrente.
Il metodo children ([selector]) ottiene un insieme di elementi contenenti tutti gli unici figli immediati di ciascuno degli elementi corrispondenti.
Il metodo più vicino (selettore) ottiene un insieme di elementi contenenti l'elemento genitore più vicino che corrisponde al selettore specificato, incluso l'elemento di partenza.
Il metodo content () trova tutti i nodi figli all'interno degli elementi corrispondenti (inclusi i nodi di testo), o il documento di contenuto, se l'elemento è un iframe.
Il metodo end () ripristina la più recente operazione "distruttiva", cambiando l'insieme di elementi corrispondenti al suo stato precedente.
Il metodo find (selector) cerca gli elementi discendenti che corrispondono ai selettori specificati.
Il successivo ([selector]) ottiene un insieme di elementi contenenti i fratelli successivi univoci di ciascuno dell'insieme di elementi specificato.
NextAll ([selector]) trova tutti gli elementi di pari livello dopo l'elemento corrente.
Il metodo offsetParent () restituisce una raccolta jQuery con il genitore posizionato del primo elemento corrispondente.
Il metodo parent ([selector]) ottiene il genitore diretto di un elemento. Se chiamato su un insieme di elementi, genitore restituisce un insieme dei loro elementi genitore diretti univoci.
Il metodo parent ([selector]) ottiene un insieme di elementi contenenti gli antenati univoci dell'insieme di elementi corrispondenti (eccetto l'elemento radice).
Il metodo prev ([selector]) ottiene una serie di elementi contenenti i fratelli precedenti univoci di ciascuno degli elementi corrispondenti.
Il metodo prevAll ([selector]) trova tutti gli elementi di pari livello davanti all'elemento corrente.
Il metodo siblings ([selector]) ottiene un insieme di elementi contenente tutti i fratelli univoci di ciascuno degli elementi corrispondenti.
Il metodo css (nome) restituisce una proprietà di stile sul primo elemento corrispondente.
Il metodo css (nome, valore) imposta una singola proprietà di stile su un valore su tutti gli elementi corrispondenti.
Il metodo height (val) imposta l'altezza CSS di ogni elemento corrispondente.
Il metodo height () ottiene il pixel, l'altezza corrente calcolata del primo elemento corrispondente.
Il metodo innerHeight () ottiene l'altezza interna (esclude il bordo e include il riempimento) per il primo elemento corrispondente.
Il metodo innerWidth () ottiene la larghezza interna (esclude il bordo e include il riempimento) per il primo elemento corrispondente.
Il metodo offset () ottiene l'offset corrente del primo elemento corrispondente, in pixel, rispetto al documento.
Il metodo offsetParent () restituisce una raccolta jQuery con il genitore posizionato del primo elemento corrispondente.
Il metodo outerHeight ([margin]) ottiene l'altezza esterna (include il bordo e il riempimento per impostazione predefinita) per il primo elemento corrispondente.
Il metodo outerWidth ([margin]) ottiene la larghezza esterna (include il bordo e il riempimento per impostazione predefinita) per il primo elemento corrispondente.
Il metodo position () ottiene la posizione superiore e sinistra di un elemento rispetto al suo genitore offset.
Il metodo width (val) imposta la larghezza CSS di ogni elemento corrispondente.
Il metodo width () ottiene la larghezza, pixel e calcolata corrente del primo elemento corrispondente.
Il metodo empty () rimuove tutti i nodi figli dall'insieme di elementi corrispondenti.
Il metodo remove (expr) rimuove tutti gli elementi corrispondenti dal DOM.
Il metodo preventDefault () dell'oggetto Event impedisce al browser di eseguire l'azione predefinita.
Il metodo isDefaultPrevented () dell'oggetto Event restituisce se event.preventDefault () è stato mai chiamato su questo oggetto evento.
Il metodo stopPropagation () dell'oggetto Event interrompe il bubbling di un evento agli elementi padre, impedendo a qualsiasi gestore padre di essere informato dell'evento.
Il metodo isPropagationStopped () dell'oggetto Event restituisce se event.stopPropagation () è stato mai chiamato su questo oggetto evento.
Il metodo stopImmediatePropagation () dell'oggetto Event arresta l'esecuzione degli altri gestori.
Il metodo isImmediatePropagationStopped () dell'oggetto Event restituisce se event.stopImmediatePropagation () è stato mai chiamato su questo oggetto evento.
La funzione bind (type, [data], fn) lega un gestore a uno o più eventi (come il clic) per ogni elemento corrispondente. Può anche associare eventi personalizzati.
La funzione ready (fn) lega una funzione da eseguire ogni volta che il DOM è pronto per essere attraversato e manipolato.
Il metodo load (url, [data], [callback]) carica l'HTML da un file remoto e lo inserisce nel DOM.
Il metodo ajaxComplete (callback) può essere utilizzato per registrare un callback da eseguire ogni volta che viene completata una richiesta AJAX.