And those ridiculous patterns with the $ are often described as “efficient” by jQuery proponents. Oh brother.

And then there is the “less code” nonsense. If you start out with a huge library, there isn’t much room for your code anyway.

And its only 15K! Yeah, right. Even if it was, that is 15K too much.

Anything to convince incapable people to take up browser scripting. You can’t miss the influence when surfing the Web these days.

In any case, this hypothetical Javascript nerd is abstracted from the cost of the function, which is large in the case of prototype and extreme in the case of jQuery. In the case of jQuery it also “screams ‘namespace.’”

YUI doesn’t use it. Neither does DojoToolkit. Showing that, in fact, the most popular libraries of today do not use this function.

To the first example. Nice catch with the “rel=external” instead of my use of “class” and it also points out an error in my code above since class is in the attributes of link. It should be links.attributes.rel with a match in there. However, I think you need to benchmark your jQuery version to understand my point (abstraction costs).

To the second. As mentioned before, I wouldn’t code this way, I was trying to show how a shortcut will build a bad habit in a bad programmer, here is how I would code it.

var link = document.links(’blah’);
link.href=’http://www.example.com/’;
var link_style = link.style;
link_style.display=’none’;
link_style.visibility=’hidden’;

(The last three lines would probably be…
YAHOO.util.Dom.addClass(link,’hidden’);
sacrificing some speed for clarity (in markup, not in Javascript… big difference btw).)

I suggest you benchmark that also, though the difference in this case will be minimal.

…

On a personal (read opinionated) note, just because it is one line of code doesn’t make it any faster to execute, nor, in my opinion, more readable. It is the case with functional languages, and functional-style approaches, that it is quite often, slower. I have found that it is also less readable to others than more explicit approaches.

It is, no doubt, much prettier. However, if I thought coding was artful, I’d be a perl coder.

jQuery.noConflict();

> for (var i in document.links) { // technically a for-do is marginally faster
> var link = document.links[i];
> if (link.class !== ‘external’) { continue; }
> // better and more DOM scripted to replace the below with a YAHOO.lang.augmentObject
> link.onclick = function() { return confirm(’You are going to visit: ‘ + link.href); }
> }

jQuery(’a[rel*="external"], a.external’).click(function(){
return confirm(’You are going to visit: ‘ + this.href);
});

> $(’#blah’).href = ‘http://www.example.com/’;
> $(’#blah’).style.display= ‘none’;
> $(’#blah’).style.visibility = ‘hidden’;

jQuery(’#blah’).attr(’href’, ‘http://www.example.com/’).hide();

$().ajaxSubmit is from the form plugin, so I guess it’s not jQuery itself, but the form plugin is only 8.3 KB compressed.

It’s pretty easy to use “jQuery” as the namespace instead, but I’m a fan of fewer keystrokes.

I wasn’t aware of $().ajaxSubmit(). I knew only about $.ajax() which seemed like Ajax.Request() in prototype. I haven’t decided whether the $ object as a namespace is a really good idea or highly annoying, yet. It’s definitely a clever idea.

I’ll be the first to admit that there is a lot in jQuery I’m not familiar with. I sort of made my bed with YUI and live with it. Its Connection Manager is too lightweight relative to most, but it gets the job done with minimal hassle and not that many libraries are dependent on it.

Thanks for your comments on my programming posts. I should mention that I often don’t mean half of what I say as harshly as I say it. Mostly I write those things to get people thinking about things, even if they don’t agree with me. The unwritten motto of this blog is: “Write to create context for another to think.” And I hope I do that.

The documentation says that $(window).load() doesn’t fire until “the user agent finishes loading all content within a document, including window, frames, objects and images.” (The advantage over a plain window.onload being multiple bindings handling.)

I’m not aware of an onavailable or oncontentready equivalent. I wouldn’t be surprised to see libraries moving toward event delegation for ultra-speedy bindings. (It’ll be as responsive as <input onclick=”">! The future is here!)

Yeah, to be honest, jQuery UI isn’t half as mature as the base–they started fresh about a year ago. They’re putting a lot of focus into it right now, though. Frankly, I don’t think you give the core framework enough credit for saving developer hassle; $().ajaxSubmit() in particular is a beautiful example of abstraction from browser incompatibilities in Ajax and event handling.

I’d be interested to look into those horrifically slow demos. I’d bet money, though, that the problem isn’t too many document.getElementById() calls. =)

While I’m leaving a comment, by the way, I really enjoy your programming posts. +1 funny, +1 insightful. Thanks for blogging.

Good point about onDOMReady (via $.ready()). If I’m designing an ad server, I might wish to still have the ads and such load onLoad instead. In YUI, at least, they also have onAvailable and onContentReady which are probably more appropriate for certain forms of DOM scripting. I assume they have those in jQuery?

I wasn’t aware of the jQuery UI library. I might have been more aware of it if every tutorial didn’t espouse the base framework and if each page didn’t take over six seconds to load on Firefox.

“Yeah, because nobody,” I said, “would want to use a tool that made it easy for incompetent developers to fake it. PHP, say?”

As Mark pointed out, developers who think about what they’re doing will cache query results, whether by chaining or temporary variables. And if you’re reasonable, jQuery gives you a lot of elegance without noticeable delay on the client. This, for example, is quite readable and performant, I think:

$(function() {
$(’form.commentdelete’).submit(function () {
if (!confirm(’Are you sure you want to delete this comment?’)) {return false;}
markFormActive(this);
var self = this;
$(this).ajaxSubmit({
success: function(data, stat) {
$(self).parents(’.comment’).fadeRemove();
clearAjaxMsg();
unmarkFormActive(self);
},
error: function(xhr, stat, e) {
clearAjaxMsg();
displayAjaxErr(’Comment deletion failed.’, stat, xhr);
unmarkFormActive(self);
}
});
});

I’d bet that in most cases, jQuery’s automatic binding to onDOMReady rather than onload alone adds more perceived responsiveness than using document.links/forms/images would.

Also, jQuery UI’s calendar and autocomplete plugins, as examples of GUI widgets, are quite polished and degrade beautifully. For more complicated widgets, jQuery works well with Ext.