Your SlideShare is downloading. ×
jQuery Tips & Tricks - Bath Camp 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Tips & Tricks - Bath Camp 2010

1,156

Published 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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,156
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
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

  • 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.

  • ×