Exploring the Power of jQuery: Engaging Examples and Tutorials

1. JQuery tutorial(based on Cory Thoma’s slide) Fan Zhang

2. Power of JQuery • Let’s see some demo first: • Story of a happy Java programmer • love.hackerzhou.me • Story of a lonely C programmer • nolove.blahgeek.com • www.openrise.com/lab/FlowerPower

3. What is JQuery? • A huge collection of predefined javascript objects and methods that are free to use and link to • Basically: Still javascript! • Link: http://jquery.com • Latest version: 1.9 • They also provided a mobile library and CSS library

4. How to use Jquery? • Local Reference • Download and put it into the right folder • <script src=“jquery.js”></script> • Online Reference • <script src=http://code.jquery.com/jquery-1.4.2.min.js></script>

5. How to use it? • Basics:Example1 • <p id=“demo”>lalala</p> • <button id=“btn” onclick = “hide()”>hide</button> • <script> • function hide() { • $(demo).toggle(); • }

6. How to use it?(Cont.) • Basics:Example 2 • <button id=“btn”>btn</button> • <script> • $(btn).click(function() { • alert(“hello”); • });

7. How to use it?(Cont.) • Change the attributes • Example • $(btn).attr(“value”,”alert2”);

8. Hint • Got to JQuery, check the api: http://api.jquery.com/

9. Example 1 • Hide button and show • hide.html • Practice: • hideself.html • Description: Create a button, when you click the button, the button will hide itself

10. Example 2 • Evolving button • buttonevolving.html • sliding menu • slidingmenu.html • Practice: • Spiderman.html • Description • Create a region with background color blue, and a button “switch to spiderman” • Hit the button, the region changes to red, and the button turns to “switch to normal” • Hit the button again, the regions changes back to the original color

11. Example 3 • Flying button • Flyingbutton.html • Practice: • Catch me button • Description: This is a naughty button, it will not allow you to hit on that!

12. More exercises • Modify the practices you have done • Somanyrhinos.html • Based on the flyingbutton example, when click a button, 10 buttons named rhino will fly to the right of the screen. • Catchmebutton2.html • This time let the catchmebutton move more regularly instead of flying everywhere, to do this, you need to get the current location of the button, and calculate the next position