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

     
     
   • Chainability

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

read full article

25 excellent tips to improve your jQuery

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

read full article