Che cosa è necessario sapere su jQuery 1.3

La comunità di sviluppo web è diventata intensamente entusiasta il 14 gennaio 2009, quando è stata rilasciata ufficialmente la versione 1.3.0 di jQuery. jQuery 1.3 porta con sé miglioramenti significativi, specialmente quando si tratta di velocità. Inoltre, gli sviluppatori sono stati in grado di mantenere jQuery più piccolo che mai, aggiungendo alcune funzionalità grandiose e spesso richieste. Oggi daremo un'occhiata approfondita alle nuove funzionalità e al modo in cui riuscirai a spremere il massimo.

Iniziare e aggiornare

Se sei nuovo di jQuery e devi scaricare la versione più recente, visita la homepage di jQuery e fai clic sul link di download per iniziare. Se esegui l'aggiornamento da una versione precedente, sarai felice di notare che l'API è rimasta coerente e compatibile con le versioni precedenti. Per eseguire l'aggiornamento, è sufficiente aggiornare la versione di jQuery sul server e collegarla correttamente. Più avanti in questo articolo discuteremo di eventuali modifiche che potrebbero causare problemi con qualsiasi codice corrente che hai.

Sizzle CSS Selector Engine

Gli sviluppatori di jQuery hanno compiuto un enorme passo in avanti con il loro motore di selezione css e hanno avviato un progetto autonomo noto come "Sizzle". Sizzle ora è il motore di selezione CSS per jQuery ed è gestito dalla Dojo Foundation. Sizzle sembra già promettente per più framework rispetto a jQuery, in quanto è aperto e disponibile per tutti gli sviluppatori che desiderano utilizzarlo nei loro progetti. Puoi saperne di più su sfrigolare sulla pagina di rilascio di jQuery e sulla home page di Sizzle. jQuery sta attualmente collaborando con Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE e molte altre librerie per rendere questo motore ancora più potente.

Prestazioni del selettore molto più veloci

Con il rilascio di un nuovo motore arriva prestazioni molto più veloci; in alcuni casi più veloce del 400%, a seconda del browser utilizzato. jQuery ha rilasciato i risultati dei test usando selettori che effettivamente usano (che abbiamo analizzato nella prossima sezione). Guarda il grafico direttamente sotto per i nuovi risultati delle prestazioni del selettore.

Selettori comuni e loro velocità

Come accennato in precedenza, i test delle prestazioni del selettore erano basati sui selettori che le persone effettivamente usavano. Ho trovato questi dati di per sé interessanti e puoi trovarli qui. Tuttavia, è in un formato solo testo e mi piacciono grafici e grafici. Una delle cose che mi sono piaciute è stata il modo in cui una così piccola percentuale di persone stava sfruttando il: selettore visibile. Di seguito troverai i selettori che gli sviluppatori utilizzano più comunemente negli script jQuery oggi.

API jQuery di Remy Sharp

Un'altra cosa davvero eccitante riguardo il rilascio di jQuery 1.3 è il rilascio di un nuovo jQuery API Browser, creato da Remy Sharp. Puoi accedervi via internet per cercare qualsiasi metodo o funzione jQuery che desideri. Ancora meglio, è disponibile per il download come browser offline tramite l'installazione di Adobe Air Flash. Fondamentalmente, l'API jQuery rende accessibile qualsiasi informazione o documentazione in pochi clic, con o senza connessione Internet.

Sopra:browser offline attivo e funzionante.

No More Browser Sniffing!

Fino ad ora, jQuery ha eseguito un processo noto come sniffing del browser per determinare l'azione che il codice avrebbe dovuto intraprendere. Lo svantaggio di questo sta facendo supporre che un bug o una funzionalità esisteranno sempre. jQuery risolve questo problema utilizzando un singolo oggetto noto come jQuery.support, e non più singolarmente un agente utente del cantante. John spiega come jQuery.support funziona meglio da solo:

Usiamo una tecnica chiamata rilevamento delle caratteristiche in cui simuliamo una particolare funzionalità o bug del browser per verificarne l'esistenza. Abbiamo incapsulato tutti i controlli che usiamo in jQuery in un singolo oggetto: jQuery.support. Ulteriori informazioni su di esso, il rilevamento delle funzioni e ciò che fornisce questa funzione sono disponibili nella documentazione di jQuery.support.

Quindi cosa significa questo alla fine? Significa che i plugin jQuery e jQuery diventeranno nel tempo molto più affidabili, dal momento che non dobbiamo più dipendere dallo sniffing del browser per determinare un browser / utente specifico. John nota anche che jQuery.browser rimane ancora in jQuery e rimarrà per un po 'di tempo. È deprecato e si consiglia di utilizzare invece il rilevamento delle funzionalità.

Nuovi eventi dal vivo e delegazione di eventi

Una funzione interessante e certamente utile rilasciata con 1.3 è la nuova funzione "eventi live". La delega dell'evento dal vivo significa che se un elemento ha un gestore eventi collegato, qualsiasi altro elemento creato avrà anche quel gestore eventi collegato. Prendi il codice qui sotto trovato sulla documentazione live ().

 $ ("p"). live ("click", function () $ (this) .after ("

Un altro paragrafo!

"););

A prima vista potresti chiederti, 'Perché non dovrei semplicemente collegare un gestore di eventi click al tag p?'. Con ulteriori ispezioni ci rendiamo conto che qualsiasi elemento p inserito dopo il paragrafo corrente avrà anche il gestore di eventi ad esso collegato, dando l'effetto di un uso illimitato. Puoi leggere ulteriori informazioni sugli eventi live e consultare la demo sui documenti jQuery.

Presentazione di closer ()

Accumulando su un'altra grande funzionalità di 1.3, gli sviluppatori ci hanno dato il più vicino (), il che fa esattamente quello che pensi che sarebbe. La funzione più vicina () può essere utilizzata per trovare l'elemento più vicino con un determinato set di parametri. Di nuovo, diamo un'occhiata alla demo.

 $ (document) .bind ("click", function (e) $ (e.target) .closest ("li"). toggleClass ("highlight"););

Nel codice sopra, associamo una funzione clic al documento corrente e aggiungiamo / rimuoviamo la 'evidenziazione' della classe all'elemento li più vicino su un clic dell'utente. Se non viene trovato alcun elemento, continua a percorrere il documento fino a quando non trova una corrispondenza. Se non viene trovata alcuna corrispondenza, non viene eseguito nulla. Scopri di più sull'avanzamento usando il più vicino ().

Manipolazione DOM più veloce e inserimento HTML

jQuery ha visto un significativo miglioramento della velocità quando si tratta di manipolazione DOM e di inserimento / creazione di nuovi elementi HTML. Questo si applicherebbe all'utilizzo di metodi come .insertBefore () e append () ecc. Per avere una migliore idea delle variazioni di velocità, vedremo un altro grafico super straordinario.

Nascondi / Mostra risultati più rapidi

È logico che gli sviluppatori abbiano impiegato del tempo per concentrarsi sull'aumento della velocità degli effetti hide / show. Questi sono due degli effetti jQuery più frequentemente usati. Risultati di velocità visti di seguito.

Risultati di offset rapido ()

Se ti trovi spesso con offset () nei tuoi script jQuery, sarai felice di sapere che anche la velocità di offset è notevolmente migliorata. Nel caso ve lo stiate chiedendo, offset () ottiene semplicemente lo scostamento corrente dell'elemento corrispondente rispetto al documento. Risultati visti di seguito.

Altre caratteristiche degne di nota

  • Il metodo ready () non attende più il caricamento del css. Lo script dovrebbe essere posizionato dopo i file css.
  • Il '@' in [@attr] è stato rimosso in 1.3 ed è stato deprecato molto tempo prima. Per eseguire l'upgrade, è sufficiente rimuovere @.
  • John consiglia di fare del tuo meglio per assicurarti che le tue pagine funzionino in modalità standard, se si esegue in modalità quirk si corrono il rischio di incontrare alcuni bug, specialmente in Safari.
  • Safari 2 non è più supportato.
  • Direttamente dalla documentazione: "A partire da jQuery 1.3, se si specifica una durata dell'animazione pari a 0, l'animazione imposta in modo sincrono gli elementi sul loro stato finale (questo è diverso dalle vecchie versioni dove ci sarebbe un breve, asincrono, ritardo prima del lo stato finale sarebbe impostato). "
  • Toggle () ora accetta un valore booleano.
  • Dalla documentazione: "Le espressioni Complex: not () sono ora valide. Ad esempio:: not (a, b) e: not (div a)."

Risorse addizionali

  • jQuery 1.3 Documentazione di rilascio

    La prima tappa per scoprire tutto e tutto ciò che è stato incluso in questa versione. E se desideri ancora più grafici e grafici, li puoi trovare anche lì.

    Visita il sito web

  • API jQuery

    Non dimenticare di dare un'occhiata al nuovo jQuery API / browser offline, ti farà risparmiare un sacco di tempo e domande quando rimarrai bloccato.

    Visita il sito web

  • jQuery for Absolute Beginners Video Series

    Jeffrey ha fatto un'eccellente serie di 15 parti sul Blog di ThemeForest coprendo una grande quantità di consigli, trucchi e tecniche jQuery. Da non perdere!

    Visita il sito web