3 examples to use jQuery Selectors by class, ID and name

The selector in jQuery

The most important purpose of jQuery is: select elements and do some action on those selected elements. The jQuery selectors allow you to search or select HTML elements and then perform intended action on those.

For example, we see Show/Hide feature in many sites for some part of the page. This can be done by using selectors. We can code all HTML of the show or hide part in a particular class e.g. “.showmenu” class. As the Show (button or link) is clicked the menu will be shown and vice versa.

Syntax of using jQuery selector

Selectors in jQuery start with: $()

For example: $(‘tag_name’) , $(“#ID”), $(“.class”)

This chapter explains important selectors one by one with examples. Note that, for the examples below we have placed jQuery library at the jQuery folder where HTML file is also placed. You can also include the jQuery library file from CDN.

Selectors on the basis of element ID

Following is the general syntax of using selector by ID:

$(“#ID_of_Element”);

The ID will be represented by “#” followed by ID of the element that should be unique in the document. In HTML, your paragraphs, form buttons, Div etc. can be ID based. The selector jQuery will search for the given id in the document and perform the given action.

Selector by #ID example

In the following example, a Div with id=text will be shown while Show button is made hidden when the document is ready. As you click on “Hide text” button, the div will hide and “Show text” button will be shown.

Experience online

jQuery Class Selector

Following is the general syntax of using selector by class name:

$(“.classname”);

Selecting elements by class names requires calling by ‘.’ (period) followed by the class name of the element. The jQuery selector will search for the given class in the document and performs the specified action.

Selector with Class name example

Following is an example of the selector by the class name. Apparently, this is just like the above example, except we are using the class selector.

In the example below, a Div with class=text will be shown and Show button is made hidden when the document is loaded. As you click on the “Hide text” button, the div will be hidden and “Show text” button will be visible.

Experience online

In real time development, your class name specifications may be specified in an external CSS file.

Selector by name

Following is the general syntax of using the selector by tag name:

$(‘html_tag_name’);

Where HTML tag name can be p, div, img etc. e.g.

  • $(‘p’) – select all elements with name p in the page.
  • $(‘div’) = select all elements with name div in the page.

Example of Selector by tag name

Same example as used in above section except that we used the tag name div to hide and show text in jQuery selector rather the class name. If you have multiple div tags in the page it will show/hide all Divs.

Experience online

 

Also see jQuery class selector