jQuery Selectors

The most basic concept of jQuery is "select some elements and process them".

jQuery selectors allow you to "find" (or select) HTML elements on a webpage.

jQuery supports mostCSS3Selector, as well as some non-standard selectors.

All selectors in jQuery start with a dollar sign and parentheses: $().

Element selector

jQuery element selectors can be used to select elements based on element names.

You can select all<p>elements as shown below:

$("p")

The following jQuery code will select and highlight all<p>Element:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("p").css("background-color", "yellow");
　　});
});

#id selector

jQuery #idSelector uses the HTML tag'sid attributeto find a specific element.

The ID of an element should be unique in the page, so ID selectors are used to select a unique element.

To find elements with a specific ID, write a hash (#) character followed by the HTML element's ID:

$("#demo")

The following jQuery code will select and highlight the element with id="demo" when the user clicks the button:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("#demo").css("background-color", "yellow");
　　});
});

.class selector

jQuery .classSelector finds elements with a specific class name.

To find elements with a specific class, write a period (.) character followed by the class name:

$(".demo")

The following jQuery code will select and highlight all elements with class="demo" when the user clicks the button:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$(".demo").css("background-color", "yellow");
　　});
});

Multiple selectors

You can select multiple selectors as needed. Just separate the selectors with commas.

Multiple selector selects the combination results of all specified selectors:

$("selector"1, "selector"2, "selectorN")

The following jQuery code will select each<h2>,<div>and<span>Element:

$("document").ready(function() {
　　$("h2, "div", "span").css("background-color", "lightgreen");
});

This is very useful when you want to perform the same operation on different selectors.

Example of jQuery selectors

jQuery provides various methods to select specific HTML elements.

jQuery Selectors Reference

For a complete selector reference, please visit ourjQuery Selectors Reference.