Jignesh zala
2 min readSep 30, 2022

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

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Jignesh zala
Jignesh zala

Written by Jignesh zala

MEAN Stack Developer and founder of TutsCoder.com, sharing tech insights, tutorials, and resources on Angular, Node.js, JavaScript, and more for developers.

No responses yet

Write a response