Definition from Wikipedia

 The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js ( ) ◦ Explanation Explanation ◦ Example Example

 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?

 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?

 About jQueryAbout jQuery  How jQuery Works: The Basics ◦  Tutorials ◦ beginners-examples/ beginners-examples/ ◦ ◦  Next jQuery Tutorial ◦

 Height() ◦ ◦ Resizable ◦  Slide Show? ◦ image-gallery-with-jquery/ image-gallery-with-jquery/

 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

 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.

  The jQuery syntax is made for selecting HTML elements and performing some action on the element(s) at  Basic syntax is: $(selector).action()  jQuery jquery Property at  See examples at

 1. Download ◦ ◦ Compressed or uncompressed ◦ Include in ◦ Or use one CDN (Content Delivery Node)  2. Include code 10

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

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

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

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

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

 – jQuery homepage  – jQuery tutorial blog    – jQuery documentation  – jQuery user interface  - useful jQuery plugins Useful jQuery links