Tutorial Articles

I've been coding using jQuery since shortly after it came out, and well -- I've been using it almost every work day. Here is a few tips that have saved me time.

#1: Use data method instead of storing data inside the DOM.

The mistake I see people making all the time is this:

$('selector').attr('alt', 'this is the data that I am storing'); 
// then later getting that data with 
$('selector').attr('alt');

JavaScript:

$('selector').attr('alt', 'this is the data that I am storing'); 
// then later getting that data with 
$('selector').attr('alt');

Why is this a bad thing?  Because "alt" has absolutely no meaning whatsoever, as well as HTML is not meant to store data.

Instead use the data method in jQuery. It allows you to associated data with an element on the page. 

$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');

JavaScript:

$('selector').data('meaningfullname', 'this is the data I am storing');
// then later getting the data with
$('selector').data('meaningfullname');

This allows you to store data with meaningful names and as much data as you want on any element on the page. It is a really amazing utility and something I've come to rely on.

#2: Take advantage of jQuery's built-in custom selectors.

jQuery has a plentiful amount of selectors that are beyond basic CSS selectors, so use them. Some that I use are:

• :input   example: get all the inputs on the page regardless if they are checkbox, textarea or select list - use :input
• [attribute=value]   example: find an input with the name, "container" - use input[name='container']
• :eq(index)  example: get the fourth table on the page - use table:eq(3)

#3: If you are Manipulating the DOM a lot, use livequery.

Note on March 21st, 2009: New in jQuery 1.3, the live method has adopted many of the same events of livequery into the core of jQuery.

Note on November 16th, 2008: If you understand event delegation, use it as an alternative to using livequery for attaching events.

When you add elements to the page a lot, attaching events to them and running functions on them then use Brandon Aaron's livequery plugin. This way you can do things like:

$('div.edit').livequery('click', function(){
//go into edit mode
});

JavaScript:

$('div.edit').livequery('click', function(){
//go into edit mode
});

Then whenever you add a div to the page with class "edit" it will attach that click event. This works for all other events, as well as if you want to run a function on an element right when it is added you can do this:

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

JavaScript:

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

#4: Use jQuery form plugin to submit files via Ajax.

If you use Mike Alsup's jQuery form plugin you can use it to submit files via Ajax. It uses a trick with an iframe to submit the data. Just put in an input type file, then use $(form).ajaxSubmit(); and you are good to go.

#5: Use classes as flags.

If you aren't storing data, but need to set a flag on an element use a class. What do I mean by a flag? Well, for instance if you are in "edit mode" of a form you might use the class, "editing".  With jQuery you can add a class with the addClass method and then check later if an element has the class with the hasClass method.

I got my Mac a few months ago and I am loving it.  I took a moment to make a screencast of my favorite Mac OS X productivity tips.

5 Mac OS X Leopard Productivity Tips

1. Swipe Away Bottom Left of Screen
2. Two finger tap (right click trackpad)
3. Mac OSX Mail, Todo Items
4. Quicksilver
5. Terminal Shortcuts (drag folder, mate, alias)

Chris Hartjes asked me a simple question today, but it is worth noting because I have asked the same before, "How do you get the current value from a select list?"

To get the current value is very simple using val().

$('#selectList').val();

JavaScript:

$('#selectList').val();

But sometimes you may need to get the selected option's text. This is not as straight forward. First, we get the selected option with :selected selector. Then once we have the option, we can get the text with the function, text().

$('#selectList :selected').text()

JavaScript:

$('#selectList :selected').text()

View Demo:

First Option Second Option Third Option Get Value Get Text

Note on July 23 @9:14AM: HoyaSaxa93 wrote in to ask how to get values from select multiples. I will create the demo and code below. This would be how to set a select multiple to an array called, "foo".

var foo = [];
$('#multiple :selected').each(function(i, selected){
	foo[i] = $(selected).text();
});

JavaScript:

var foo = [];
$('#multiple :selected').each(function(i, selected){
    foo[i] = $(selected).text();
});