jQuery Selectors

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





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
Example

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.

Try It Now

jQuery Universal Selector

The jQuery universal selector is used to select all HTML elements on the webpage.

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.

Syntax
Example
HTML

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

jQuery

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

The above example produces the following output

jquery univeral selector
Try It Now

jQuery id Selector

jQuery id selector start with $ dollar sign and uses the id attribute of an HTML tag to find the specific element on the web page.

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

Syntax

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

Example HTML

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.

jQuery

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

Output
jquery id selector
Try It Now

jQuery class Selector

jQuery class selector is used to find all the elements which have the same class name.

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

Syntax
Example HTML

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

jQuery

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

Output
jquery class selector
Try It Now

jQuery this selector

jQuery this selector is used to select the current HTML element and apply the required styles or manipulate the data.

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

Syntax
Example Output
jQuery this selector
Try It Now

jQuery Multiple Selector

The jQuery multiple selector is used to target multiple HTML elements at a time and apply the required styles to HTML elements.

Syntax
Example HTML

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

jQuery

The above jquery multiple selector will target div, p, span elements and apply css styles as css( "border", "3px solid blue" )
Output
jquery multiple selector
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