Una guida di base a JQuery per programmatori Javascript

Annuncio pubblicitario

JQuery è una delle librerie JavaScript più popolari al mondo (che cos'è JavaScript Che cos'è JavaScript e Internet può esistere senza di essa?JavaScript è una di quelle cose che molti danno per scontato. Lo usano tutti. Leggi di più ). Al momento della sua istituzione, JavaScript (verrà indicato come JS da qui in poi) si trovava in un posto molto diverso. Il 14 gennaio 2006 è stato il giorno in cui è stato annunciato jQuery BarCampNYC. A JS mancava ancora un po '- i browser ne supportavano tutte le parti, ma molti hack e soluzioni alternative dovevano essere implementati per la conformità.

JQuery è arrivato e ha cambiato tutto. JQuery ha reso molto semplice la scrittura di codice conforme al browser. Potresti animare pagine web senza una laurea in informatica - evviva! Dieci anni dopo, jQuery è ancora il re, e se non l'hai mai usato prima, cosa puoi farci?

Oltre a migliorare le tue abilità JavaScript, potresti voler leggerne alcune Tutorial HTML e CSS Scopri HTML e CSS con questi tutorial passo dopo passo

Curioso di HTML, CSS e JavaScript? Se ritieni di avere un talento per imparare a creare siti Web da zero, ecco alcuni ottimi tutorial passo-passo che vale la pena provare. Leggi di più prima di tutto se non hai familiarità con loro.

abbiamo introdotto jQuery Rendere il Web interattivo: un'introduzione a jQueryjQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni e rende i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Leggi di più prima, quindi questa guida a JQuery si concentrerà sulla vera programmazione.

Iniziare

Potresti avere familiarità con il modo JS di selezionare gli ID dal Document Object Model (DOM):

document.getElementById ( 'foo');

Bene, JQuery fa un ulteriore passo avanti. Non è necessario chiamare metodi diversi per selezionare classi, ID o più elementi. Ecco come si seleziona un ID:

$ ( '# Bar');

Facile vero? È esattamente la stessa sintassi per selezionare quasi tutti gli elementi DOM. Ecco come selezionare le classi:

$ ( 'Baz.');

Puoi anche essere creativo per un vero potere. Questo seleziona tutto TD elementi all'interno di a tavolo tranne il primo.

$ ('table td'). not (': first');

Notare come i nomi dei selettori corrispondono quasi esattamente alle loro controparti CSS. È possibile assegnare oggetti a regolare Variabili JS:

var xyzzy = $ ('# parent .child');

Oppure puoi usare le variabili jQuery:

var $ xyzzy = $ ('# parent .child');

Il simbolo del dollaro viene utilizzato esclusivamente per indicare che questa variabile è un oggetto jQuery, che è molto utile su progetti complessi.

Puoi selezionare il genitore di un elemento:

$ ( 'Bambino') genitore ().;

O i fratelli:

$ ( 'Bambino') fratelli ().;

È necessario eseguire il codice una volta che il browser è pronto. Ecco come lo fai:

$ (document) .ready (function () {console.log ('ready!'); });

Più potenza

Ora che conosci le basi, passiamo ad alcune cose più complesse. Data una tabella html:

Rendere
Modello
Colore


Guado
Scorta
Nero


Mini
Bottaio
Rosso


Guado
Cortina
bianca

Supponiamo che tu voglia rendere ogni altra riga un colore diverso (noto come Strisce zebra). Ora puoi usare CSS per questo:

#cars tr: nth-child (even) {background-color: red; }

Ecco come si potrebbe ottenere con jQuery:

$ ('tr: even'). addClass ('even');

Ciò otterrà la stessa cosa, a condizione che anche è una classe definita in CSS. Notare come non è necessario il punto completo prima del nome della classe. Questi sono generalmente richiesto solo per il selettore principale. Idealmente, dovresti usare i CSS per iniziare, anche se non è un grosso problema.

JQuery può anche nascondere o rimuovere le righe:

. $ ( '# Ford Cortina') hide ();. $ ( '# Ford Cortina') remove ();

Non è necessario nascondere un elemento prima di rimuoverlo.

funzioni

Le funzioni di JQuery sono proprio come JS. Usano le parentesi graffe e possono accettare argomenti. Dove diventa davvero interessante è attraverso i callback. I callback possono essere applicati a quasi tutte le funzioni jQuery. Specificano un pezzo di codice da eseguire una volta completata l'azione principale. Ciò fornisce un'enorme funzionalità. Se non esistessero e tu scrivessi il tuo codice aspettandoti che funzionasse in modo lineare, JS continuerebbe ad eseguire la riga di codice successiva mentre aspetta quella precedente. I callback assicurano che il codice venga eseguito solo una volta completata l'attività originale. Ecco un esempio:

$ ('table'). hide (function () {alert ('Regole MUO!'); });

Attenzione: questo codice esegue un avviso per ogni elemento. Se il tuo selettore è qualcosa sulla pagina più di una volta, riceverai più avvisi.

È possibile utilizzare i callback con altri argomenti:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Notare come ci sia un punto e virgola dopo le parentesi graffe di chiusura. Questo non sarebbe normalmente necessario per una funzione JS, tuttavia questo codice è ancora considerato come su una riga (poiché il callback è tra parentesi).

Animazione

JQuery rende molto semplice l'animazione di pagine Web. Puoi sfumare gli elementi dentro o fuori:

$ ( 'Fade1 ') fadeIn (' lento.'); $ ('# fade2'). fadeOut (500);

È possibile specificare tre velocità (lenta, media, veloce) o un numero che rappresenta la velocità in millisecondi (1000ms = 1 secondo). Puoi animare quasi qualsiasi elemento CSS. Questo anima la larghezza del selettore dalla sua larghezza attuale a 250px.

$ ('pippo'). animate ({larghezza: '250px'});

Non è possibile animare i colori. Puoi usare anche i callback con l'animazione:

$ ('bar'). animate ({height: '250px'}, function () {$ ('bar'). animate ({width: '50px'} });

Loops

I loop brillano davvero in jQuery. Ogni() viene utilizzato per scorrere su ogni elemento di un determinato tipo:

$ ('li'). each (function () {console.log ($ (this)); });

Puoi anche usare un indice:

$ ('li'). each (function (i) {console.log (i + '-' + $ (this)); });

Questo verrebbe stampato 0, poi 1 e così via.

Puoi anche usare ogni() per scorrere su array, proprio come in JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (auto, funzione (i, valore) {console.log (valore); });

Nota l'argomento aggiuntivo chiamato valore - questo è il valore dell'elemento array.

Vale la pena notare che ogni() può a volte essere più lento dei loop JS alla vaniglia. Ciò è dovuto al sovraccarico di elaborazione aggiuntivo eseguito da jQuery. Per la maggior parte del tempo, questo non è un problema. Se sei preoccupato per le prestazioni o stai lavorando con set di dati di grandi dimensioni, prendi in considerazione l'analisi comparativa del codice con jsPerf primo.

AJAX

JavaScript asincrono e XML o AJAX è davvero molto semplice con jQuery. AJAX alimenta una grande quantità di Internet ed è qualcosa di cui ci siamo occupati parte 5 Tutorial jQuery (parte 5): AJAX, tutti!Mentre ci avviciniamo alla fine della nostra serie di mini tutorial di jQuery, è giunto il momento di dare uno sguardo più approfondito a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con ... Leggi di più della nostra tutorial di jQuery Tutorial jQuery - Per iniziare: Nozioni di base e selettoriLa scorsa settimana, ho parlato dell'importanza di jQuery per qualsiasi sviluppatore web moderno e del perché sia ​​fantastico. Questa settimana, penso che sia tempo di sporcarci le mani con un po 'di codice e abbiamo imparato come ... Leggi di più . Fornisce un modo per caricare parzialmente una pagina Web - nessun motivo per ricaricare l'intera pagina quando si desidera aggiornare solo il punteggio di calcio, ad esempio. jQuery ha diversi metodi AJAX, l'essere più semplice caricare():

$ ( '# Baz') Carico ( 'alcuni / url / page.html.');

Ciò esegue una chiamata AJAX alla pagina specificata (alcuni / url / page.html) e inserisce i dati nel selettore. Semplice!

Puoi esibirti HTTP GET richieste:

$ .get ('some / url', function (risultato) {console.log (risultato); });

Puoi anche inviare dati usando INVIARE:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

È molto semplice inviare i dati del modulo:

$ .post ('url', $ ('form'). serialize (), function (risultato) {console.log (risultato); }

Il serialize () La funzione ottiene tutti i dati del modulo e li prepara per la trasmissione.

promesse

Le promesse vengono utilizzate per l'esecuzione differita. Possono essere difficili da imparare, tuttavia jQuery lo rende leggermente meno problematico. ECMAScript 6 introduce promesse native in JS, tuttavia, il supporto del browser è nella migliore delle ipotesi. Per ora, le promesse di jQuery sono molto migliori nel supporto cross-browser.

Una promessa è quasi esattamente come sembra. Il codice prometterà di tornare in una fase successiva quando sarà completo. Il tuo motore JavaScript passerà all'esecuzione di qualche altro codice. Una volta la promessa risolve (ritorna), è possibile eseguire qualche altra parte di codice. Le promesse possono essere pensate come richiami. Il documentazione di jQuery spiega in modo più dettagliato.

Ecco un esempio:

// dfd == differito. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); return dfd.promise (); } $ .when (doThing ()). then (function () {console.log ('YAY, è finito'); });

Nota come viene fatta la promessa (dfd.promise ()) e viene risolto solo quando la chiamata AJAX è completata. È possibile utilizzare una variabile per tenere traccia di più chiamate AJAX e completare un'altra attività solo dopo aver effettuato tutte.

Suggerimenti sulle prestazioni

La chiave per spremere le prestazioni dal tuo browser è limitare l'accesso al DOM. Molti di questi suggerimenti potrebbero applicarsi anche a JS e potresti voler profilare il tuo codice per vedere se è inaccettabilmente lento. Nell'era attuale dei motori JavaScript ad alte prestazioni, i colli di bottiglia minori nel codice possono spesso passare inosservati. Nonostante ciò, vale comunque la pena provare a scrivere il codice con le prestazioni più veloci che puoi.

Invece di cercare nel DOM ogni azione:

$ ('pippo'). css ('background-color', 'red'); $ ('pippo'). css ('colore', 'verde'); $ ('pippo'). css ('larghezza', '100px');

Memorizza l'oggetto in una variabile:

$ bar = $ ('pippo'); $ bar.css ('background-color', 'red'); $ bar.css ('color', 'green'); $ bar.css ('larghezza', '100px');

Ottimizza i tuoi loop. Data una vaniglia per loop:

var cars = ['Mini', 'Ford', 'Jaguar']; per (int i = 0; i 

Sebbene non sia intrinsecamente negativo, questo ciclo può essere reso più veloce. Per ogni iterazione, il loop deve calcolare il valore dell'array di automobili (cars.length). Se lo memorizzi in un'altra variabile, puoi ottenere prestazioni, specialmente se lavori con set di dati di grandi dimensioni:

per (int i = 0, j = cars.length; i 

Ora è memorizzata la lunghezza dell'array di automobili j. Questo non deve più essere calcolato in ogni iterazione. Se stai usando ogni(), non è necessario eseguire questa operazione, sebbene JS vanilla adeguatamente ottimizzato possa superare jQuery. Dove jQuery brilla davvero è la velocità di sviluppo e debug. Se non stai lavorando su big data, jQuery di solito è più che veloce.

Ora dovresti conoscere abbastanza basi per essere un ninja jQuery!

Usi jQuery regolarmente? Hai smesso di usarlo per qualche motivo? Facci sapere cosa ne pensi nei commenti qui sotto!