Web Programming Step by Step, 2nd Edition

Lecture TBD: jQuery

Reading: none

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 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")

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");
	}
}));