For creating interactive web pages, you may need to select some elements in your HTML page. It can be hiding an element with a user clicking a button or changing color of an element with mouse hover. This can be done so easily with JQuery Selectors. A JQuery Selector is defined with $ function followed by the element in parentheses.
Select HTML elements based on their ID with jQuery
The jQuery #id selector selects an HTML element using its ID value. It automatically calls the document.getElementById() function whenever this selector is used.
The syntax to use this selector is $(“#elementID”). Here, ‘elementID’ is a unique value for the ID attribute of the HTML element to be selected.
An example can be to access the HTML element to hide it. For that, you use: $(#elementID).hide()
Example: create an HTML code using JQuery Selectors to modify the CSS of an element with ID “test” using jQuery. The solution should satisfy the following requirements:
1. Element should be the <p> element.
2. Background color should be modified.
Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(){
$("#test").css("background-color","gray");
});
});
</script>
</head>
<body>
<P id="test">
This is a paragraph and its background color will change on clicking it.
</P>
</body>
</html>jQuery Selectors by class
This jQuery selector selects all those HTML elements that are associated with the specified class name. It is used as: $(“classname”) where “classname” is the name of the CSS Class whose associated elements are to be selected.
You can read about this selector from the official documentation for JQuery. More than one HTML elements can have the same class name. This selector will select all those elements and apply changes if appropriate code is written.
Example create an HTML code using JQuery Selectors to satisfy the following requirements:
1. It should have two HTML elements with the same class name.
2. Modify the CSS of both the elements using the class selector of jQuery.
Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {background-color: powderblue;}
.paratext {color: blue;}
p {color: red;}
</style>
<script>
$(document).ready(function(){
$(".paratext").click(function(){
$(".paratext").css("background-color","green");
});
});
</script>
</head>
<body>
<div class="paratext">
This is first paragraph with class and its background color will change on clicking it.
</div>
<p>
This is second paragraph and its background color will change on clicking it.
</p>
<div class="paratext">
This is third paragraph with class and its background color will change on clicking it.
</div>
</body>
</html>JQuery Selectors find the elements by other parameters in addition to ID and Class Name. It can be the attributes, value of the element, name of element etc. They are discussed in coming up posts. Till then…Keep tweaking with these two:)
Be First to Comment