JQuery tutorial (based on Cory Thoma’s slide)

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

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

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

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>

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

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

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

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

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

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

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!

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

JQuery tutorial (based on Cory Thoma’s slide)