1. Definition from Wikipedia

2.  The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js (http://prototypejs.org/ )http://prototypejs.org/ ◦ Explanation Explanation ◦ Example Example

3.  JavaScript Library  Functionality ◦ DOM scripting & event handling ◦ Ajax ◦ User interface effects ◦ Form validation  Live Examples of jQuery Live Examples of jQuery 3 What is jQuery?

4.  Lightweight ◦ 14kb (Minified and Gzipped)  Cross-browser support ◦ IE, FireFox, Safari and Opera  CSS-like syntax ◦ easy for developers/non-developers to understand  Active developer community  Extensible - plugins 4 Why jQuery?

5.  About jQueryAbout jQuery  How jQuery Works: The Basics ◦ http://learn.jquery.com/about-jquery/how-jquery-works/ http://learn.jquery.com/about-jquery/how-jquery-works/  Tutorials ◦ http://javabeginnerstutorial.com/jquery/jquery-tutorial- beginners-examples/ http://javabeginnerstutorial.com/jquery/jquery-tutorial- beginners-examples/ ◦ http://www.w3schools.com/jquery/default.asp http://www.w3schools.com/jquery/default.asp ◦ http://www.w3schools.com/jquery/jquery_examples.asp http://www.w3schools.com/jquery/jquery_examples.asp  Next jQuery Tutorial ◦ http://tutorials.jenkov.com/jquery/index.html http://tutorials.jenkov.com/jquery/index.html

6.  Height() ◦ http://api.jquery.com/height/ http://api.jquery.com/height/ ◦ Resizable ◦ http://jqueryui.com/resizable/ http://jqueryui.com/resizable/  Slide Show? ◦ http://www.elated.com/articles/elegant-sliding- image-gallery-with-jquery/ http://www.elated.com/articles/elegant-sliding- image-gallery-with-jquery/

7.  A JavaScript API which makes it easy to perform various standard JavaScript actions  JQuery takes care of cross browser compatibility issues, so you can focus on getting your page to work as intended.  What can you do with Jquery? ◦ Select HTML elements in various ways, easing access to the elements to be enhanced. ◦ Style the HTML elements dynamically, by manipulating their CSS properties or classes. ◦ Manipulate the DOM (Document Object Model) of your page, (copy, move, modify etc.) ◦ Animate the DOM elements, e.g. fading in / out, sliding, change color, change size etc. ◦ Respond to events like mouse-over, mouse-out, change etc. ◦ AJAX enable your web pages using JQuery's smart AJAX features. ◦ Use the many JQuery plugins (incl. JQuery UI), which contains all kinds of smart widgets. ◦ Create advanced web application user interfaces, which resemble desktop user interfaces.  JQuery works naturally with the HTML elements in the browser, so it doesn't matter if they are HTML 4 or HTML 5 elements.  As long as your browser supports it, so does JQuery.  You can find JQuery at JQuery.com.JQuery.com

8.  When you use JQuery, you typically follow these steps of action: ◦ Wait for the page to be ready. ◦ Select some HTML elements to modify. ◦ Traverse the selected HTML elements. ◦ Modify the HTML element attributes, CSS styles etc. ◦ Add listener functions, e.g. click() or wait for a JQuery effect to finish etc.

9.  http://www.w3schools.com/jquery/default.asp http://www.w3schools.com/jquery/default.asp  The jQuery syntax is made for selecting HTML elements and performing some action on the element(s) at http://www.w3schools.com/jquery/jquery_syntax.asp http://www.w3schools.com/jquery/jquery_syntax.asp  Basic syntax is: $(selector).action()  jQuery jquery Property at http://www.w3schools.com/jquery/prop_jquery.asp http://www.w3schools.com/jquery/prop_jquery.asp  See examples at http://faculty.wwu.edu/~granier/info/JQuery/examples/ http://faculty.wwu.edu/~granier/info/JQuery/examples/

10.  1. Download ◦ http://jquery.com/download/ http://jquery.com/download/ ◦ Compressed or uncompressed ◦ Include in ◦ Or use one CDN (Content Delivery Node)  2. Include code 10

11. Click here to toggle visibility of #foo function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 11 Example – Show/Hide the old way

12. $().ready(function(){ $("a").click(function(){ $("#more").toggle("slow"); return false; }); 12 Example – Show/Hide with jQuery

13. function showOneYr(str) { $("#main div").css("display","none"); $("#main div#"+str).css("display","block"); } $().ready(function() { showOneYr($('#main div').attr("id")); $("#main p").after(" Choose a Year | "); $("#main h3").each(function() { yrTxt = $(this).text(); $("#yearLinks").append(' '+yrTxt+' | '); }); $("#yearLinks a").click(function(){ showOneYr('yr'+$(this).text()); return false; }); 13 Example – DOM manipulation

14. $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); }); 14 Example – Form Validation

15.  What JavaScript libraries should I use?  How do I implement?  How do we manage upgrades? 15 Questions

16.  www.jquery.com – jQuery homepage www.jquery.com  www.learningjquery.com – jQuery tutorial blog www.learningjquery.com  http://docs.jquery.com/Live_Examples_of_jQuery http://docs.jquery.com/Live_Examples_of_jQuery  http://www.queness.com/resources/ http://www.queness.com/resources/  www.visualjquery.com – jQuery documentation www.visualjquery.com  http://ui.jquery.com – jQuery user interface http://ui.jquery.com  http://bassistance.de/jquery-plugins/ - useful jQuery plugins. http://bassistance.de/jquery-plugins/ 16 Useful jQuery links