Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with:

You Really Shouldn't Be Here jQuery, My Wife Might Begin To Suspect Something

By Ben Nadel on

As developers, you must understand that it is hard to relinquish control over all aspects of the programming process. I know that I do. I like being involved in all parts of the machinery and I pride myself on the fact that I can code it all myself. Now, I fancy myself a fairly high-level Javascript developer; Javascript makes a lot of sense to me and I have been coding it for more than a decade. But, at the same time, I know there's stuff I just can't do very well, like create DHTML modal windows or determine the innerWidth of a window across all browsers.

My old boss, Glen Lipka, has been trying very hard to get me to use jQuery for months and months now and I have been very resistant for the reasons I talked about above; I just don't want to give up control to some black-boxed jQuery object. Then, David Ries of Edit.com came to our offices and gave a presentation on jQuery. It looks very cook, always has, but still, I didn't budge. Then finally, my friend David Leventi, an up-and-coming photography star needed help rebuilding his web site. Ok, a photographer, a very "Artsy" site design.... maybe it's time I looked at jQuery?

Three days ago, I sat down to start coding Leventi's new site. My first page, my "Hello World", if you will, was a photo gallery page with a main photo and a sliding film-strip of photo thumbnails below it. I started to code it all by hand just to get an idea of what it was supposed to do. Then, I started to rewrite parts of it using jQuery.

WHAT?!?!?

I have to say, after about three seconds, the power of this jQuery object smacked me across the face with its power. The second I got the main image to fade to white, swap sources, then fade back to view.... not quite sold yet, but very freakin' impressed.

After about five minutes, I WAS sold and here's the line that sold me:

  • $( objSource.parentNode ).children( ".on" ).attr( "class", "off" );

objSource was the thumbnail that was clicked. What the line above is doing is getting the parent node (DOM) of the source (passed to the function as "this"), which is the thumb nail strip container. Then, it selects all children of the strip whose class is "on". Then it takes all of those children (should only be one) and sets their class name to "off".

I have to say I almost got giddy at the thought of this! How freakin' cool is that? I can even feel my heart beating a little faster just thinking about it this morning. What keeps getting me over and over again is the simple yet SUPER POWERFUL selector expressions that are available. ".on" iterates through the child nodes and finds all the appropriate elements?!? NUTS!

Rey Bango was correct, it IS like crack and I am hooked. I just want to start selecting random crap out of the DOM using crazy selector power. I am just learning, so I am sure there is SOOO much that I am doing manually that could be simplified using jQuery. Time to print out the API and get reading :)

If anyone is interested in seeing my Hello World jQuery page, here it is:

http://www.bennadel.com/clients/beta/david_leventi/people.cfm

This is the alpha of my friend's new site. I used jQuery to fade in and out the main photo. I also used jQuery with an Easing plugin to move the thumbnail strip back and forth on the bottom. Currently, I am manually figuring out what the pixel left of the thumb strip should be for each movement, but I am sure this can be cleaned up with jQuery some how.

I see possibilities now. I have to change the way I think. I have to start moving forward. Honestly, I have to start listening to Glen Lipka. He seems to have his finger on the pulse of user interface development. He told me to study CSS before it was popular. He told me to get on the jQuery band wagon before most people knew about it. Most advices he has given me have been 100% on the mark. Time to learn from the past.




Reader Comments

Very cool!!! Been looking at this too and it seems to be great (especially for a JS n00b like myself). So, what *else* has Glenn been suggesting you look at? Always like to keep ahead of the curve . . . !

Reply to this Comment

Thank Pete! I hope the Frameworks conference went well. My work load is JUST now starting to lighten up and I look forward to digging through everyone's notes and presentation code.

Glen's latest advice is about jQuery. But in the past he has pushed my to really get into Flash and Open Lazlo way before I had even heard of FLEX and now you see where we are. I will share any advice that I get from this guy in the future.

Reply to this Comment

@Ben: Welcome aboard bud. I knew you'd get hooked and I'm really glad that Glen turned you on to this. :o)

@Peter: Glad to see another CF notable joing the fray!! Let me know if you have any questions and I'll be glad to help (rey {at} reybango {dot} com). Here are some links for you to checkout:

Query:
http://jquery.com/

The compressed JavaScript file:
http://jquery.com/src/jquery-1.1.1.pack.js

The uncompressed JavaScript file:
http://jquery.com/src/jquery-1.1.1.js

The full release notes:
http://jquery.com/blog/2007/01/22/jquery-111/

Plugins & UI Widgets/Controls:
http://docs.jquery.com/Plugins

Documentation:
http://docs.jquery.com/Main_Page
http://www.visualjquery.com/
http://jquery.bassistance.de/api-browser/

Magazine:
http://www.visualjquery.com/magazine/

Mailing List:
http://jquery.com/discuss/

Project Blog:
http://jquery.com/blog/

Learning Resources:
http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/

Sites Using jQuery:
http://docs.jquery.com/Sites_Using_jQuery

Reply to this Comment

Ben,

interesting title for your post. I've been meaning to try jQuery but just got too many things I want to try and not enough time in the day. I've been using prototype and scriptaculous however. It's similar framework but probably does not have as many plug-ins. Anyway, for api docs check out http://www.gotapi.com/, it's pretty neat.

Reply to this Comment

mootools is much better! ;) There are so many JavaScript frameworks out there though so you got a lot of other choices besides jQuery. I would have done prototype but I've found next to nothing on documentation. I've preferred mootools for that and also because its modular. I never have to worry about what files depend on one another, the download takes care of that for me.

I've never really felt comfortable with JavaScript but since I read DOM Scripting by Jeremy Keith I've found it to be very easy to work with. And with better debugging tools it only gets easier. Just nice to have a good framework to help keep the code light. What has really wowed me is how easy it is to do unobtrusive JavaScript. Before I always said I knew JavaScript but never actually did much coding in it. Now I'm much more comfortable.

Reply to this Comment

Javier,

I have that exact same Dom Scripting book. It was very good and I liked how the author went layer by layer into a proper DOM scripting solution.

Very clear and easy to follow... I highly recommend it.

dw

Reply to this Comment

Thanks for the backup Dan! I agree as its the best book out there on standard and unobtrusive JavaScript. Jeremy Keith is a great developer in the web standards community. His next book which comes out this month is Bulletproof Ajax. If you have Bulletproof Web Design (which you should otherwise I will be furious!) you'll know what to expect.

Reply to this Comment

Now that does look cool...

Yet again, reading Ben's blog means I'll lose several hours of productive time while I play with a new toy.

(But as usual, it will save me many hours in the long run!)

Reply to this Comment

@Javier: Que pasa Xavi? Had to ask you in Spanish since I'm Cuban. :o)

MooTools is definitely a great project and those guys are really top notch developers. I can't really agree that the library is better than jQuery because I do feel that jQuery has top notch code, incredible documentation, the best user community and one of the most comprehensive suites of plugins/UI widgets of any project.

I also ran the whole gamut of tools including moo.fx (predecessor to MooTools), Prototype/Scriptaculous, Dojo, MochiKit & YUI. I fell in love with jQuery from the moment I used it because of its simplistic syntax, chainability (which they started), as well as all of the goodness I mentioned above. I became such a fan that I was actually asked to joing the jQuery project team.

Since then, I've turned on ColdFusion notables such as Rob Gonda (Mr. AjaxCFC) & Joe Danziger (ajaxcf.com) to jQuery and Rob even refactored AjaxCFC to use jQuery instead of DWR.

It'd be really cool is you would take a look at jQuery yourself and see the power behind it. With your experience in MooTools, you should pick it up VERY easily and I think you'd be pleasantly surprised at its power. Ping me if you have any questions about it. AIM: gotcfm

Reply to this Comment

@Dan: Yep, Dom Scripting is an awesome book and I'm about to pick up his new book, Bulletproof Ajax. As Javier mentioned, Dom Scripting is a must read and I'm sure his second book is right on par. Two other stand outs are Ajax In Action (Manning) and Beginning JavaScript with DOM Scripting and Ajax (Apress). The second is an incredible book to get you up to speed on JS & DOM and throws in some Ajax for good measure.

@Peter: My pleasure on the links. If you have any questions don't hesitate to contact me. I have the whole jQuery team at my disposal.

@Boyan: GotApi.com is awesome. We have the jQuery API on there as well. We also have these two resources for our API:

http://www.visualjquery.com/1.1.1.html
http://jquery.bassistance.de/api-browser/

@Seb: If you need some help, just buzz me man. I'm here to help

@Tony: Always glad to see you supporting the project man! We still have to get together for lunch. :o)

On a parting note, the fact that there's a growing number of CF experts using jQuery, in my mind, makes it a GREAT choice to work with. I know that there are many options but not as many with this much support for the ColdFusion community.

Reply to this Comment

@Boyan,

Yeah, I hear you. I have been swamped for a while now and only just started looking at this after months and months of poking.

@Javi,

I have seen MooTools before and thought the animations were pretty awesome. To be completely honest, the animation is not what finally wooed me about jQuery; it was the DOM selectes. It can handle IDs, Class names, XPath, pseudo-selectors... it's pretty bad ass. I don't know much about MooTools, so I don't know if it has that (can't say one way or the other).

@Javi / Dan,

I am not familiar with the books by Jeremy Keith (gulp!). I will definitely take a look. Thanks for the heads up.

@Seb,

Thanks :)

@Tony,

Glad to be on board. I hear the jQuery community is super ultra fantastic and I look foward to getting on the mailing list.

Reply to this Comment

I will go through the comments and hook up all those links.... sorry about that. I have an old link-linking algorithm in place.

Reply to this Comment

Hey Rey que pasa chei? Nice to meet you! Ben yes mootools of course has all the DOM selectors. In fact all the JavaScript frameworks do. They all do the same stuff to be honest I just love saying mootools. :) I got to admit though the download setup they have is by far the best I've ever seen. Very handy indeed.

I have my axe in hand Ben! You have little time to get those books! You are quite busy I'm sure but those are great books to read. The ones I always recommend are: Bulletproof Web Design, CSS Mastery, and DOM Scripting. There are several others but those 3 are the best. The first one I refer to it as my web bible. Gotta love the term bulletproof. I've certainly caught on to it.

Reply to this Comment

Ah man I was looking forward to that too but I will refrain myself. :) Do a lot of your applications and sites you build rely on JavaScript to function Ben?

Reply to this Comment

I'm really glad to see that you've tried out jQuery. The way I see it, JavaScript libraries are roughly the equivalent of the C StdLib, or libraries for Perl or Ruby.

Sure, you could code everything by hand, but why?

Especially with JavaScript, where coding by hand frequently entails spending hours tracking down obscure browser bugs, and writing strange fork code to target various different browsers.

jQuery code is short, concise, and readable. While it is something of a "black box," it's a black box with a ton of problems already solved. You're free to try and write your own, but be ready to dedicate 100s of hours (literally) to tracking down obscure bugs. It's not fun, but that's what frameworks are for.

And besides, with jQuery, you can finally realize the dream of unobtrusive JavaScript. You can literally define app-wide behaviors in one file and be done with it. Think of what CSS does for you with styles. jQuery does the same with behavior.

Welcome aboard! And if you have any questions, feel free to contact me directly (aim: outlookeic; gtalk: wycats@gmail.com). And check out my pretty version of the API at http://www.visualjquery.com.

See you around!

Reply to this Comment

Thanks for coming on over Yehuda. BTW Ben, Yehuda is also part of the jQuery project team, creatore of the Visual jQuery website, and publisher of the Visual jQuery online magazine.

As you can see, we got your back with jQuery. ;o)

Javi, you gotta join in on the fun man. C'mon! Just take a look at jQuery and let the addiction take over. :o)

Reply to this Comment

Thank you Ben for the kind words! :)

I actually tried out scriptaculous, prototype, dojo, mooTools, YUI and YUI-ext as well as a half dozen others. The main things about jQuery for me are: 1) Its smaller than the others, and 2) It was much easier for me to learn.

Re: your code.
It might be interesting to show the different ways of achieving the same result. like:

$(this).parent("div").children( ".on" ).attr( "class", "off" );
or
$("#thumbstrip a.on").attr( "class", "off" );
or
$("../a.on").toggleClass("on") //my syntax is messed up I think

But ALSO, I just looked at your code. One of the great benefits is to NOT put onclick="...". all you need to do is:
$("#thumbstrip a").click( function() { ShowPhoto() } );

Then your A looks like:
<a href="#" rel="17" class="off">
<img src="images/people/People_17_thumb.jpg" height="62" alt="" />
</a>

And your showPhoto can get the proper number with $(this).attr("rel").

The real benefit is to make truly semantic markup without a trace of interactivity mixed up with the code. Ooops, Ethan needs me to walk him to school.

Thanks again.

PS. Get on the jQuery mailing list. It is as much fun as jQuery itself.

Reply to this Comment

Welcome Ben to jQuery! The fun just began, because with some experience with jQuery, you'll always find ways to improve your already compact code in other ways. At least that's what I heard from a lot of people and it is my own experience when working on and with jQuery.

Hope to see you soon on the discussion list!

Regards
Jörn Zaefferer, lead jQuery developer

Reply to this Comment

@Javi,

No, my applications generally do not hinge on Javascript, which I think part of why I have not gotten super into web2.0 style javascript just yet. But, it would be nice to make stuff, especially proprietary apps like Admins more dynamic and responsive.

@Yehuda,

Thanks, and Visual jQuery is awesome insane, but you already know that :) I agree, why re-invent the wheel when it comes to silly things like searching for a node... who wants to waste time on that. jQuery does such an awesome job of it anyway and the API as I read, is just too cool.

@Glen,

Thank you for pushing me! Right, I forget that if I have an ID on an element, I can access it directly. However, I wonder, if I can get it from the parentNode, is it going to be faster (nanoseconds) to go up on in the DOM rather than search for the node with a given ID. I don't know how this stuff happens behind the scenese.

I really like what you are saying about the rel="" in the A tags and then getting it that way. Very slick. I really like this hyper-structured HTML. Better signal to noise ratio (as Peter Bell might say).

But where do I set the onclick? Is that in the "Ready" function for the document?

@Jörn,

Thanks for creating jQuery :) I am sure I will find more and more way. Step 1: learn the API inside and out so that I can see the possibilities. Step 2: Write some seriously sweet-ass code.

Thanks all!

Reply to this Comment

Check this page:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Read the part about Hello jQuery. It shows a perfect example of how the click function is bound.

re: Faster: Finding by ID is pretty fast actually, but I have been following a "NO MORE IDs" rule in my own code. So it's not about speed. Actually it is sometimes slower. But the signal-to-noise ratio improves tremendously. Also it's much more scalable.

Example: Let's say you wanted to add another row of image-links. If you avoid the ID and just use a class like "image-selector" for the P then you can bind both and work with both just as easily. Relative pathing is more scalable because it makes you keep patterns in your markup and seperates the specific-ness of the jscript into something more generic.

So your markup can become REALLY small and very interactive and your code can be very abstract to handle lots of situations. Does this make sense?

Reply to this Comment

Glen,

That makes a lot of sense. If I force myself to worry about structure and not names of specific objects, the XHTML will naturally become more readable I am sure.

Reply to this Comment

How timely. My boss just took a peek at my current application and now wants me to give a brief presentation tomorrow on Jquery :)

That should be fun considering I'm just getting started myself!

Reply to this Comment

Hey Jim. Just use the links that I posted here for info on the library. Also, remember that its jQuery with a lowercase "j". :o)

If you need some help, ping me.

Rey...

Reply to this Comment

See! I can't even spell jQuery correctly and they expect me to give a presentation on it!!! I'm doomed! :)

I will certainly grab your links - thanks Rey!

As a testament to the simplicity of jQuery - my code is all very simple - mostly show/hide/toggle stuff that manipulates my display. At some point I'll need to look at doing some Ajax stuff - at which point I'll take a look at AjaxCFC :)

Reply to this Comment

Just FYI: You could have used siblings() instead of parentNode and children.

$( objSource.parentNode ).children( ".on" ).attr( "class", "off" );

would become

$( objSource ).siblings(".on").attr( "class", "off" );

Depending on what you're doing, you might have done:

$( objSource ).siblings().toggleClass("on").toggleClass("off")

Reply to this Comment

Hey Ben,

Welcome to the wonderful world of jQuery! I'm also on the jQuery Project Team, and I run the Learning jQuery blog:
www.learningjquery.com

Like you, I was totally sold on jQuery's selector power. Speaking of which, here is another way you could do the image swap (untested):

$(document).ready(function() {
$('#thumbstrip a').click(function() {
$(this).attr('class', 'on').siblings('a').attr('class', 'off');
var newSrc = $(this).attr('href');
$('#photoframe img').fadeOut('slow').attr('src', newSrc).fadeIn('slow');
});
});

It's nice sometimes to be able to select siblings rather than go up to the parent and back down to the children. Also with this code, you can take the onclick handlers out of the markup.

I hope you're not feeling overwhelmed by all the jQuery love raining down on you. :)

One more note: even though a lot of things about the jQuery library itself sold me on it from the start, the main thing that has kept me using it and even contributing to it has been the fantastic community of smart, passionate, and kind web developers. If you get really stuck on something, you can always post a question on the discussion list: http://jquery.com/discuss/. Don't be surprised if you get four or five helpful answers within 30 minutes.

cheers,
Karl

When using $(document).ready(), make sure that your custom javascript file (in your case, scripts.js) comes after jquery.js in the head.

Reply to this Comment

D'oh! Yehuda beat me to the .siblings() section!

By the way, if you're sure that every sibling of the clicked element will be an <a>, you don't need to filter by "a" (or by ".on") in the .siblings() method. Just doing $(this).siblings().whatever will work fine.

Reply to this Comment

Here is one way to rewrite the line...

$(objSource.parentNode).children(".on").attr("class", "off");

...using Mootools (my personal preference in JS libraries):

$(objSource.parentNode).getElements(".on").each(function(el){
el.className = "on";
});

While it took a little bit more code, that approach makes more sense to me anyway. And I'm sure I could give plenty of examples where Mootools' snytax would win out on brevity. (Also note that I could of course use one of Mootools' functions to set the class, but that would be unnecessary here.)

As for which library has the best support in class for working with the DOM, I'd have to hand that to yui with yui-ext. See, e.g., http://www.jackslocum.com/blog/2007/01/12/domquery-in-response-to-jquerys-response/

Reply to this Comment

Oops. el.className = "on" should instead be using "off", obviously. :) And if you only wanted to remove "on" and add "off", leaving other classes alone, you could use el.replaceClass("on", "off"); I'm sure jQuery has something like that, too.

Reply to this Comment

@Steve:

Yep, Jack's DomQuery really is great but that reply was dealing more with performance than actual the breadth of DOM support.

In actuality, Dean Edward's cssQuery probably has the best CSS 1-3 support of all the DOM libraries mentioned and Dojo has recently made some great strides in improving their DOM querying capabilities.

jQuery, as acknowledged by Alex Russel of Dojo, has the richest API out.

Reply to this Comment

@Steve: Bare with me on this but I had a look at the code you posted:

jQuery:
$(objSource.parentNode).children(".on").attr("class", "off");

Mootools (my personal preference in JS libraries):
$(objSource.parentNode).getElements(".on").each(function(el){
el.className = "on";
});

and then was perplexed by this comment you made:

"examples where Mootools' snytax would win out on brevity."

While I assume that there may be instances to that fact, the code you posted doesn't reflect that. I certainly don't mind you posting contrasting perspectives (God knows Jack did that to jQuery with DomQuery) but could you use examples that actually reflect what you're describing? Otherwise, it just confuses people and IMO, paints the wrong picture about the capabilities of both libraries.

Reply to this Comment

@Yehuda, Karl,

Ahhh, thanks. See, its just a matter of knowing the API inside and out to be able fully leverage that stuff.

All this talk is only gonig to fuel my excitement for this.

Also, I wanted to say that using the document Ready function is really cool because it forces you to create HTML that will display properly without Javascript (hopefully). I think that is the right mentality from the get-go.

Reply to this Comment

@Ben: I would definitely read through some of the sections of the API (you can get a good look at it at visualjquery.com) top to bottom.

Most important, imho:
Core (of course), especially gt, lt for traversing

DOM Attributes->attr, text, html, and val

DOM Manipulation top-to-bottom

DOM Traversing->filter (look at its various forms), siblings, children,
parents, prev, next, and (importantly) end

Javascript-> $.grep and $.map

Events-> Read the docs for bind, unbind, trigger, one, hover, and toggle

Effects-> Read animate carefully

Ajax-> load is really handy, but read through $.ajax, which is the root for all jQuery Ajax. Read through the functions starting with ajax (i.e. ajaxStart) for some handy callbacks. getJSON and getScript are handy as well.

Plugins-> Check out Interface, for sure, as well as forms (extremely important), dimensions, and metadata.

Hope that helps!

Reply to this Comment

[While I assume that there may be instances to that fact, the code you posted doesn't reflect that. I certainly don't mind you posting contrasting perspectives (God knows Jack did that to jQuery with DomQuery) but could you use examples that actually reflect what you're describing? Otherwise, it just confuses people and IMO, paints the wrong picture about the capabilities of both libraries.] --Rey Bango

That's why I wrote: "While it took a little bit more code, that approach makes more sense to me anyway."

I mentioned there being instances of the reverse simply as an afterthought. If you only read parts of what I wrote, it just confuses people. ;-)

-----
[Yep, Jack's DomQuery really is great but that reply was dealing more with performance than actual the breadth of DOM support. In actuality, Dean Edward's cssQuery probably has the best CSS 1-3 support of all the DOM libraries mentioned and Dojo has recently made some great strides in improving their DOM querying capabilities.] --Rey Bango

I was talking about breath of support for working with the DOM in general, not just querying against it. I could certainly be wrong about that, but it is the impression I get while reading through the YUI and yui-ext docs. Also, speed is a big deal. However, the link to Jack's blog post about DomQuery's speed wasn't really an attempt to prove my claim... perhaps I should've linked to all the docs for YUI and yui-ext's DOM-related functionality instead.

While I've mentioned that Mootools is my personal favorite JS library, I think that YUI easily has the best thought out and most smartly implemented modular, object-oriented design. Many others seem to agree with this, and e.g., Ajaxian predicts that this year it will become "the standard weapon of choice among mainstream developers seeking a pure Javascript framework." ( http://www.ajaxian.com/archives/predictions-ajax-in-2007 ) Many developers will certainly still prefer the easy of use of other libraries like jQuery and Mootools, though (and that's no sleight against either library's power, which they both have in spades).

Reply to this Comment

"I mentioned there being instances of the reverse simply as an afterthought. If you only read parts of what I wrote, it just confuses people. ;-)"

You sir are correct. I missed that one part which is why *I* was confused. So does that mean I'm confusing myself? :oP

"Also, speed is a big deal. However, the link to Jack's blog post about DomQuery's speed wasn't really an attempt to prove my claim... perhaps I should've linked to all the docs for YUI and yui-ext's DOM-related functionality instead."

Yep, that probably would've been a better idea. As for speed, remember that its Jack's extension, and not YUI's own built-in DOM methods, that have the speed improvements. DomQuery has actually turned out as a great motivator to align all of the major projects to produce a standard set of testing tools. We spoke with Alex Russell, Andrew Dupont, Jack & Dean Edward's and we're all collaborating on designing these tests to help improve the projects and get better test results. All of the tests to date (jQuery's, Jack's & Dojo's) leave something to be desired and John Resig kind of took the ball to get the standardization going.

"Many others seem to agree with this, and e.g., Ajaxian predicts that this year it will become "the standard weapon of choice among mainstream developers seeking a pure Javascript framework." (http://www.ajaxian.com/archives/predictions-ajax-in-2007 )"

They also seem to like Dojo's new dojo.query() functionality as well (http://ajaxian.com/archives/dojoquery-a-css-query-engine), so you need to take that with a grain of salt.

"Many developers will certainly still prefer the easy of use of other libraries like jQuery and Mootools, though (and that's no sleight against either library's power, which they both have in spades)."

We definitely agree on this. YUI certainly has some positives but files between file size and convoluted namespaces, it seems to push away as many developers as it attracts. Its not for lack of features or documenation. It has by far the best documentation I've seen and their pattern library is awesome.

BTW, when will I see you doing some jQuery code? Don't you know this is all an elaborate ploy at getting you to come on over? :o)

Reply to this Comment

I have been using YUI with YUI-ext for the last couple of months. I have to say, it's alot harder for me to learn. Keep in mind, I am not a programmer. I barely can claim to be a hack. But I am having trouble doing basic things. I wish Jack's API had examples of the syntax so I could cut/paste.

Right now, most "comparisons" are focused on speed. I don't think speed is the key factor. I don't think how "short" a line of code should be the test either. I love jQuery because it was so easy to learn for non-programmers. It's the same reason I fell in love with HTML, Tables and CSS. (In that order).

One last thought: I think a comparison of file sizes is a big deal. YUI-ext with all the bells and whistles is 400k.

Reply to this Comment

"I don't think speed is the key factor. I don't think how 'short' a line of code should be the test either. I love jQuery because it was so easy to learn for non-programmers." --Glen Lipka

Everyone will have differences of opinion about what's most important for them. That's one of the great things about having lots of options.... between jQuery, YUI, Mootools, GWT, Dojo, ASP.NET AJAX, Prototype, MochiKit, Rico, Qooxdoo, etc., there's something for almost everyone.

"I think a comparison of file sizes is a big deal. YUI-ext with all the bells and whistles is 400k." --Glen Lipka

That's misleading. Actually, the 50 or so JS files which comprise the latest version of YUI-ext probably total more than that, even in minified form (unless you were to run them through Dean Edwards packer, or similar). However, since they're modular, there's no reason you should ever be loading all of that on any given page, unless you really needed every last included feature / widget.

However, I do generally agree that JS file size is a very big deal, though the weight of most any library out there becomes very manageable through minification/gzipping. Here's a blog post from the YUI team about the page weights of their library: http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/

"BTW, when will I see you doing some jQuery code? Don't you know this is all an elaborate ploy at getting you to come on over? :o)" --Rey Bango

Heh. I'd certainly be interested in gaining more first hand experience with several JavaScript libraries, jQuery among them. So few hours in a day, though...

Reply to this Comment

Earlier, I wrote:
----------
Here is one way to rewrite the line...

$(objSource.parentNode).children(".on").attr("class", "off");

...using Mootools (my personal preference in JS libraries):

$(objSource.parentNode).getElements(".on").each(function(el){
  el.className = "on";
});
----------

... However, while looking through the (fairly recently released) Mootools 1.0 code a few minutes ago, I noticed there's a new "Elements" Class which makes a bunch of methods available for arrays returned by DOM queries. Hence, here are two additional ways the sample code could be rewritten when using Mootools 1.0:

$(objSource.parentNode).getElements(".on").setProperty("class", "off");

Or, alternatively...

$ES(".on", objSource.parentNode).setProperty("class", "off");

("$ES" is short for "get elements by selector.")

Just thought I'd note that since I wasn't previously aware of this alternative syntax.

Reply to this Comment

Steve said:

"... However, while looking through the (fairly recently released) Mootools 1.0 code a few minutes ago, I noticed there's a new "Elements" Class which makes a bunch of methods available for arrays returned by DOM queries. Hence, here are two additional ways the sample code could be rewritten when using Mootools 1.0:

$(objSource.parentNode).getElements(".on").setProperty("class", "off");

Or, alternatively...

$ES(".on", objSource.parentNode).setProperty("class", "off");

("$ES" is short for "get elements by selector.")

Just thought I'd note that since I wasn't previously aware of this alternative syntax."

The best jQuery syntax is what I suggested above:

$( objSource ).siblings(".on").attr( "class", "off" );

Additionally, your syntax will actually find all *descendants* of objSource.parentNode with class "on", while he only wants to find direct children.

You might be able to do:

$ES("> .on", objSource.parentNode).setProperty("class", "off");

which is still longer than:

$( objSource ).siblings(".on").attr( "class", "off" );

Reply to this Comment

Doh! Karl Swedberg had also mentioned siblings(). I guess I just read the first few comments before posting. The siblings method seems quite convenient, and doesn't have an exact counterpart in MT. For the record, while MT can certainly use the direct child ">" CSS operator when querying against the DOM, it can't (as of v1.0, anyway) use it as the first character in the string within the $ES() function.

Reply to this Comment

@Steve:

"it can't (as of v1.0, anyway) use it as the first character in the string within the $ES() function."

Sounds like you need to look at jQuery! doh!

Couldn't resist.

Reply to this Comment

@Rey:

If you'd called Valerio (or the entire Moo dev team, excepting possibly Aaron from cnet) an elitist prick, I'd agree with with you. Of course, that doesn't change the qualities or benefits of either library (aside from the jQuery forums/community being more helpful to JS beginners).

Reply to this Comment

@Steve:

He doesn't start off by calling him "elitist". It just flows in that direction after the replies that he receives. I know I was shocked by some of the replies from the team but I guess each group has their own personality. I just know that if I received this reply while evaluating a library:

'If you dislike the website, or how mootools builds himself with dependancies, or find it confusional, well, its your right to go and use an easier framework."

it'd be an instant turnoff. It might just be me but basically telling someone to bug off just doesn't sit well with me. I'm just more in tune with helping users than being difficult.

And to be precise, he said the following: "I do sense a sort of 'elitist' attitude amongst the MooTeam.". I don't remember him using the term "prick" in the post and I would prefer someone reading this to know what he said instead of someone's interpretation of what he said.

"Of course, that doesn't change the qualities or benefits of either library"

Unless of course you need MooTools support at which point you should put on a flak jacket and venture into the their forum. ;o)

Reply to this Comment

@Rey:

I called Valerio (and most of the Moo dev team) elitist pricks. That doesn't usually bother me personally too much, though (to each his own, I suppose).

Now I just wonder why you're going on about this. I'm not here to evangelize Mootools, so I'll respectfully bow out from this thread. I recognize that jQuery is a very good or even the best choice for many people.

Reply to this Comment

@Steve:

I reread your post after one of my buds pointed out that I may have misunderstood what you meant. It sounds like you're in agreement about the MooTeam not being very nice at times. If that's what you were trying to say, the just disregard the whole section where I wrote:

"And to be precise, he said the following: "I do sense a sort of 'elitist' attitude amongst the MooTeam.". I don't remember him using the term "prick" in the post and I would prefer someone reading this to know what he said instead of someone's interpretation of what he said."

Unfortunately, the internet leaves something to be desired when it comes to conveying ideas so I may have misunderstood what you were saying.

Reply to this Comment

@Steve: Looks like you replied already and I misunderstood what you were trying to convey.

"Now I just wonder why you're going on about this. I'm not here to evangelize Mootools, so I'll respectfully bow out from this thread."

I thought we were having a nice exchange and in much the same way you *were* evangelizing MooTools earlier, I'm just doing the same. I felt that you actually might be interested in that type of info, especially since you are recommending MooTools to others. Its the type of info that I think is important for new users to know about.

If you'd like to bow out, I understand and I'll do the same.

Reply to this Comment

"Unfortunately, the internet leaves something to be desired when it comes to conveying ideas"

Yeah, I know what you mean... rereading it feels like I didn't convey some things very well.

"I thought we were having a nice exchange and in much the same way you *were* evangelizing MooTools earlier, I'm just doing the same."

Fair enough. ;-)

Obviously, I've withdrawn my "bowing out," since there's no real reason to do so. Rock on...

Reply to this Comment

"rereading it feels like I didn't convey some things very well." - Me

Even that probably did not come out very clearly (I should proofread my comments). :) This might make a little more sense:

"After rereading my comments, it feels like I didn't convey some things very well."

Oh well....

Reply to this Comment

I was talking to someone the other day on IM about jQuery and this it what it came down to... the guy I was talking to is not a programmer. He looked at YUI, MooTools, Dojo, Prototype, and all the other stuff out there and the one that clicked with him is jQuery.

What does this mean? It means that people that do not have a formal education in programming or any heavy programming experience can still create very robust and functional Javascript applications using jQuery. I think that is very cool and an excellent testament to the easy of use and intuitive design the jQuery provides.

I think its almost a moot point for us programmers to argue about what is best as, to be honest, we could probably rock it hard core with any library. But when someone comes along who is not a programmer and can rock it hard core .... that is something special.

Reply to this Comment

Absolutely right comments means suggestion of some words but some people write a article bigger than the orignal

post.

Reply to this Comment

God knows if you've updated this, but I was finaggling an image swap of my own that shows an initially hidden div:

$(document).ready(function() {
$('div.formHelp > div').hide();
$('div.formHelp > img').click(function() {
$(this).next('div').toggle('normal');
$("img").attr("src","/images/css/formHintButtonSelected.gif");
return false;
});
});

Only problem I have left to fix is to make the image SWAP instead of just changing once... damn my weak JS skills!

Reply to this Comment

@Bax,

To get things to swap back and forth, you might want to try binding the OnMouseOver / OnMouseOut ... or OnMouseDown / OnMouseUp event rather than the Click event. The click event happens only once - there is not reverse function for it.

Reply to this Comment

@Bax and Ben,

jQuery does have an "every other" method that triggers on click: .toggle(fn1, fn2). This one sometimes gets lost in the mix because jQuery also has an effect method called .toggle('optionalSpeed'), which I see Bax is already using.

That said, it might make more sense in this situation to change the src of the image through if/else statements. Here I'm using the conditional operator, which should achieve the same effect (untested):

<pre><code>$(document).ready(function() {
$('div.formHelp > div').hide();
$('div.formHelp > img').click(function() {
var $this = $(this);
var thisImage = $this.attr('src');
$this.attr({
'src': thisImage == "/images/css/formHintButtonSelected.gif" ? "/images/css/formHintButtonUnSelected.gif" : "/images/css/formHintButtonSelected.gif"});
$this.next('div').toggle('normal');
return false;
});
});</code></pre>

One other thing I should probably point out: On the first inside the click handler, I set a variable for $(this). That's just a little optimization technique to avoid having to repeatedly create a jQuery object.

Reply to this Comment

Here was my simple jQuery image Swap:

$('img#nav1').hover(function() {
$(this).attr("src","/images/headerNav/1-over.gif");
}, function() {
$(this).attr("src","/images/headerNav/1.gif");
});

Reply to this Comment

I was also very impressed by Jquery the first time I used it. I actually went to the 2.0 Expo and saw Jon Resig's lecture. I use it in allot of the projects I work on. At work we're all about it. But after using Jquery I started compiling my own JS Library. Now I have about 80 different actions I can create and never have to worry about again. Of course Jquery is endless! But I wouldn't suggest giving up the language now that there's an easier way to do it. That's like not knowing how to hand code because Dreamweaver exist. There are also a bunch of other API's and libraries out there. Spry is another really big one you may want to look into. At the 2.0 expo I assumed Jon Resig was just going to give us a bunch of JQuery tutorials, but in fact he taught us advanced JS techniques, and rarely spoke about JQuery at all.

Reply to this Comment

@Justin,

Just out of curiosity, when you say you have 80 other actions, what kinds of stuff are you referring to? jQuery is not meant to replace all Javascript - rather, it's meant to augment your ability to write more, better Javascript. So, I just wasn't sure if you are referring to "holes" you are seeing in the jQuery library, or if you are simply referring to scripts that run on top of jQuery?

Reply to this Comment

Great script! I am trying to incorporate it into a site setup with a static height that scrolls horizontally. I have a main container DIV for the site, and then module DIVs (class="module") that contain a header and the columnized text. These module DIVs are floated left to line up horizontally, but when I do that, the columnization isn't happening. If I remove the float:left css on the module DIV the columnization works, but the module DIVs don't arrange themselves next to each other horizontally as desired. Any idea why the columnization isn't happening when the module DIVs are floated left?

Reply to this Comment

Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.