[JavaScript] JQuery return object

[SideShow]

Hallo

Ik zit met een onduidelijkheid ivm wat JQuery nu eigenlijk returnt:

Aanschouw deze console:



Hoe komt het dat, ze op het eerste zicht gewoon alletwee het DOM element returnen, maar er bij $(x) dan wel zoveel methods beschikbaar zijn.

Je kan toch maar methods gebruiken die de functie/object terug geeft?
Ik zou verwachten dat $(x) een object teruggeeft met functies erin, maar in de console blijkt dit niet zo en is het ook gewoon het element.

Met andere woorden: hoe kan de fluent interface werken (.show) als $(x) dit niet terug geeft?

Ik vermoed dat JQuery intern werkt met een stack van elementen of iets dergelijks, gezien functies als .end, maar toch, dit vind ik vreemd

[ Voor 14% gewijzigd door SideShow op 01-05-2012 19:14 ]

[RobIII]

Ik heb even zo snel de link niet maar google eens op "10 things I learned" + jquery + irish. Dat zou een video moeten geven die 't, if I recall correctly, wel uit moet leggen (en meer).

Edit: eerste hit dus Ik kan 't alleen niet verifiëren gezien ik hier op een phone zit

[ Voor 28% gewijzigd door RobIII op 01-05-2012 19:40 ]

[Devilly]

RobIII schreef op dinsdag 01 mei 2012 @ 19:37:
Ik heb even zo snel de link niet maar google eens op "10 things I learned" + jquery + irish. Dat zou een video moeten geven die 't, if I recall correctly, wel uit moet leggen (en meer).

Ik neem aan dat je deze bedoelde: http://paulirish.com/2010...d-from-the-jquery-source/. Ik ken hem ook nog niet, bedankt voor de tip.

@ RobIII: leuk hoor, even snel je post aanpassen.

[ Voor 6% gewijzigd door Devilly op 01-05-2012 19:41 ]

[RobIII]

Devilly schreef op dinsdag 01 mei 2012 @ 19:39:
[...]

@ RobIII: leuk hoor, even snel je post aanpassen.

Als ik me niet vergis is er ook nog een tweede deel van

edit (again ) : Da's dus de tweede hit

[ Voor 21% gewijzigd door RobIII op 01-05-2012 20:27 ]

[SideShow]

Hoi .. ik heb met interesse het eerste filmpje bekeken.
Het antwoord zat er echter niet in.

Na wat verder zoeken, ben ik hierop terecht gekomen:
http://dean.edwards.name/weblog/2006/11/hooray/

Conclusie: het jQuery object is gewoon object die erft van Array, en functies aanbiedt via prototyping.

Thanks all

[ Voor 11% gewijzigd door SideShow op 01-05-2012 20:49 ]

[phex]

De eerste keer spreek je het aan via de DOM en de 2e keer via jQuery.
Show() is een jQuery methode, dus zodoende.

[Grijze Vos]

jQuery wrapt een object heen om je dom element, simpel gezegd.
(/me wacht op een uitgebreide uitleg van R4gnax.)

[Verwijderd]

SideShow schreef op dinsdag 01 mei 2012 @ 19:11:
Hoe komt het dat, ze op het eerste zicht gewoon alletwee het DOM element returnen, maar er bij $(x) dan wel zoveel methods beschikbaar zijn.

jQuery returnt geen DOM elementen, maar een jQuery object. Zo'n object ziet er op het eerste gezicht uit als een Array gevuld met DOM elementen: het heeft een .length property, en methods als slice, sort en push. Deze methods passen het object aan: het aantal elementen of de volgorde veranderd.

Het object heeft ook andere methods die effect hebben op de DOM elementen zelf: on, off, show, hide, etc.

getElementsByTagName returnt ook iets wat op een Array lijkt maar het niet is: een NodeList.

Beide objecten zien er in het console hetzelfde uit, vandaar de verwarring, denk ik.

[SideShow]

Inderdaad. Ondertussen had ik al door dat het om Array-afgeleiden gaat :-)

[R4gnax]

Grijze Vos schreef op woensdag 02 mei 2012 @ 16:36:
jQuery wrapt een object heen om je dom element, simpel gezegd.
(/me wacht op een uitgebreide uitleg van R4gnax.)

Dat is inderdaad in de regel wat jQuery doet. De technische details zijn voor de gemiddelde jQuery gebruiker niet echt interessant meer, maar het is wel iets meer dan een simpele wrapper om een array DOM elementen en ook niet een standaard prototypal inheritance van Array of NodeList. jQuery wordt namelijk bovenop de Sizzle selector engine gezet.

Vind je de internals van jQuery interessant, dan kun je ook eens naar de Decoding jQuery reeks van blog artikelen kijken. Ze gaan daar o.a. in op hoe het jQuery.fn onderdeel dat functies op een jQuery selectie aanbiedt, in elkaar steekt.