2.4 - DOM and jQuery¶

JavaScript Essentials¶

Before we introduce jQuery, Let’s 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); };

let s = example(5,6);
let 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
let _ = example;

// Call the function to add to numbers together
let 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, which 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:

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.

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 of 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. Here is a complete list of utility functions.

jQuery Resources¶

This jQuery cheat sheet (source) might be helpful to you.

Glossary¶

DOM (Document Object Model)

a hierarchy of objects that describe a web page.

jQuery

A 3rd party JavaScript library that manipulates the DOM of a web page 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.

Self-Assessments¶