JavaScript is mostly used to get or modify the content or value of the HTML elements on a web page, and also, to apply some effects like a show, hide, animations, and so on. however, before any action can be performed you need to find or select the target HTML element.
However, selecting the elements through a JavaScript approach could be very painful, in contrast, the jQuery works like magic in this case.
The capability of making the DOM elements selection easy and simple is one of the most powerful attributes of jQuery.
The ID selector can be used to select a single element with the unique ID on the page.
Take a look at this example; the jQuery code will select and highlight an element having the ID attribute id="mark" if the document is ready to be manipulated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by ID</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "yellow");
});
</script>
</head>
<body>
<p id="mark">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>
</body>
</html>From the above example, the $(document).ready() is an event that is used to manipulate a page safely with the jQuery. The code added inside this event will only run once the web page DOM is ready. You will be introduced to more concepts about the events in the next tutorial.
In this case, the class selector is used to select elements with a specific class.
Take, for instance, the jQuery code here will select and highlight the elements having the class attribute class= "mark", only when the document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Class</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>
</head>
<body>
<p class="mark">This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
</body>
</html>
The element selector is used to select elements typically based on the element name.
For instance, the jQuery code here will select and highlight all the paragraphs (i.e the <p> elements) of the document when it is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Name</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "yellow");
});
</script>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is another block of text.</div>
</body>
</html>The attribute selector can be used to select an element by one of its HTML attributes, like a link's target attribute or an input's type attribute, and so on.
Take for example, the jQuery code here will select and highlight all the text inputs (i.e <input> elements) with the type="text", when the document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "yellow");
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>The CSS selectors can be combined to make your selection even more precise.
Take for example, when you combine the class selector with an element selector to find the elements in a document that has a certain type and class, as shown here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Compound Selector</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "yellow");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "red");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p class="mark">This is another paragraph.</p>
<p>This is one more paragraph.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<ul id="mark">
<li>List item one</li>
<li>List <span>item two</span></li>
<li>List item three</li>
</ul>
<ul class="mark">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<p>Go to <a href="https://www.readytocode.net/" target="_blank">Home page</a></p>
</body>
</html>jQuery also provides its custom selector to enhance the capabilities of selecting elements on a web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style>
/* Some custom style */
*{
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>alexa@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>mike@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>ceo@gmail.com</td>
</tr>
</tbody>
</table>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>