Bernie Cook's Blog

Azure, C#, .NET, Architecture & Related Tech News

jQuery – Several Simple Tips

Leave a comment

I’ve collated a short list of useful tips that I’ve picked up from various sources since I started working with jQuery. This is by no means an exhaustive list, just some tips that I’ve found invaluable when it comes to jQuery development.

For those of you who haven’t heard of jQuery it’s gained a lot of popularity over the last few years for making the following tasks incredibly simpler:

  1. Cross-browser support
  2. DOM manipulation
  3. AJAX development

So here goes:

  1. Use the ready() function rather than the <body> onload event handler – the obvious tip 🙂
  2. Utilise your browser’s developer toolbar – I prefer IE for development so I’ve used it as an example:
    • A “Script” tab which comes in for debugging, stepping into code, watching etc.
    • A “Profiler” tab which analyses the execution time of Functions and Call Trees – very handy if you want to optimise your code
  3. DOM manipulation is expensive so if you need to execute a change against the DOM first prepare it then execute it, don’t keep firing updates at the DOM as you’ll suffer avoidable delays
  4. Use chaining where ever possible, i.e. this is good
    $("p").css("background", "yellow").css("font-style", "italic");
    

    where as this is bad:

    $("p").css("background", "yellow");
    $("p").css("font-style", "italic");
    
  5. Be mindful of referencing the jQuery library directly from an externally hosted CDN i.e. Google’s CDN or otherwise. I’ve heard stories, albeit rare, of the CDNs being inaccessible for short periods of time which will result in your application throwing out JavaScript runtime errors. There are additional scripts you can run to reference a local copy of the jQuery library if the remote one doesn’t load, in-case you’re hell-bent on heading down that route. Don’t get me wrong the problems I’ve mentioned are rare, just consider the potential problems and be prepared.
  6. If you’re going to implement a jQuery plugin, i.e. jQuery UI that has been developed externally always be mindful of the following:
    • Will you be keeping abridged of plugins latest releases?
    • Will you be able to test how future jQuery library releases impact on the current version of the plugin you’re running?
    • Is there a reasonable forum available for Q&A in the event you run into an issue? Don’t underestimate this last one, people who have experienced similar issues as I when using a plugin have saved me an enormous amount of time by posting a solution on the plugin’s forum
  7. Invest time learning the selectors the selectors will allow you to write what typically takes you several lines of code in a few characters

More Tips…

If you want some more tips, because I’ve only detailed a few and don’t want to leave you short-handed, then head over to these websites:

Advertisements

Author: Bernie

I currently live and work in the UK, just outside of London. I've been working in IT for 15+ years and in that time have solved many technical problems via blogs, forums, tutorials etc. and feel like I should be giving something back. This blog post is my way of contributing and I hope it proves just as useful to others as their contributions have to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s