Everything You Need to Know in Order to Start Using jQuery
Upcoming SlideShare
Loading in...5
×
 

Everything You Need to Know in Order to Start Using jQuery

on

  • 1,357 views

I originally wrote this for some in-house training at work, but pulled it out of the archives for a meeting of the Suburban Chicago PHP & Web Development Meetup.

I originally wrote this for some in-house training at work, but pulled it out of the archives for a meeting of the Suburban Chicago PHP & Web Development Meetup.

Statistics

Views

Total Views
1,357
Views on SlideShare
1,322
Embed Views
35

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 35

http://suburbanchicagophp.org 32
http://www.slideshare.net 3

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 />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Everything You Need to Know in Order to Start Using jQuery Everything You Need to Know in Order to Start Using jQuery Presentation Transcript

  • Everything You Need to Know In Order to Start Using jQuery A Play in Three Acts by Dave Ross Suburban Chicago PHP & Web Development Meetup July 30, 2008
  • What is jQuery? Remember when you tried learning Javascript ten years ago and you wanted to hunt down the person who invented it and beat their head in with a rusty crowbar? Forget that. Seriously. That stuff ain't healthy.
  • What is jQuery? jQuery is a Javascript library for manipulating elements on a page. jQuery takes care of cross-browser issues. jQuery is shorter and easier to read than old- fashioned DOM scripting. jQuery comes with cool effects, and you can download more. View slide
  • Why use jQuery? If you use jQuery, you will become a Web 2.0™ superstar. You will be able to found a startup, get funded by Y Combinator, attend all the hottest parties at Google, and Leo Laporte will drop your name incessantly. View slide
  • Everything you need to $('#example').fadeOut(); #example...where have I seen that before? Oh yeah, it's a CSS selector! You can use pretty much any CSS selector as a parameter in $(). For example: $('div.sidebar'); $('table#salaries'); $('div.sidebar h1');
  • Getting hungry already? You can probably skip the rest and read the docs at: http://docs.jquery.com There are tutorials at: http://docs.jquery.com/Tutorials Still here?
  • Everything you need to $() returns a set of elements that match that CSS selector. Anything you tack on at the end is applied to all of them. $('p').slideUp() makes every paragraph disappear. Not cool! Don't do that. $('#example').fadeOut() only effects one element, the one with id=”example”. It's much more specific.
  • Let's see an example! <script src=”/path/to/jquery-1.2.3.js” type=”text/javascript” /> <script type=”text/javascript”> function clickHandler()‫‏‬ { $('#example').fadeOut(); } </script> <div id=”example” onclick=”clickHandler();”>test</div>
  • jQuery UI $('#example').fadeOut(); Why do I keep using that example? That's what you're going to be using jQuery for most of the time, fading things in & out like you think you're Google or something. fadeOut() is one of the jQuery Effects (show, hide, fade, and slide). Also, there are fancier animations in the jQuery UI library @ ui.jquery.com – stuff like “split the div into 36 pieces and send each of them flying in a different direction”.
  • Events jQuery makes working with events much easier. Events are things like ready (when the page is fully loaded), click, focus, keydown, resize, submit, etc. $('#example').focus() gives the #example element focus. $('#example').focus(focusHandler) says to call focusHandler() when #example gets focus. $(document).ready(readyHandler) says to call readyHandler() when the page is done loading.
  • Closures While we're talking about events, this would be a good time to discuss closures. Some functions expect you to pass them the name of another function to call later. You can use a closure to define that function right then & there. Instead of $('#example').focus(focusHandler), with focusHandler() defined somewhere else, you can say: $('#example').focus( function() { // Everything focusHandler would do // can be done here, not off in some // other file somewhere alert('Hello world!'); });
  • Cliff's Notes The most important things I hope you learned: $('some CSS selector')‫‏‬ http://docs.jquery.com