Thoughts on My First jQuery Experience

Written by David Walsh on Tuesday, August 12, 2008

Yesterday I debuted my first jQuery script/plugin: dwImageProtector. As a MooTools fanatic, I wasn’t sure what to expect from this first jQuery experience. Let me share a few thoughts on the experience.

Porting over the original Moo class didn’t take very long. I think I caught on to things pretty quickly.
I’m not huge on $() returning more than just one element. I like how Moo’s dollar function grabs ONE and ONLY ONE element and the double-dollar function grabs a collection of them.

I find MooTools’ syntax more elegant, especially the creation of new elements:

MooTools:

		var p = new Element('img', {
			src: this.options.image,
			width: size.width,
			height: size.height,
			styles: {
				'z-index': this.options.zIndex,
				'left': size.left + 'px',
				'top': size.top + 'px',
				'position': 'absolute'
			}
		})

jQuery:

		$('<img />').attr({
			width: width,
			height: height,
			src: settings.image
		}).css({
			border: '1px solid #f00',
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		})

MooTools’ syntax is prettier, in my opinion. jQuery, to its credit, doesn’t require as much code.
Not once did I consider speed because I know both of these libraries are lightning fast.
The jQuery documentation is great. It was very helpful during this first exercise.
I like jQuery’s structure of creating and using a plugin. I can see its appeal. Not more than MooTools’ class creation structure — it’s just different.
jQuery and MooTools aren’t that different.
Chris Coyier’s MaxSide: jQuery Plugin (and How-To) article was extremely helpful, as was his help via IM.
jQuery’s Evangelist, Rey Bango, did his job well to get me to try his library. Jeremy Martin did his due diligence too.
I encourage all jQuery users to give MooTools a shot and to not be afraid of using Moo. It has a reputation for having a large learning curve, which is definitely not the truth.

I was really happy to add some jQuery to my repertoire. From this point forward, I’m going to try to provide everything that I do in MooTools in jQuery format also. Let me know if there’s a Moo class that I’ve created that you’d like ported to jQuery.

Download PDF

Follow via RSS Epic Discussion

August 12 / #

WC says:

I admit I’m a jQuery zealot.

I was wondering if you found anything in 1 or the other that would make you pick it for a certain situation?

I guess what I’m really asking is: Is there any point in learning/using both?

August 12 / #

nacho says:

It has a reputation for having a large learning curve, which is definitely not the truth.

you’re absolutely right. I barely knew javascript when i started with Mootools and i found it really intuitive…. never imagined it could be so easy to program javascript. And that was with 1.1, now 1.2
has a great documentation.

August 12 / #

Janko says:

I’m glad you liked jQuery. It has been my good companion on several projects. I just can’t image using any other library than jQuery, but if you recommend MooTools then I have to give it a try.

Looking forward to your jQery articles!

August 12 / #

Joel says:

I have gone from MooTools to jQuery fairly recently. I have to agree with you on the neat syntax for adding new elements in MooTools. I was a bit disappointed with having tags and such within the javascript code, but a while back I came across the following syntax, which I find much more elegant:

$(document.createElement(“img”)).attr({src:settings.img, alt:”whatever”});

August 12 / #

Catar4x says:

I have known Mootools and learned some function through this blog.
I prefer Mootools for its event handling perfect and effects included ! So I left Jquery.
There is no better than mootools for me.

August 12 / #

Sean McArthur says:

I’ve used jQuery slightly before picking Mootools. My opinions of them both:

jQuery appeals to designers more because it’s easier to use a single plug-in or effect. It’s usually a simple one- or two-liner to get pretty effects, and not much programming knowledge is needed.

Mootools appeals to ME because I prefer making my own effects before using them, and the syntax (like you said) of jQuery just seems mean. Mootools is so much easier to create a class using OOP.

i <3 mootools.

August 12 / #

david says:

WC: I guess I could use the line that it’s never bad to learn something else. That said, to answer your question, I’d like to know jQuery if I’m a in the position of inheriting a website that was created by another developer. If they use a different JS framework, I’d prefer to not have to rewrite all of the working stuff to fit my preferred framework.

August 12 / #

Jason Jaeger says:

Thanks for the post. I have been thinking of trying jQuery for while too, mostly, like you, to have it under my belt.

August 12 / #

Rey Bango says:

Glad you took the time to check out jQuery, David. I’m looking forward to seeing more jQuery posts from you.

Rey – jQuery Team

August 12 / #

Chris says:

Hello David,

I love your site! You explain everything very thoroughly, but not confusing. I have mostly used jQuery and Mootools for all my javascript needs anyways, so you sticking with those 2 frameworks works nicely for me!

I really liked your ‘Customizable Tooltips‘ tutorial. Any chance you can port that to jQuery?

Also, the smoothscroller effect that you have here and here, can you port this effect to jQuery?

Thanks for the great effort!

August 12 / #

david says:

@Chris: The customizable tooltips sounds a bit lofty of a goal at this point. :) And I’d be shocked if jQuery didn’t already have a SmoothScroll plugin.

August 12 / #

Chris says:

I don’t understand what you mean by ‘lofty’? Does that mean it is challenging? Does that mean it’s not possible?

August 12 / #

david says:

@Chris: I’m new to jQuery. Gotta let me get my feet wet first.

Anything is possible.

August 12 / #

Marc says:

I recommended jQuery to a developer I work with…but I wonder if I should mention Mootools’ nice syntax now. He likes his nice syntax.

Cool blog, btw.

August 13 / #

Vipul Limbachiya says:

Thanks for the post.

I’ve been using prototype for long time and now shifted to jQuery. I’ll give a try to mootools also :)

I really love to experiment with different libs, prototype was comfortable. jQuery rocks..!!! I’ll give my opinion to MooTools soon..!

Thanks.

August 13 / #

Shane says:

You’re absolutely right about the documentation. I’ve found that it’s crucial to have extensive help when learning a new technology. The jQuery site delivers and this has certainly helped me to get to grips with, and enjoy, this magnificent framework.

August 21 / #

Jay says:

Dude jquery rules! Finally an article on jquery. I love jquery bc I can understand what the crap is going on. It’s so clean. I like that selectors return more than 1 element, that’s what they should do just like CSS. It’s easy to say .each. Anywho I started with moo.fx then did mootools for a while but jquery is so clean and I can understand it! and the documentation is fantastic.