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