Share
jQuery 1.4 is onlangs vrijgegeven. Dit was niet alleen een onderhoudsrelease zoals sommigen hadden gespeculeerd; er zijn veel nieuwe functies, verbeteringen en prestatieverbeteringen opgenomen in 1.4! Dit bericht behandelt de nieuwe functies en verbeteringen die u mogelijk voordelig vindt.
Je kunt jQuery 1.4 nu downloaden, hier: http://code.jquery.com/jquery-1.4.js
Pre 1.4, jQuery ondersteund door attributen toe te voegen aan een elementenverzameling via de handige "attr"methode, die zowel een attribuutnaam als een waarde kan worden doorgegeven, of een object dat verschillende attributen specificeert. jQuery 1.4 voegt ondersteuning toe voor het doorgeven van een attributenobject als het tweede argument aan de jQuery-functie zelf, bij het creëren van een element.
Stel dat u een ankerelement met verschillende kenmerken moet maken. Met 1.4 is het zo simpel als:
Accentsconagua
jQuery ('', id:' foo ', href:' http://google.com ', titel:' Word een Googler ', rel:' external ', sms:' Go to Google! ' ); Je hebt misschien de "tekst"attribute - je zult je waarschijnlijk afvragen wat dat daar doet, er is tenslotte geen"tekst"attribuut voor anchors! Nou, jQuery 1.4 gebruikt zijn eigen methoden wanneer je bepaalde attributen doorgeeft. Dus het hierboven gespecificeerde" text "-attribuut zou ervoor zorgen dat jQuery de".tekst()"methode, doorgeven" Ga naar Google! "als het enige argument.
Een beter voorbeeld hiervan in actie:
jQuery ('', id:' foo ', css: fontWeight: 700, color:' green ', click: function () alert (' Foo is geklikt! '); ); De "id" wordt toegevoegd als een gewoon attribuut, maar de eigenschappen "css" en "click" activeren het aanroepen van elke respectieve methode. De bovenstaande code, vóór de 1.4-release, zou als volgt zijn geschreven:
jQuery ('') .attr (' id ',' foo ') .css (fontWeight: 700, color:' green ') .klik (functie () alert (' Foo is aangeklikt! ');); Lees meer over jQuery (...)
Drie nieuwe methoden zijn toegevoegd aan het DOM traversal arsenaal in 1.4, "nextUntil","prevUntil"en"parentsUntil". Elk van deze methoden zal de DOM in een bepaalde richting passeren totdat de doorgegeven selector is voldaan. Laten we zeggen dat je een lijst met fruit hebt:
U wilt alle items na "Apple" selecteren, maar u wilt stoppen zodra u "Strawberry" bereikt. Het kan niet eenvoudiger:
jQuery ('ul li: bevat (Apple)'). nextUntil (': contains (Pear)'); // Selecteert Banaan, Druif, Aardbei Lees meer over: prevUntil, nextUntil, parentsUntil
In plaats van een reeks event-bindingsmethoden aan elkaar te ketenen, kunt u ze allemaal in hetzelfde gesprek onderbrengen, zoals zo:
jQuery ('# foo) .bind (klik: functie () // do something, mouseover: function () // do something, mouseout: function () // do something) Dit werkt ook met ".een()".
Lees meer over .bind (...)
In plaats van slechts één easing-functie voor één animatie te definiëren, kunt u nu een andere easing-functie definiëren voor elke eigenschap die u animeert. jQuery bevat twee versnellingsfuncties, swing (de standaardinstelling) en lineair. Voor andere moet je ze afzonderlijk downloaden!
Als u een easing-functie voor elke eigenschap wilt opgeven, definieert u de eigenschap eenvoudig als een array, waarbij de eerste waarde is waarnaar u de eigenschap wilt verplaatsen en de tweede de easing-functie die moet worden gebruikt:
jQuery ('# foo'). animeren (links: 500, boven: [500, 'easeOutBounce'], 2000); Zie deze code in actie!
U kunt ook versnellingsfuncties per eigenschap in het optionele optiesobject definiëren als eigenschapnaam / waardeparen in het object "specialEasing":
jQuery ('# foo'). animeren (links: 500, top: 500, duration: 2000, specialEasing: top: 'easeOutBounce'); Noot van de redactie - De auteur van dit artikel, James Padolsey, is bescheiden. Deze nieuwe functie was zijn idee!
Lees meer over verlaging per onroerend goed
jQuery 1.4 voegt ondersteuning toe voor het delegeren van de "voorleggen","verandering","focus"en"vervagen"evenementen. In jQuery gebruiken we de".leven()"methode om evenementen te delegeren.Dit is handig wanneer u gebeurtenishandlers op veel elementen moet registreren en wanneer nieuwe elementen in de loop van de tijd toegevoegd kunnen worden (met behulp van".leven()"is minder duur dan voortdurend opnieuw bindend).
Maar pas op! U moet de gebeurtenisnamen gebruiken, "focus op"en"focusOut"als u de" focus "- en" vervaging "-gebeurtenissen wilt delegeren!
jQuery ('input'). live ('focusin', function () // doe hier iets mee); jQuery 1.4 biedt een nieuwe "volmacht"functie onder de jQuery-naamruimte .Deze functie neemt twee argumenten, hetzij een" scope "en een methode naam, of een functie en de beoogde scope. JavaScript's" dit "sleutelwoord kan vrij lastig zijn om te houden. Ik wil dat het een element is, maar in plaats daarvan een object dat je eerder hebt gemaakt.
Hier hebben we bijvoorbeeld een "app"object met twee eigenschappen, een"clickHandler"methode en een config-object:
var app = config: clickMessage: 'Hallo!' , clickHandler: function () alert (this.config.clickMessage); ;
De "clickHandler"methode, wanneer opgeroepen zoals"app.clickHandler ()" zal hebben "app"als de context, wat betekent dat de"deze"sleutelwoord geeft toegang tot"app"Dit werkt best goed als we gewoon bellen:
app.clickHandler (); // "Hoi!" is gewaarschuwd
Laten we proberen het als een gebeurtenishandler te binden:
jQuery ('a'). bind ('klik', app.clickHandler); Wanneer we op een anker klikken, lijkt het niet te werken (niets wordt gewaarschuwd). Dat komt omdat jQuery (en meest logische gebeurtenismodellen) standaard de context van de handler instellen als het doelelement, dat wil zeggen dat het element waarop net is geklikt toegankelijk is via "deze"Maar we willen dat niet, we willen"deze"worden ingesteld op"app"Het bereiken van dit in jQuery 1.4 kan niet eenvoudiger:
jQuery ('a'). bind ('klik', jQuery.proxy (app, 'clickHandler')); Nu wanneer op een anker wordt geklikt, "Hallo!" zal worden gewaarschuwd!
De proxy-functie retourneert een "ingepakte" versie van uw functie, met "deze"ingesteld op wat u opgeeft. Het is ook nuttig in andere contexten, zoals het doorgeven van callbacks naar andere jQuery-methoden of naar plug-ins.
Lees meer over jQuery.proxy
U kunt nu een vertraging toevoegen aan uw animatiewachtrijen. In feite werkt dit in elke wachtrij, maar het meest voorkomende gebruik zal waarschijnlijk met de wachtrij "fx" zijn. Hiermee kunt u tussen animaties pauzeren zonder dat u hoeft te rommelen met callbacks en oproepen naar "setTimeout"Het eerste argument om".vertraging()"is het aantal milliseconden waarvoor u wilt vertragen.
jQuery ('# foo') .slideDown () // Schuif omlaag .vertraging (200) // Doe niets gedurende 200 ms. fadeIn (); // Fade in Als u een andere wachtrij dan de standaard "fx" -wachtrij wilt uitstellen, moet u de naam van de wachtrij als het tweede argument doorgeven aan ".vertraging()".
Lees meer over .vertraging (...)
jQuery 1.4 maakt het gemakkelijk om te controleren of een element (of verzameling) ".heeft ()"something. Dit is het programmatische equivalent van jQuery's selector filter,": Heeft ()". Deze methode selecteert alle elementen in de huidige verzameling die ten minste één element bevatten dat voldoet aan de doorgegeven selector.
. JQuery ( 'div') heeft ( 'ul');
Dat zou alle DIV-elementen selecteren die UL-elementen bevatten. In deze situatie zou u waarschijnlijk het selectorfilter (": Heeft ()"), maar deze methode is nog steeds nuttig wanneer u een verzameling programmatisch moet filteren.
jQuery 1.4 onthult ook de "bevat"function onder de jQuery-naamruimte. Dit is een low-level-functie die twee DOM-knooppunten accepteert. Er wordt een boolean geretourneerd die aangeeft of het tweede element zich in het eerste element bevindt..
jQuery.contains (document.documentElement, document.body); // Retourneert waar - is binnen
Lees meer over: .heeft (...), jQuery.contains (...)
We hebben de ".wikkelen()"methode nu een tijdje. jQuery 1.4 voegt de".uitpakken ()"methode die het tegenovergestelde doet, als we uitgaan van de volgende DOM-structuur:
Foo
We kunnen het alinea-element als volgt uitpakken:
jQuery ( 'p') uitpakken ().;
De resulterende DOM-structuur zou zijn:
Foo
In wezen verwijdert deze methode eenvoudig de ouder van elk element.
Lees meer over .uitpakken (...)
De nieuwe ".losmaken ()"methode kunt u elementen uit de DOM verwijderen, net zoals de".verwijderen()"methode. Het belangrijkste verschil met deze nieuwe methode is dat het de gegevens die door jQuery worden opgeslagen niet vernietigt voor dat element..gegevens()"en event-handlers toegevoegd via het gebeurtenissysteem van jQuery.
Dit kan handig zijn wanneer u een element uit de DOM moet verwijderen, maar u weet dat u dit later moet toevoegen. De gebeurtenishandlers en andere gegevens blijven behouden.
var foo = jQuery ('# foo'); // Bind een belangrijke gebeurtenishandler foo.click (function () alert ('Foo!');); foo.detach (); // Verwijder het van de DOM // ... do stuff foo.appendTo ('body'); // Voeg het toe aan de DOM foo.click (); // meldingen "Foo!" Lees meer over .losmaken (...)
jQuery 1.4 geeft je twee nieuwe manieren om de ".inhoudsopgave()"methode. Vroeger kon je een element alleen als argument doorgeven en je zou verwachten dat een getal wordt geretourneerd dat de index van dat element binnen de huidige verzameling aangeeft.
Als u nu geen argumenten doorgeeft, wordt de index van een element tussen de broers en zussen weergegeven. Dus, uitgaande van de volgende DOM-structuur:
Wanneer u op een lijstitem klikt, wilt u de index van het aangeklikte element achter alle andere lijstitems vinden. Het is zo simpel als:
jQuery ('li'). klik (functie () alert (jQuery (this) .index ());); jQuery 1.4 biedt je ook de mogelijkheid om een selector als het eerste argument op te geven ".inhoudsopgave()", als u dat doet, krijgt u de index van het huidige element uit de verzameling die met die selector is geproduceerd.
Merk op dat wat van deze methode wordt geretourneerd een geheel getal is en dat het -1 retourneert als de geselecteerde selector / element niet in het document kan worden gevonden.
Lees meer over .inhoudsopgave(… )
De meeste DOM-manipulatiemethoden ondersteunen nu het doorgeven van een functie als het enige argument (of ten tweede, in het geval van ".css ()"&".attr ()"). Deze functie wordt uitgevoerd op elk element in de verzameling om te bepalen wat moet worden gebruikt als de echte waarde voor die methode.
De volgende methoden hebben de volgende mogelijkheid:
Binnen de callback-functie hebt u toegang tot het huidige element in de verzameling via "dezeen zijn index via het eerste argument.
jQuery ('li'). html (functie (i) return 'Index van dit lijstitem:' + i;); Ook krijg je bij sommige van de bovenstaande methoden een tweede argument. Als je een setter-methode aanroept (zoals ".html ()"of".attr ( "href)") heeft u toegang tot de huidige waarde.
jQuery ('a'). attr ('href', functie (i, currentHref) return currentHref + '? foo = bar';); Zoals je kunt zien, met de ".css ()"en".attr ()"methoden, zou u de functie doorgeven als het tweede argument, omdat de eerste gebruikt zou worden om de eigenschap die u wilt veranderen te benoemen:
jQuery ('li'). css ('color', function (i, currentCssColor) return i% 2? 'red': 'blue';); jQuery 1.4 voegt twee nieuwe helperfuncties toe (direct opgeslagen onder de jQuery-naamruimte) die u helpen bepalen met welk type object u te maken hebt.
Ten eerste is er "isEmptyObject", retourneert deze functie een boolean die aangeeft of het doorgegeven object al dan niet leeg is (verstoken van eigenschappen - direct en geërfd). Ten tweede is er "isPlainObject", waarmee een booleaanse waarde wordt geretourneerd die aangeeft of het doorgegeven object een eenvoudig JavaScript-object is, dat wil zeggen, een gemaakt met""of"nieuw object ()".
jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (venster); // false jQuery.isPlainObject (jQuery ()); // false
Lees meer over: isPlainObject (...), isEmptyObject (...)
jQuery's ".dichtst ()"methode accepteert nu een array van selectors Dit is handig wanneer je de voorouders van een element wilt doorlopen, op zoek naar (meer dan één) dichtstbijzijnde elementen met bepaalde kenmerken.
Bovendien accepteert het nu een context als het tweede argument, wat inhoudt dat u kunt bepalen hoe ver of hoe dichtbij u wilt dat de DOM doorloopt. Beide uitbreidingen zijn geschikt voor zeldzame gevallen, maar ze worden intern met groot succes gebruikt!
Lees meer over .dichtstbijzijnde (...)
Zoals gezegd, om de "focus" - en "vervaging" -gebeurtenissen te delegeren, moet u deze nieuwe gebeurtenissen gebruiken, "focusin" en "focusout" genoemd. Met deze gebeurtenissen kunt u actie ondernemen wanneer een element of een afstammeling van een element de focus krijgt.
jQuery ('vorm') .focusin (function () jQuery (this) .addClass ('focused');); .focusout (function () jQuery (this) .removeClass ('focused');); Merk ook op dat beide gebeurtenissen zich niet verspreiden ("bubble"); ze worden gevangen. Dit betekent dat het buitenste (voorouder) element zal worden getriggerd vóór het oorzakelijke "doel" -element.
Lees meer over de focus op en focusOut events.
Nou, dat is het dan! Ik heb geprobeerd de wijzigingen te verhelpen waarvan ik denk dat ze invloed op je hebben!
Als je dat nog niet hebt gedaan, bekijk dan de "14 dagen jQuery", een geweldig online evenement dat de release van jQuery 1.4 en de vierde verjaardag van jQuery markeert!
En vergeet niet om het nieuwe uit te checken API-documentatie!
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
