jQuery Selectors

jQuery selectors are one of the powerful tools to manipulate HTML elements on a web page. It allows you to select and manipulate HTML element(s). It targets a particular HTML element and change it's behavior. jQuery selectors must be matched with the existing HTML ids, class names, and type values. All selectors in the jQuery start with the dollar sign and parentheses: $().

What are jQuery Selectors?

A jQuery selector is a string which decides which HTML elements to target and manipulate it's data.

Selectors in jquery

1. Element name (e.g. 'p', 'a', 'div' etc.)
2. Element id
3. Element CSS class
4. Element attributes
5. Element visibility
6. Element order
7. Form Fields
8. Element parents or children
9. Combinations of the above

The following example illustrates the jQuery Selector

This example selects the HTML div element with the id #show, meaning the div element which has an id attribute with the value p.

jQuery Universal Selector

Be sure when to use the jQuery universal selector. If you misuse this universal selector it will change all the elements on the web page.

You can select all <h3> elements on a page like this:

When you click on click me button, all <h3> elements will be hidden:

The above example produces the following output

jQuery id Selector

HTML id should be unique within a page. Use the id selector when you want to find only a single or unique element.

Let's say if there are 4 p elements on the webpage but you want to select or target only a specific HTML element you can simply target that element by giving a unique name as its id name

In the above example code, we have a paragraph with an id called myid. Using the below jquery id selecto r, we can simply target that myid element and apply the required styles we need.

When you click on button, the element with id=myid will be hidden:

jQuery class Selector

Remember a class name what you initially give to your HTML elements.

The jQuery class selector can be called using the . (DOT) operator followed by the class name

In the above HTML code each div element has a different class name as class-one, class-two, class-three. So what we can do is, we can simply target those three classes and apply the styles like below

If you run the above jQuery class example code, it will apply the green color to the class-one HTML div element, blue color to the class-two div element and finally, red color to the class-three span element

jQuery this selector

jQuery $(this) selector enables you to select the current HTML element.

jQuery Multiple Selector

In the above HTML code, we have four different HTML elements they arediv, two paragraph p elements and one span element

By using the jQuery multiple selector we can target all the four different HTML elements and apply the styles in a single declaration as follows

The above jquery multiple selector will target div, p, span elements and apply css styles as css( "border", "3px solid blue" )
Output

Try It Now


Other Advanced jQuery selectors you might want to learn
jQuery Complete Selectors Reference
jQuery Basic Selectors
jQuery Child Selectors
jQuery Content Filter Selectors

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM