jQuery Selectors

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

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

jQuery element Selector

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

The name of the element i.e. the tag name for 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. j

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 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 output after button click

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 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 free tutorials for all.

No Comments

Post A Comment