jQuery - Tips And Tricks
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery - Tips And Tricks

  • 2,170 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
2,170
On Slideshare
2,160
From Embeds
10
Number of Embeds
3

Actions

Shares
Downloads
53
Comments
0
Likes
5

Embeds 10

http://play.inventis.be 7
http://www.linkedin.com 2
https://www.linkedin.com 1

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