Web Programming Step by Step, 2nd Edition

Lecture XX: jQuery

Reading: jquery.com

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Problems with JavaScript

JavaScript is a powerful language, but it has many flaws:

• the DOM can be clunky to use
• the same code doesn't always work the same way in every browser
  • code that works great in Chrome, Firefox, Safari, ... will fail in IE and vice versa
• many developers work around these problems with hacks (checking if browser is IE, etc.)

jQuery framework

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
 type="text/javascript"></script>

• the jQuery JavaScript library adds many useful features to JavaScript:
  • many useful extensions to the DOM
  • adds utility functions for built-in types String, Array, Object, Function
  • improves event-driven programming
  • many cross-browser compatibility fixes
  • makes Ajax programming easier (seen later)

jQuery Design Principles

jQuery is so powerful in part because of these design principles

• an expressive method for defining a set of elements, a superset of CSS selectors
• useful and commonly needed methods for navigating the DOM tree
• heavily overloaded APIs
• functional programmig techniques that apply operations to sets of elements at a time
• method chaining for succinct operations

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

  window.onload = function() {
  	// do stuff with the DOM
  }
  

• The direct jQuery translation

  $(document).ready(function() {
  	// do stuff with the DOM
  });
  

• The jQuery way

  $(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.

jQuery node identification

The $ aka jQuery function selects elements from the DOM using most any CSS selector.

• // id selector
  var elem = $("#myid");
  

• // group selector
  var elems = $("#myid, p");
  

• // context selector
  var elems = $("#myid < div p");
  

• // complex selector
  var elems = $("#myid < h1.special:not(.classy)");
  

jQuery Selectors

jQuery / DOM comparison

jQuery Terminology

the jQuery function

refers to the global jQuery object or the $ function depending on the context

a jQuery object

the object returned by the jQuery function that often represents a group of elements

selected elements

the DOM elements that you have selected for, most likely by some CSS selector passed to the jQuery function and possibly later filtered further

The jQuery object

• The $ function always (even for ID selectors) returns an array-like object called a jQuery object.
• The jQuery object wraps the originally selected DOM objects.
• You can access the actual DOM object by accessing the elements of the jQuery object.

// false
document.getElementById("id") == $("#myid");
document.querySelectorAll("p") == $("p");

// true
document.getElementById("id") == $("#myid")[0];
document.getElementById("id") == $("#myid").get(0);

document.querySelectorAll("p")[0] == $("p")[0];

Using $ as a wrapper

• $ adds extra functionality to DOM elements
• passing an existing DOM object to $ will give it the jQuery upgrade

// convert regular DOM objects to a jQuery object
var elem = document.getElementById("myelem");
elem = $(elem);

var elems = document.querySelectorAll(".special");
elems = $(elems);

DOM context identification

• You can use querySelectorAll() and querySelector() on any DOM object.
• When you do this, it simply searches from that part of the DOM tree downward.
• Programmatic equivalent of a CSS context selector

var list = document.getElementsByTagName("ul")[0];
var specials = list.querySelectorAll('li.special');

find / context parameter

jQuery gives two identical ways to do contextual element identification

var elem = $("#myid");

// These are identical
var specials = $("li.special", elem);
var specials = elem.find("li.special");

jQuery traversal methods

Looping over the DOM

• Using the DOM

var elems = document.querySelectorAll("li");
for (var i = 0; i < elems.length; i++) {
	var e = elems[i];
	// do stuff with e
}

• Using jQuery

  $("li").each(function(idx, e) {
  	// do stuff with e
  });
  

• You cannot use a regular javascript for each loop on either because they are not technically arrays, just array-like objects.

Inside the jQuery each loop

$("li").each(function(idx, e) {
	// do stuff with e
});

• return false to exit the loop early
• e is a plain old DOM object
  • We can upgrade it again using $ if we want:

    $("li").each(function(idx, e) {
    	e = $(e);
    	// do stuff with e
    });
    

• the this keyword refers to the same selected element as e, so this is better jQuery

  $("li").each(function() {
  	// do stuff with this
  });
  

Getting/setting CSS classes in jQuery

function highlightField() {
	// turn text yellow and make it bigger
	if (!$("#myid").hasClass("invalid")) {
		$("#myid").addClass("highlight");
	}
}

• addClass, removeClass, hasClass, toggleClass manipulate CSS classes
• similar to existing className DOM property, but don't have to manually split by spaces

Accessing styles in jQuery

function biggerFont() {
	// turn text yellow and make it bigger
	var size = parseInt($("#clickme").css("font-size"));
	$("#clickme").css("font-size", size + 4 + "pt");
}

• css function of the jQuery object allows reading pre-existing styles
• gives us the familiar font-size syntax instead of fontSize
• css(property) gets the property value,
  css(property, value) sets the property value

Common bug: incorrect usage of existing styles

// bad!
$("#main").css("top", $("#main").css("top") + 100 + "px");

• the above example computes e.g. "200px" + 100 + "px" ,
  which would evaluate to "200px100px"
• a corrected version:

  // correct
  $("#main").css("top", parseInt($("#main").css("top"))  + 100 + "px");
  

jQuery method behavior

• Getters typically operate only on the first of the jQuery object's selected elements.

  <ul>
  	<li style="font-size: 10px">10px font size</li>
  	<li style="font-size: 20px">20px font size</li>
  	<li style="font-size: 30px">30px font size</li>
  </ul>
  

  $("li").css("font-size");							// returns '10px'
  

• Setters typically operate on all of the selected DOM elements.

  $("li").css("font-size", "15px");			// sets all selected elements to '8px'
  

  <ul>
  	<li style="font-size: 15px">10px font size</li>
  	<li style="font-size: 15px">20px font size</li>
  	<li style="font-size: 15px">30px font size</li>
  </ul>
  

jQuery method parameters

Many jQuery object methods are overloaded

getter syntax:

$("#myid").css(propertyName);

setter syntax:

$("#myid").css(propertyName, value);

multi-setter syntax:

$("#myid").css({
	'propertyName1': value1,
	'propertyName2': value2,
	...
	});

modifier syntax:

$("#myid").css(propertyName, function(idx, oldValue) {
	return newValue;
});

What do you think the multi-modifier syntax is?

common jQuery mistake

// bad jQuery
$("#main").css("top", parseInt($("#main").css("top")) + 100 + "px");

• The above example does not take full advantage of jQuery syntax.
• Does not work if there are multiple selected objects. Why is that?
• a corrected version:

  $("#main").css("top", function(idx, old) {
  	return parseInt(old) + 100 + "px";
  });  // good jQuery
  

jQuery method returns

When there is no other return to make, jQuery methods return the same jQuery object back to you

jQuery chaining

$("#main").css("color", "red");
$("#main").attr("id", "themainarea");
$("#main").addClass("special");

The implictly returned jQuery object allows for chaining of method calls.

$("img")
	.css("color", "red")
	.addClass("special")
	.src = "foo.png";

Expression return value at each line:

// [<img />, ...]
// [<img style="color: red" />, ...]
// [<img class="special" style="color: red" />, ...]
// cannot chain further because this is an assignment :(

jQuery attr() function

• jQuery has a wrapper function for getting/setting various attributes of selected elements.
• Allows us to chain our method calls.

$("img")				// poor jQuery style
	.css("color", "red")
	.addClass("special")
	.src = "foo.png";

$("img")				// good jQuery style
	.css("color", "red")
	.addClass("special")
	.attr("src", "foo.png");
	// we could chain further right here

More node manipulation with jQuery

Suppose you already have a jQuery object, e.g. $("#myid")

DOM innerHTML hacking

Why not just code the previous example this way?

document.getElementById("myid").innerHTML += "<p>A paragraph!</p>";

document.getElementById("myid").innerHTML += "<p style='color: red; " +
		"margin-left: 50px;' " +
		"onclick='myOnClick();'>" +
		"A paragraph!</p>";

Creating new nodes

// create a new <h2> node
var newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";

• merely creating a element does not add it to the page
• you must add the new element as a child of an existing element on the page...

Modifying the DOM tree

Every DOM element object has these methods:

var p = document.createElement("p");
p.innerHTML = "A paragraph!";
document.getElementById("myid").appendChild(p);

Removing a node from the page

var bullets = document.getElementsByTagName("li");
for (var i = 0; i < bullets.length; i++) {
	if (bullets[i].innerHTML.indexOf("child") >= 0) {
		bullets[i].parentNode.removeChild(bullets[i]);
	}
}

• each DOM object has a removeChild method to remove the given child from the page
• gross!!!

jQuery manipulation methods

Create nodes in jQuery

The $ function to the rescue again

var newElement = $("<div>");
$("#myid").append(newElement);

jQuery programmers typically 1 line it

$("#myid").append($("<div>"));

The previous example becomes this with jQuery

var bullets = document.getElementsByTagName("li");
for (var i = 0; i < bullets.length; i++) {
	if (bullets[i].innerHTML.indexOf("children") >= 0) {
		bullets[i].parentNode.removeChild(bullets[i]);
	}
}

$("li:contains('child')").remove();

Creating complex nodes in jQuery

The terrible way, this is no better than innerHTML hacking

$("<p id='myid' class='special'>My paragraph is awesome!</p>")

The bad way, decent jQuery, but we can do better

$("<p>")
	.attr("id", "myid")
	.addClass("special")
	.text("My paragraph is awesome!");

The good way

$("<p>", {
	"id": "myid",
	"class": "special",
	"text": "My paragraph is awesome!"
});

jQuery $ function signatures

Responding to the page ready event

$(function);

Identifying elements

$("selector", [context]);

Upgrading DOM elements

$(elements);

Creating new elements

$("<html>", [properties]);

DOM example

Here is what it might look like if you tried to insert an image before each special span tag in a div using the DOM's API.

var spans = document.querySelectorAll("#ex1 span.special");
for (var i = 0; i < spans.length; i++) {
	var img = document.createElement("img");
	img.src = "images/laughing_man.jpg";
	img.alt = "laughing man";
	img.style.verticalAlign = "middle";
	img.style.border = "2px solid black";
	img.onclick = function() {
		alert("clicked");
	}
	spans[i].insertBefore(img, spans[i].firstChild);
}

Poor jQuery example

$("#ex2 span.special").each(function(i, elem) {
	var img = $("<img>")
		.attr("src", "images/laughing_man.jpg")
		.attr("alt", "laughing man")
		.css("vertical-align", "middle")
		.css("border", "2px solid black")
		.click(function() {
			alert("clicked");
		});
	$(elem).prepend(img);
});

Good jQuery example

$("#ex3 span.special").prepend($("<img>", {
	"src": "images/laughing_man.jpg",
	"alt": "laughing man",
	"css": {
		"vertical-align": "middle",
		"border": "2px solid black"
	},
	"click": function() {
		alert("clicked");
	}
}));

Recall: JavaScript events

• the click event (onclick) is just one of many events that can be handled
• problem: events are tricky and have incompatibilities across browsers
  • reasons: fuzzy W3C event specs; IE disobeying web standards; etc.
• solution: jQuery includes many event-related features and fixes

Attaching event handlers the jQuery way

element.onevent = function;
element.event(function);

// call the playNewGame function when the Play button is clicked
$("#play").click(playNewGame);

function playNewGame(evt) {
	// respond to the click event
}

• to use jQuery's event features, you must pass the handler using the jQuery object's event method
• handlers must be attached this way for jQuery's event features to work
• you can trigger the event manually by calling the same function with no parameters

  $("#play").click();
  

Attaching many event handlers

You often need to attach an event handler to a group of elements.

• With the DOM

  var btns = document.querySelectorAll("#game > button.control");
  for (var i = 0; i < gameButtons.length; i++) {
  	btns[i].observe("click", gameButtonClick);
  }
  
  function gameButtonClick(evt) { ... }
  

• With jQuery

  $("#game > button.control").click(gameButtonClick);
  
  function gameButtonClick(evt) { ... }
  

• Why is no loop required?

Custom DOM events

• Events can be attached to elements in a more generic way using the addEventListener DOM method.

  document.getElementById("myid").addEventListener("click", function);
  

• You can create your own event object and then trigger that event on an element.

  var evt = document.createEvent("click");
  evt.initEvent("click", true, true);
  document.getElementById("myid").dispatchEvent("click");
  

• You don't have to use "click", you can use whatever you want in your custom event. You could create a "boom" event, the meaning of which is for you to decide.

Custom jQuery events

• Generic jQuery event registration

  $("#myid").on("event", handler);
  

• Trigger an event on a jQuery object

  $("#myid").trigger("event");
  

  var evt = $.Event("event");
  // do stuff with evt to make it special
  $("#myid").trigger(evt);
  

The jQuery event object

function handler(event) {
	// an event handler function ...
}

• Event handlers can accept an optional parameter to represent the event that is occurring. Event objects have the following properties / methods:

Mouse event example

<pre id="target">Move the mouse over me!</pre>

window.onload = function() {
	$("#target").mouseover(showCoords);
};

function showCoords(event) {
	$("#target").html(
		  "page   : (" + event.pageX + ", " + event.pageY + ")\n"
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")"
	);
}

Move the mouse over me!

Fixing redundant code with this

<fieldset>
	<label><input type="radio" name="ducks" value="Huey"  /> Huey</label>
	<label><input type="radio" name="ducks" value="Dewey" /> Dewey</label>
	<label><input type="radio" name="ducks" value="Louie" /> Louie</label>
</fieldset>

$(":radio").click(processDucks);
function processDucks() {
	if ($("huey").checked) {
		alert("Huey is checked!");
	} else if ($("dewey").checked) {
		alert("Dewey is checked!");
	} else {
		alert("Louie is checked!");
	}
	alert(this.value + " is checked!");
}

• if the same function is assigned to multiple elements, each gets its own bound copy

Page/window events

• The above can be handled on the window object.

$(window).on('contextmenu', function);

Stopping an event's browser behavior

<form id="exampleform" action="http://foo.com/foo.php">...</form>

$(function() {
	$("#exampleform").submit(checkData);
});

function checkData(event) {
	if ($("#city").val() == "" || $("#state").val().length != 2) {
		alert("Error, invalid city/state.");  // show error message
		event.preventDefault();
	}
}

• to abort a form submit or another event's default browser behavior, call jQuery's preventDefault() method on the event

Which element gets the event

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello() {
	alert("You clicked on the " + $(this).attr("tag"));
}

What happens when I click on the span? Which element will get the event?

Answer: All of them!

Event bubbling

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

• Clicking the span is actually a click on every element in this page.
• Therefore it was decided that all of the handlers should be executed.
• The events bubble from the bottom of the DOM tree to the top.
• The opposite model (top to bottom) is called capturing and is not widely used.

Bubbling example

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello() {
	alert("You clicked on the " + this.nodeName);
}

Runnable example

Stopping an event from bubbling

Use the stopPropagation() method of the jQuery event to stop it form bubbling up.

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
</body>

$(function() {
	$("body, div, p, em").click(hello);
});

function hello(evt) {
	alert("You clicked on the " + this.nodeName);
	evt.stopPropagation();
}

Runnable example

Multiple handlers

<body>
	<div>
		<p>
			Events are <em>crazy</em>!
		</p>
	</div>
	<p>Another paragraph!</p>
</body>

$(function() {
	$("body, div, p, em").click(hello);
	$("div > p").click(anotherHandler);
});

function hello() {
	alert("You clicked on the " + this.nodeName);
}
function anotherHandler() {
	alert("You clicked on the inner P tag");
}

What happens when the first p tag is clicked? Runnable example

Stopping an event right now

function anotherHandler(evt) {
	alert("You clicked on the inner P tag");
	evt.stopImmediatePropagation();
}

• Use stopImmediatePropagation() to prevent any further handlers from being executed.
• Handlers of the same kind on the same element are otherwise executed in the order in which they were bound.

Runnable example

stopImmediatePropogation() example

$("div a").click(function() {
   // Do something
});

$("div a").click(function(evt) {
   // Do something else
   evt.stopImmediatePropagation();
});

$("div a").click(function() {
   // THIS NEVER FIRES
});

$("div").click(function() {
   // THIS NEVER FIRES
});

• Only the first two handlers will ever run when the anchor tag is clicked.

jQuery handler return value

• jQuery does something special if you return false in your event handler
  • prevents the default browser action, eg evt.preventDefault()
  • stops the event from bubbling, eg evt.stopPropagation()

<form id="exampleform">
	...
	<button>Done</button>
</form>

$(function() {
	$("#exampleform").submit(cleanUpData);
	$("button").click(checkData);
});

function checkData() {
	if ($("#city").val() == "" || $("#state").val().length != 2) {
		alert("Error, invalid city/state.");  // show error message
		return false;
	}
}

jQuery's ajax method

$.ajax({
	"url": "http://foo.com",
	"option" : "value",
	"option" : "value",
	...
	"option" : "value"
});

• call the $.ajax() method
• constructor accepts an object literal full of options that dictate the behavior of the Ajax request:
  1. the url to fetch, as a String,
  2. the type of the request, GET or POST
  3. etc...
• hides icky details of the raw XMLHttpRequest; works well in all browsers

$.ajax() options

jQuery Ajax example

$.ajax({
	"url": "foo/bar/mydata.txt",
	"type": "GET",
	"success": myAjaxSuccessFunction,
	"error": ajaxFailure
});
function myAjaxSuccessFunction(data) {
	// do something with the data
}
function ajaxFailure(xhr, status, exception) {
	console.log(xhr, status, exception);
}

• attach an event handler function to the request's success and error events

Ajax data parameter

The data passed to your success handler will be in whatever format you specified in the dataType option

• a dataType of text returns raw text no matter its apparent data type
• a dataType of html returns raw html text
• a dataType of xml returns an XML document object
• a dataType of json returns a JSON object

Handling Ajax errors

$.ajax(
	"url": "http://foo.com",
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});
...
function ajaxFailure(xhr, status, exception) {
	console.log(xhr, status, exception);
}

• for user's (and developer's) benefit, show an error message if a request fails

Better jQuery Ajax

Rather than specify all of the options in an object literal...

$.ajax({
	"url": "http://foo.com",
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

one can pass the URL as the first parameter and the rest as an object literal.

$.ajax("http://foo.com", {
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

Why? It makes it even easier to see what this Ajax request is doing.

Even Better jQuery Ajax

Rather than supply the handlers as fields in the options object...

$.ajax("http://foo.com", {
	"type": "GET",
	"success": functionName,
	"error": ajaxFailure
});

use these event handler function calls done() and fail() instead

$.ajax("http://foo.com", {
	"type": "GET"
})
	.done(functionName)
	.fail(ajaxFailure);

They do the same thing as the success and error options respectively except that they are method calls and let up break up the syntax a little.

Debugging Ajax code

• Chrome Dev Tool's Network tab shows each request, parameters, response, errors
• expand a request by clicking on it and look at Response tab to see Ajax result
• check the Console tab for any errors that are thrown by requests

Passing query parameters to a request

$.ajax("lookup_account.php", {
	"type": "get",
	"data": {
		"name": "Ed Smith",
		"age": 29,
		"password": "abcdef"
	},
})
	.done(function)
	.fail(ajaxFailure);

• don't concatenate the parameters onto the URL yourself with "?" + ...
  • won't properly URL-encode the parameters
  • won't work for POST requests
• query parameters are passed as a data object literal
  • (the above is equivalent to: "name=Ed+Smith&age=29&password=abcdef")

Creating a POST request

$.ajax("url", {
	"type": "POST",
	"data": {
		"name": value,
		"name": value,
		...,
		"name": value
	},
})
	.done(function)
	.fail(ajaxFailure);

• type should be changed to "POST" (GET is default)
• however this is not the best way to do it, you should use $.get() and $.post() instead

$.get() and $.post() shortcuts

• Often you don't need the flexibility of $.ajax() function
  • The options are hard to remember
  • You don't usually need all of the options
• These shortcut functions are preferred when additional options are not needed.

$.get(url, [data])
	.done(function)
	.fail(function);

$.post(url, [data])
	.done(function)
	.fail(function);

More about $.get() and $.post()

Why bother making the distinction if it all boils down to a call to $.ajax() under the hood

• it is less error prone
• it is easier to read
• let's you forget about some of the Ajax options

jQuery's $.ajaxSetup() function

Often your Ajax requests use very similar option values.

• "timeout": 1000
• "cache": Math.random()
• "error": ajaxFailure

$.ajaxSetup({
	"option": "value",
	"option": "value",
	...
});

• sets up a default value for a given option for all Ajax requests
• can be useful for attaching a common failure/exception handler to all requests in one place

Ajax user feedback

• Users don't like unresponsiveness
• Often you show some sort of loader image or text while the request is made

User feedback with always()

The general technique is to show() some feedback when the Ajax request starts and hide() it again once it finishes.

• the always() function is an event that the Ajax request fires everytime the request finishes, whether it was successful or not
• this might be some typical user feedback code

$.get("url")
	.done(function)
	.error(function)
	.always(function() {
		$("#loader").hide();
	});
$("#loader").show();

Global Ajax events

• User feedback and similar scenarios are so common that jQuery made global events for them
• Any element can register for these events just like a click() event method

User feedback example

$(function() {
	$("#loader")
		.hide()
		.ajaxStart(function() {
			$(this).show();
		}).ajaxStop(function() {
			$(this).hide();
		});

	$("#mybutton").click(function() {
		$.get("http://foo.com")
			.done(function)
			.error(ajaxFailure);
	});
});

Fetching XML using Ajax (template)

$.get("foo.xml")
	.done(functionName);

function functionName(xmlDom) {
	// do stuff with the xmlDom just like you would with the HTML dom
}

• your event handler is passed an XML DOM object as a parameter
• xmlDom is the XML equivalent of document in the HTML DOM, it is not the root tag

XML DOM and jQuery

You use the same jQuery functions to interact with the XML DOM, with one minor tweak:

• Identifying a node, be careful with your CSS selectors, a lot of them do not make sense and will not work when dealing with general XML

  $(xmlDom).find("tagName");
  // You can use complicated CSS selectors
  $(xmlDom).find("ingredient[quantity='5']");
  

• Traversing the XML DOM

  $(xmlDom).find("tagName")
  	.parent()
  	.children()
  	.each(function);
  

• Reading attributes and the text inside of an XML node

  $(xmlDom).find("directions")
  	.attr("time", "0")
  	.text("make the dish :P");
  

Ajax XML DOM example

<?xml version="1.0" encoding="UTF-8"?>
<employees>
	<lawyer money="99999.00" />
	<janitor name="Ed"> <vacuum model="Hoover" /> </janitor>
	<janitor name="Bill">no vacuum, too poor</janitor>
</employees>

// how much money does the lawyer make?
$(xmlDom).find("lawyer").attr("money");	// "99999.00"

// array of 2 janitors
var janitors = $(xmlDom).find("janitor");
janitors.find("vacuum").attr("model");		// "Hoover"
janitors.last().text();										// "no vacuum, too poor"

• How would we find out the first janitor's name?
• How would we find out how many janitors there are?
• How would we find out how many janitors have vs. don't have vacuums?

Larger XML file example

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
	<book category="cooking">
		<title lang="en">Everyday Italian</title>
		<author>Giada De Laurentiis</author>
		<year>2005</year><price>30.00</price>
	</book>
	<book category="computers">
		<title lang="en">XQuery Kick Start</title>
		<author>James McGovern</author>
		<year>2003</year><price>49.99</price>
	</book>
	<book category="children">
		<title lang="en">Harry Potter</title>
		<author>J K. Rowling</author>
		<year>2005</year><price>29.99</price>
	</book>
	<book category="computers">
		<title lang="en">Learning XML</title>
		<author>Erik T. Ray</author>
		<year>2003</year><price>39.95</price>
	</book>
</bookstore>

Navigating node tree example

// make a paragraph for each book about computers
$(xmlDom).find("book[category='computer']").each(function(idx, e) {
	// extract data from XML
	var title = $(e).find("title").text();
	var author = $(e).find("author").text();

	// make an HTML <p> tag containing data from XML
	$("<p>")
		.text(title + ", by " + author)
		.appendTo($(document.body));
});

Debugging response XML in Firebug

• can examine the entire XML document, its node/tree structure

JSON and AJAX (AJAJ?...)

$.get("foo.json")
	.done(functionName);

function functionName(jsonObj) {
	// do stuff with the jsonObj
}

• your event handler is passed a JSON object as a parameter

jQuery UI overview

jQuery UI : a JavaScript library, built on top of jQuery, that adds:

• visual effects (animation, fade in/out, highlighting)
• drag and drop
• useful widgets:
  • Auto-completing text fields (drop-down list of matching choices)
  • Sliders
  • Accordion and tabbed menus
• some low level utilities

Downloading and using jQuery UI

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
	type="text/javascript"></script>

<script
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"
	type="text/javascript"></script>

<!-- If you want the default ui widget stylings -->
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css"
	rel="stylesheet" type="text/css" />

• or download it, extract its .js files to your project folder
• documentation available on the jQuery UI API page
• the CSS is optional and only needed for widgets at the end

Visual effects

show() fadeIn() slideDown() slide effect (appearing)

hide() fadeOut() slideUp() blind effect
bounce effect clip effect drop effect explode effect
fold effect puff effect size effect (disappearing)

highlight effect scale effect pulsate effect shake effect (Getting attention)

Click effects above

Applying effects to an element

element.effect();            // for some effects

element.effect(effectName);   // for most effects

$("#sidebar").slideUp();

// No need to loop over selected elements, as usual
$("#results > button").effect("pulsate");

• the effect will begin to animate on screen (asynchronously) the moment you call it
• One method is used behind the scenes to do most of the work, animate()

Effect options

element.effect(effectName, {
	option: value,
	option: value,
	...
});

$("#myid").effect("explode", {
	"pieces": 25
});

• many effects can be customized by passing additional options (note the {})
• check out the documentation to see which options are available for a given effect
• Q: How would we show two effects in a row on the same element?

Effects chaining

• Effects can be chained like any other jQuery methods
• Effects are queued, meaning that they will wait until the previous effects finish

$('#demo_chaining')
	.effect('pulsate')
	.effect('highlight')
	.effect('explode');

Effect duration

• You can specify how long an effect takes with the duration option
• Almost all effects support this option
• Can be one of slow, normal, fast or any number in milliseconds

$('#myid').effect('puff', {}, duration)

Custom effects - animate()

$('#myid').animate(properties, [duration]);

• You can animate any numeric property you want
• You can also animate these
  • color
  • background-color

$('#myid')
	.animate({
		'font-size': '80px',
		'color': 'green'
	}, 1000);

This is a demo!!!