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 Selectors?

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,

1.Attribute selector:

Uses: Attribute selector is used for the select 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:

Uses: This selector is used for select 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 checkbox With jQuery

3.Odd-even selector:

Uses: Odd-Even Selector is used to selecting 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:

Uses: The first-last selector is used to selecting 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:

Uses: nth Element selector is used to selecting any element according to its

For Example:

//To select nth element

$('li:eq(2)').addClass("green");

6.not Selector:

Uses: 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:

Uses: 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:

Uses: Contains selector is used to finding which elements contains 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