jQuery Selectors
jQuery selectors allow you to operate on groups of HTML elements or individual elements.
jQuery Selectors
jQuery selectors allow you to operate on groups of HTML elements or individual elements.
jQuery selectors "find" (or select) HTML elements based on element id, class, type, attributes, attribute values, etc. It is based on already existingCSS selectors, in addition, it also has some custom selectors.
All selectors in jQuery start with the dollar sign: $().
Element Selector
The jQuery element selector selects elements based on the element name.
Select all <p> elements on the page:
Example
After the user clicks the button, all <p> elements are hidden:
Example
Try it Yourself »
#id Selector
The jQuery #id selector selects a specified element via the id attribute of an HTML element.
The id of an element on a page should be unique, so to select a unique element on the page you need to use the #id selector.
The syntax for selecting elements by id is as follows:
Example
After the user clicks the button, the element with the id="test" attribute will be hidden:
Example
Try it Yourself »
.class Selector
The jQuery class selector can find elements by a specified class.
The syntax is as follows:
Example
After the user clicks the button, all elements with the class="test" attribute are hidden:
Example
Try it Yourself »
More Examples
| Syntax | Description | Example |
|---|---|---|
| $("*") | Select all elements | Online Example |
| $(this) | Select the current HTML element | Online Example |
| $("p.intro") | Select <p> elements with class intro | Online Example |
| $("p:first") | Select the first <p> element | Online Example |
| $("ul li:first") | Select the first <li> element of the first <ul> element | Online Example |
| $("ul li:first-child") | Select the first <li> element of each <ul> element | Online Example |
| $("[href]") | Select elements with an href attribute | Online Example |
| $("a[target='_blank']") | Select all <a> elements with target attribute value equal to "_blank" | Online Example |
| $("a[target!='_blank']") | Select all <a> elements with target attribute value not equal to "_blank" | Online Example |
| $(":button") | Select all <input> elements and <button> elements with type="button" | Online Example |
| $("tr:even") | Select <tr> elements at even positions | Online Example |
| $("tr:odd") | Select <tr> elements at odd positions | Online Example |
Using jQuery Functions in a Separate File
If your website contains many pages, and you want your jQuery functions to be easy to maintain, then place your jQuery functions in a separate .js file.
When we demonstrate jQuery in the tutorial, we add functions directly to the <head> section. However, it is better to put them in a separate file, like this (reference the file via the src attribute):