SlideShare a Scribd company logo

Everything You Need to Know in Order to Start Using jQuery

•Download as KEY, PDF•
•
Dave Ross
Dave Ross

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.

1 of 12
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.
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.
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

More Related Content

Everything You Need to Know in Order to Start Using jQuery

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Cliff's Notes The most important things I hope you learned: $('some CSS selector')‫‏‬ http://docs.jquery.com

Editor's Notes