8 Most useful Jquery Selectors - You Need To Know

Howdy coders,

In this tutorial, we are going to show some useful uses of Jquery selectors.

What is Jquery?

jQuery is a powerful and widely used JavaScript library that allows you to easily manipulate and navigate HTML elements on your web pages.

What are Selectors?

One of the key features of jQuery is its selectors, which enable you to identify and target specific HTML elements based on their attributes, tags, and positions in the DOM.

Selectors are a very useful part of jquery.

In Jquery selectors are used to select any HTML elements and perform some action on them Like add some animation on the element, make the element fade in-out or call some function on element click, etc….

Let’s start,

8 Most useful Jquery Selectors list

1. Attribute selector:

The attribute selector allows you to select elements based on their attribute values. For example, $('[data-name="John"]') will select all elements that have a data-name attribute with the value "John".

An attribute selector is used for the selected element which has the selected attribute.

For Example:

//select element which has title attribute
$('a[title]').fadeOut(2000)
//select element which has title=service attribute
$('a[title=service]').fadeIn(2000);

2. this selector:

This selector is used for selecting particular elements when an event occurred.

For Example:

//To select particular element when event occured 
$('p').click(function () {
   //This will hide slected elemets on click event
   $(this).hide();
});

Read, How to check-uncheck all checkboxes With jQuery

3. Odd-even selector:

Odd-Even Selector is used to select odd and even elements from HTML.

For Example:

//To select odd element
$('li:odd').addClass("green");
//To select even element
$('li:even').addClass("blue");

4.First last selector:

The first-last selector is used to select the first or last elements.

For Example:

//To select First Element 
$('li:first').addClass("green");
//To select Last Element
$('li:last').addClass("blue");

5.nth Element  selector:

nth Element selector is used to select any element according to its

For Example:

//To select nth element
$('li:eq(2)').addClass("green");

6. not Selector:

not selector is used when you want to not to select an element from given.

For Example:

//Do not select 3rd element
$('p:not(p:eq(2))').fadeOut(2000);

7. Form field selector:

The form field selector is used to select any form input

//To select all input fields
$(':input').addClass('green');
//To select input with type=password
$(':input:password').addClass('red');

8. Contains selector:

Contains selector is used to finding which elements contain selected text.

For Example:

$('#show').click(function(){
     //Find 'Jigar' from elements and show it		
      $("p:contains('Jigar')").show();
});

Also read, 12 Most Helpful jQuery Methods and Functions

Conclusion:

So, These are some basic uses of Jquery selectors. 

Thanks for reading.🙏

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter