jQuery - Tips And Tricks

  • 1,810 views
Uploaded on

Netlash-bSeen devlab 2011-06-10

Netlash-bSeen devlab 2011-06-10

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,810
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
53
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