JQuery is not a standard technology, but it's a de facto Web standard. It uses CSS selectors to locate elements in any HTML file, and provides the same power as the DOM but with a much cleaner syntax. To use JQuery, you first need to include its library in your HTML page using the <script> tag. This is easily done with a CDN URL:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
The code fragment here is a page that uses JQuery to perform the exact same operations shown in the last DOM example. The result is much easier to understand (Examples/example-6.html):
<html>
<body>
<head>
<style>
#my-section {
cursor: pointer;
}
</style>
</head>
<h1>Simple page</h1>
<p>Simple paragraph</p>
<div id="my-section">
<img src="pluto.jpg" width="100"/>
<p>Click me!</p>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#my-section").on("click", function() {
$(this).append("<p>New Line</p>");
});
</script>
</html>
CSS selectors are used in JavaScript libraries such as JQuery to apply dynamic styles and manipulate a document's structure and contents. The main JQuery(selector) function, normally used via its alias, the $(selector) function, is an element selector that receives a CSS selector expression as its parameter:
const divSet = $("div");
const title1 = $("#section1 h1");
A selection can return zero, one, or a list of elements. You can test the length of a selection using the length attribute:
if($("table").length == 0) {
console.log("there are no tables in this document")
}
Using JQuery and the code shown in the CSS example, we can make the tabs fade in and fade out as they are clicked using selectors and JQuery functions (Examples/example-7-selectors.html):
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(".tab").on("click", function() {
$(".tab h1").css("color", "gray");
$(".tab h1").css("background", "white");
$(".tab h1").css("font-weight", "normal");
$(".tab h1").css("z-index", "-1");
$("#" + $(this).attr("id") + " h1").css("color", "black");
$("#" + $(this).attr("id") + " h1").css("background", "whitesmoke");
$("#" + $(this).attr("id") + " h1").css("font-weight", "bold");
$("#" + $(this).attr("id") + " h1").css("z-index", "1");
$(".tab .contents").fadeOut();
$("#" + $(this).attr("id") + " .contents").fadeIn();
});
$("#section1").trigger("click");
</script>