DEV Community

TutsCoder
TutsCoder

Posted on • Originally published at tutscoder.com

1

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 

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
Sloan, the sloth mascot
Comment deleted

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay