Condividere:
Una guida di base per JQuery per i programmatori Javascript
JQuery è una delle librerie JavaScript più popolari del pianeta (cos'è JavaScript Che cos'è JavaScript, E Internet esiste senza di esso? Che cos'è JavaScript e Internet può esistere senza di esso? JavaScript è una di quelle cose che molti danno per scontato Tutti la usano. Per saperne di più). Al momento del suo inizio, JavaScript (verrà indicato come JS da qui in poi era in un posto molto diverso. Il 14 gennaio 2006 è stato il giorno in cui jQuery è stato annunciato al BarCampNYC. JS mancava ancora un po '- i browser hanno supportato tutte le parti di esso, ma molti hack e soluzioni alternative dovevano essere implementate per la conformità.
JQuery è arrivato e ha cambiato tutto. JQuery ha reso molto semplice scrivere codice compatibile con il browser. Potresti animare le pagine web senza avere una laurea in informatica - evviva! Dieci anni dopo, jQuery è ancora il re, e se non lo hai mai usato prima, cosa puoi fare con esso?
Oltre ad approfondire le tue competenze JavaScript, ti consigliamo di leggere alcuni tutorial HTML e CSS. Imparare HTML e CSS con questi tutorial passo passo. Imparare HTML e CSS con questi tutorial passo per passo. Curioso su HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Leggi di più prima se non hai familiarità con loro.
Abbiamo introdotto jQuery Making The Web Interactive: Un'introduzione a jQuery Making The Web Interactive: Un'introduzione a jQuery jQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni: 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 codifica effettiva.
Iniziare
Si può avere familiarità con il modo JS di selezionare gli ID dal modello oggetto documento (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 selezioni le classi:
$ ( 'Baz');Puoi anche essere creativo per un po 'di potere reale. Questo seleziona tutto TD elementi all'interno di a tavolo tranne il primo.
$ ('table td'). not (': first');Si noti come i nomi dei selettori corrispondano 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, qualcosa che è molto utile in 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. Dato un tavolo html:
Rendere Modello Colore Guado Scorta Nero Mini Bottaio Rosso Guado Cortina bianca
Supponi di voler rendere ogni altra riga di un colore diverso (noto come Zebra Stripes). Ora puoi usare i CSS per questo:
#cars tr: nth-child (even) background-color: red; 
Ecco come si potrebbe ottenere con jQuery:
$ ( 'Tr: anche'). AddClass ( 'anche');Ciò otterrà la stessa cosa, a condizione di farlo anche è una classe definita in CSS. Si noti come la fermata completa prima che il nome della classe non sia necessario. Questi sono generalmente richiesto solo per il selettore principale. Idealmente, per iniziare dovresti usare i CSS, anche se non è un grosso problema.
JQuery può anche nascondere o rimuovere righe:
$ ( '# Ford Cortina') nascondere ().; $ ( '# Ford Cortina') rimuovere ().;Non devi nascondere un elemento prima di rimuoverlo.
funzioni
Le funzioni di JQuery sono come JS. Usano parentesi graffe e possono accettare argomenti. Dove diventa davvero interessante è attraverso i callback. Le callback possono essere applicate a quasi tutte le funzioni jQuery. Specificano un pezzo di codice da eseguire una volta completata l'azione principale. Ciò fornisce funzionalità enormi. Se non esistessero, e tu avessi scritto il codice aspettandoti che fosse eseguito in modo lineare, JS avrebbe continuato ad eseguire la prossima riga di codice mentre aspettava quella precedente. Le callback assicurano che il codice venga eseguito solo una volta completata l'attività originale. Ecco un esempio:
$ ('table'). hide (function () alert ('Regole MUO!'););Stai attento: questo codice esegue un avviso per ogni elemento. Se il tuo selettore è qualcosa nella pagina più di una volta, riceverai più avvisi.
Puoi usare le callback con altri argomenti:
$ ('tr: even'). addClass ('even', function () console.log ('Hello'););Si noti come ci sia un punto e virgola dopo le parentesi graffe di chiusura. Questo normalmente non sarebbe necessario per una funzione JS, tuttavia questo codice è ancora considerato su una riga (poiché la callback è tra parentesi).
Animazione
JQuery rende molto facile animare le 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 (1000 ms = 1 secondo). Puoi animare quasi qualsiasi elemento CSS. Questo anima la larghezza del selettore dalla sua larghezza attuale a 250px.
$ ('foo'). animate (width: '250px');Non è possibile animare i colori. Puoi anche usare i callback con l'animazione:
$ ('bar'). animate (height: '250px', function () $ ('bar'). animate (width: '50px');Loops
I loop brillano davvero in jQuery. Ogni() è usato per iterare 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 stamperebbe 0, poi 1 e così via.
Puoi anche usare ogni() per scorrere su array, proprio come in JS:
var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (cars, function (i, value) console.log (valore););Nota l'argomento extra chiamato valore - questo è il valore dell'elemento dell'array.
Vale la pena notare questo ogni() può qualche volta essere più lento dei loop JS vanigliati. Ciò è dovuto al sovraccarico di elaborazione extra eseguito da jQuery. Per la maggior parte del tempo, questo non è un problema. Se sei preoccupato per le prestazioni o lavori con dataset di grandi dimensioni, considera prima di tutto il benchmark del tuo codice con jsPerf.
AJAX
JavaScript asincrono e XML o AJAX è davvero molto facile con jQuery. AJAX alimenta una grande quantità di Internet, ed è qualcosa che abbiamo trattato nella parte 5 di jQuery Tutorial (parte 5): AJAX Them All! jQuery Tutorial (parte 5): AJAX tutti! Mentre siamo vicini alla fine della nostra serie di mini-tutorial di jQuery, è giunto il momento di dare un'occhiata più approfondita a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con ... Ulteriori informazioni sul nostro tutorial su jQuery jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è eccezionale. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Per saperne di più. Fornisce un modo per caricare parzialmente una pagina Web - nessun motivo per ricaricare l'intera pagina quando si desidera aggiornare il punteggio di calcio, ad esempio. jQuery ha diversi metodi AJAX, l'essere più semplice caricare():
$ ( '# Baz') Carico ( 'alcuni / url / page.html.');Questo 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 (result) 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 (result) console.log (risultato);Il serialize () 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 a JS, tuttavia, il supporto del browser è al limite. Per ora, le promesse di jQuery sono molto migliori nel supporto cross browser.
Una promessa è quasi esattamente come sembra. Il codice promette di tornare in una fase successiva quando è completo. Il tuo motore JavaScript passerà all'esecuzione di un altro codice. Una volta la promessa risolve (ritorna), può essere eseguito un altro pezzo di codice. Le promesse possono essere pensate come richiami. La documentazione di jQuery spiega in maggiore dettaglio.
Ecco un esempio:
// dfd == deferred 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 è 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 solo un'altra attività una volta che tutte sono state fatte.
Suggerimenti sulle prestazioni
La chiave per spremere le prestazioni dal tuo browser è limitare l'accesso al DOM. Molti di questi suggerimenti potrebbero essere applicati 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 questo, vale ancora la pena provare a scrivere il codice più veloce che puoi.
Invece di cercare il DOM per ogni azione:
$ ('pippo'). css ('background-color', 'red'); $ ('pippo'). css ('color', 'green'); $ ('pippo'). css ('width', '100px');Memorizza l'oggetto in una variabile:
$ bar = $ ('pippo'); $ bar.css ('background-color', 'red'); $ bar.css ('color', 'green'); $ bar.css ('width', '100px');Ottimizza i tuoi loop. Dato un ciclo di vaniglia per:
var cars = ['Mini', 'Ford', 'Jaguar']; per (int i = 0; i < cars.length; ++i) // do something Anche se non è intrinsecamente cattivo, questo ciclo può essere reso più veloce. Per ogni iterazione, il ciclo deve calcolare il valore della matrice di vetture (cars.length). Se lo memorizzi in un'altra variabile, puoi ottenere prestazioni, specialmente se lavori con dataset di grandi dimensioni:
per (int i = 0, j = cars.length; i < j; ++i) // do something Ora la lunghezza dell'array auto è memorizzata j. Questo non deve più essere calcolato in ogni iterazione. Se stai usando ogni(), non hai bisogno di farlo, anche se il van JS ottimizzato correttamente può superare jQuery. Dove jQuery brilla davvero è attraverso la velocità di sviluppo e debug. Se non stai lavorando su big data, jQuery è solitamente più che veloce.
Ora dovresti conoscere abbastanza basi per essere un ninja jQuery!
Usi jQuery regolarmente? Hai smesso di usarlo per qualsiasi motivo? Fateci sapere i vostri pensieri nei commenti qui sotto!
Scopri di più su: JavaScript, jQuery.