JQuery. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

Size: px

Start display at page:

Download "JQuery. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010"

Lesley Gregory
6 years ago
Views:

1 Lecture 23 JQuery Announcements HW#8 posted, due 12/3 HW#9 posted, due 12/10 HW#10 will be a survey due 12/14 Yariv will give Thursday lecture on privacy, security Yes, it will be on the exam! 1

2 Project Project#2 Most graded Grades OK, OK-, good, very good, excellent Final Project Grading Report including P1 P2 P3 evolution 25 pts; HTML/CSS 45 pts; JavaScript 30 pts HTML/CSS Working website Home page + 5 total linked pages (inc. homepage) with link back to homepage, navigation, images, text Consistent layout, color, etc., browser compatibility, various subjective considerations JavaScript Simple popup(s), buttons, clock, welcome, day of week, 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 2

3 jquery jquery is a JavaScript Library What is a library? jquery is a library of JavaScript Functions. a lightweight "write less, do more" library. greatly simplifies JavaScript programming easy to learn Adding jquery Library The jquery library is stored a single JavaScript file, containing all the jquery functions. It can be added to a web page with the following mark-up: <script type="text/javascript" src="jquery.js"></script> Please note that the <script> tag should be inside the page's section Two versions of jquery are available for downloading from jquery.com. 3

4 Downloading jquery Alternatives to Downloading If you don't want to store the jquery library, you can use the hosted jquery library from Google or Microsoft Google <script type="text/javascript" src=" ></script> Microsoft <script type="text/javascript" src=" min.js"></script> jquery features HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities 4

5 jquery Syntax The jquery syntax is tailor made for selecting HTML elements and perform some action on the element(s). Basic syntax is: $(selector).action() A dollar sign to define jquery A (selector) to "query (or find)" HTML elements A jquery action() to be performed on the element(s) Adding and Removing an HTML Class Important: Most of the following jquery examples will need to be placed inside the ready event so that they are executed when the document is ready to be worked on A common task is adding (or removing) a class <style type="text/css"> a.test { font-weight: bold; color: red;} </style> <script type="text/javascript" src=" </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> 5

6 Launching Code on Document Ready The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this: <html> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ alert("welcome!"); } </script> <body> <a href=" Home Page</a> </body> </html> Javascript code isn't run until all images are finished downloading (this includes banner ads). but window.onload expects the HTML 'document' isn't finished loading yet, when you first try to run your code. To circumvent both problems, jquery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event.ready() JavaScript provides the load event for executing code when a page is rendered, but this event does not get triggered until all elements are completely loaded, but you want to execute as soon as the DOM hierarchy has been fully constructed. The handler passed to.ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jquery code. 6

7 The Document Ready Function A document.ready() function is used to prevent any jquery code from running before the document is finished loading (is ready). $(document).ready(function(){ // jquery functions go here... examples of actions that can fail if functions are run before the document is fully loaded: Trying to hide an element that doesn't exist Trying to get the size of an image that is not loaded Example <html> <script type="text/javascript" src=" </script> <script type="text/javascript"> $(document).ready(function(){ Example 1 $("a").click(function(event){ alert("thanks for visiting! This is a simple JQuery Example"); </script> <body> <a href=" Home Page</a> </body> </html> But may not want to link to homepage Example 2 7

8 More: changing font color Look at this example Example using text Another Example using text From More examples starterkit example Look at this example Let s modify the list $(document).ready(function() { $("#orderedlist").addclass("red"); from HTML file from CSS file.red { background-color: red; } <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 8

9 More examples Look at another example Let s modify the list $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addclass("green"); },function(){ $(this).removeclass("green"); from HTML file from CSS file.green { color: green; font-size:120%; } <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 Basic jquery Example The following example demonstrates the jquery hide() function, hiding all <p> elements in an HTML document. <html> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); </script> <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> 9

10 More jquery examples Examples: $(this).hide() - hides current element $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#test").hide() - hides the element with 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"> <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> <li>third element, second list</li> <li>li with child ul <ul> <li>child One</li> <li>child two</li> </ul> </li> </ol> 10

11 Hiding - Sliding- Fading jquery fadeout() Example Hide explanations Example Another Example Slide panel Example showing and hiding using def list $(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { $(this).next().slidetoggle(); Example <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 the feathers,and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--thoserequire immediate veterinary attention--a bird can die within two days because a cat's mouth is sofilthy and full of bacteria. Don't bother with over-thecounter medication. It really doesn't work,and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen thesituation. Never try to treat a fracture at home. </dd> 11

12 animation jquery animate() Example Example jquery references/tutorials /default.asp jquery Beginner Tutorial in 18 minutes How jquery Works Getting Started with jquery jquery For Designers Live Examples of jquery 12

CS7026. Introduction to jquery

CS7026. Introduction to jquery CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based