Everything You Need to Know
In Order to Start Using jQuery
        A Play in Three Acts
           by Dave Ross
       Sub...
What is jQuery?

Remember when you tried learning Javascript ten
   years ago and you wanted to hunt down the
person who i...
What is jQuery?
jQuery is a Javascript library for manipulating
             elements on a page.

 jQuery takes care of cr...
Why use jQuery?

If you use jQuery, you will become a Web 2.0™
                   superstar.

You will be able to found a ...
Everything you need to
$('#example').fadeOut();

#example...where have I seen that before? Oh yeah, it's a CSS
selector!

...
Getting hungry already?
You can probably skip the rest and read the docs at:

http://docs.jquery.com

There are tutorials ...
Everything you need to

$() returns a set of elements that match that CSS selector.
Anything you tack on at the end is app...
Let's see an example!
<script src=”/path/to/jquery-1.2.3.js”
type=”text/javascript” />
<script type=”text/javascript”>
fun...
jQuery UI

$('#example').fadeOut();

Why do I keep using that example? That's what you're going to be
using jQuery for mos...
Events
jQuery makes working with events much easier.

Events are things like ready (when the page is fully loaded), click,...
Closures
While we're talking about events, this would be a good time to
discuss closures.

Some functions expect you to pa...
Cliff's Notes


The most important things I hope you learned:

$('some CSS selector')‫‏‬

http://docs.jquery.com
Upcoming SlideShare
Loading in …5
×

Everything You Need to Know in Order to Start Using jQuery

1,050 views
1,019 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,050
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide












  • Everything You Need to Know in Order to Start Using jQuery

    1. 1. 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
    2. 2. 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.
    3. 3. 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.
    4. 4. 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.
    5. 5. 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');
    6. 6. 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?
    7. 7. 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.
    8. 8. 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>
    9. 9. 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”.
    10. 10. 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.
    11. 11. 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!'); });
    12. 12. Cliff's Notes The most important things I hope you learned: $('some CSS selector')‫‏‬ http://docs.jquery.com

    ×