With jQuery selectors, you can select specific elements by the element name, a class name, an id name, by their specific attributes and a host of other ways. Once you have selected these elements, you can then manipulate them with jQuery methods. What you use for the selector itself is very much like how you select elements for styling with CSS, h1, img, #quoteBox, .subjectHeading, etc.

Selectors follow the $ and the open parentheses and are put into quotation marks. $("selector "). The element's tag name, id, class, etc., can also placed inside of quotation marks within the parentheses. You can use single or double quotes, but they must match. The selector is then followed by a jQuery method for manipulation.

If the selector is an id, jQuery will only find the first instance of an element with that id. With class names, jQuery will normally find all of the matched elements with that class name.

$("p") // this selector finds ALL the <p> tags in the document
$("#bigBox")  // this selector finds the element with id="bigBox"
$(".insetBox")  // this selector finds all elements with class="insetBox"
#("*") // this is the 'all' selector, it will select everything

jQuery pseudo-selectors have a colon: followed by an additional filter for targeting specific elements of a certain type.

$("tr:odd") // this pseudo-selector searches for every other row in a table
$(:button) // this seaches for all elements with type="button"
$(:focus) // this searches for the form field that has been just clicked inside

Three dot cartouche

List of jQuery selectors

SYNTAXNAMESELECTS THE FOLLOWINGanchor-sym
$("*") all selector all elements red-arrow-right
$("h1") element selector all of the HTML elements matching what is in quotes red-arrow-right
$(this) this selector  the current HTML element (note - do not put this in quotes) red-arrow-right
$("#example") id selector  any element with id="example"  red-arrow-right
$(".example") class selector all elements with class="example" red-arrow-right
$("[alt]") attribute selector all elements with an alt=" " attribute red-arrow-right
$("img [title='Focus Shot']") attribute selector all <img> tags with a title attribute of title="Focus Shot" red-arrow-right
$("a[target!='_new']") attribute selector  all <a> tags where the target is NOT target="_new"  red-arrow-right
$("header > p") child selector DIRECT child elements of the parent specified red-arrow-right

List of jQuery pseudo-selectors

SYNTAXNAMESELECTS THE FOLLOWINGanchor-sym
$("h2:first-of-type") first-of-type selector elements that have no other element with both the same parent and the same element name coming before it  
$(":first") first selector the first matched element, but only the first, no more  
$("td:first-child") first-child selector all elements of the selector shown that are the first child of their parent  
$("tr:odd") :odd selector  every other row in a table, 1, 3, 5...  
$("tr:even") :even selector  every other row in a table, 0, 2, 4...  
$("input:focus") :focus selector the form field in which the visitor has clicked inside  
$("input:text") type selector all <input> tags of type="text"  red-arrow-right
$("p:not(.intro") :not() selector  elements that are NOT the selector inside the parentheses  red-arrow-right

These tables are only a partial list of all the available jQuery selectors. For a complete list visit: http://api.jquery.com/category/selectors

Three dot cartouche

The jQuery all selector

The jQuery all selector, shown with a star sign *, will search for ALL of the elements in the document, or all of the elements inside the first selector.

$("*")  // this will search for all HTML elements in the document
$("div#titleBox *")  // this will search for all HTML elements inside of <div id="titleBox">

Three dot cartouche

jQuery element selectors

jQuery element selectors search out ALL of the elements on the page of that designation. The terms used are the same as CSS selectors. You can also filter out elements by their class or id by adding this to the selector.

$("p")
$("div")
$("h2")
$("img")
$("footer")
$("a.phoneNum")
$("div#titleBox")

Three dot cartouche

The jQuery id selector

jQuery id selectors allow you to search for the element in the document with that specific id. To do this you use the pound sign #, followed by the id name, just like CSS.

You do not need to add the element's name, unless there is more than one type of HTML element with that id.

$("#sidePanel") // this will search for the element with id="sidePanel"

Three dot cartouche

The jQuery $(this) selector

jQuery this selector is something that you use inside the function and allows you to reselect the initial item that the function was selecting. It is shorthand, so you don't have to retype the initial selector. It also has some other secific uses in coding.

$("this")

// Example

$("#firstHeading").click(function(){
    $(this).css("color","#003377");  // $(this) will reselect #firstHeading for manipulation
});

Three dot cartouche

The jQuery class selector

jQuery class selectors allow you to seach for ALL elements with that specific class. To do this you use a period . followed by the class name, just like CSS.

You do not need to specify the element's name unless there are different types of elements with that class and you need to be more specific with your manipulation.

$(".entryText")  // this will search for ALL elements with class="entryText"

Three dot cartouche

The jQuery attribute selector

jQuery attribute selectors allow you to seach for ALL elements with that specific attribute. To do this, place the attribute name inside of square brackets [...]. You can search for any thing with an attribute, or you can be specific and search for an attribute with a specific value. When doing this watch your nested quote marks, nest single quotes inside of the double quotes as shown in the example "...'..'...".You can aslo use this to find all elements with an attribute that is NOT equal to some term with the not equal != comparison operator.

You do not need to specify the element's tag name unless there are different types of elements with that attribute and you need to be more specific with your manipulation.

$("[href]")  // this will search for ALL elements with an href="/..." attribute
$("[title='Focus Photo']") // this will search for ALL elements with a title="Focus Photo" attribute

Three dot cartouche

The jQuery type selector

jQuery type selectors allow you to seach for ALL elements of a specific type. To do this place a colon : infront of the type name. Typical items with a type are things like <input type="button"> or <source src="/..." type="video/mp4">

You do not need to specify the element's tag name unless there are different types of elements with that type and you need to be more specific with your manipulation.

$(":button")  // this will search for ALL elements with type="button"

Three dot cartouche

The jQuery child selector

jQuery child selectors allow you to seach for elements that are a child of a specific parent element. For example, you might want to target <li> tags that are in an ordered list <ol> but not those that are in an unordered list <ul>. You also mignt waht to target <td> tags of a table with a specific class.

$("ol > li")  // this will search for all <li> elements that are a child of a <ol> element
$("table.wideTable" > td")  // this will search for <td> tags that are inside <table class="wideTable">

Three dot cartouche

The jQuery not selector

jQuery not selectors allow you to seach for elements that DO NOT match the given selector. For example, you want to grey back all the <p> tags except for the content in the focus box.

$("p:not(p.focusBox)")  // this will search for all <p> tags except <p class="focusBox">