Ontdek de verborgen functies van jQuery

jQuery is niet altijd zoals het lijkt. Er zijn veel coole dingen gaande onder de oppervlakte, en er zijn veel methoden die gewoon wachten om ontdekt te worden, en veel mogelijke gebruiksmogelijkheden van jQuery's API die je misschien nog niet eerder hebt overwogen. In dit artikel neem ik een paar van de niet-voor de hand liggende dingen die ik over jQuery heb ontdekt, door.

1. Begrijp jQuery!

Wanneer je belt 'JQuery' wat gebeurt er?

De jQuery-functie zelf is heel eenvoudig:

 jQuery = function (selector, context) // Het jQuery-object is eigenlijk alleen de init-constructor 'enhanced' retourneer nieuwe jQuery.fn.init (selector, context); ;

De jQuery-functie (gewoonlijk de "wrapper" -functie genoemd) retourneert eenvoudigweg een jRLuery-object met een instantiereeks, d.w.z. een exemplaar van de 'JQuery.fn.init' bouwer.

Dit is handig om te weten; met deze informatie weten we dat we elke keer dat we bellen 'JQuery' we creëren eigenlijk een volledig uniek object met een reeks eigenschappen. jQuery is slim omdat het u een object geeft dat als een array kan worden behandeld. Elk van uw elementen (alles bij elkaar, gewoonlijk de "verzameling" genoemd) wordt binnen het object onder een numerieke index vermeld, net als binnen een array. En jQuery geeft dit object ook een 'lengte' eigendom, net zoals je zou verwachten van een array. Dit opent een wereld van mogelijkheden. Ten eerste betekent dit dat we wat functionaliteit van kunnen lenen 'Array.prototype'. jQuery 'plak' methode is daar een goed voorbeeld van - aangepast van de bron:

 / * ... jQuery.fn.extend (... * / slice: function () retourneer deze.pushStack (Array.prototype.slice.apply (this, arguments), "slice", Array.prototype.slice.call (argumenten) .join (",")); , / * ... * /

De inheemse 'plak' methode maakt dat niet uit 'deze' is geen echte reeks - het komt wel goed met alles dat een heeft 'lengte' eigendom en [0], [1], [2] enz.

Er zijn enkele andere interessante eigenschappen binnen dit jQuery-object -- '.Selector' en '.context' zal, meestal, de argumenten weerspiegelen waar je in overgaat 'jQuery (...)'.

 var jqObject = jQuery ('a'); jqObject.selector; // => "a"

Een ding dat belangrijk is om op te merken is dat jQuery je soms nieuwe jQuery-objecten geeft om mee te werken. Als u een methode uitvoert die de verzameling op de een of andere manier wijzigt, zoals '.ouders()', dan zal jQuery het huidige object niet wijzigen; het zal je gewoon een gloednieuwe laten zien:

 var originalObject = jQuery ('a'); var anotherObject = originalObject.parents (); originalObject === anotherObject; // => false

Alle methoden die de verzameling op een of andere manier muteren lijken een heel nieuw jQuery-object terug te geven - je hebt nog steeds toegang tot het oude object, via '.einde()', of meer verbaal, via '.PrevObject'.

2. Creëren van brood-en-boterelementen

Centraal bij de DOM-mogelijkheden van jQuery is de syntaxis voor het maken van elementen. 1.4 bracht een geheel nieuwe manier met zich mee om uw elementen snel en bondig te maken. bijv.

 var myDiv = jQuery ('', id:' my-new-element ', class:' foo ', css: color:' red ', backgrondColor:' #FFF ', border:' 1px solid #CCC ', klik op: function () alert ('Clicked!'); , html: jQuery ('', href:' # ', klik: function () // do something return false; ));

Vanaf 1.4 kun je een tweede argument aan de jQuery-functie doorgeven als je een element aan het maken bent - het object dat je passeert zal grotendeels handelen alsof je het doorgeeft aan '.attr (...)'. Echter, jQuery zal sommige van de eigenschappen toewijzen aan zijn eigen methoden, bijvoorbeeld de 'Klik' eigenschappenkaarten voor jQuery's 'Klik' methode (die een gebeurtenishandler bindt voor de 'Klik' evenement) en 'Css' kaarten naar jQuery's 'Css' methode enz.

Als u wilt weten welke eigenschappen aan de jQuery-methoden zijn toegewezen, opent u uw console en typt u 'JQuery.attrFn'.

3. Serialiseer uw ingangen

jQuery biedt een methode die u kunt gebruiken om alle ingangen in een of meer formulieren te serialiseren. Dit is handig bij het verzenden van gegevens via XHR ("Ajax"). Het is al lang in jQuery, maar er wordt niet vaak over gesproken en zoveel ontwikkelaars realiseren zich niet dat het er is. Het indienen van een volledig formulier via Ajax, met behulp van jQuery, kan niet eenvoudiger:

 var myForm = $ ('# my-form'); jQuery.post ('submit.php', myForm.serialize (), function () alert ('Gegevens zijn verzonden!'););

jQuery biedt ook de 'SerializeArray' methode, die is ontworpen om te worden gebruikt met meerdere formulieren, en de 'Param' helperfunctie (onder de jQuery-naamruimte) die een gewoon object neemt en een queryreeks retourneert, bijvoorbeeld.

 var data = name: 'Joe', leeftijd: 44, beroep: 'Web Developer'; jQuery.param (data); // => "name = Joe & age = 44 & profession =Web + Developer"

4. Animeer alles

jQuery 'Levende' methode is waarschijnlijk de meest flexibele methode van jQuery. Het kan worden gebruikt om vrijwel alles te animeren, niet alleen CSS-eigenschappen, en niet alleen DOM-elementen. Dit is hoe je normaal zou gebruiken 'Levende':

 jQuery ('# box'). animeren (left: 300, top: 300);

Wanneer u een eigenschap opgeeft om te animeren (bijv. 'top') jQuery controleert of je iets animeert met een stijleigenschap ('Element.style') en controleert of de opgegeven eigenschap ('top') is gedefinieerd onder 'stijl' -- als dat niet zo is, wordt jQuery eenvoudig bijgewerkt 'top' op het element zelf. Hier is een voorbeeld:

 jQuery ('# box'). animeren (top: 123, foo: 456);

'top' is een geldige CSS-eigenschap, dus jQuery wordt bijgewerkt 'Element.style.top', maar 'Foo' is niet een geldige CSS-eigenschap, dus jQuery wordt eenvoudig bijgewerkt 'Element.foo'.

We kunnen dit in ons voordeel gebruiken. Laten we bijvoorbeeld zeggen dat u een vierkant op een canvas wilt animeren. Laten we eerst een eenvoudige constructor en een definiëren 'trek' methode die bij elke stap van de animatie wordt aangeroepen:

 functie Vierkant (cnvs, breedte, hoogte, kleur) this.x = 0; this.y = 0; this.width = width; deze hoogte = hoogte; this.color = kleur; this.cHeight = cnvs.height; this.cWidth = cnvs.width; this.cntxt = cnvs.getContext ('2d');  Square.prototype.draw = function () this.cntxt.clearRect (0, 0, this.cWidth, this.cHeight); this.cntxt.fillStyle = this.color; this.cntxt.fillRect (this.x, this.y, this.width, this.height); ;

We hebben onze 'Square'-constructor en een van zijn methoden gemaakt. Een canvas maken en vervolgens animeren, kan niet eenvoudiger:

 // Maak een

Dit is een heel eenvoudig effect, maar het toont wel degelijk de mogelijkheden. Je kunt het hier in actie zien: http://jsbin.com/ocida (dit werkt alleen in browsers die het HTML5 canvas ondersteunen)

5. jQuery.ajax Retourneert het XHR-object

jQuery's Ajax utility-functies ('JQuery.ajax', 'JQuery.get', 'JQuery.post') alle keren terug 'XMLHttpRequest' object dat u kunt gebruiken om verdere bewerkingen uit te voeren voor elk verzoek. Bijvoorbeeld:

 var curRequest; jQuery ( 'button.makeRequest').klik (function () curRequest = jQuery.get ('foo.php', functie (antwoord) alert ('Data:' + response.responseText););); jQuery ( 'button.cancelRequest').klik (function () if (curRequest) curRequest.abort (); // abort () is een methode van XMLHttpRequest);

Hier doen we een verzoek wanneer het 'MakeRequest' op de knop is geklikt - en we annuleren het actieve verzoek als de gebruiker op de knop klikt 'annuleer verzoek' knop.

Een ander potentieel gebruik is voor synchrone verzoeken:

 var myRequest = jQuery.ajax (url: 'foo.txt', async: false); console.log (myRequest.ResponseTekst);

Lees meer over de 'XMLHttpRequest' object en kijk ook eens naar de Ajax-hulpprogramma's van jQuery.

6. Aangepaste wachtrijen

jQuery heeft een ingebouwd wachtrijmechanisme dat wordt gebruikt door alle animatiemethoden (die allemaal gebruiken 'Animeren () werkelijk). Deze wachtrij kan eenvoudig worden geïllustreerd met een eenvoudige animatie:

 jQuery ('a'). hover (function () jQuery (this) .anim (paddingLeft: '+ = 15 pixels'); , function () jQuery (this) .anim (paddingLeft: '- = 15 pixels'); );

Als je snel over een aantal ankers zweeft en er dan weer overheen zweeft, zullen de animaties in de rij staan en één voor één verschijnen - ik ben er zeker van dat velen van jullie al eerder getuige zijn geweest van dit rijeffect. Zo niet, kijk dan hier: http://jsbin.com/aqaku

De 'wachtrij' methode lijkt op het bekende 'elk' methode in hoe het wordt genoemd. Je geeft een functie door, die uiteindelijk voor elk van de elementen in de verzameling wordt gebruikt:

 jQuery ('a'). queue (function () jQuery (this) .addClass ('all-done ') dequeue (.); );

Alleen een functie doorgeven aan 'wachtrij' zorgt ervoor dat die functie aan de standaard wordt toegevoegd 'Fx' wachtrij, d.w.z. de wachtrij gebruikt door alle animaties gedaan door jQuery. Daarom wordt deze functie niet aangeroepen totdat alle huidige animaties die voorkomen op elk element in de verzameling (in dit geval alle ankers) zijn voltooid.

Merk op dat we een klasse toevoegen van 'helemaal klaar' in de bovenstaande functie. Zoals beschreven, wordt deze klasse alleen toegevoegd als alle huidige animaties voltooid zijn. We noemen ook de 'Dequeue' methode. Dit is erg belangrijk, omdat jQuery hiermee door kan gaan met de wachtrij (dat wil zeggen dat jQuery weet dat je klaar bent met wat je ook doet). jQuery 1.4 biedt een andere manier om de wachtrij voort te zetten; in plaats van te bellen 'Dequeue', noem eenvoudigweg het eerste argument dat aan uw functie is doorgegeven:

 jQuery ( 'a'). wachtrij (function (nextItemInQueue) // Doorgaan wachtrij: nextItemInQueue (); );

Dit doet precies hetzelfde, hoewel het iets nuttiger is omdat het overal binnen je functie kan worden opgeroepen, zelfs binnen een puinhoop van sluitingen (die meestal de 'deze' zoekwoord). Natuurlijk, pre-jQuery-1.4 zou je gewoon een referentie kunnen opslaan 'deze', maar dat zou een beetje vervelend worden.

Als u een functie aan een aangepaste wachtrij wilt toevoegen, geeft u gewoon de naam van uw aangepaste wachtrij als het eerste argument en de functie als de tweede:

 jQuery ( 'a'). wachtrij ('customQueueName ', function () // Voer spullen jQuery (this) .dequeue ('customQueueName); );

Merk op dat, omdat we de standaard niet gebruiken 'Fx' wachtrij, we moeten ook de naam van onze wachtrij doorgeven aan de 'Dequeue' methode, zodat jQuery door kan gaan met onze aangepaste wachtrij.

Lees meer over 'wachtrij', 'Dequeue' en 'JQuery.queue'.

7. Naamgebeurtenis van gebeurtenis

jQuery biedt een manier voor u om naamruimte-events te maken, wat erg handig kan zijn bij het ontwerpen van plug-ins en componenten van derden. Indien nodig kan de gebruiker van uw plug-in uw plug-in effectief uitschakelen door alle gebeurtenishandlers te ontbinden die zijn geregistreerd.

Als u een naamruimte wilt toevoegen bij het registreren van een gebeurtenishandler, geeft u gewoon achtervoegsel voor de gebeurtenisnaam met een punt en vervolgens uw unieke naamruimte (bijv.. ' .FooPlugin'):

 jQuery.fn.foo = function () this.bind ('click.fooPlugin', function () // do stuff); this.bind ( 'mouseover.fooPlugin ', function () // do stuff); geef dit terug; ; // Gebruik de plug-in: jQuery ('a'). Foo (); // Vernietig zijn event handlers: jQuery ('a'). Unbind ('.fooPlugin);

Alleen de naamruimte doorgeven aan 'Unbind' zal alle gebeurtenishandlers met die naamruimte ontkoppelen.

Conclusie

Welke heb ik gemist? Nuttige functies waarvan u denkt dat jQuery niet goed genoeg documenteert? Laten we bespreken in de opmerkingen!

Code