7 things I wish I had known about jQuery

This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following:

• Base knowledge of JavaScript
• What jQuery is
• How to include jQuery in a web page
• Basic knowledge of how to use the $ function (for example: $(‘#test .testing’))
• Basic understanding of the chainable events
• Know what $(document).ready(function () { }); does (sometimes seen as $(function () {} ); or $().ready(function() {});)
• Know intermediate HTML and CSS (lists, padding, colors, borders and margin)

If you don’t know anything about how to use jQuery you should read this. This is not meant to be an introduction to jQuery. This is meant for people who have tried jQuery and may have been frustrated because they weren’t sure how to do something correctly.

1. Some background info
   • Objects and Methods
     

     Objects work so well because they act just like real life objects- objects have properties and methods. So if we were talking about a lamp, a property of it may be its height or width, say 12cm. A method of it may be to
     shine (an action). And when it’s shining, its brightness property would be of a greater value than when it wasn’t.

     – by Tim Scarfe

   • ChainabilityJavaScript is ‘chainable’. ‘Chainable’ means you can have multiple methods joined together.
2. jQuery can Behave Somewhat like an Array: In JavaScript you access the first item in an array like this: ‘arrayVariable[0]‘. You find how many items are in an array using ‘arrayVariable.length’. You can do the same with jQuery. Each object that matches the specified selectors is an item in the array.
3. jQuery in a Variable: You can store the results from a jQuery selection in a variable, and still access all the same methods. It is good practice to prepend the variable with ‘$’ to remember that you are, indeed, working with a jQuery object.
4. Keep Animations from Building Up
5. What the fuck does this ‘callback’ Mean: A callback is a function, or the name of a function that is run on the completion of the function you called. This is very, very useful on actions that take time to complete.
6. Doing Something when any AJAX Starts and Ends: jQuery provides us with some built-in methods that allow us to run functions when any AJAX request starts and when any request completes. This makes life much easier overall
7. Doing Something Once the Images are Loaded: Usually you don’t need to wait until the images are loaded to run you jQuery, but if you are manipulating images, then you need to wait until the images load, otherwise jQuery will (correctly) think that the width and height of the image is 0px by 0px. This is useful when you want to have jQuery automatically limit the size of image to fit the content.

Learn more about jQuery