Learning JQuery

Over the past year I have been considerably brushing up on my JQuery skills. I thought I would take this opportunity to give a few pointers to others who may be a little nervous about taking their first JQuery steps.

1. Debugging
The best thing I learnt was how to use console.log() in firebug.
console.log() is great way of checking your code as you go. Its far less annoying than using alert() because you can see what is going on behind the scenes without nasty popups to keep closing.
You can use it to check that the selectors you are targeting are correct or that the script you are including has been included correctly.

2. Reading
A really friendly book to get you started is JQuery from Novice to Ninja by sitepoint. Its really easy to understand and has some nice tutorials to get you going.
http://www.sitepoint.com/books/jquery1/

3. Making use of JQuery documentation
Pretty much all you need to know is on the JQuery official site. Take some time to look around and understand the difference between events, selectors and traversing. Once you know how it all fits together its easy to reference whatever you need. All docs have real source code examples too.

4. Comment your code
It goes without saying that commenting your code whatever language, is good practice. It not only helps you but everyone when maintaining code in the future.

Whilst learning, I think it is a good idea to comment as much as possible. I found that I might copy and paste some code from somewhere (not necessarily the best approach I have to say but it does start to make you more familiar with seeing JQuery) and then modify it to fit what I needed. Its really easy in the early days of learning JQuery to do this and then forget later why or what is going on. Simple commenting of each line of code in laymans terms forces you to learn and understand what the code is actually doing.

5. Write it down before hand
A colleague of mine told me to do this so many times. If you write down what you want to achieve in simple terms on a piece of paper it helps you break down a daunting task into more manageable chunks. e.g click the button, fade in the div etc

A few good tutorial/reference sites:

JQuery
50 JQuery Snippets
JQuery Videos
JQuery for Designers

Comments

Be the first to write a comment about Learning JQuery…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>