Hands On: Using jQuery
In this lesson, we'll be meeting jQuery!
JavaScript is a relatively simple, versatile, dynamic programming language. Code libraries and frameworks can help you to be more productive with a programming language, this is the same with JavaScript, too.
If you’d ask rabid fans of JavaScript to name indispensable libraries, jQuery would be among them, without a doubt.
Instead of buckling down and spending weeks or months learning the ways JavaScript can be used, you can add jQuery to your page and use it. It’s very simple, as you will learn in the next exercise.
Exercise: Adding jQuery to the Page
In this exercise, you will change the index.html page so that when you click on a first-level heading, it is expanded or collapsed, showing or hiding embedded headings respectively. You will achieve this with jQuery which will change the DOM of the page as soon as it loads into the browser.
To implement this action with jQuery, follow these steps:
Step 1:
In the index.html file, remove the <script> block from <body>, and delete the onclick attribute from each <h1> element. Your HTML markups should look like this:
<!DOCTYPE html><html><head><title>Table of Contents</title><link href="style.css" rel="stylesheet" /></head><body><h1>Introduction</h1><h2>Whom this book is for?</h2><h2>Errata</h2><h1>Chapter 1</h1><h2>What you will learn in this chapter</h2><h2>Summary</h2><h1>Chapter 2</h1><h2>Recap</h2><h2>Conclusion</h2></body></html>
Step 2:
Surround the <h2> elements that belong to an <h1> with a <div> block, as shown in the following code snippet. This block defines the content of the <h1> block preceding <div>, so when the user clicks the first level heading, the content will be collapsed or expanded.
<body><h1>Introduction</h1><div><h2>Whom this book is for?</h2><h2>Errata</h2></div><h1>Chapter 1</h1><div><h2>What you will learn in this chapter</h2><h2>Summary</h2></div><h1>Chapter 2</h1><div><h2>Recap</h2><h2>Conclusion</h2></div></body>
Step 3:
In the command prompt below, enter the following directory path:
cd /usr/lib/node_modules/npm
and then install jQuery with this command:
npm install jquery --save
This command downloads the jQuery package from the web, stores it within the node_modules folder, and saves a dependency in project.json.
You should see an output similar to the one below:
The + jquery@3.4.1 line is of main importance: It indicates the jQuery version installed.
Note: This course was created using jQuery version 3.4.1. If you install jQuery now, you’ll likely get a newer version. That’s perfectly fine—the examples in this course will still work as expected, as the syntax and features we use haven’t changed across these versions. If you’d like to use the exact same version as in the course, run:
npm install jquery@3.4.1 --saveOtherwise, you can safely continue with the latest release.
Step 4:
In the index.html file, add the following script elements before the closing </body> tag:
<script src="node_modules/jquery/dist/jquery.js"></script><script>$(document).ready(function () {$('h1').prepend('<span class="node">-</span>');$('h1').click(function () {var node = $(this).children('.node');$(this).next().fadeToggle(500, 'swing',function () {var mark = node.text();mark = mark === '-' ? '+' : '-';node.text(mark);});})});</script>
Step 5:
Add the following style definition to style.css:
h1 .node {
font-family: monospace;
}
Step 6:
Display the page in the browser. Click the first-level heading a couple of times and you can see it collapse or expand while fading in or out.
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Introduction</h1>
<div>
<h2>Whom this book is for?</h2>
<h2>Errata</h2>
</div>
<h1>Chapter 1</h1>
<div>
<h2>What you will learn in this chapter</h2>
<h2>Summary</h2>
</div>
<h1>Chapter 2</h1>
<div>
<h2>Recap</h2>
<h2>Conclusion</h2>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$('h1').prepend('<span class="node">-</span>');
$('h1').click(
function () {
var node = $(this).children('.node');
$(this).next().fadeToggle(500, 'swing',
function () {
var mark = node.text();
mark = mark === '-' ? '+' : '-';
node.text(mark);
});
})
});
</script>
</body>
</html>
You can also observe that headings now have a plus or minus sign indicating the collapsed or expanded state of the heading, as shown in the Figure below:
In the above exercise, we saw the usage of jQuery and the magic it brings to our web page.
Hold tight, for in the next lesson, we’ll see exactly how jQuery exactly works to achieve what it does above.
Stay tuned :)