Your SlideShare is downloading. ×
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
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

Introduction to jQuery at Barcamp London 8

2,681

Published on

Talk I did at Barcamp London 8, Nov 14th 2010 on jQuery for Beginners. Aimed at those who have heard of jQuery but gone no further.

Talk I did at Barcamp London 8, Nov 14th 2010 on jQuery for Beginners. Aimed at those who have heard of jQuery but gone no further.

1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,681
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
1
Likes
8
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

  • So that’s the official stuff.
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • But in basic terms, why would we want to use jQuery?
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  • CSS selectors
  • CSS selectors
  • CSS selectors
  • CSS selectors
  • works with any CSS & CSS3 selectors
  • works with any CSS & CSS3 selectors
  • Events - docs are superb reference
  • Events - docs are superb reference
  • When binding an event to multiple items (say a list of items) it’s far more efficient to use jQuery’s delegate() function and bind it to the parent of those items - so if anyone is feeling adventurous have a look on the docs and try it out!
  • Hover function takes 2 arguments
  • So this is again pretty straight forward - next() is one of many traversal functions. slideToggle() will slide an element into view if it was hidden, or slide it out of view if it was showing. This solves us having to check manually.
  • Often we may want to stop the link taking the user to a URL if we’re doing JS stuff, so jQuery lets us stop the link doing what it should, by passing in the current event (often use ‘e’) to the function and then stopping the default action
  • Wait for the document to be ready before we execute any JS
  • This is identical, just saves a few bytes
  • So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  • So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  • You can be specific or not with the version number
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Animate is incredibly powerful and also very clever - passing in ‘500px’ as width is no issue, it happily figures it all out. Any CSS property that can be animated can be used. By default you can not animate colours with this, but there is a plug in which does it. The callback function will be run once the animation is done, most the effect functions in jQuery let us pass in a callback, and also the speed in milliseconds. There are also some predefined: “slow”, “normal” and “quick”.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Just like animate CSS() takes any css property and changes it
  • This is fine for a few properties but for many it’s better just to create a class in your CSS and add the class. Note you do NOT put the “.” in.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  • Wrap does what you imagine in this case it will wrap an anchor around all imgs. When creating a new element (more on that soon) you can just use <tag /> and jQuery does the rest.
  • Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago


  • You can also add text to this element or edit its inner HTML. text() and html() are jQuery methods that can edit the text or HTML of the element (covering them shortly). So do not put quotes around them. Obviously in real life you would never set both - one or the other
  • You can also bind events - although as mentioned earlier this way CAN be incredibly in-efficient.
  • And now we need to add our new div to the page.
  • We can’t cover them all - the idea is that you see just how much this library can do.
  • Get current object using $(this)
  • Because there’s only 3 we’ll go into each one - text() and html() have a difference that is very important
  • Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  • text() is useful not only for setting text but for the fact that it strips all HTML out of the content of an element when it gets it. If you add HTML tags when setting text they are escaped.
  • Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  • Only got time to go over this really quickly.
  • In the success function the variable you pass in, in my case ‘d’ will reference the object returned by the Ajax request. Remember that JSON is not cross domain.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  • Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.


  • ×