Before diving deeply into how the selector works, let’s look at how the web page is structured, see some basic syntax examples, and explore the SQL analogy.
Fundamentally, it comes back to CSS selectors identifying page elements. Sizzle.js is the engine that powers the jQuery library, and it extends the number of selectors available to provide more granular access to elements on the page. jQuery extends this further by traversing the tree that represents the web page, and visiting and acting upon a set of specified elements.
The Web Page Is Hierarchical Data
jQuery is a Document Object Model (DOM) manipulation library. What is a DOM? It’s an object model that describes the logical structure of HTML (and XML) documents, and how they’re accessed and manipulated.
The web page shown in Figure 1 and the underlying HTML in Listing 1 can be represented as a tree. This web page will be used for coding examples throughout Part 1.
Figure 1. The sample page (also supplied as sample.html)
Listing 1. Sample web page – sample.html
<HTML>
<HEAD><TITLE>My home page</TITLE></HEAD>
<BODY>
<H1 id="demo1">jQuery Demos</H1>
<P>Let me tell you about my favorite science communicators:
<UL id="communicators">
<LI> Carl Sagan
<LI> Neil deGrasse Tyson
<LI> Eugenie Scott
</UL>
</BODY>
</HTML>
Note The actual source contains a little bit more code that does not affect the tree representation, but has been omitted for clarity.
The web page in Figure 1 can be mapped into a tree, as shown in Figure 2, though you might visualize it sideways, as shown in the indented code. The HTML element is the hierarchical parent of all the nodes. The list elements become siblings, all children to UL, grandchildren to BODY, and so on.
Figure 2. jQuery traverses this tree to apply functions
jQuery syntax is represented as $(selector).action(), and the elements selector component can be used to identify parts of this tree. Attributes such as ID and CLASS can be used to filter specific nodes on the document tree. The selectors used within the $ function are exactly why jQuery can be likened to SQL, with further detail on that in the “SQL Analogy” section later in the article.
HTML, CSS & jQuery Syntax Examples
Once upon a time the main function of CSS was to provide a presentation overlay for a HTML page. Consider a need to turn all H1 level HTML headings on the sample page to a red font.
<h1>jQuery Demos</h1>CSS would use a selector to locate the page elements and then apply the relevant markup during the page render, which reduces the repetition required to format an entire web site.
CSS is typically located either within a .css file included in the HTML page or as an inline style. The following CSS uses the h1 element as the selector pattern to find any h1 tags on a web page and then sets the color attribute as red:
h1 {
color : red;
}You can apply these attributes on demand with a click of a button. Everything in jQuery is done via the $() factory function, extended to $(selector).action();.
The next statement is a simple example where jQuery identifies all h1 tags on the page and then applies the CSS to turn all the text in those tags red:
$(’h1’).css(’color’,’red’);The selector can become more elaborate and the actions can become robust and extensible. Actions such as .fadeIn() introduce a page element with the fade effect. Attributes such as ID and CLASS can be used to identify more specific elements of your document. The trick to learning how they work is comparing selectors to SQL.
SQL Analogy
The best science communicators are those that find brilliant analogies that a layman can understand. As database technologists, we are lucky that SQL provides us the perfect analogy for how jQuery modifies elements within a web page.
Visualizing a web page, as shown in Figure 2, is the first step to understanding how this translates to SQL. Now compare that hierarchy with the rows in Table 1.
Table 1. Records within the EMP Table
ID | NAME | SALARY |
100 | SCOTT | 5000 |
102 | KYLIE | 4000 |
102 | EDDIE | 3500 |
103 | PENNY | 8000 |
To update SCOTT and improve his salary, the SQL statement identifies which row to update and then changes the value of the column. For example, if you want to update a record in the database, you would run a SQL statement like the following:
UPDATE employees
SET salary = salary * 1.5
WHERE name = ’SCOTT’;This statement locates the employee named SCOTT and adds 50% to the salary. Table 2 shows a representation of the employees table and example data.
Table 2. Records within the EMP Table
ID | NAME | SALARY |
100 | SCOTT | 5000 |
102 | KYLIE | 4000 |
102 | EDDIE | 3500 |
103 | PENNY | 8000 |
Compare the SQL statement with the following jQuery statement that locates a h1 tag with the ID ‘demo1’ and update the displayed text:
$(’body h1#demo1’).text(’Hello Universe’);
compares to the use of unique key indexes in SQL. This means there can be good, inefficient, and potentially erroneous. The description of what the two statements do is similar. The following pseudo-SQL demonstrates how the jQuery statement can be represented as a SQL statement. Even the use of an ID element usage of selectors:
UPDATE html_page
SET text = ’Hello Universe’
WHERE id = ’demo1’
AND tag = ’h1’;Even the string literal is case sensitive, as it would be in the database.
Parallels between the two languages are summarized in Figure 3. The comparison is not exact as jQuery offers a number of facilities for traversing nodes of the tree that don’t translate to SQL, but it shows the syntax isn’t as foreign as it may first appear.
Figure 3. The SQL analogy
