Selecting Page Elements

Course- Javascript >

jQuery lets you select elements in your HTML by enclosing them in the jQuery wrapper $("").

You can also use single quotes in the wrapper function, $('').

Here are some examples of sets of page elements wrapped with the $ operator:

$("span"); // all HTML span elements
$("#elem"); // the HTML element having id "elem"
$(".classname"); // HTML elements having class "classname"
$("div#elem"); //
elements with ID "elem" $("ul li a.menu"); // anchors with class "menu" that are nested in list items $("p > span"); // spans that are direct children of paragraphs $("input[type=password]"); // inputs that have specified type $("p:first"); // the first paragraph on the page $("p:even"); // all even numbered paragraphs

So much for DOM and CSS selectors. But jQuery also has its own custom selectors, such as the following:

$(":header"); // header elements (h1 to h6)
$(":button"); // any button elements (inputs or buttons)
$(":radio"); // radio buttons
$(":checkbox"); // checkboxes
$(":checked"); // selected checkboxes or radio buttons                    
                    

The jQuery statements shown in the preceding examples each return an object containing an array of the DOM elements specified by the expression inside the wrapper function. Note that in none of the preceding lines of code have you specified an action; you are simply getting the required elements from the DOM. In the sections that follow you learn how to work with these selected elements.