Scribd
Upload
2 views

21_Hands_On__Using_jQuery

This document provides a hands-on lesson on using jQuery, specifically focusing on adding jQuery to a webpage to enable collapsing and expanding headings. It outlines a step-by-step exercise that includes modifying HTML, installing jQuery, and implementing a script to enhance user interaction with the headings. The lesson emphasizes the simplicity and effectiveness of jQuery in manipulating the DOM for better user experience.

Uploaded by

prhegde24
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

21_Hands_On__Using_jQuery

This document provides a hands-on lesson on using jQuery, specifically focusing on adding jQuery to a webpage to enable collapsing and expanding headings. It outlines a step-by-step exercise that includes modifying HTML, installing jQuery, and implementing a script to enhance user interaction with the headings. The lesson emphasizes the simplicity and effectiveness of jQuery in manipulating the DOM for better user experience.

Uploaded by

prhegde24
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Hands On: Using jQuery

In this lesson, we'll be meeting jQuery!

WE'LL COVER THE FOLLOWING

• EXERCISE 1-9: Adding jQuery to the Page


• Step 1:
• Step 2:
• Step 3:
• Step 4:
• Step 5:
• Step 6:

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 1-9: 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:

index.html

<!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.

index.html

<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.

Terminal

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.

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:
First level headings now can be collapsed and expanded.

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 :)

You might also like