Web Programming Step by Step, 2nd Edition

Lecture TBD: DOM, jQuery

Reading: Chapter 9

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.

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

Modifying DOM nodes

DOM nodes have fields that correspond to the attributes in HTML tags. There are a few exceptions

Getting/setting CSS classes

function highlightField() {
	// turn text yellow and make it bigger
	var elem = document.getElementById("id");
	if (!elem.className) {
		elem.className = "highlight";
	} else if (elem.className.indexOf("invalid") < 0) {
		elem.className += " highlight";
	}
}

• JS DOM's className property corresponds to HTML class attribute
• somewhat clunky when dealing with multiple space-separated classes as one big string
• className is just a string, not an array like we would want

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

Adjusting styles with the DOM

<button id="clickme">Color Me</button>

window.onload = function() {
	document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
	var clickMe = document.getElementById("clickme");
	clickMe.style.color = "red";
}

• contains same properties as in CSS, but with camelCasedNames
  • examples: backgroundColor, borderLeftWidth, fontFamily

Common DOM styling errors

• many students forget to write .style when setting styles

  var clickMe = document.getElementById("clickme");
  clickMe.color = "red";
  clickMe.style.color = "red";
  

• style properties are capitalized likeThis, not like-this

  clickMe.style.font-size = "14pt";
  clickMe.style.fontSize = "14pt";
  

• style properties must be set as strings, often with units at the end

  clickMe.style.width = 200;
  clickMe.style.width = "200px";
  clickMe.style.padding = "0.5em";
  

  • write exactly the value you would have written in the CSS, but in quotes

Problems with reading/changing styles

<button id="clickme">Click Me</button>

window.onload = function() {
	document.getElementById("#clickme").onclick = biggerFont;
};
function biggerFont() {
	var size = parseInt(document.getElementById("#clickme").style.fontSize);
	size += 4;
	document.getElementById("#clickMe").style.fontSize = size + "pt";
}

• style property lets you set any CSS style for an element
• problem: you cannot (usually) read existing styles with it

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

Unobtrusive styling

function okayClick() {
	this.style.color = "red";
	this.className = "highlighted";
}

.highlighted { color: red; }

• well-written JavaScript code should contain as little CSS as possible
• use JS to set CSS classes/IDs on elements
• define the styles of those classes/IDs in your CSS file

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