Share
jQuery 1.4 è stato rilasciato di recente. Questo non era semplicemente un rilascio di manutenzione come alcuni avevano ipotizzato; ci sono molti nuove funzionalità, miglioramenti e miglioramenti delle prestazioni inclusi in 1.4! Questo post tratta le nuove funzionalità e i miglioramenti che potresti trovare utili.
È possibile scaricare jQuery 1.4 in questo momento, qui: http://code.jquery.com/jquery-1.4.js
Pre 1.4, jQuery supportava l'aggiunta di attributi a una raccolta di elementi tramite l'utile "attr"metodo, che può essere passato sia a un nome di attributo che a un valore, oa un oggetto che specifica diversi attributi. jQuery 1.4 aggiunge il supporto per il passaggio di un oggetto attributi come secondo argomento alla funzione jQuery stessa, alla creazione dell'elemento.
Diciamo che è necessario creare un elemento di ancoraggio con diversi attributi. Con 1.4 è semplice come:
Accentsconagua
jQuery ('', id:' foo ', href:' http://google.com ', titolo:' Diventa un googler ', rel:' external ', text:' Vai a Google! ' ); Potresti aver notato il "testo"attributo - probabilmente ti starai chiedendo cosa ci faccia, dopo tutto non c'è"testo"attributo per ancore! Bene, jQuery 1.4 utilizza i propri metodi quando si passano determinati attributi. Quindi l'attributo" testo "specificato sopra causerebbe a jQuery di chiamare".testo()"metodo, passando" Vai a Google! "come unico argomento.
Un esempio migliore di questo in azione:
jQuery ('', id:' foo ', css: fontWeight: 700, color:' green ', clicca: function () alert (' Foo è stato cliccato! '); ); "Id" viene aggiunto come attributo regolare, ma le proprietà "css" e "clic" attivano la chiamata di ciascun rispettivo metodo. Il codice precedente, prima della versione 1.4, sarebbe stato scritto in questo modo:
jQuery ('') .attr (' id ',' foo ') .css (fontWeight: 700, color:' green ') .click (function () alert (' Foo è stato cliccato! ');); Maggiori informazioni su jQuery (...)
Tre nuovi metodi sono stati aggiunti all'arsenale DOM traversal in 1.4, "nextUntil","prevUntil" e "parentsUntil"Ognuno di questi metodi attraverserà il DOM in una determinata direzione fino a quando il selettore passato non sarà soddisfatto. Quindi, diciamo che hai un elenco di frutta:
Si desidera selezionare tutti gli elementi dopo "Apple", ma si desidera interrompere una volta raggiunto "Strawberry". Non potrebbe essere più semplice:
jQuery ('ul li: contains (Apple)'). nextUntil (': contains (Pear)'); // Seleziona Banana, Uva, Fragola Per saperne di più: prevUntil, nextUntil, parentsUtil
Invece di concatenare una serie di metodi di associazione degli eventi, puoi raggrupparli tutti nella stessa chiamata, in questo modo:
jQuery ('# foo) .bind (click: function () // fa qualcosa, mouseover: function () // fa qualcosa, mouseout: function () // fa qualcosa) Funziona anche con ".uno()".
Maggiori informazioni su .bind (...)
Invece di definire una sola funzione di andamento per una singola animazione, ora puoi definire una diversa funzione di andamento per ogni proprietà che stai animando. jQuery include due funzioni di andamento, swing (predefinito) e lineare. Per gli altri dovrai scaricarli separatamente!
Per specificare una funzione di andamento per ogni proprietà, è sufficiente definire la proprietà come una matrice, con il primo valore costituito da ciò che si desidera animare a tale proprietà, mentre il secondo è la funzione di andamento da utilizzare:
jQuery ('# foo'). animate (left: 500, top: [500, 'easeOutBounce'], 2000); Guarda questo codice in azione!
È anche possibile definire le funzioni di andamento delle proprietà per ogni oggetto opzionale delle opzioni come coppie nome-valore della proprietà nell'oggetto "specialEasing":
jQuery ('# foo'). animate (left: 500, top: 500, duration: 2000, specialEasing: top: 'easeOutBounce'); Nota del redattore - L'autore di questo articolo, James Padolsey, è modesto. Questa nuova funzionalità è stata la sua idea!
Ulteriori informazioni sull'allentamento delle proprietà
jQuery 1.4 aggiunge il supporto per la delega del "Sottoscrivi","modificare","messa a fuoco" e "sfocatura"eventi. In jQuery, usiamo il".vivere()"metodo per delegare eventi. È utile quando devi registrare gestori di eventi su molti elementi e quando nuovi elementi possono essere aggiunti nel tempo (usando".vivere()"è meno costoso che ri-legare continuamente).
Ma fa attenzione! Devi utilizzare i nomi degli eventi, "concentrarsi su" e "focusOut"se si desidera delegare gli eventi" focus "e" blur "!
jQuery ('input'). live ('focusin', function () // fa qualcosa con questo); jQuery 1.4 offre un nuovo "delega"funzione sotto lo spazio dei nomi jQuery Questa funzione accetta due argomenti, uno" scope "e un nome di metodo, o una funzione e l'ambito previsto." Questa "parola chiave di JavaScript può essere abbastanza complicata da tenere a portata di mano. Voglio che sia un elemento, ma piuttosto un oggetto che hai precedentemente creato.
Ad esempio, qui abbiamo un "App"oggetto che ha due proprietà, un"clickHandler"metodo e un oggetto config:
var app = config: clickMessage: 'Ciao!' , clickHandler: function () alert (this.config.clickMessage); ;
Il "clickHandler"metodo, quando chiamato come"app.clickHandler ()"avrà"App"come contesto, nel senso che il"Questo"parola chiave consentirà l'accesso a"App"Funziona abbastanza bene se chiamiamo semplicemente:
app.clickHandler (); // "Ciao!" è allertato
Proviamo ad associarlo come gestore di eventi:
jQuery ('a'). bind ('click', app.clickHandler); Quando facciamo clic su un ancoraggio, non sembra funzionare (nulla è allertato). Questo perché jQuery (e la maggior parte dei modelli di eventi saggi), come impostazione predefinita, imposterà il contesto del gestore come elemento di destinazione, ovvero, l'elemento appena cliccato sarà accessibile tramite "Questo". Ma noi non vogliamo quello, vogliamo"Questo"essere impostato su"App"Ottenere questo in jQuery 1.4 non potrebbe essere più semplice:
jQuery ('a'). bind ('click', jQuery.proxy (app, 'clickHandler')); Ora ogni volta che si fa clic su un ancoraggio, "Ciao!" sarà avvisato!
La funzione proxy restituisce una versione "avvolta" della tua funzione, con "Questo"impostato su qualsiasi cosa tu specifichi. È utile anche in altri contesti, come il passaggio di callback ad altri metodi jQuery o ai plugin.
Leggi di più jQuery.proxy
È ora possibile aggiungere un ritardo alle code di animazione. In effetti, questo funziona su qualsiasi coda, ma il suo caso d'uso più comune sarà probabilmente con la coda "fx". Questo ti consente di mettere in pausa le animazioni senza dover incasinare callback e chiamate a "setTimeout". Il primo argomento a".ritardo()"è la quantità di millisecondi per cui si desidera ritardare.
jQuery ('# foo') .slideDown () // Scorri in basso .delay (200) // Non eseguire nulla per 200 ms .fadeIn (); // Dissolvenza in entrata Se si desidera ritardare una coda diversa dalla coda "fx" predefinita, sarà necessario passare il nome della coda come secondo argomento a ".ritardo()".
Leggi di più .ritardo(… )
jQuery 1.4 semplifica la verifica di un elemento (o collezione) ".ha ()"Qualcosa, è l'equivalente programmatico del filtro di selezione di jQuery": Ha ()Questo metodo selezionerà tutti gli elementi della raccolta corrente che contengono almeno un elemento conforme al selettore passato.
. JQuery ( 'div') ha ( 'ul');
Questo selezionerebbe tutti gli elementi DIV che contengono elementi UL. In questa situazione probabilmente useresti semplicemente il filtro di selezione (": Ha ()"), ma questo metodo è ancora utile quando è necessario filtrare una raccolta a livello di codice.
jQuery 1.4 rivela anche il "contiene"funzione sotto lo spazio dei nomi jQuery Questa è una funzione di basso livello che accetta due nodi DOM e restituirà un valore booleano che indica se il secondo elemento è contenuto nel primo elemento..
jQuery.contains (document.documentElement, document.body); // Restituisce vero - è dentro
Maggiori informazioni su: .ha (...), jQuery.contains (...)
Abbiamo avuto il ".avvolgere ()"metodo per un po 'ora. jQuery 1.4 aggiunge il".scartare()"metodo che fa il contrario, se assumiamo la seguente struttura DOM:
foo
Possiamo scartare l'elemento del paragrafo in questo modo:
jQuery ( 'p') scartare ().;
La struttura DOM risultante sarebbe:
foo
In sostanza, questo metodo rimuove semplicemente il genitore di qualsiasi elemento.
Leggi di più .scartare (...)
Il nuovo ".staccare ()"Il metodo ti permette di rimuovere elementi dal DOM, proprio come il".rimuovere()"metodo: la differenza fondamentale con questo nuovo metodo è che non distrugge i dati detenuti da jQuery su quell'elemento, inclusi i dati aggiunti tramite".dati()"e qualsiasi gestore di eventi aggiunto tramite il sistema di eventi di jQuery.
Questo può essere utile quando devi rimuovere un elemento dal DOM, ma sai che dovrai riaggiungerlo in una fase successiva. I suoi gestori di eventi e qualsiasi altro dato rimarranno.
var foo = jQuery ('# pippo'); // Associa un gestore di eventi importante a foo.click (function () alert ('Foo!');); foo.detach (); // Rimuoverlo dal DOM // ... do stuff foo.appendTo ('body'); // Aggiungilo al DOM foo.click (); // avvisi "Foo!" Leggi di più .staccare (...)
jQuery 1.4 offre due nuovi modi per utilizzare il ".indice()"metodo. In precedenza, si poteva passare un solo elemento come argomento e ci si aspetta che venga restituito un numero che indica l'indice di quell'elemento all'interno della raccolta corrente.
Passando senza argomenti ora restituisce l'indice di un elemento tra i suoi fratelli. Quindi, assumendo la seguente struttura DOM:
Quando si fa clic su un elemento della lista, si desidera scoprire l'indice dell'elemento selezionato tra tutti gli altri elementi dell'elenco. È semplice come:
jQuery ('li'). click (function () alert (jQuery (this) .index ());); jQuery 1.4 consente inoltre di specificare un selettore come primo argomento di ".indice()"così facendo otterrai l'indice dell'elemento corrente tra la raccolta prodotta da quel selettore.
Si noti che ciò che viene restituito da questo metodo è un numero intero e restituirà -1 se il selettore / elemento passato non può essere trovato nel documento.
Leggi di più .indice (...)
La maggior parte dei metodi di manipolazione DOM ora supporta il passaggio di una funzione come argomento esclusivo (o seconda, nel caso di ".css ()"&".attr ()"). Questa funzione verrà eseguita su ogni elemento della raccolta per determinare quale deve essere utilizzato come valore reale per tale metodo.
I seguenti metodi hanno questa capacità:
All'interno della funzione di callback, avrai accesso all'elemento corrente nella collezione tramite "Questo"e il suo indice tramite il primo argomento.
jQuery ('li'). html (function (i) return 'Index di questa voce di elenco:' + i;); Inoltre, con alcuni dei metodi di cui sopra avrai anche un secondo argomento. Se stai chiamando un metodo setter (come ".html ()" o ".attr ( 'href)") avrai accesso al valore corrente.
jQuery ('a'). attr ('href', function (i, currentHref) return currentHref + '? foo = bar';); Come puoi vedere, con il ".css ()" e ".attr ()"metodi, passeresti la funzione come secondo argomento, poiché il primo verrebbe utilizzato per denominare la proprietà che desideri modificare:
jQuery ('li'). css ('color', function (i, currentCssColor) return i% 2? 'red': 'blue';); jQuery 1.4 aggiunge due nuove funzioni di supporto (memorizzate direttamente sotto lo spazio dei nomi jQuery) che ti aiutano a determinare che tipo di oggetto hai a che fare con.
Innanzitutto, c'è "isEmptyObject", questa funzione restituisce un valore booleano che indica se l'oggetto passato è vuoto (privo di proprietà - diretto e ereditato). Secondo, c'è "isPlainObject", che restituisce un valore booleano che indica se l'oggetto passato è un oggetto JavaScript semplice, ovvero uno creato tramite"" o "nuovo oggetto ()".
jQuery.isEmptyObject (); // true jQuery.isEmptyObject (pippo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (finestra); // false jQuery.isPlainObject (jQuery ()); // falso
Maggiori informazioni su: isPlainObject (...), isEmptyObject (...)
jQuery's ".più vicina()"Il metodo ora accetta una serie di selettori, utile quando si desidera attraversare gli antenati di un elemento, cercando (più di uno) elementi più vicini con determinate caratteristiche.
Inoltre, ora accetta un contesto come secondo argomento, il che significa che puoi controllare fino a che punto o quanto vicino vuoi che il DOM attraversi. Entrambi questi miglioramenti si adattano a casi d'uso rari, ma sono utilizzati internamente con grande efficacia!
Leggi di più .più vicina(… )
Come menzionato, per delegare gli eventi "focus" e "blur" è necessario utilizzare questi nuovi eventi, chiamati "focusin" e "focusout". Questi eventi ti consentono di agire quando un elemento, o un discendente di un elemento, ottiene il focus.
jQuery ('form') .focusin (function () jQuery (this) .addClass ('focused');); .focusout (function () jQuery (this) .removeClass ('focused');); Dovresti anche notare che entrambi questi eventi non si propagano ("bolla"); sono catturati. Ciò significa che l'elemento più esterno (antenato) verrà attivato prima dell'elemento causale "bersaglio".
Maggiori informazioni su concentrarsi su e focusOut eventi.
Bene, è così! Ho cercato di coprire i cambiamenti che penso avranno un impatto su di te!
Se non lo hai già fatto, dovresti controllare il "14 giorni di jQuery", un evento online eccezionale che segna il rilascio di jQuery 1.4 e il quarto compleanno di jQuery!
E non dimenticare di pagare il nuovo Documentazione API!
Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].
Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.
