I’ll provide you information about JQuery Selectors in this article.
In our development work, things like concealing controls, client-side validations, Ajax requests, etc. heavily rely on jQuery selectors.
What is JQuery?
A JavaScript library called JQuery was created. It is intended to make HTML client-side scripting easier. The major goal of jQuery is to make it simple for you to utilise JavaScript on your website to enhance its interactivity and aesthetic appeal.
What are JQuery Selectors?
HTML elements may be chosen and changed using JQuery Selectors. You may search or choose HTML components from a DOM using JQuery selectors based on their Id, classes, attributes, types, and much more.
Syntax
$(document).ready(function(){
$(selector)
});
Element Selector
The element is chosen using the elements selector based on its name.
Syntax
$(document).ready(function(){
$("HTML Element Title")
});
Example
Sets the background colour of all paragraphs with the letter “p” to yellow.
<html>
<head>
<title>JQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>JQuery Element Selector</h1>
<p>This is the First paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>
</html>
#Id Selector
The element is chosen using the id of the element.
Syntax
$(document).ready(function(){
$("#id of the element")
});
Example
depending on id, hide and show paragraphs.
<html>
<head>
<title>JQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#p1").hide();
});
$("#show").click(function(){
$("#p1").show();
});
});
</script>
</head>
<body>
<h1>JQuery #Id Selector</h1>
<div>
<p id="p1">First paragraph greetings</p>
<p>Two paragraph greetings </p>
<p>Three paragraph greetings </p>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Class Selector
Based on the element’s class, the class selector chooses it.
Syntax
$(document).ready(function(){
$(".class of the element")
});
Example
based on class, hide and reveal certain paragraphs.
<html>
<head>
<title>JQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$(".p2").hide();
});
$("#show").click(function() {
$(".p2").show();
});
});
</script>
</head>
<body>
<h1>JQuery Class Selector</h1>
<div>
<p class="p1">First paragraph greetings</p>
<p class="p2">Two paragraph greetings</p>
<p class="p3">Three paragraph greetings </p>
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
