Share
jQuery 1.4 ble nylig utgitt. Dette var ikke bare en vedlikeholdsløsning som noen hadde spekulert; det er mange Nye funksjoner, forbedringer og ytelsesforbedringer inkludert i 1.4! Dette innlegget dekker de nye funksjonene og forbedringene som du finner fordelaktig.
Du kan laste ned jQuery 1.4 akkurat nå, her: http://code.jquery.com/jquery-1.4.js
Pre 1.4, jQuery støttet å legge til attributter til en element samling via den nyttige "attr"-metoden, som kan bestås både et attributtnavn og en verdi, eller et objekt som angir flere attributter. jQuery 1.4 legger til støtte for å overføre et attributtobjekt som det andre argumentet til jQuery-funksjonen selv ved elementdannelse.
La oss si at du må opprette et ankerelement med flere attributter. Med 1.4 er det så enkelt som:
Accentsconagua
jQuery ('', id:' foo ', href:' http://google.com ', tittel:' Bli en Googler ', rel:' ekstern ', tekst:' Gå til Google! ' ); Du har kanskje lagt merke til "tekst"attributt - du vil sikkert lure på hva det gjør der, tross alt er det ingen"tekst"Attributt for ankre! Vel, jQuery 1.4 bruker sine egne metoder når du bestiller visse attributter. Så" attributten "som er spesifisert ovenfor, ville få jQuery til å ringe".tekst()"metode, passerer" Gå til Google! "som eneste argument.
Et bedre eksempel på dette i aksjon:
jQuery ('', id:' foo ', css: fontWeight: 700, color:' green ', klikk: funksjon () alert (' Foo har blitt klikket! '); ); "ID" er lagt til som en vanlig attributt, men "css" og "klikk" egenskaper utløser anrop av hver respektive metode. Ovennevnte kode, før 1,4-utgivelsen, ville ha blitt skrevet slik:
jQuery ('') .attr (' id ',' foo ') .css (fontWeight: 700, color:' green ') .click (funksjon () alarm (' Foo har blitt klikket! ');); Les mer om jQuery (...)
Tre nye metoder er lagt til DOM traversal arsenal i 1.4, "nextUntil","prevUntil"og"parentsUntil". Hver av disse metodene vil krysse DOM'en i en bestemt retning til den valgte väljeren er fornøyd. Så, la oss si at du har en liste over frukt:
Du vil velge alle elementene etter "Apple", men du vil stoppe når du når "Jordbær". Det kunne ikke vært enklere:
jQuery ('ul li: contains (Apple)'). nextUntil (': contains (Pear)'); // Velger Banan, Drue, Jordbær Les mer om: prevUntil, nextUntil, foreldreUtil
I stedet for å knytte en rekke hendelsesbindende metoder sammen, kan du klumpe dem alle sammen i samme samtale, slik som:
jQuery ('# foo) .bind (klikk: funksjon () // gjør noe, mouseover: funksjon () // gjør noe, mouseout: funksjon () // gjør noe) Dette fungerer også med ".en()".
Les mer om .bind (...)
I stedet for bare å definere en lettelsefunksjon for en enkelt animasjon, kan du nå definere en annen lettelsefunksjon for hver egenskap du animerer. jQuery inneholder to avlastningsfunksjoner, sving (standard) og lineær. For andre må du laste dem ned separat!
For å angi en lettelsefunksjon for hver eiendom, definerer du bare egenskapen som en matrise, med den første verdien er det du vil animere eiendommen til, og den andre er lettelsefunksjonen som skal brukes:
jQuery ('# foo'). animate (left: 500, top: [500, 'easeOutBounce'], 2000); Se denne koden i aksjon!
Du kan også definere per-egenskapsavlastningsfunksjoner i det valgfrie alternativobjektet som egenskapsnavn-verdi-par i "specialEasing" -objektet:
jQuery ('# foo'). animate (left: 500, top: 500, varighet: 2000, specialEasing: top: 'easeOutBounce'); Redaktørens kommentar - Forfatteren av denne artikkelen, James Padolsey, er beskjeden. Denne nye funksjonen var hans ide!
Les mer om easing av eiendommer per eiendom
jQuery 1.4 legger til støtte for å delegere "sende inn","endring","fokus"og"uklarhet"hendelser. I jQuery bruker vi".bo()"metode for å delegere hendelser. Dette er nyttig når du må registrere hendelseshåndterere på mange elementer, og når nye elementer kan legges over tid (ved hjelp av".bo()"er billigere enn re-binding kontinuerlig).
Men vær forsiktig! Du må bruke hendelsesnavnene, "focusin"og"focusout"hvis du vil delegere" fokus "og" uskarphet "hendelser!
jQuery ('input'). live ('focusin', funksjon () // gjør noe med dette); jQuery 1.4 gir en ny "proxy"Funksjonen under jQuery namespace. Denne funksjonen tar to argumenter, enten et" omfang "og et metodenavn, eller en funksjon og det tiltenkte omfanget. JavaScript's" dette "søkeordet kan være ganske vanskelig å holde tak i. Noen ganger vant du ' t vil at det skal være et element, men i stedet et objekt som du tidligere har laget.
For eksempel, her har vi en "app"objekt som har to egenskaper, en"clickHandler"metode og en config-objekt:
var app = config: clickMessage: 'Hei!' , clickHandler: function () alert (this.config.clickMessage); ;
"clickHandler"metode, når den kalles som"app.clickHandler ()" vil ha "app"som sin sammenheng, noe som betyr at"dette"søkeordet vil tillate det tilgang til"app". Dette fungerer ganske bra hvis vi bare ringer:
app.clickHandler (); // "Hei!" er varslet
La oss prøve å binde den som en hendelsehandler:
jQuery ('a'). bind ('klikk', app.clickHandler); Når vi klikker på et anker, ser det ikke ut til å fungere (ingenting er varslet). Det er fordi jQuery (og mest sane hendelsesmodeller) som standard angir konteksten til håndterer som målelement, det vil si at elementet som nettopp er klikket, vil være tilgjengelig via "dette"Men vi vil ikke ha det, vi vil ha"dette"å bli satt til"app". Å oppnå dette i jQuery 1.4 kunne ikke vært enklere:
jQuery ('a'). bind ('klikk', jQuery.proxy (app, 'clickHandler')); Nå når et anker er klikket, "Hei!" vil bli varslet!
Proxy-funksjonen returnerer en "innpakket" versjon av funksjonen din, med "dette"sett til hva du spesifiserer. Det er nyttig i andre sammenhenger, for eksempel å sende tilbakeringinger til andre jQuery-metoder, eller til plugins.
Les mer om jQuery.proxy
Du kan nå legge til en forsinkelse i animasjonskøene dine. Faktisk fungerer dette på hvilken som helst kø, men den vanligste brukssaken vil trolig være med "fx" -køen. Dette lar deg pause mellom animasjoner uten å måtte rote med tilbakeringinger og samtaler til "setTimeout". Det første argumentet til".utsette()"er mengden millisekunder du vil utsette for.
jQuery ('# foo') .slideDown () // Skyv ned .delay (200) // Gjør ingenting for 200 ms .fadeIn (); // Fade inn Hvis du vil utsette en annen kø enn standard "fx" -køen, må du passere kønavnet som det andre argumentet til ".utsette()".
Les mer om .forsinkelse (...)
jQuery 1.4 gjør det enkelt å sjekke om et element (eller samling) ".har ()"noe. Dette er den programmatiske tilsvarer jQuery's selector filter,": Er ()". Denne metoden vil velge alle elementene i gjeldende samling som inneholder minst ett element som overholder den valgte väljaren.
. JQuery ( 'div') har ( 'ul');
Det ville velge alle DIV-elementer som inneholder UL-elementer. I denne situasjonen vil du sannsynligvis bare bruke velgerfilteret (": Er ()"), men denne metoden er fortsatt nyttig når du må filtrere en samling programmatisk.
jQuery 1.4 avslører også "inneholder"Funksjonen under jQuery-navneområdet. Dette er en lavnivåfunksjon som aksepterer to DOM-noder. Den returnerer en boolsk indikasjon om det andre elementet er inneholdt i det første elementet..
jQuery.contains (document.documentElement, document.body); // Returnerer sant - er innenfor
Les mer om: .har (...), jQuery.contains (...)
Vi har hatt ".pakke inn()"metode for en stund nå. jQuery 1.4 legger til".Pakk ()"metode som gjør det motsatte. Hvis vi antar følgende DOM-struktur:
foo
Vi kan pakke ut avsnittet slik som:
jQuery ( 'p') pakke (.);
Den resulterende DOM-strukturen ville være:
foo
I hovedsak fjerner denne metoden rett og slett foreldre til ethvert element.
Les mer om .pakke ut (...)
Den nye ".løsne()"-metoden lar deg fjerne elementer fra DOM, mye som".fjerne()"-metoden. Hovedforskjellen med denne nye metoden er at den ikke ødelegger dataene som holdes av jQuery på det elementet. Dette inkluderer data lagt til via".data()"og eventuelle hendelseshåndterere lagt til via jQuery's arrangementssystem.
Dette kan være nyttig når du må fjerne et element fra DOM, men du vet at du må legge det til på et senere tidspunkt. Dens håndtere og andre data vil fortsette.
var foo = jQuery ('# foo'); // Bind en viktig hendelse handler foo.click (funksjon () alert ('Foo!');); foo.detach (); // Fjern det fra DOM // ... gjør ting foo.appendTo ('body'); // Legg den tilbake til DOM foo.click (); // varsler "Foo!" Les mer om .løsne (...)
jQuery 1.4 gir deg to nye måter å bruke ".indeks ()"-metoden. Tidligere kunne du bare passere et element som argument, og du forventer at et nummer skal returneres som indikerer indeksen til elementet i dagens samling.
Å sende ingen argumenter returnerer nå indeksen for et element blant sine søsken. Så, forutsatt følgende DOM-struktur:
Når et listepunkt er klikket, vil du finne ut indeksen for det klikkte elementet blant alle de andre listepostene. Det er så enkelt som:
jQuery ('li'). klikk (funksjon () alert (jQuery (dette) .index ());); jQuery 1.4 lar deg også spesifisere en velger som det første argumentet til ".indeks ()", så vil du gi indeksen av det nåværende elementet blant samlingen produsert fra den väljeren.
Du bør være oppmerksom på at det som returneres fra denne metoden, er et heltall, og det vil returnere -1 hvis velgeren / elementet ikke er funnet i dokumentet.
Les mer om .indeks (...)
De fleste DOM-manipulasjonsmetodene støtter nå å overføre en funksjon som det eneste argumentet (eller andre, i tilfelle av ".css ()"&".attr ()"). Denne funksjonen vil bli kjørt på hvert element i samlingen for å bestemme hva som skal brukes som den reelle verdien for den metoden.
Følgende metoder har denne funksjonen:
Innen tilbakeringingsfunksjonen har du tilgang til gjeldende element i samlingen via "dette"og dens indeks via det første argumentet.
jQuery ('li'). html (funksjon (i) return 'Indeks for denne listeposten:' + i;); Også med noen av de ovennevnte metodene får du også et andre argument. Hvis du ringer en setter-metode (som ".html ()"eller".attr ( 'href)") har du tilgang til gjeldende verdi.
jQuery ('a'). Attr ('href', funksjon (jeg, nåværendeHref) return currentHref + '? foo = bar';); Som du kan se, med ".css ()"og".attr ()"metoder, ville du passere funksjonen som det andre argumentet, siden den første ville bli brukt til å navngi eiendommen du ønsker å endre:
jQuery ('li'). css ('farge', funksjon (jeg, nåværendeCssColor) return i% 2? 'rød': 'blå';); jQuery 1.4 legger til to nye hjelperfunksjoner (lagret direkte under jQuery namespace) som hjelper deg med å finne ut hvilken type objekt du har å gjøre med.
Først er det "isEmptyObject", returnerer denne funksjonen en booleske som angir hvorvidt det bestått objektet er tomt (uten egenskaper - direkte og arvet). For det andre er det "isPlainObject", som vil returnere en boolsk angir om det bestått objektet er et vanlig JavaScript-objekt, det vil si en skapt via""eller"nytt objekt ()".
jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (vindu); // false jQuery.isPlainObject (jQuery ()); // falsk
Les mer om: isPlainObject (...), isEmptyObject (...)
jQuery er ".nærmeste ()"-metoden aksepterer nå en rekke valgorer. Dette er nyttig når du vil krysse forfedrene til et element, på jakt etter (flere enn) nærmeste elementer med visse egenskaper.
I tillegg aksepterer den nå en kontekst som det andre argumentet, noe som betyr at du kan kontrollere hvor langt eller hvor nært du vil at DOM krysset til. Begge disse forbedringene har plass til sjeldne brukstilfeller, men de brukes internt til stor effekt!
Les mer om .nærmest (...)
Som nevnt, for å delegere hendelsene "fokus" og "uskarphet" må du bruke disse nye hendelsene, kalt "focusin" og "focusout". Disse hendelsene lar deg ta til handling når et element, eller en etterkommer av et element, får fokus.
jQuery ('form') .focusin (funksjon () jQuery (dette) .addClass ('fokusert');); .focusout (funksjon () jQuery (dette) .removeClass ('focused');); Du bør også merke seg at begge disse hendelsene ikke propagerer ("boble"); de er tatt. Dette betyr at det ytre (forfader) elementet vil bli utløst før kausal "mål" -elementet.
Les mer om focusIn og focusOut arrangementer.
Vel, det er det! Jeg har forsøkt å dekke endringene som jeg tror vil ha innvirkning på deg!
Hvis du ikke allerede har det, bør du sjekke ut "14 dager av jQuery", en fantastisk online-begivenhet som markerer utgivelsen av jQuery 1.4 og jQuerys fjerde bursdag!
Og ikke glem å kassen den nye API dokumentasjon!
Visste du at du kan tjene opp til $ 600 for å skrive en PLUS-opplæring og / eller screencast for oss? Vi leter etter dybde og velskrevne opplæringsprogrammer om HTML, CSS, PHP og JavaScript. Hvis du er i stand til å kontakte Jeffrey på [email protected].
Vær oppmerksom på at faktisk kompensasjon vil være avhengig av kvaliteten på den endelige opplæringen og screencast.
