1. Week 12: JQuery Write less, do more.

2. JQuery Basics Lightweight JavaScript Library – Emphasizes interaction between JavaScript and HTML – Reduces technical knowledge needed to implement JavaScript – Is free and open source software

3. How it works … Download the JQuery library file from the Web site http://jquery.comhttp://jquery.com Save the file in your Web site directory/folder With the JQuery library linked, you can immediately call on functions

4. How it works … Jquery exists as a single JavaScript file – Contains all common document, event, effect, and Ajax functions – Can be linked to any Web page

5. How it works … Jquery exists as a single JavaScript file – Contains all common document, event, effect, and Ajax functions – Can be linked to any Web page

6. Create a Starting Document Learning JQuery Welcome My JQuery Test Page Jquery is cool!

7. Initializing JQuery Scripts In JavaScript, you launch code “onload” – After the page has loaded – Isn’t run until after all elements (including images) have loaded With Jquery, you launch code on “Document Ready” $(document).ready(function(){});

8. Document Ready Function $(document).ready(function(){});

9. Document Ready Function $(document).ready(function(){ // Your Code Goes Here });

10. Document Ready Function $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); });

11. Adding JQuery … Learning JQuery $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); …

12. JQuery Syntax $(“selector”).what(“details”); $(“h1”).addClass(“red”); $(“a”).click(function(){ alert(“hello World!”)};

13. Manipulating CSS … Learning JQuery $(document).ready(function(){ $(”h1").addclass(“red”); }); …

14. Manipulating CSS … Learning JQuery $(document).ready(function(){ $(”h1").addclass(“red”); });.red {color: red;} …

15. Where this really helps … … Lorem Ipsom Deolor Sit Amet Lorem Ipsom Deolor Sit Amet …CREATE 10 Rows

16. Add Some CSS Rules … Learning JQuery th {background-color: blue; color: white;} …

18. Create rules for highlights … Learning JQuery th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

19. Add Script to Make Style Apply … Learning JQuery $(document).ready(function(){ $(”tr").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

21. Make the Rows Alternate … Learning JQuery $(document).ready(function(){ $(”tr:even").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;} …

23. Add a Highlight $(document).ready(function(){ $(”tr”).mouseover(function() { $(this).addClass(“over”); }); $(”tr”).mouseout(function() { $(this).removeClass(“over”); }); $(”tr:even").addclass(“alt”); }); th {background-color: blue; color: white;} tr.alt td {background-color: #ccc;} tr.over td {background-color: #fcc;}

24. Create a New Starting Document Learning JQuery Welcome My Second JQuery Test Page

25. In the Body, Add Some Content Welcome My Second JQuery Test Page Click Here …

26. In the Head, Add some CSS Learning JQuery span {color: red; cursor: pointer;} div {margin: 3px; width: 80px; height: 80px; display: none; float: left;} #one {background-color: #f00;} #two {background-color: #0f0;} #three {background-color: #00f;}

28. Add the JQuery Script to Work Learning JQuery span {color: red; cursor: pointer;} div {margin: 3px; width: 80px; height: 80px; display: none; float: left;} #one {background-color: #f00;} #two {background-color: #0f0;} #three {background-color: #00f;}

29. Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ });...

30. Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ $(document.body).click(function () { });...

31. Add the JQuery Script to Work Learning JQuery $(document).ready(function(){ $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); });...