Introduction to jQuery, Part 3

How JavaScript Interacts with a Web Page

When a web page loads in a web browser, the browser loads all elements into memory. Each element on a page exists in a containership hierarchy – that is, each element is contained within another element with the document itself at the top of this containership hierarchy. Containership is defined by tags that are opened and closed between the opening and closing tags of another element. For example, the simple page in the listing below is loaded into memory in an object graph similar to that shown in Figure 1.

<html>
  <head>
    <title>My Pagetitle>
    <script
       type="text/javascript“
       src="http://code.jquery.com/jquery-1.7.1.min.js ">
    script>
  head>
  <body>
    <div>
       <p>
          This a <a href="Page2.htm">linka>
       p>
    div>
    <div>
       Colors:
       <ul>
          <li>Redli>
          <li>Orangeli>
          <li>Yellowli>
       ul>
    div>
  body>
html>

Fig. 1

jQuery keyword

Because jQuery is JavaScript, it can be mixed with native JavaScript in your script files. The jQuery object is defined in the jQuery file and you can use it via the “jQuery” keyword. This keyword tells the parser that what follows is jQuery syntax. This keyword is so common that it can be shortened to the simpler “$”.

“$” is used to define selectors and to call methods defined in the jQuery scripts.

Selectors

Most of what you will do with jQuery involves selecting a set of objects and performing some action on those objects, such as

· Changing the properties of each object in the set

· Binding code to an event of the objects

· Calling a method on each object

You can return a set of objects with the following jQuery syntax:

$(selector)

where selector is a snippet identifying which objects to select. The syntax of a jQuery selector is similar to the syntax for a CSS selector. The most common selectors are for a tag, and ID, and a Class Name, as shown in the list below.

Selector	Select by…	Example
“#xxx”	ID	$(“#MyDiv”)
“.xxx”	Class Name	$(“.MyClass”)
“xxx”	Element Type	$(“a”)
Xxx	Variable Name	$(document)

A selector preceded by “#” will be interpreted as an ID selector. jQuery will search the page for any element that matches the ID that follows “#” in the selector.

A selector preceded by “.” will be interpreted as a Class selector. jQuery will search the page for any element assigned the name of the Class that follows “.” in the selector.

A selector with no preceding characters will be interpreted as a Tag selector. jQuery will search the page for any element with the tag name identified in the selector.

Advanced Selectors

Combining Selectors

It is possible to combine selectors to either narrow your selection or establish containership.

Two selectors separated by a space indicate that jQuery should select the second selector only if it is found within the first selector. For example, $(“div a”) selects every anchor tag that is contained within a div tag.

Two selectors concatenated without a space indicate that jQuery should select only objects that match both selection criteria. For example, $(“div.BodyText”) selects any div tag that contains the attribute class=”BodyText”.

Set-based Selectors

By default, jQuery selectors always select a set of elements, even if that set may contain zero, one, or more than one element. However, we can refine a selection further by appending filters to a selection, such as “:first”, to select only the first element in the selected list of elements; “:last”, to select the last element in the selected list; “:even”, to select only the even-numbered elements; and “:odd”, to select only the odd-numbered elements. When even and odd selectors, it is important to note that the sets start with index number 1.

For example, $(“div:first”) selects the first div on the page, while $(“a:even”) selects every other anchor on the page, beginning with the second.

In this article, I described how to select objects on a web page with jQuery. In the next article, I will show things that we can do with those selections.