Your SlideShare is downloading. ×
0
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
jQuery - Tips And Tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery - Tips And Tricks

1,903

Published on

Netlash-bSeen devlab 2011-06-10

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,903
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. JQUERYTips and tricksDevlab - 10/06/2011
    • 2. Hi! I’m Lester
    • 3. This is Sheba
    • 4. JQUERYTips and tricks
    • 5. SelectorsEventsGeneral tipsUsefull plugins
    • 6. SelectorsEventsGeneral tipsUsefull 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 lotvar header = $(‘#header’);var menu = header. nd(‘.menu’);
    • 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. Write your own selectors$.extend( $.expr[‘:’], { myNewSelector: function(element) { // do something }});$(‘#content :myNewSelector’);
    • 12. SelectorsEventsGeneral tipsUsefull plugins
    • 13. These are the same$(document).ready(function () { });$(function () { });
    • 14. Binding eventsbind() $(‘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 elementinstead of the document root$(‘#content’).delegate(‘a’, ‘click’, function(e) { });
    • 18. SelectorsEventsGeneral tipsUsefull plugins
    • 19. Use HTML5HTML5 brings more tags like <footer>, <header>, <section>, ...Selector performance ++
    • 20. DOM manipulationIs frikkin’ slowTry to avoid the append(), prepend(), after(), ... functionsInsert strings with html()
    • 21. Always use the latest version (1.6.1)
    • 22. Always use object detectionif( $(‘#content’).length ){ // do stuff}
    • 23. Use direct functionsThe 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 testingSelenium http://seleniumhq.org/Fucunit http://funcunit.com/QUnit http://docs.jquery.com/QunitQMock https://github.com/andybeeching/qmock
    • 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. BenchmarkingjsPerf - JavaScript performance playgroundhttp://jsperf.com/
    • 28. SelectorsEventsGeneral tipsUsefull plugins
    • 29. TipsyA Facebook-like tooltip plugin.http://onehackoranother.com/projects/jquery/tipsy/
    • 30. Nivo SliderAn image slider plugin.http://nivo.dev7studios.com/
    • 31. ShadowboxA lightbox plugin.http://www.shadowbox-js.com/
    • 32. jCropAn image cropping plugin.http://deepliquid.com/content/Jcrop.html
    • 33. jQuery LintA plugin that checks jQuery statements for errorshttp://james.padolsey.com/javascript/jquery-lint/
    • 34. QUESTIONS?
    • 35. twitter.com/ElLessolester@netlash.comlesterlievens.be

    ×