jQuery Tips & Tricks - Bath Camp 2010


Published on

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

Published in: Technology, Business
  • 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

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.

  • ×