Better jQuery Code #1
I've been wanting to write some jQuery tips for a while now and just never know what to really say until I saw Marc Grabanski's 5 Tips for Better jQuery Code. Although I have tips, I don't think I have any that are Earth shattering or ones that I can rank higher then the other, but these are ones that I use daily and are asked about just as often.
Caching
If there are items you will be referencing more than once, cache it! Even if you won't be referencing an item more than once still get in the habit of setting up references.
Now, what do I mean references? If you are going to be playing with you main nav group or probably going to be messing with inputs, set up a variable and store the reference to those element in it.
-
var mainNav = $('#main_nav a');
-
var inputs = $('input');
-
-
// the make calls like
-
-
mainNav.click(function(){});
-
input.change(function(){});
[Update #1: as Sean O points out, doing $mainNav may help you remember that the variable is a jQuery object and may be good practice.]
[Update #2: Another good point from Dan G. Switzer, you could easily have cached your jQuery objects when you initiated your events/behaviors like below]
-
var $mainNav = $('#mainNav').click(function(){});
Traversing (Filtering)
This is a topic I plan to put some more effort into in a later post but there are four methods you should use: eq, hasClass, is, and not.
The use of these methods will filter out your selection to mat
-
var mainNav = $('#main_nav a');
eq() will filter your selection down to one element eq(1) will select the second element since the jQuery object that is returned by $('#main_nav a') is basically a zero based array.
-
mainNav.eq(1);
A combination of eq and hasClass; hasClass is exacly what it sounds like, it checks the element to see if it has a class of "selected" and returns true if it does have that class
-
mainNav.eq(1).hasClass('selected');
Once again, a combination of eq and is; is simply checks the element in question against the expression in the brackets and returns true if is has the class selected or if the tag is A
-
mainNav.eq(1).is('.selected'); // checks for class of selected
-
-
mainNav.eq(1).is('a'); // checks to see element is an A tag
Checks to see if element has text in it of "special text" returns true if it has that text
-
mainNav.eq(1).is(':contains(special text)');
.not() will return elements that do not match the expression.
-
mainNav.not('.active')
So if you were to put a class of active on one of the links, that call will return all links in mainNav that you did not put a class of active.
Closing
Ok, I wanted to keep this short and point out some of the items I personally deal with and some items that I get asked about daily. There are a few other items that I will address in another post that will make your life easier.
If there is anything with the above you don't under stand or, god forbid, I got incorrect, please feel free to drop me a line.
back to beginning of this post back to skip to links
1. Sean O