Improve your jQuery - 25 excellent tips

jQuery is awesome. I've been using it for about a year now and although I was impressed to begin with I'm liking it more and more the longer I use it and the more I find out about it's inner workings.

I'm no jQuery expert. I don't claim to be, so if there are mistakes in this article then feel free to correct me or make suggestions for improvements.

I'd call myself an "intermediate" jQuery user and I thought some others out there could benefit from all the little tips, tricks and techniques I've learned over the past year. The article also ended up being a lot longer than I thought it was going to be so I'll start with a table of contents so you can skip to the bits you're interested in.
Table of Contents

    *   1.  Load the framework from Google Code
    *   2.  Use a cheat sheet
    *   3.  Combine all your scripts and minify them
    *   4.  Use Firebug's excellent console logging facilities
    *   5.  Keep selection operations to a minimum by caching
    *   6.  Keep DOM manipulation to a minimum
    *   7.  Wrap everything in a single element when doing any kind of DOM insertion
    *   8.  Use IDs instead of classes wherever possible
    *   9.  Give your selectors a context
    * 10.  Use chaining properly
    * 11.  Learn to use animate properly
    * 12.  Learn about event delegation
    * 13.  Use classes to store state
    * 14.  Even better, use jQuery's internal data() method to store state
    * 15.  Write your own selectors
    * 16.  Streamline your HTML and modify it once the page has loaded
    * 17.  Lazy load content for speed and SEO benefits
    * 18.  Use jQuery's utility functions
    * 19.  Use noconflict to rename the jquery object when using other frameworks
    * 20.  How to tell when images have loaded
    * 21.  Always use the latest version
    * 22.  How to check if an element exists
    * 23.  Add a JS class to your HTML attribute
    * 24.  Return 'false' to prevent default behaviour
    * 25.  Shorthand for the ready event

No comments:

Post a Comment

Please Provide your feedback here