JQuery_ Novice to Ninja - Earle Castledine [10]
Dissecting a jQuery Statement
We know that jQuery commands begin with a call to the jQuery function, or its alias. Let’s now take out our scalpels and examine the remaining component parts of a jQuery statement. Figure 1.3 shows both variants of the same jQuery statement (using the full function name or the $ alias).
Figure 1.3. A typical jQuery statement
Each command is made up of four parts: the jQuery function (or its alias), selectors, actions, and parameters. We already know about the jQuery function, so let’s look at each of the other elements in turn. First, we use a selector to select one or more elements on the web page. Next, we choose an action to be applied to each element we’ve selected. We’ll see more and more actions as we implement effects throughout the book. And finally, we specify some parameters to tell jQuery how exactly we want to apply the chosen action. Whenever you see jQuery code, try to break it up into these component parts. It will make it a lot easier to comprehend when you’re just starting out.
In our example above, we’ve asked the selector to select all the paragraph tags (the HTML
tags) on the page. Next, we’ve chosen jQuery’s css action, which is used to modify a CSS property of the paragraph elements that were initially selected. Finally, we’ve passed in some parameters to set the CSS color property to the value blue. The end result? All our paragraphs are now blue! We’ll delve deeper into selectors and the css action in Chapter 2.
Our example passed two parameters (color and blue) to the css action, but the number of parameters passed to an action can vary. Some require zero parameters, some accept multiple sets of parameters (for changing a whole bunch of properties at once), and some require that we specify another JavaScript function for running code when an event (like an element being clicked) happens. But all commands follow this basic anatomy.
Bits of HTML—aka “The DOM”
jQuery has been designed to integrate seamlessly with HTML and CSS. If you’re well-versed in CSS selectors and know, for example, that div#heading would refer to a div element with an id of heading, you might want to skip this section. Otherwise, a short crash course in CSS selectors and the Document Object Model (DOM) is in order.
The DOM doesn’t pertain specifically to jQuery; it’s a standard way of representing objects in HTML that all browser makers agreed to follow. A good working knowledge of the DOM will ensure a smooth transition to jQuery ninja-hood.
The DOM is what you call bits of rendered HTML when you’re talking to the cool kids around the water cooler. It’s a hierarchal representation of your HTML markup—where each element (such as a div or a p) has a parent (its “container”), and can also have one or more nested child elements. Each element can have an id and/or it can have one or more class attributes—which generally you assign in your HTML source file. When the browser reads an HTML page and constructs the DOM, it displays it as a web page comprising objects that can either sit there looking pretty (as a static page) or, more interestingly, be manipulated by our code.
A sample DOM fragment is illustrated in Figure 1.4. As you can see, body has two child elements: an h1 and a p. These two elements, by virtue of being contained in the same parent element, are referred to as siblings.
Figure 1.4. An example of a DOM fragment
An element’s id uniquely identifies the element on the page:
The div has been assigned an id of footer. It uses an id because it’s unique: there should be one, and only one, on the page. The DOM also lets us assign the same name to multiple page elements via the class attribute. This is usually done on elements that share a characteristic: