Thoughts on My First jQuery Experience

By  on  

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.

  1. Porting over the original Moo class didn't take very long. I think I caught on to things pretty quickly.
  2. 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.
  3. 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
    		})
    	
  4. MooTools' syntax is prettier, in my opinion. jQuery, to its credit, doesn't require as much code.
  5. Not once did I consider speed because I know both of these libraries are lightning fast.
  6. The jQuery documentation is great. It was very helpful during this first exercise.
  7. 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.
  8. jQuery and MooTools aren't that different.
  9. Chris Coyier's MaxSide: jQuery Plugin (and How-To) article was extremely helpful, as was his help via IM.
  10. jQuery's Evangelist, Rey Bango, did his job well to get me to try his library. Jeremy Martin did his due diligence too.
  11. 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.

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

Discussion

  1. WC

    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?

  2. nacho

    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.

  3. 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!

  4. 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"});
    
  5. Catar4x

    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.

  6. 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.

  7. 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.

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

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

    Rey – jQuery Team

  10. 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!

  11. @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.

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

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

    Anything is possible.

  14. 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.

  15. 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.

  16. 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.

  17. Jay

    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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!