This document provides tips and tricks for using jQuery. It discusses selecting elements by ID or class and the differences in performance. It recommends caching frequently used objects, binding events, and manipulating the DOM in certain ways for better performance. Useful jQuery plugins are also mentioned like Tipsy for tooltips, Nivo Slider for image sliders, and Shadowbox for lightboxes. Best practices like unit testing, benchmarking, and avoiding certain DOM manipulation functions are advised.

1. JQUERY
Tips and tricks
Devlab - 10/06/2011

2. Hi! I’m Lester

3. This is Sheba

4. JQUERY
Tips and tricks

5. Selectors
Events
General tips
Usefull plugins

6. Selectors
Events
General tips
Usefull plugins

7. Selecting by #id is the fastest
$(‘#content’);
Selecting by .class is the slowest
$(‘.content’);

8. Selector tips
$(‘div.content’); Pre x class selectors with tags
$(‘#foo’, this); Specify context

9. Cache objects that you use a lot
var header = $(‘#header’);
var menu = header. nd(‘.menu’);

10. jQuery uses ‘right to left’ model
Example : Selecting all p tags inside #content
$(‘#content p’);
jQuery will start querying DOM for p tags and then look for #content
$(‘#content’). nd(‘p’); = The faster jQuery way
This method will be 20-30% faster

11. Write your own selectors
$.extend( $.expr[‘:’], {
myNewSelector: function(element)
{
// do something
}
});
$(‘#content :myNewSelector’);

12. Selectors
Events
General tips
Usefull plugins

13. These are the same
$(document).ready(function () { });
$(function () { });

14. Binding events
bind() $(‘a’).bind(‘click’, function(e) { });
live() $(‘a’).live(‘click’, function(e) { });
delegate() $(‘#content’).delegate(‘a’, ‘click’, function(e) { });

15. Bind()
Most straight forward way to bind an event to an element
$(‘a’).bind(‘click’, function(e) { });
jQuery will bind the click event on all <a> elements

16. Live()
Will also bind elements that are added to DOM dynamically
$(‘a’).live(‘click’, function(e) { });

17. Delegate()
Delegate will bind the handler to a given element
instead of the document root
$(‘#content’).delegate(‘a’, ‘click’, function(e) { });

18. Selectors
Events
General tips
Usefull plugins

19. Use HTML5
HTML5 brings more tags like <footer>, <header>, <section>, ...
Selector performance ++

20. DOM manipulation
Is frikkin’ slow
Try to avoid the append(), prepend(), after(), ... functions
Insert strings with html()

21. Always use the latest version (1.6.1)

22. Always use object detection
if( $(‘#content’).length )
{
// do stuff
}

23. Use direct functions
The functions get() and post() are just shortcuts to ajax().
So calling ajax() will give you a small speed advantage.

24. Check out the utilities functions
$.inArray() Determine whether an element exists inside an array
$.isArray() Determine whether the argument is an array
$.map() Translate all items in an array or object to new array of items
$.support() Check for browser features
$.unique() Sorts an array of DOM elements, with the duplicates removed
...

25. Unit testing
Selenium http://seleniumhq.org/
Fucunit http://funcunit.com/
QUnit http://docs.jquery.com/Qunit
QMock https://github.com/andybeeching/qmock

26. Benchmarking
Firebug functions time() and pro le() will log execution times.
console.time(‘looping foo’);
foo.each(function() {
// do something
});
console.timeEnd(‘looping foo’);

27. Benchmarking
jsPerf - JavaScript performance playground
http://jsperf.com/

28. Selectors
Events
General tips
Usefull plugins

29. Tipsy
A Facebook-like tooltip plugin.
http://onehackoranother.com/projects/jquery/tipsy/

30. Nivo Slider
An image slider plugin.
http://nivo.dev7studios.com/

31. Shadowbox
A lightbox plugin.
http://www.shadowbox-js.com/

32. jCrop
An image cropping plugin.
http://deepliquid.com/content/Jcrop.html

33. jQuery Lint
A plugin that checks jQuery statements for errors
http://james.padolsey.com/javascript/jquery-lint/

34. QUESTIONS?

35. twitter.com/ElLesso
lester@netlash.com
lesterlievens.be