CSC 3084: Web Development and Programming

CSC 3084:Web Development and Programming Chapter 7: Get Off to a Fast Start with jQuery

Chapter Overview • By the end of this chapter, you should be able to: • Use jQuery to develop common DOM scripting applications like the Email List, FAQs, Image Swap, and Image Rollover applications that are presented in this chapter. • Describe the jQuery selectors, methods, and event methods. • Describe the use of these methods: val, next, prev, text, attr, css, addClass, removeClass, toggleClass, hide, show, and each. • Describe object chaining. • Describe the use of these jQuery event methods: ready, click, toggle, mouseover, and hover. • Describe the use of the this keyword within an event handler.

www.jquery.com

What is jQuery? • jQuery is a JavaScript library that provides functionality for man common web features • Along with HTML and CSS, jQuery is a very important tool for website development • The two jQuery libraries: • jQuery (the core library) • jQuery UI (User Interface) • What jQuery offers: • Dozens of functions that make it easier to add JavaScript features to your web pages • Methods that are tested for cross-browser compatibility

Using jQuery • Three files you need for jQuery applications • the jQuery JavaScript file • the jQuery UI JavaScript file • the jQuery UI stylesheet • Two ways to include the jQuery files • Include the files from a Content Delivery Network (CDN) like Google, Microsoft, or jQuery itself. • Download and deploy the files on your web server. Then, include them from the server. • A CDN provides a distributed system of servers that host commonly-used files

Including the jQuery Files from a CDN  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/ 1.8.16/themes/base/jquery.ui.all.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/ 1.6.2/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/ 1.8.16/jquery-ui.js"> </script>

Including the jQuery Files Locally  <link rel="stylesheet" href="jquery.ui.all.css">  <script src="jquery-1.6.2.min.js"></script> <script src="jquery-ui.js"></script>

jQuery’s Two Downloadable Versions • One version (min) is a compressed version that is relatively small and loads fast off your web server • The other version is uncompressed so that you can read it to study the JavaScript code

Pure JavaScript vs. jQuery • See JS Textbook Files\book_apps\ch07\faqs\index.html • Compare the following two files: • JS Textbook Files\book_apps\ch06\faqs_2\faqs.js • JS Textbook Files\book_apps\ch07\faqs\faqs.js • The HTML for the corresponding web pages are virtually identical except for the code in the head of each document that links to the JavaScript code

What is jQuery UI? • jQuery UI is built on jQuery and provides a set of user interface interactions, effects, widgets and other visual effects • The nice thing here is that a lot of these effects can be achieved by writing very little code • CSS can be used to change the appearance of the visual elements • Sample applications: • An accordion, which consists of two or more panels that the user can open by clicking on the heading for a panel • A sortable list of values • Text boxes with an auto-completion feature

www.jqueryui.com

Example: Accordion • See JS Textbook Files\book_apps\ch07\accordion\index.html

Script & HTML for the Accordion <script> $(function() { $("#accordion").accordion(); }); </script> <div id="accordion"> <h3><a href="#">Book description</a></h3> <div>  </div> <h3><a href="#">About the author</a></h3> <div>  </div> <h3><a href="#">Who this book is for</a></h3> <div>  </div> </div>

How to Code an Accordion • Code a div element with “accordion” as its id. • For the title of each panel, code an <a> element within an h3 element. In each <a> element, the href attribute should contain a # symbol, and the content should be the title of the panel. • For the contents of each panel, code a div element that contains whatever HTML elements the content requires.

How to Code jQuery Selectors • The $ symbol is used to refer to the jQuery library • One use of $ is to select elements in a web page • A type selector that selects all h1 elements $("h1") • An id selector that selects the element with “cars” as its id $("#cars") • A class selector that selects all elements in the “fadein” class $(".fadein")

How to Select Elements by Relationship • Descendants: All <p> elements that are descendants of the section element$("#faqs p"); • Adjacent siblings: All div elements that are adjacent siblings of h2 elements$("h2 + div") • General siblings: All <p> elements that are siblings of ulelements$("ul ~ p") • Children: All ul elements that are children of div elements$("div > ul")

How to Code Multiple Selectors $("#faqs li, div p") $("p + ul, div ~ p")

Calling a jQuery Methods • Basic syntax:$("selector").methodName(parameters) • Some common jQuery methods: val()Get the value of a text box or other control. val(value)Set the value of a text box or other control. text()Get the text of an element. text(value)Set the text of an element. next([type])Get the next sibling of an element or the next sibling of a specified type if the param. is coded. submit()Submit the selected form. focus()Move the focus to the selected form control or link.

Examples that call jQuery Methods • How to get the value from a text box:vargallons = $("#gallons").val(); • How to set the value for an input element:$("#gallons").val(""); • How to set the text in an element:$("#email_address_error").text( "Email address is required");

Examples that call jQuery Methods (cont.) • How to set the text for the next sibling with object chaining:$("#last_name").next() .text("Last name is required"); • How to submit a form:$("#join_list").submit(); • How to move the focus to a form control or link:$("#email_address").focus();

jQuery-based Event Handling • The syntax for a jQuery event method:$(selector).eventMethodName(function() { // the statements of the event handler}); • Two common jQuery event methods: • ready(handler)The event handler runs when the DOM is ready. • click(handler) The event handler runs when the selected element is clicked.

How to Code an Event Handler for the ready Event • The long way: $(document).ready(function() { alert("The DOM is ready"); }); • The short way: $(function(){ // (document).ready is assumed alert("The DOM is ready"); });

Event-handling Examples • An event handler for the click event of all h2 elements: $("h2").click(function() { alert("This heading has been clicked"); }); • The click event handler within the ready event handler: $(document).ready(function() { $("h2").click(function() { alert("This heading has been clicked"); }); // end of click event handler }); // end of ready event handler

Event-handling Example • See JS Textbook Files\book_apps\ch07\email_list\index.html

Some of the Most Useful jQuery Selectors (p. 213 for more) Selector [attribute] [attribute=value] :eq(n) :even :first :first-child :gt(n) :has(selector) :header :last :not(selector) :text Selects All elements with the named attribute All elements with the named attribute and value The element at index n within the selected set. All elements with an even index in the selected set The first element within the set All elements that are the first children of their parents All elements within the selected set with index > n All elements that are selected by the selector All elements that are headers The last element within the selected set All elements that aren’t selected by the selector All input elements with the type attribute set to “text”

Examples that Use jQuery Selectors • Select the li elements that are the first child of their parent element:$("li:first-child") • Select the even tr elements of a table:$("table > tr:even") // numbering starts at 0 • Select the third descendant <p> element of an element:$("#faqs p:eq(2)") // numbering starts at 0 • Select all input elements with “text” as the type attribute:$(":text")

Some Useful jQuery methods next([selector]) prev([selector]) attr(attributeName) attr(attributeName, value) css(propertyName) css(propertyName, value) addClass(className) removeClass([className]) toggleClass(className) hide([duration]) show([duration]) each(function) Get the next sibling or first sibling of given type Get the previous sibling Get the value of the specified attribute Set the value of the specified attribute Get the value of the specified property Set the value of the specified property Add one or more classes to an element Remove one or more classes If the class is present, remove it. Else, add it. Hide the selected element (duration in ms) Show the selected element Run the function for each element in an array

Examples that Use jQuery Methods • Get the value of the src attribute of an image:$("#image").attr("src"); • Set the value of the src attribute of an image to the value of a variable:$("#image").attr("src", imageSource); • Set the value of the color property of the h2 elements:$("h2").css("color", "blue"); • Add a class to the h2 descendants of the “faqs” element:$("#faqs h2").addClass("minus");

Examples that Use jQuery Methods (cont.) • Run a function for each <a> element within an “image_list” element:$("#image_list a").each(function() { // the statements of the function});

Some Useful jQuery Event Methods ready(handler) unload(handler) click(handler) toggle(handlerEven, handlerOdd) dblclick(handler) mouseenter(handler) mouseover(handler) mouseout(handler) hover(handlerIn, handlerOut) Runs when the DOM is ready Runs when the user closes the browser Runs when the selected element is clicked Runs handlerEven on an even click of an element, and handlerOdd on odd clicks (deprecated in jQuery ver. 1.9) Runs when the element is double-clicked Runs when mouse ptr enters the element Runs when mouse moves over element Runs when mouse moves out of element Runs handlerIn when mouse ptr moves into element, and handlerOut when mouse ptr moves out

Examples that use jQuery Event Methods • A handler for the double-click event of all text boxes that clears the clicked box: $(":text").dblclick(function () { $(this).val(""); } • A handler for the hover event of each img element within a list: $("#image_listimg").hover( function() { alert(“Mouse ptr moved into imgelement"); }, function() { alert(“Mouse ptr moved out of imgelement); } ); // end hover

Other Important Event Methods • bind(event, handler) Attach an event handler to an event. • unbind(event, Remove an event handler from an handler) event. • one(event, handler) Attach an event handler and remove it after it runs one time. • trigger(event) Trigger the event for the selected element.

Examples of these Methods • How to store an event handler in a variable:varclearClick = function () { // the statements for the event handler } • How to attach an event handler to an event: With the bind method:$("#clear").bind(click, clearClick);With the shortcut method:$("#clear").click(clearClick);

Examples of these Methods • How to attach an event handler to two different events: $("#clear").click(clearClick); $(":text").dblclick(clearClick); • How to remove an event handler from an event: $("#clear").unbind("click", clearClick); • How to attach and remove an event handler so it runs only once: $("#clear").one("click", confirmClick);

Examples of these Methods • How to trigger an event: With the trigger method:$("#clear").trigger("click");With the shortcut method:$("#clear").click(); • How to use the shortcut method to trigger an event from an event handler: $(":text").dblclick(function () { $("#clear").click(); // triggers the click event // of the clear button }

The Applications in jQuery • See JS Textbook Files\book_apps\ch07\faqs\index.html • Note how it is simpler than the non-jQuery version • See JS Textbook Files\book_apps\ch07\image_swap • See JS Textbook Files\book_apps\ch07\image_rollover

CSC 3084: Web Development and Programming