• Like


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

jQuery Tips & Tricks - Bath Camp 2010

Uploaded on

'jQuery Tips & Tricks' presentation I did at Bath Camp 2010. Any questions then please get in touch.

'jQuery Tips & Tricks' presentation I did at Bath Camp 2010. Any questions then please get in touch.

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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide

  • 18yrs, at Uni of Bath, doing Comp Sci.
    Feel free to contact me in any of the above ways.
    Feel free to ask questions during and/or after presentation
  • Using the google CDN allows us to load jQuery from Google - let them do the heavy lifting.

    The “1.4” can be changed to be very specific - eg 1.3.5, or even less, even just ‘1’. However ‘1’ is not recommended - stick with a minor iteration - eg 1.4 or 1.5
  • jQuery’s traversal functions take any valid CSS selector.
    This includes CSS3, it’s completely cross-browser, including IE6.
    So once I saw some code which looked something like this:
  • Now there are a few things we can do here.
    The most obvious is that the person who wrote this forgot that most jQuery traversal functions can take any CSS selector - and CSS selectors can select multiple things
    the variable children now contains any h2 elements or p elements in the order they were found, as a jQuery object (not an array!)
  • Just another thing - it’s important to note the difference between .find() and .children()

    .children() goes just 1 level down into the DOM
    ,find() goes all the way down

    So if you only want the direct descendant, use children(), else use find()
  • If we want to get an individual item with jQuery as the jQuery object we can do it like so:
  • If we want to get just the array and ditch jQuery, you can do, and then you gain access to JS native methods.
  • If you want to get the entire array as a native JS object and not just individual items, don’t pass an index to get()
  • If you’re styling more than 15 elements or so, it’s more efficient to append a style tag to the DOM.
  • This is complete shit, don’t do it.
  • Nicer!
  • Saving one extra line with this one
    Manipulation functions return the object they performed something on - so $(“div”).hide() returns whatever $(“div”) returns.
  • If you are performing lots of operations on an object once, chaining may make more sense to you then saving to variables.
  • Javascript ignores whitespace, so feel free to split the functions over multiple lines if you find it easier.
  • You can give jQuery a context to look in. So if you’ve got some element saved to a variable, you can tell jQuery just to look within that.
  • However when you do that, all jQuery does is use it’s own .find() method, so you might as well just do that.
  • getElementById and getElementsByTagName are native to all browsers, so always select by ID if you can, or by a tag.
    getElementsByClassName works in all browsers bar IE6,7,8 (surprised?)
  • Once all the DOM is loaded, then execute our code
  • This can be shortened as so...
  • Because of the way animations work in jQuery, this code will not perform as expected. Can anyone tell me why?
  • Animations are added to the queue - so in reality what happens here is that the colour is changed and then the animations rock. So we run this and when the div fades in, it will be blue.
  • To get past this jQuery lets us pass in a callback function as the second parameter to run after the function has run - this is mostly useful with animations.
  • To get past this jQuery lets us pass in a callback function as the second parameter to run after the function has run - this is mostly useful with animations.
  • Instead of using a random attribute (usually rel or title), use jQuery’s data() method.
  • And this is how we access the data
  • If you might be using another library - or taking over from someone who has - they may already use $ in another library, but you can still use jQuery. The $ is not anything special.
  • Using a closure, we can make it a bit tidier.
  • Passing an object in as the second parameter with attributes.
  • Any functions that move an element move the original - they do not clone it. Using clone() will clone it, return the cloned element and leave the original as it was.
  • Firebug seriously makes life so much easier to do everything. There are so many things Firefox can do which makes life a lot easier when coding. I *may* be doing a session later on Firebug, so keep an eye out on the board.
  • Feel free to come and talk to me at anytime, always up for talking jQuery.


  • 1. jQuery Tips & Tricks Jack Franklin
  • 2. About Me
  • 3. About Me ➡ www.jackfranklin.co.uk ➡ jack@jackfranklin.co.uk ➡ @Jack_Franklin ➡ Skype: jack_franklin
  • 4. Google CDN
  • 5. Google CDN <script type="text/javascript" src=http://ajax.googleapis.com/ajax/ libs/jquery/1.4/jquery.min.js"></ script>
  • 6. Being jQuery Savvy
  • 7. Being jQuery Savvy var elem = $(“div”), childH = elem.find(“h2”), childP = elem.find(“p”);
  • 8. Being jQuery Savvy var elem = $(“div”), children = elem.find(“h2, p”)
  • 9. Being jQuery Savvy var elem = $(“div”), children = elem.find(“h2, p”) children = elem.children(“h2,p”)
  • 10. Being jQuery Savvy children = elem.find(“h2, p”) var firstElem = children.eq(0)
  • 11. Being jQuery Savvy children = elem.find(“h2, p”) var firstElem = children[0] var secondElem = children.get(1)
  • 12. Being jQuery Savvy children = elem.find(“h2, p”) var someArray = children.get()
  • 13. Being jQuery Savvy
  • 14. Being jQuery Savvy $(‘<style type=”text/ css”>div.something {color: blue;}</ style>’).appendTo(‘head’)
  • 15. Quick & Easy Optimisation
  • 16. Quick & Easy Optimisation $(“div”).hide() $(“div”).css(“width”, “200px”) $(“div”).show()
  • 17. Quick & Easy Optimisation var someDiv = $(“div”) someDiv.hide() someDiv.css(“width”, “200px”) someDiv.show()
  • 18. Quick & Easy Optimisation var someDiv = $(“div”).hide() someDiv.css(“width”, “200px”) someDiv.show()
  • 19. Chaining it all together
  • 20. Chaining it all together $ (“div”).hide().addClass(“hi”).show() .fadeOut().removeClass(“hi”)
  • 21. Chaining it all together $(“div”) .hide() .addClass(“hi”) .etc .etc
  • 22. Context
  • 23. Context $(“div”, someOtherDiv)
  • 24. Context $(“div”, someOtherDiv) someOtherDiv.find(“div”)
  • 25. Don’t Abuse jQuery
  • 26. Don’t Abuse jQuery $(“#someItem”) //best $(“div”) //better $(“.something”) // worst
  • 27. When you’re Ready?
  • 28. When you’re Ready? $(document).ready(function() {...});
  • 29. When you’re Ready? $(function() {...});
  • 30. Once you’re Done?
  • 31. Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • 32. Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • 33. Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • 34. Once you’re Done? $(“div”).fadeOut(‘normal’, function() {...});
  • 35. data()
  • 36. data() $(“#myElem”).data(“something”, “some data”)
  • 37. data() $(“#myElem”).data(“something”) //returns “some data”
  • 38. $ or no $
  • 39. $ or no $ var $j = jQuery.noConflict() $j(“div”)
  • 40. $ or no $ (function($) { $(“#myDiv”).hide() })(jQuery) jQuery(“#myDiv”).hide()
  • 41. Creation
  • 42. Creation $(‘<div />’, { id : ‘someId’, title : ‘some title’ });
  • 43. Manipulation
  • 44. Manipulation someElem.appendTo(somethingElse) someElem.clone().appendTo(somethingE lse)
  • 45. And most importantly...
  • 46. And most importantly... Use Firebug!
  • 47. Questions?
  • 48. Thanks! Jack Franklin