The WebApp Wizard Web development made magical

15Sep/100

The forgotten jQuery methods

jQuery is great, jQuery is fast, jQuery is the best JS library, etc. But what if it was more awesome than we think? Personally, I went through that, and I wanted to share.

At the beginning, like most other web developers, I discovered jQuery with very basic features, and, over time, I discovered new ones. One day, I decided to really go through the documentation to see if I could find shortcuts for what I do on a daily basis.

The problem is that we try to solve problems with the tools we know well. But sometimes, we could do a lot better with a new, stronger, sharper tool. That's what I am talking about here. The need to keep up to date, and always try new tools.

.closest()

Quite a basic jQuery method, but really useful, and I think quite a few developers don't think about it. It simply finds the closest parent that match the given selector.

.end()

A basic too, but too many web developers that use jQuery from time to time don't know about it (and about chaining in general). Instead of doing this:

$('#mydiv').find('.a_class').show();
$('#mydiv').find('.another_class').hide();
$('#mydiv').find('.another_class').click(function() { /* ... */ });

Which is suboptimal as you use $() many times, you can use end() to revert to previous "state". In this example, find() changes the set of selected elements. end() can revert to the previous set of selected elements. Here, an element which has "mydiv" for id.

This looks like this:

$('#mydiv')
   .find('.a_class').show()
   .end().find('.another_class').hide()
   .end().find('.another_class').click(function() { /* ... */ });

It takes much more advantage of chaining and only calls $() one time, so you can expect more speed out of this.

.andSelf()

Remember the .end() method, which reverts to the previous set of selected elements? Well, this one just adds the previous set of selected elements to the current one. For example,

$('#mydiv').find('.a_class').andSelf()

Will result in a set of element containing the element which has "mydiv" for id AND all the child elements with "a_class" class.

This one can be handy sometimes.

.data()

This method allows you to attach any data in a DOM element. Ever added some ugly hidden inputs to your beautiful HTML in your JS code, in order to retrieve and reuse this information later? Well, this is the clean way to do it. Instead of modifying your HTML, probably with a bad looking code, just store your data with this method. More than just a way to avoid a bad trick, it really binds data to a DOM element, which makes more sense than relying on some naming convention or something.

jQuery.proxy()

I have to admit I never used this one yet, but I will probably do as I already felt the need for something like this. It allows you to change the context of a function. You know, the little thing called this. You probably use it in your event handlers for instance. Usually, it refers to the element that received the event. If you click on a button, in your event handler, this will be the button.

I feel it can be really useful. I guess... Damn, I have to find a use case to try it.

.delegate()

I'll make it short with an example you have probably been through. Imagine you want to bind the "click" event on all the TDs in a table. Usually, you write this:

$('#table td').click(function() {
   // Do something
});

Right? Well, this code will bind an event handler on every single TD element in your table, which can be really disastrous. There is another way to do this, using event delegation. Event if this technique is not really difficult to implement, jQuery makes it a snap, with delegate(). Just write the following instead of the piece of crap above:

$('#table').delegate('td', 'click', function() {
   // Do something
});

This will have the same effect. But with only one single handler which will handle all the clicks on all your TDs in #table. jQuery ensures that your event handler will have the context you're expecting (this will be the clicked TD, not your table). Damn, I just found my use case for proxy()! :-)

I lied to you a few lines above. It doesn't only bind one handler for all the TDs in #table, it also works for TDs added to #table later. That is a side effect of the event delegation pattern, I guess, but that's a pretty good one.

You can imagine this is by far a better practice than binding individual events... Especially when you know that JS event handling may be a source of memory leaks...

In the end...

Well, I hope this was useful and hope you will use these methods more frequently.

Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

(required)

You can use basic HTML to enlighten your comments. If you want to post some code, please use the <pre> tag. You can also use syntax coloring by adding class="syntax [language]". <pre class="syntax js"> will color your code as if it was JS code for instance.

No trackbacks yet.