Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 15, 2008

9 Comments

Better jQuery Code #1

by in jQuery,Tips,Web Development on November 15, 2008 @ 2:01 pm


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.

  1. var mainNav = $('#main_nav a');
  2. var inputs = $('input');
  3.  
  4. // the make calls like
  5.  
  6. mainNav.click(function(){});
  7. 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]

  1. 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

  1. 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.

  1. 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

  1. 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

  1. mainNav.eq(1).is('.selected'); // checks for class of selected
  2.  
  3. 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

  1. mainNav.eq(1).is(':contains(special text)');

.not() will return elements that do not match the expression.

  1. 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
Tags:

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

9 Responses to “Better jQuery Code #1”

Good tips here. One minuscule addendum to the first tip: I like to preface jQuery objects with a $ when assigning them to variables to help denote their special contents.

e.g. var $mainNav = $(‘#main_nav a’);

I think I picked up that convention from Karl Swedberg on LearningjQuery.com.

@Sean O ah yes, the $ before the var name, this is what I started doing when I first picked up jQuery and mainly because of PHP and it does keep you in a mindset that this variable is a jQuery object. The problem that I was coming across, being a Dreamweaver user, if you double click on the variable the $ never got selected, so what I actually started doing was “jqMainNav” and for what ever reason I did not think to put it in my post.

I’ll amend the post with that tip.

Also, as a general note for readers, you can cache your variable at the same time you intiate any behaviors:

var $mainNav = $(‘#main_nav a’).click(fnClick).hover(fnOn, fnOff);

(Replace the fnClick, fnOn, fnOff with actual callbacks.)

This will often save you a few lines of code to chain things together.

@Dan good call, thanks for the input.

Thanks! I’m starting out with jQuery and this is the kind of tips that is going to be useful!

Trackbacks

  1. Better jQuery Code #2 | The Book and the Cover
  2. Links of Interest
  3. New jQuery plugin: Object Cache : decodeURI
  4. jQuery Style Guide from Benjamin Sterling | blog.rebeccamurphey.com

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

67 queries. 0.385 seconds. Powered by WordPress visitor stats