12/04/12 JQuery I took these slides from the site because they were pretty good looking. Instructions for editing school and department titles: Select from menu: View > Master > Slide Master Click on each text area you wish to edit. Text will become editable. 1

jQuery CS 380: Web Programming

What is jQuery? jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. (jQuery.com)

Why learn jQuery? Write less, do more: Performance Plugins $("p.neat").addClass("ohmy").show("slow"); Performance Plugins It’s standard … and fun! That little snippet loops through all <p> elements with the class "neat" and then adds the class "ohmy" to it, whilst slowly showing the paragraph in an animated effect. No browser checks, no loop code, no complex animation functions, just one line of code!

window.onload We cannot use the DOM before the page has been constructed. jQuery gives us a more compatibile way to do this. The DOM way The direct jQuery translation The jQuery way window.onload = function() { // do stuff with the DOM } $(document).ready(function() { // do stuff with the DOM }); $(function() { // do stuff with the DOM });

Aspects of the DOM and jQuery Identification: how do I obtain a reference to the node that I want. Traversal: how do I move around the DOM tree. Node Manipulation: how do I get or set aspects of a DOM node. Tree Manipulation: how do I change the structure of the page.

12/04/12 JQuery - A huge collection of predefined javascript objects and methods that are free to use and link to. - Go to http://jquery.com/ - JQuery also provides a mobile library and a CSS library with predefined styles for fancy buttons, links, headings and fancy mobile interfaces (like the one here http://corythoma.com/index3.html :) ). 19 Oct 2009

Accessing JQuery - Two ways to access it: 12/04/12 Accessing JQuery - Two ways to access it: -Download it and reference: <script src="jquery.js"></script> (in the same directory) -Reference the online page: <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> (Do this for class today)

12/04/12 How Does it Work? -Much of Jquery relies on the structure of the HTML to operate: -We can reference the type of code. <p>some text</p> <div> some other code</div> <button>make a button </button> By: <script> $(“div”).doSomeJquery(); </script>

How Does it Work? 2.0 -Or we can get specific: 12/04/12 How Does it Work? 2.0 -Or we can get specific: -We can reference the type of code. <p id = “p1”>some text</p> <div id= “Frank”> some other code</div> <button id = “Mildred”>make a button </button> By: <script> $(id).doSomeJquery(); $(“Frank”).stuff(); </script>

Remember, it is just Javascript. 12/04/12 Remember, it is just Javascript. -It is nothing fancy, it is just a bunch of methods, objects, and variables (look at the document). We can use It just like we would any javascript: <script src = jquery.js></script> <script type = “text/javascript”> var array = new Array(); var counter=0; function onClick(id){ array[counter]=id; counter+=1; $(id).hide();//<is jquery } </script>

What can JQuery do for you? 12/04/12 What can JQuery do for you? -Make something easy that was otherwise hard. EX: Show and hide some html. Compare: demo3.html to demo4.html -We can see how it makes life easier. .toggle() goes from .hide() and .show(), which is much easier than some css and complex statements in javascript.

Your Turn! - I made a simple Q&A web page yourTurn.html. 12/04/12 Your Turn! - I made a simple Q&A web page yourTurn.html. -Your task is to make it so when the question is clicked, the answer toggles between hidden and not hidden. Hint: No buttons or hyperlinks should be needed, and the .toggle is sufficient to accomplish this!!!

12/04/12 What else can we do? We can make stuff animate: Slide stuff from top, bottom, left, and right. As an example, look at the accordion menu given in menu.html.

12/04/12 Ever Wonder? -How to dynamically change some CSS with the click of a button? -.addClass(arg). Changes all classes to arg.

12/04/12 Lame Animations -Some people like the accordion menu, but are not sure how to do it. Jquery makes it easy with .slideDown() and .slideUp() and .is(“ :visable”). Try to take what you did for the first part and instead of show/hide, make it slide up and down.

Not so lame animations. -We are going to do this: In javascript!!! 12/04/12 Not so lame animations. -We are going to do this: In javascript!!!

12/04/12 Your Turn. Make some text, picture, table, or element do what animation.html does. Use the API and Documentation to get the additional information you may need to complete this!

Real World Examples: -weather.com -corythoma.com/index3.html 12/04/12 Real World Examples: -weather.com -corythoma.com/index3.html -jquery.com -espn.com Bottom line: Jquery is useful to know!