2.4 - DOM and jQuery¶

The HTML and CSS code that is downloaded to a client’s computer is plain text. The client’s browser creates a visual web page from the text description. The web page can be dynamically modified by JavaScript code and the visual representation is updated automatically. As with all computer science tasks, a good data structure can make a task easy, whereas a poor data structure can make a task very difficult. Text is a convenient way for humans to specify a web page, but text is a very poor data structure for web page manipulation.

Thus the Document Object Model (DOM) was developed. The DOM is a standard convention for creating a hierarchy of objects that describe a web page. This provides an easy way to manipulate the elements of a web page. However, the DOM has been implemented by various vendors in inconsistent ways. This has happened because vendors have continually tried to “push the boundaries” of web page design and because the HTML and CSS specifications have left room for interpretation. Web page designers found themselves continually writing code that looked something like this:

if (the_browser == Chrome) {
  element.property = 5;
} else if (the_broswer == FireFox) {
  element.prop = 5;
} else if (the_broswer == IE) {
  element.props = 5;
} else if (the_browser == Opera) {
  ...

Which brings us to jQuery. jQuery is a 3rd party JavaScript library that provides an easy way to find elements on a web page and modify them in a consistent way. jQuery takes care of all the inconsistencies between browsers! A jQuery equivalent to the above code might look like:

$(element_id).attr("property", 5)

JavaScript Essentials¶

Before we introduce jQuery, we need to review some aspects of the JavaScript language.

Functions in JavaScript are objects. In fact, everything in JavaScript is an object! An object has properties. This is all very strange when compared to other programming languages, but it is just the way JavaScript is designed. Let’s look at a simple example.

// Define a function called "example" that adds 2 numbers together
function example(a,b) {
  return (a+b);
}

// Add a property to the example object. The property is a reference to a function.
example.subtract = function (c,d) { return (c-d); };

var s = example(5,6);
var t = example.subtract(9,4);
console.log(s, t);

You can copy and paste the above code into a JavaScript console and it works as expected.

One more time! Functions are objects? Objects have properties. A property can hold an object that is a function? There is no limit to this nesting of functionality.

Since functions are objects, they can be assigned to variables like any other value. This allows for function aliasing, which gives a different name to a function using a simple assignment statement. Remember that an identifier in JavaScript must start with a letter (A-Z,a-z), an underscore (_), or a dollar sign ($), with subsequent characters being letters, digits, underscores, or dollar signs. Therefore, the following code aliases the example function defined above with a shorter name and then calls the function using the alias.

// Alias the function example with a shorter name
var _ = example;

// Call the function to add to numbers together
var result;
result = _(4,5);

Please re-read this section if you are confused.

jQuery Syntax¶

The jQuery library only defines a single function! Amazingly enough, that function is called jQuery. But jQuery is aliased to the simpler name $, which is almost always used.

The jQuery function takes one parameter, a selector, that is used to find elements in the DOM. The function always returns a jQuery object that contains an array of matching DOM elements. The jQuery object also has predefined properties that allow any attribute of a DOM element to be retrieved or modified.

Let’s discuss the selector first. The selector is typically a string that describes some characteristic of the DOM elements you want to access. The first character of the string determines the specific characteristic. Here is a subset of the possible selectors:

#id	`$('#alpha')`	find all of the elements that have an id of ‘alpha’


.class	`$('.beta')`	find all of the elements that use a CSS class named ‘beta’


elementType	`$('div')`	find all of the ‘div’ elements

Here is a complete list of selectors. The $() function always returns a jQuery object which defines properties and functions that can manipulate the DOM elements that were returned. Here is a few examples of of those functions.

.text()	`$('#alpha').text()`	returns the text (stripped of any HTML) of all elements that have an id of ‘alpha’



.text(‘abc’)	`$('#alpha').text('abc')`	sets the text of all elements that have an id of ‘alpha’


.html()	`$('#alpha').html()`	returns the text including any HTML tags of the 1st element that has an id of ‘alpha’



.html(‘abc’)	`$('#alpha').html('abc')`	sets the text including any HTML tags of all elements that have an have an id of ‘alpha’



.width()	`$('#alpha').width()`	returns the width of the 1st element that has an id of ‘alpha’


.width(‘50%’)	`$('#alpha').width('50%')`	sets the width of all elements that have an id of ‘alpha’

Notice that the presence or absence of a parameter determines whether the function is getting or setting the related attributes of the elements. Here is a complete list manipulation functions.

Because all queries and manipulation functions return a jQuery object, the function calls can be chained. For example, this next example sets the width, height, and color of all div elements on a web page:

$('div').width('50%').height('30px').css('color','red');

One last note about jQuery. There is a set of utility functions that do not fit the above scheme. They are defined as properties of the $() function so they are called like this: $.inArray() or $.trim(). Each function returns a different type of return value, so these functions can’t be chained.

jQuery Cheatsheets¶

Hopefully you get the big idea of how jQuery works. This cheat sheet (source) might be helpful to you.

Glossary¶

jQuery: A 3rd party JavaScript library that manipulates a web page DOM while taking care of inconsistencies between browsers.
selector: A string that is used to select one or more elements of a DOM.
$(): The jQuery function used to manipulate the DOM.

Next Section - 2.5 - Canvas and GL Context