jQuery - Tips And Tricks
Download as KEY, PDF5 likes1,345 views
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.
![Write your own selectors
$.extend( $.expr[‘:’], {
myNewSelector: function(element)
{
// do something
}
});
$(‘#content :myNewSelector’);](https://image.slidesharecdn.com/jquery-tipsandtricks-110614071825-phpapp01/85/jQuery-Tips-And-Tricks-11-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to jQuery - Tips And Tricks (20)
Ad
Recently uploaded (20)
Ad
jQuery - Tips And Tricks
- 1. JQUERY Tips and tricks Devlab - 10/06/2011
- 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’);
- 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) { });
- 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/
- 29. Tipsy A Facebook-like tooltip plugin. http://onehackoranother.com/projects/jquery/tipsy/
- 30. Nivo Slider An image slider plugin. http://nivo.dev7studios.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?