JQuery selectors allow you to select HTML elements. JQuery selectors are used to find HTML elements based on their name, id, classes, types, attributes, values of attributes and tag name, JQuery selector are same as CSS selector. All JQuery selectors start with the dollar sign and parentheses $() or called factory function.
Tag name (element) selector
The tag name selector or element selector these are equals. This selector are use tag name for selecting the element of html page.
Syntax
$(“tag-name”).function ()
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('p').css({'background-color':'yellow'});
});
});
</script>
<style>
</style>
</head>
<body>
<p>Click me for hiding the data </p>
<p>Click me again </p>
<p>Click me again and again </p>
<button>Click Me for change the paragraph color</button>
</body>
</html>
The #id Selector
The JQuery id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so this id selector use the selecting an elements by using the id. This id selector use with #id-name (#mark, #demo, #red), we will always write with hastag (#).
Syntax
$(“#id-name”).function ()
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('#p3').css({ 'background-color': 'yellow' });
$('#p2').css({ 'background-color': 'blue' });
$('#p1').css({ 'background-color': 'red' });
});
});
</script>
<style>
</style>
</head>
<body>
<p id='p1'>This is #p1</p>
<p id='p2'>This is #p2</p>
<p id='p3'>This is #p3 </p>
<button>Click Me for change the paragraph color using id selector</button>
</body>
</html>
The .class Selector
JQuery .class selector to find elements with class attribute this selector is used to select an element of an html page, to find elements of a specific class. This selector writes with the period operator (.red, .navbar, .menu)
Syntax
$(“.class-name”).function ()
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('.cls1').css({ 'background-color': 'yellow' });
$('.cls3').css({ 'background-color': 'blue' });
$('.cls2').css({ 'background-color': 'red' });
});
});
</script>
<style>
</style>
</head>
<body>
<p class='cls1'>This is .cls1</p>
<p class='cls2'>This is .cls2</p>
<p class='cls3'>This is .cls3</p>
<button>Click Me for change the paragraph color using id selector</button>
</body>
</html>
