jQuery Selectors

In the previous lesson, we learned about jQuery Syntax. Now we will see how to work with jQuery Selector. It is used to select an HTML element and manipulate it. Selector starts with a dollar and parentheses as you can see below,

An element can have an id, class, attribute, name, values, etc. With jQuery, you can easily select element or elements based on their id, class, etc.

Types of jQuery Selectors

The following are the types of selectors in jQuery:

  • jQuery Element selector
  • jQuery .class selector
  • jQuery #id selector

jQuery element Selector

The jQuery element selector is used to select all the elements. The elements such as p, and div are selected based on the name of the element.

The name of the element i.e. the tag name for the element selector goes as a parameter,

Here’s an example showing how element selector work in jQuery,

Here’s the output showing element selectors in jQuery:

jQuery element selector

After clicking the button above, the element hides as shown below,

jQuery element selector output after button click

jQuery class selector

The jQuery class selector is used to find elements with a given class. For finding elements, a period character is used.

The name of the class is used preceded by a period character,

The above is for the following class,

Here’s an example showing how class selector work in jQuery,

Here’s the output showing class selectors in jQuery,

jQuery class selector

After clicking the button above, the element hides as shown below,

jQuery class selector

Above, the jQuery class selector output after button click can be seen.

jQuery id selector

The jQuery id selector uses the id attribute to select an element. For finding elements, a # character is used for the id selector.

The name of the id is used preceded by a hash (#) character,

The above is for the following class,

Here’s an example showing how the id selector work in jQuery,

Here’s the output showing id selectors in jQuery,

jQuery id selector

After clicking the button above, the element hides as shown below,

jQuery id selector output after button click

jQuery Syntax
jQuery Events Insight and Methods
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading