Your SlideShare is downloading. ×
0
JQUERYTips and tricksDevlab - 10/06/2011
Hi! I’m Lester
This is Sheba
JQUERYTips and tricks
SelectorsEventsGeneral tipsUsefull plugins
SelectorsEventsGeneral tipsUsefull plugins
Selecting by #id is the fastest$(‘#content’);Selecting by .class is the slowest$(‘.content’);
Selector tips$(‘div.content’);   Pre x class selectors with tags$(‘#foo’, this);    Specify context
Cache objects that you use a lotvar header = $(‘#header’);var menu = header. nd(‘.menu’);
jQuery uses ‘right to left’ modelExample : Selecting all p tags inside #content$(‘#content p’);jQuery will start querying ...
Write your own selectors$.extend( $.expr[‘:’], {           myNewSelector: function(element)           {                // ...
SelectorsEventsGeneral tipsUsefull plugins
These are the same$(document).ready(function () { });$(function () { });
Binding eventsbind()       $(‘a’).bind(‘click’, function(e) { });live()       $(‘a’).live(‘click’, function(e) { });delega...
Bind()Most straight forward way to bind an event to an element$(‘a’).bind(‘click’, function(e) { });jQuery will bind the c...
Live()Will also bind elements that are added to DOM dynamically$(‘a’).live(‘click’, function(e) { });
Delegate()Delegate will bind the handler to a given elementinstead of the document root$(‘#content’).delegate(‘a’, ‘click’...
SelectorsEventsGeneral tipsUsefull plugins
Use HTML5HTML5 brings more tags like <footer>, <header>, <section>, ...Selector performance ++
DOM manipulationIs frikkin’ slowTry to avoid the append(), prepend(), after(), ... functionsInsert strings with html()
Always use the latest version (1.6.1)
Always use object detectionif( $(‘#content’).length ){    // do stuff}
Use direct functionsThe functions get() and post() are just shortcuts to ajax().So calling ajax() will give you a small sp...
Check out the utilities functions$.inArray()   Determine whether an element exists inside an array$.isArray()   Determine ...
Unit testingSelenium   http://seleniumhq.org/Fucunit    http://funcunit.com/QUnit      http://docs.jquery.com/QunitQMock  ...
BenchmarkingFirebug functions time() and pro le() will log execution times.console.time(‘looping foo’);   foo.each(functio...
BenchmarkingjsPerf - JavaScript performance playgroundhttp://jsperf.com/
SelectorsEventsGeneral tipsUsefull plugins
TipsyA Facebook-like tooltip plugin.http://onehackoranother.com/projects/jquery/tipsy/
Nivo SliderAn image slider plugin.http://nivo.dev7studios.com/
ShadowboxA lightbox plugin.http://www.shadowbox-js.com/
jCropAn image cropping plugin.http://deepliquid.com/content/Jcrop.html
jQuery LintA plugin that checks jQuery statements for errorshttp://james.padolsey.com/javascript/jquery-lint/
QUESTIONS?
twitter.com/ElLessolester@netlash.comlesterlievens.be
Upcoming SlideShare
Loading in...5
×

jQuery - Tips And Tricks

1,965

Published on

Netlash-bSeen devlab 2011-06-10

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,965
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "jQuery - Tips And Tricks"

    1. 1. JQUERYTips and tricksDevlab - 10/06/2011
    2. 2. Hi! I’m Lester
    3. 3. This is Sheba
    4. 4. JQUERYTips and tricks
    5. 5. SelectorsEventsGeneral tipsUsefull plugins
    6. 6. SelectorsEventsGeneral tipsUsefull plugins
    7. 7. Selecting by #id is the fastest$(‘#content’);Selecting by .class is the slowest$(‘.content’);
    8. 8. Selector tips$(‘div.content’); Pre x class selectors with tags$(‘#foo’, this); Specify context
    9. 9. Cache objects that you use a lotvar header = $(‘#header’);var menu = header. nd(‘.menu’);
    10. 10. jQuery uses ‘right to left’ modelExample : 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 wayThis method will be 20-30% faster
    11. 11. Write your own selectors$.extend( $.expr[‘:’], { myNewSelector: function(element) { // do something }});$(‘#content :myNewSelector’);
    12. 12. SelectorsEventsGeneral tipsUsefull plugins
    13. 13. These are the same$(document).ready(function () { });$(function () { });
    14. 14. Binding eventsbind() $(‘a’).bind(‘click’, function(e) { });live() $(‘a’).live(‘click’, function(e) { });delegate() $(‘#content’).delegate(‘a’, ‘click’, function(e) { });
    15. 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. 16. Live()Will also bind elements that are added to DOM dynamically$(‘a’).live(‘click’, function(e) { });
    17. 17. Delegate()Delegate will bind the handler to a given elementinstead of the document root$(‘#content’).delegate(‘a’, ‘click’, function(e) { });
    18. 18. SelectorsEventsGeneral tipsUsefull plugins
    19. 19. Use HTML5HTML5 brings more tags like <footer>, <header>, <section>, ...Selector performance ++
    20. 20. DOM manipulationIs frikkin’ slowTry to avoid the append(), prepend(), after(), ... functionsInsert strings with html()
    21. 21. Always use the latest version (1.6.1)
    22. 22. Always use object detectionif( $(‘#content’).length ){ // do stuff}
    23. 23. Use direct functionsThe functions get() and post() are just shortcuts to ajax().So calling ajax() will give you a small speed advantage.
    24. 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. 25. Unit testingSelenium http://seleniumhq.org/Fucunit http://funcunit.com/QUnit http://docs.jquery.com/QunitQMock https://github.com/andybeeching/qmock
    26. 26. BenchmarkingFirebug functions time() and pro le() will log execution times.console.time(‘looping foo’); foo.each(function() { // do something });console.timeEnd(‘looping foo’);
    27. 27. BenchmarkingjsPerf - JavaScript performance playgroundhttp://jsperf.com/
    28. 28. SelectorsEventsGeneral tipsUsefull plugins
    29. 29. TipsyA Facebook-like tooltip plugin.http://onehackoranother.com/projects/jquery/tipsy/
    30. 30. Nivo SliderAn image slider plugin.http://nivo.dev7studios.com/
    31. 31. ShadowboxA lightbox plugin.http://www.shadowbox-js.com/
    32. 32. jCropAn image cropping plugin.http://deepliquid.com/content/Jcrop.html
    33. 33. jQuery LintA plugin that checks jQuery statements for errorshttp://james.padolsey.com/javascript/jquery-lint/
    34. 34. QUESTIONS?
    35. 35. twitter.com/ElLessolester@netlash.comlesterlievens.be
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×