• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

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.

Like this presentation? Why not share!

jQuery Tips & Tricks - Bath Camp 2010

on

  • 1,400 views

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

Statistics

Views

Total Views
1,400
Views on SlideShare
1,389
Embed Views
11

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 11

http://lanyrd.com 11

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • 18yrs, at Uni of Bath, doing Comp Sci. <br /> Feel free to contact me in any of the above ways. <br /> Feel free to ask questions during and/or after presentation <br />
  • Using the google CDN allows us to load jQuery from Google - let them do the heavy lifting. <br /> <br /> The &#x201C;1.4&#x201D; can be changed to be very specific - eg 1.3.5, or even less, even just &#x2018;1&#x2019;. However &#x2018;1&#x2019; is not recommended - stick with a minor iteration - eg 1.4 or 1.5 <br />
  • jQuery&#x2019;s traversal functions take any valid CSS selector. <br /> This includes CSS3, it&#x2019;s completely cross-browser, including IE6. <br /> ---- <br /> So once I saw some code which looked something like this: <br />
  • Now there are a few things we can do here. <br /> 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 <br /> the variable children now contains any h2 elements or p elements in the order they were found, as a jQuery object (not an array!) <br />
  • Just another thing - it&#x2019;s important to note the difference between .find() and .children() <br /> <br /> .children() goes just 1 level down into the DOM <br /> ,find() goes all the way down <br /> <br /> So if you only want the direct descendant, use children(), else use find() <br />
  • If we want to get an individual item with jQuery as the jQuery object we can do it like so: <br />
  • If we want to get just the array and ditch jQuery, you can do, and then you gain access to JS native methods. <br />
  • If you want to get the entire array as a native JS object and not just individual items, don&#x2019;t pass an index to get() <br />
  • If you&#x2019;re styling more than 15 elements or so, it&#x2019;s more efficient to append a style tag to the DOM. <br />
  • This is complete shit, don&#x2019;t do it. <br />
  • Nicer! <br />
  • Saving one extra line with this one <br /> Manipulation functions return the object they performed something on - so $(&#x201C;div&#x201D;).hide() returns whatever $(&#x201C;div&#x201D;) returns. <br />
  • If you are performing lots of operations on an object once, chaining may make more sense to you then saving to variables. <br />
  • Javascript ignores whitespace, so feel free to split the functions over multiple lines if you find it easier. <br />
  • You can give jQuery a context to look in. So if you&#x2019;ve got some element saved to a variable, you can tell jQuery just to look within that. <br />
  • However when you do that, all jQuery does is use it&#x2019;s own .find() method, so you might as well just do that. <br />
  • getElementById and getElementsByTagName are native to all browsers, so always select by ID if you can, or by a tag. <br /> getElementsByClassName works in all browsers bar IE6,7,8 (surprised?) <br />
  • Once all the DOM is loaded, then execute our code <br />
  • This can be shortened as so... <br />
  • Because of the way animations work in jQuery, this code will not perform as expected. Can anyone tell me why? <br />
  • 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. <br />
  • 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. <br />
  • 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. <br />
  • Instead of using a random attribute (usually rel or title), use jQuery&#x2019;s data() method. <br />
  • And this is how we access the data <br />
  • 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. <br />
  • Using a closure, we can make it a bit tidier. <br />
  • Passing an object in as the second parameter with attributes. <br />
  • 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. <br />
  • 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. <br />
  • Feel free to come and talk to me at anytime, always up for talking jQuery. <br />
  • <br />

jQuery Tips & Tricks - Bath Camp 2010 jQuery Tips & Tricks - Bath Camp 2010 Presentation Transcript

  • jQuery Tips & Tricks Jack Franklin
  • About Me
  • About Me ➡ www.jackfranklin.co.uk ➡ jack@jackfranklin.co.uk ➡ @Jack_Franklin ➡ Skype: jack_franklin
  • Google CDN
  • Google CDN <script type="text/javascript" src=http://ajax.googleapis.com/ajax/ libs/jquery/1.4/jquery.min.js"></ script>
  • Being jQuery Savvy
  • Being jQuery Savvy var elem = $(“div”), childH = elem.find(“h2”), childP = elem.find(“p”);
  • Being jQuery Savvy var elem = $(“div”), children = elem.find(“h2, p”)
  • Being jQuery Savvy var elem = $(“div”), children = elem.find(“h2, p”) children = elem.children(“h2,p”)
  • Being jQuery Savvy children = elem.find(“h2, p”) var firstElem = children.eq(0)
  • Being jQuery Savvy children = elem.find(“h2, p”) var firstElem = children[0] var secondElem = children.get(1)
  • Being jQuery Savvy children = elem.find(“h2, p”) var someArray = children.get()
  • Being jQuery Savvy
  • Being jQuery Savvy $(‘<style type=”text/ css”>div.something {color: blue;}</ style>’).appendTo(‘head’)
  • Quick & Easy Optimisation
  • Quick & Easy Optimisation $(“div”).hide() $(“div”).css(“width”, “200px”) $(“div”).show()
  • Quick & Easy Optimisation var someDiv = $(“div”) someDiv.hide() someDiv.css(“width”, “200px”) someDiv.show()
  • Quick & Easy Optimisation var someDiv = $(“div”).hide() someDiv.css(“width”, “200px”) someDiv.show()
  • Chaining it all together
  • Chaining it all together $ (“div”).hide().addClass(“hi”).show() .fadeOut().removeClass(“hi”)
  • Chaining it all together $(“div”) .hide() .addClass(“hi”) .etc .etc
  • Context
  • Context $(“div”, someOtherDiv)
  • Context $(“div”, someOtherDiv) someOtherDiv.find(“div”)
  • Don’t Abuse jQuery
  • Don’t Abuse jQuery $(“#someItem”) //best $(“div”) //better $(“.something”) // worst
  • When you’re Ready?
  • When you’re Ready? $(document).ready(function() {...});
  • When you’re Ready? $(function() {...});
  • Once you’re Done?
  • Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • Once you’re Done? $ (“div”).fadeOut().fadeIn().fadeOut() .fadeIn().css(“color”, “blue”)
  • Once you’re Done? $(“div”).fadeOut(‘normal’, function() {...});
  • data()
  • data() $(“#myElem”).data(“something”, “some data”)
  • data() $(“#myElem”).data(“something”) //returns “some data”
  • $ or no $
  • $ or no $ var $j = jQuery.noConflict() $j(“div”)
  • $ or no $ (function($) { $(“#myDiv”).hide() })(jQuery) jQuery(“#myDiv”).hide()
  • Creation
  • Creation $(‘<div />’, { id : ‘someId’, title : ‘some title’ });
  • Manipulation
  • Manipulation someElem.appendTo(somethingElse) someElem.clone().appendTo(somethingE lse)
  • And most importantly...
  • And most importantly... Use Firebug!
  • Questions?
  • Thanks! Jack Franklin