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

jQuery - Tips And Tricks

on

  • 2,080 views

Netlash-bSeen devlab 2011-06-10

Netlash-bSeen devlab 2011-06-10

Statistics

Views

Total Views
2,080
Views on SlideShare
2,070
Embed Views
10

Actions

Likes
5
Downloads
51
Comments
0

3 Embeds 10

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

jQuery - Tips And Tricks jQuery - Tips And Tricks Presentation Transcript

  • 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 DOM for p tags and then look for #content$(‘#content’). nd(‘p’); = The faster jQuery wayThis method will be 20-30% faster
  • Write your own selectors$.extend( $.expr[‘:’], { myNewSelector: function(element) { // do something }});$(‘#content :myNewSelector’);
  • SelectorsEventsGeneral tipsUsefull plugins
  • These are the same$(document).ready(function () { });$(function () { });
  • Binding eventsbind() $(‘a’).bind(‘click’, function(e) { });live() $(‘a’).live(‘click’, function(e) { });delegate() $(‘#content’).delegate(‘a’, ‘click’, function(e) { });
  • 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
  • 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’, function(e) { });
  • 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 speed advantage.
  • 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...
  • Unit testingSelenium http://seleniumhq.org/Fucunit http://funcunit.com/QUnit http://docs.jquery.com/QunitQMock https://github.com/andybeeching/qmock
  • BenchmarkingFirebug functions time() and pro le() will log execution times.console.time(‘looping foo’); foo.each(function() { // do something });console.timeEnd(‘looping foo’);
  • 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