Lecture 23 - University of Massachusetts Amherst · PDF fileLecture 23 JQuery UNIVERSITY OF...

1

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 23

JQuery


Announcements

HW#8 posted, due 12/3HW#9 posted, due 12/10HW#10 will be a survey due 12/14Yariv will give Thursday lecture onprivacy, securityYes, it will be on the exam!

2


Project

Project#2Most graded

GradesOK, OK-, good, very good, excellent


Final Project GradingReport including P1⇒P2⇒P3 evolution 25 pts;HTML/CSS 45 pts; JavaScript 30 ptsHTML/CSS

Working websiteHome page + 5 total linked pages (inc. homepage)with link back to homepage, navigation, images, textConsistent layout, color, etc., browser compatibility,various subjective considerations

JavaScriptSimple popup(s), buttons, clock, welcome, day ofweek, etc. [5-15 max]Text box input, slide show [10-20 max]More complex JavaScript, jQuery[15-30 max]

Accessibility = 5-10 points EXTRA credit

3


jQuery is a JavaScript LibraryWhat is a library?

jQuery is a library of JavaScript Functions.a lightweight "write less, do more" library.greatly simplifies JavaScript programmingeasy to learn

jQuery


Adding jQuery LibraryThe jQuery library is stored a single JavaScriptfile, containing all the jQuery functions.It can be added to a web page with thefollowing mark-up:<head><script type="text/javascript" src="jquery.js"></script></head>

Please note that the <script> tag should beinside the page's <head> sectionTwo versions of jQuery are available fordownloading from jQuery.com.

4


Downloading jQueryAlternatives to DownloadingIf you don't want to store the jQuerylibrary, you can use the hosted jQuerylibrary from Google or Microsoft

Google<head><script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>

Microsoft<head><script type="text/javascript"src="http://ajax.microso*.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>


jQuery featuresHTML element selectionsHTML element manipulationCSS manipulationHTML event functionsJavaScript Effects and animationsHTML DOM traversal and modificationAJAXUtilities

5


jQuery Syntax

The jQuery syntax is tailor made forselecting HTML elements and performsome action on the element(s).Basic syntax is: $(selector).action()A dollar sign to define jQueryA (selector) to "query (or find)" HTMLelementsA jQuery action() to be performed on theelement(s)


Adding and Removing an HTML Class

Important: Most of the following jQuery examples willneed to be placed inside the ready event so that theyare executed when the document is ready to be workedon

A common task is adding (or removing) a class <head> <style type="text/css"> a.test { font-weight: bold; color: red;} </style><script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting! This is a simple JQuery Example"); $("a").addClass("test"); }); }); </script> </head>

6


Launching Code on Document Ready

The first thing that most Javascript programmers end up doingis adding some code to their program, similar to this:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ alert("Welcome!"); } </script> </head> <body> <a href="http://www-edlab.cs.umass.edu/cs120/">CS120 Home Page</a> </body></html>

Javascript code isn't run untilall images are finished downloading (this includes banner ads).but window.onload expects the HTML 'document' isn't finishedloading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statementthat checks the document and waits until it's ready to bemanipulated, known as the ready event


.ready()JavaScript provides the load event forexecuting code when a page isrendered, but this event does not gettriggered until all elements arecompletely loaded, but you want toexecute as soon as the DOM hierarchyhas been fully constructed.The handler passed to .ready() isguaranteed to be executed after theDOM is ready, so this is usually the bestplace to attach all other event handlersand run other jQuery code.

7


The Document Ready FunctionA document.ready() function is used toprevent any jQuery code from runningbefore the document is finished loading(is ready).$(document).ready(function(){ // jQuery functions go here...});

examples of actions that can fail iffunctions are run before the documentis fully loaded:Trying to hide an element that doesn't existTrying to get the size of an image that is notloaded


Example<html> <head> <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting! This is a simple JQuery Example"); }); }); </script> </head> <body> <a href="http://www-edlab.cs.umass.edu/cs120/">CS120 Home Page</a> </body></html>

But may not want to link to homepage

Example 1

Example 2

8

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010From http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

More: changing font color

Look at this exampleExample using textAnother Example using text


More examples

Look at this exampleLet’s modify the list

$(document).ready(function() { $("#orderedlist").addClass("red"); });

.red { background-color: red; }from CSS file

<ol id="orderedlist"><li>First element</li><li>Second element</li><li>Third element</li>

</ol><ol id="orderedlist2">

<li>First element, second list</li><li>Second element, second list</li>

…

from HTML file

starterkitexample

9


More examples

Look at another exampleLet’s modify the list

$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); });

.green { color: green; font-size:120%; }

from CSS file



<li>First element, second list</li><li>Second element, second list</li>

…

from HTML file


Basic jQuery ExampleThe following example demonstrates the jQuery hide()function, hiding all <p> elements in an HTML document.

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>

10


More jQuery examples

Examples:$(this).hide() - hides current element$("p").hide() - hides all paragraphs$("p.test").hide() - hides all paragraphswith class="test"$("#test").hide() - hides the elementwith id="test"


hide/show

A hide/show example: $(document).ready(function(){ $("a").toggle(function(){$(".stuff").hide('slow'); },function(){$(".stuff").show('fast'); }); });

<a id="first" href="#">Hide me</a><div class="stuff">



<li>First element, second list</li><li>Second element, second list</li><li>Third element, second list</li><li>Li with child ul

<ul><li>Child One</li><li>child two</li>

</ul></li>

</ol>

11


Hiding - Sliding- Fading

jQuery fadeOut()Example

Hide explanationsExample

AnotherExample

Slide panelExample


showing and hiding using def list$(document).ready(function() {$('#faq').find('dd').hide().end().find('dt').click(function() {$(this).next().slideToggle(); }); });

<h3>Bird FAQ - click the questions to show the answers</h3>

<dl id="faq">

<dt>What shouldn't I do to the bird?</dt>

<dd>

Never use oils or lotions which contain oils on your bird. They gunk up thefeathers,and ruin their insulating properties. This means a chilled bird. Never wait outa cat bite--thoserequire immediate veterinary attention--a bird can die within twodays because a cat's mouth is sofilthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,and in some cases, may upset the delicatebacterial balance in the bird's body, or even worsen thesituation. Never try to treat afracture at home.

</dd>

Example

12


animation

jQuery animate()ExampleExample


jQuery references/tutorials

http://jquery.com/http://www.w3schools.com/jquery/default.aspjQuery Beginner Tutorial in 18minutesHow jQuery WorksGetting Started with jQueryjQuery For DesignersLive Examples of jQuery

Lecture 23 - University of Massachusetts Amherst · PDF fileLecture 23 JQuery UNIVERSITY OF...

Documents

Transcript of Lecture 23 - University of Massachusetts Amherst · PDF fileLecture 23 JQuery UNIVERSITY OF...