jQuery 1.3 : Selectors - The Document Object Model, CSS selectors

8/24/2012 3:25:14 AM
The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM). We will explore a few of these selectors, as well as jQuery's own custom selectors. We'll also look at jQuery's DOM traversal methods that provide even greater flexibility for getting what we want.

The Document Object Model

One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The Document Object Model is a family-tree structure of sorts. HTML, like other markup languages, uses this model to describe the relationships of things on a page. When we refer to these relationships, we use the same terminology that we use when referring to family relationships — parents, children, and so on. A simple example can help us understand how the family tree metaphor applies to a document:&;

<title>the title</title>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>

Here, <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>. The <head> and <body> elements are not only descendants, but children of <html>, as well. Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parent. The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other. 

An important point to note before we begin is that the resulting set of elements from selectors and methods is always wrapped in a jQuery object. These jQuery objects are very easy to work with when we want to actually do something with the things that we find on a page. We can easily bind events to these objects and add slick effects to them, as well as chain multiple modifications or effects together. Nevertheless, jQuery objects are different from regular DOM elements or node lists, and as such do not necessarily provide the same methods and properties for some tasks.

The $() factory function

No matter which type of selector we want to use in jQuery, we always start with the dollar sign and parentheses: $(). Just about anything that can be used in a stylesheet can also be wrapped in quotation marks and placed inside the parentheses, allowing us to apply jQuery methods to the matched set of elements.

Making jQuery Play Well with Other JavaScript Libraries

In jQuery, the dollar sign $ is simply an "alias" for jQuery. Conflicts could arise if more than one of these libraries were being used in a given page because a $() function is very common in JavaScript libraries. We can avoid such conflicts by replacing every instance of $ with jQuery in our custom jQuery code. 

Three building blocks of these selectors are tag name, ID, and class. They can be used either on their own or in combination with other selectors. Here is an example of what each of these three selectors looks like on its own:

Selector CSS jQuery Description
Tag name p $('p') Selects all paragraphs in the document
ID #some-id $('#some-id') Selects the single element in the document that has an ID of some-id
Class .some-class $('.some-class') Selects all elements in the document that have a class of some-class

When we attach methods to the $() factory function, the elements wrapped in the jQuery object are looped through automatically and implicitly. Therefore, we can usually avoid explicit iteration, such as a for loop, that is so often required in DOM scripting.

Now that we have covered the basics, we're ready to start exploring some more powerful uses of selectors.&;

CSS selectors

The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, as outlined on the World Wide Web Consortium's site: This support allows developers to enhance their websites without worrying about which browsers (particularly Internet Explorer 6) might not understand advanced selectors, as long as the browsers have JavaScript enabled.&;

Responsible jQuery developers should always apply the concepts of progressive enhancement and graceful degradation to their code, ensuring that a page will render as accurately, even if not as beautifully, with JavaScript disabled as it does with JavaScript turned on.

To begin learning how jQuery works with CSS selectors, we'll use a structure that appears on many websites, often for navigation — the nested, unordered list.

<ul id="selected-plays">
<li><a href="/asyoulikeit/">As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Romeo and Juliet</li>
<li>Henry IV (<a href="">email</a>)
<li>Part I</li>
<li>Part II</li>
<li><a href="">
Henry V</a></li>
<li>Richard II</li>


Notice that the first <ul> has an ID of selected-plays, but none of the <li> tags have a class associated with them. Without any styles applied, the list looks like this:

The nested list appears as we would expect it to — a set of bulleted items arranged vertically and indented according to their level.

Styling list-item levels

L&;ets suppose that we want the top-level items, and only the top-level items, to be arranged horizontally. We can start by defining a horizontal class in the stylesheet:

.horizontal {
float: left;
list-style: none;
margin: 10px;

The horizontal class floats the element to the left of the one following it, removes the bullet from it if it's a list item, and adds a 10 pixel margin on all sides of it.

Rather than attaching the horizontal class directly in our HTML, we'll add it dynamically to the top-level list items only — Comedies, Tragedies, and Histories — to demonstrate jQuery's use of selectors:

$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');

We begin the jQuery code with the $(document).ready() wrapper, that runs as soon as the DOM has loaded.

The second line uses the child combinator (>) to add the horizontal class to all top-level items only. In effect, the selector inside the $() function is saying, find each list item (li) that is a child (>) of the element with an ID of selected-plays (#selected-plays).

With the class now applied, our nested list looks like this:

Styling all of the other items — those that are not in the top level — can be done in a number of ways. Since we have already applied the horizontal class to the top-level items, one way to select all sub-level items is to use a negation pseudo-class to identify all list items that do not have a class of horizontal. Note the addition of the third line of code:

$&;&;(document).ready(function() {
CSS selectorsnegation pseudo-class used$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');


This time we are selecting every list item (li) that:

  1. Is a descendant of the element with an ID of selected-plays (#selected-plays)

  2. Does not have a class of horizontal (:not(.horizontal))

When we add the sub-level class to these items, they receive the shaded background defined in the stylesheet. Now the nested list looks like this:

Most View
Looking Good, Sounding Great (Part 1) : Q Acoustics Q7000i 5.1, Bowers & Wilkins MT-50, Canton Movie 1050
Booting on HP 9000 Servers (part 2) - The setboot Command, Boot Console Handler (BCH) and Processor Dependent Code (PDC)
Sony Xperia ZL Review - A Powerhouse Phone In An Amazingly Compact Chassis (Part 3)
Long Awaited Canon Super Telephoto Emerges From The Wild
Sling Media Slingbox Pro-HD
Ouya Gaming Machine Review - Founding Backer Version (Part 1)
Seasonic And Enhance Junior PSUs - Compact Power Supply (Part 5) : Enhance ENP-7025E
SQL Server 2008 : Common performance problems (part 1) - Procedure cache bloating
ECS Z77H2-A2X v1.0 - Golden LGA 1155 Mainboard From The Black Series (Part 6)
Booting on HP 9000 Servers (part 4) - HPUX Secondary System Loader (hpux)
Top 10
SQL Server 2012 : Consolidating Data Capture with SQLdiag - Getting Friendly with SQLdiag (part 2) - Using SQLdiag as a Service
SQL Server 2012 : Consolidating Data Capture with SQLdiag - Getting Friendly with SQLdiag (part 1) - Using SQLdiag as a Command-line Application
SQL Server 2012 : Consolidating Data Capture with SQLdiag - The Data Collection Dilemma, An Approach to Data Collection
SQL Server 2012 : Troubleshooting Methodology and Practices - Data Analysis, Validating and Implementing Resolution
SQL Server 2012 : Troubleshooting Methodology and Practices - Data Collection
SQL Server 2012 : Troubleshooting Methodology and Practices - Defining the Problem
SQL Server 2012 : Troubleshooting Methodology and Practices - Approaching Problems
Windows 8 : Accessing System Image Backup and Recovery Functionality with Windows Backup, Cloud Backup
Windows 8 : Using the Windows 8 Recovery Tools (part 2) - Push Button Reset
Windows 8 : Using the Windows 8 Recovery Tools (part 1) - Creating a System Recovery Disc, Booting to the Windows Recovery Environment