jQuery Tips & Tricks - Bath Camp 2010

Editor's Notes

2. 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
3. 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
4. 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:
5. 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!)
6. 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()
7. If we want to get an individual item with jQuery as the jQuery object we can do it like so:
8. If we want to get just the array and ditch jQuery, you can do, and then you gain access to JS native methods.
9. 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()
10. If you’re styling more than 15 elements or so, it’s more efficient to append a style tag to the DOM.
11. This is complete shit, don’t do it.
12. Nicer!
13. Saving one extra line with this one Manipulation functions return the object they performed something on - so $(“div”).hide() returns whatever $(“div”) returns.
14. If you are performing lots of operations on an object once, chaining may make more sense to you then saving to variables.
15. Javascript ignores whitespace, so feel free to split the functions over multiple lines if you find it easier.
16. 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.
17. However when you do that, all jQuery does is use it’s own .find() method, so you might as well just do that.
18. 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?)
19. Once all the DOM is loaded, then execute our code
20. This can be shortened as so...
21. Because of the way animations work in jQuery, this code will not perform as expected. Can anyone tell me why?
22. 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.
23. 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.
24. 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.
25. Instead of using a random attribute (usually rel or title), use jQuery’s data() method.
26. And this is how we access the data
27. 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.
28. Using a closure, we can make it a bit tidier.
29. Passing an object in as the second parameter with attributes.
30. 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.
31. 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.
32. Feel free to come and talk to me at anytime, always up for talking jQuery.