Selectors in jQuery

jQuery selecrors

In jQuery selectors play very important role. jQuery selectors are used to select an HTML element from HTML DOM. In short you can say by using jQuery selector you may find one or more HTML elements and can perform some action on those elements.

By using jQuery selectors you may select an HTML element based on the element name, id, class or attributes and many more.

The syntax of selecting an HTML element is - $(selector)

Where – selector may be id selector, class selector, element name selector etc.

So Now we will see all the jQuery element selectors one by one.

The Element Selector

In jQuery element selector select an element based on the element name. By using element name you may select all the specified elements on the document.

Example –

For example you want to select all the paragraphs (<p> elements) present on your document. So the syntax of doing this will be-

Syntax -  $(“p”)

If you want to select all the buttons present on you document. So the syntax will be like this.

Syntax - $(“button”)

So Selecting an element based on the element name is very simple, you just have to specify element name in the double quote followed by $ symbol.

Here is an example of this let's save this code in an HTML file and try this.

The Id selector

In jQuery an Id selector select an element based on the id of that element. By using id selector you may select a particular element on your document.

The syntax of selecting an element by using element id is –

Syntax - $(“#id_name”)

You just have to mention that element id followed by Hash (#) symbol.

Example –

For example you want to select a particular paragraph on your document. So you have to mention that <p> element’s id. Let’s say the Id of that paragraph is “para1” so the syntax will be -

Syntax - $(“#para1”)

For example you want to select a button with the id let’s say “btn” So the syntax will be

Syntax - $(“#btn”)

The Id Selector use document.getElementById() method of JavaScript behind the scene.

Note - If more than one elements are present with same id, then only first occurring element will consider.

Here is an example of this, Let's save this code in an HTML file and try this.

The Class Selector

In jQuery The Class selector select an particular element based on the class name of that element. By using Class name you may select a specific element on your document.

Syntax - $(“.class_name”)

You just have to mention class name in double quote followed by period (.) sign.

Example –

For example you want to select a particular element of class name “test” , so the syntax will be –

Syntax - $(.test)

For example you want to select a particular button with class name “btn1” , so the syntax will be –

Syntax - $(“.btn1”)

The Class Selector use document.getElementByClassName() method behind the scene.

Here is an simple example of this, Let's save this code in an HTML file and try this.

Some other jQuery Selectors

There are many other element selectors in jQuery which may be used to select a particular element.

$(“*”)  -  Select all the HTML elements.

$(“this”)  -  Select current HTML element.

$(“p.test”)  -  Select all <p> elements with class name “test”.

$(“p:first”)  -  Select the first <p> element.

$(“ul li:first”)  -  Select the first <li> element of the first <ul> element.

Previous Page                                                                           Next Page