JQuery Selectors – A Quick Reference

By | January 17, 2017

In this article I will discuss the various ways by which we can select an element in HTML page using Jquery. If you want to know how to start Jquery development you can read this article. After setting up the project and environment we can start our development with Jquery selectors.

Become an Expert in Programming and Web Development.View all courses!

What are Jquery selectors?

  • Selectors allow the developer to select the page elements and help to work on the element by creating an Jquery wrapper object for the element.
  • Single or multiple elements can be selected.
  • A Jquery object can be created by using $(selector) or jquery(selector) syntax. I will use the $() in the article

Tag Name Selector

An HTML element can be selected by the tag name which is the element itself. Check the below examples.

To Select the multiple tags we can use the comma (,) to separate the elements. Please check the last line in the previous example.

Descendant Selector

Descendant are the children, grandchildren of the designated element.

ID Selector

Use the hash ‘#’ character to select element by id

Class Jquery Selectors

Use the dot ‘.’ character to select the elements by their class names. We can also select multiple tags by separating the class names by ‘,’ comma character. Examples are below.

Attribute Value Jauery Selectors

We can select the tags based on the attribute name and attribute value.

Input element selectors

To select all the input elements including input, select, textarea, button, image, radio button we can use $(‘:input’) selector.

Using Contains in Selectors

Select the elements which matches the contents of the elements within the “contains”

Odd Even Selectors

$(‘tr:odd’) and $(‘tr:even’) is the Jquery selector for selecting the odd or even rows . The index is zero based.

Selecting the First Child

$(‘element:first-child’) – Selects the first child of every element group.

Other Selectors

Contains – [attribute*=”value”] will select all the elements with an attribute that contains the stated value.

Starts with – [attribute^=”value”] will select all the elements with an attribute that begins with stated value
Ends With – [attribute$=”value”] will select all the elements with an attribute that ends with stated value

Conclusion

In this article I have discussed all the selectors which will come handy while we are working on the Jquery development. All the selectors are mentioned with the examples for quick reference.