Selecting Elements in jQuery

In my first post on jQuery, I discuss how to include the jQuery library in your HTML page and how to have JavaScript executed after the document has loaded. In this next post, I’m going to talk about referencing Document Object Model (DOM) elements using selectors. As much of using JavaScript in an HTML page involves manipulating the DOM, this is an important concept to get down.To manipulate any DOM element using jQuery, you have to first identify it, which is where the selector comes in. In standard JavaScript, you’d likely use the getElementById(), getElementByClassName(), getElementByTag(), and getElementByTagName() functions, applied to the document object, to reference page elements. In jQuery, you’d use the jQuery() function, which is aliased as $().This syntax looks quite odd and daunting at first, but it’s extremely simple. If you have a DOM element with an ID value of something, then $(‘#something’) is jQuery’s way of pinpointing it. This unusual $() syntax is just shorthand for the jQuery() function (a dollar sign being much shorter to type). If you read the previous post, then you’ve already seen this construct:

$(document).ready(function() {
    // Do whatever.
});

The $(document) part refers to the HTML document (note that there are no quotes in this document reference), so that code selects the document, on which the ready() method is called.

Selectors in jQuery work like selectors in CSS. You can identify a specific element using its ID value, as in the above example. You can also identify every element with a given class: $(‘.someClass’) refers to any element type that has a class value of someClass. Or you can identify every element of a given type: $(‘div’) refers to all DIV elements and $(‘ul li’) refers to all list elements found within unordered lists (so it wouldn’t select list elements in ordered lists). You can even combine these: to reference all the table rows with a class of heading, use $(‘tr.heading’).

Selectors are very important and powerful. I found the syntax to be cryptic and confusing at first, but once I realized how simple it was, jQuery really opened up for me. The examples I provided are relatively obvious, but jQuery has its own unique selectors. For example, you could refer to every other row in an HTML table using tr:nth-child(even) (you might do this to alternate the row background colors). Or you can find elements based upon their parent elements, like every image that’s a child object of DIV: div > img (that would not find images placed outside of DIVs or nested within subelements of a DIV).

Once you’ve selected an element or list of elements using $(), you can apply methods to them to change their behavior. Object-oriented programming languages (like JavaScript) use a objectName.methodName syntax to call a function on an object (the function must “belong” to that object type, though). In jQuery, it’s the same thing. For example, to apply a new CSS class to all paragraphs, you would write $(‘p’).addClass(‘someClass’). Or say you want to make a specific object disappear: $(‘#someID’).hide(). If you need to change an element’s HTML, like the text found between paragraph tags, call the html() method, passing it the new value: $(‘#update’).html(‘New text.’).

Again, as with some object-oriented languages, you can chain multiple methods, so that the result from one method is then applied to another: objectName.methodName1.methodName2.methodName3. (How well and to what level this is supported differs from one OOP language to the next, but this is the kind of thing that Ruby does very well and is also supported in jQuery.) So, as an example, say you create a page of questions with the answers hidden in SPAN tags around the document. They all have the class answer and are all initially hidden. The user looks at each question, thinks about their answers, then clicks a button or whatever that reveals the right answers. To do this, you might want to both display all of these SPANs and add an extra class to highlight them (elements in HTML can have multiple classes). In JavaScript, this would require a lot of code but in jQuery, it’d just be $(‘span.answer’).addClass(‘highlight’).show().

Once you’ve grasped the jQuery syntax and know how to select the element(s) to which something should apply, then it’s just a matter of invoking the proper methods on the selected element(s). You can find the full documentation for all of the available effects/methods in the jQuery documentation, of course. That Web site also has quite a few well-written and useful tutorials that you ought to consider.

In my next post, I’ll discuss event handling, which is what you also need to know to apply this knowledge (because you almost always want to change something on the page only after something specific has happened).