Local installation
To locally install jQuery in your web project, follow these steps:
Step 1: Download the latest version of the jQuery library from the following website: https://jquery.com/download For the purposes of the manual, the minified version (compressed, production jQuery) will be used.
Step 2: After the jQuery library is on your computer, insert it into your web project at the desired location.
Step 3: Reference the jQuery library using the src attribute in the <script> element, as seen in the following example.
<html>
<head>
<title>Local installation of the jQuery library</title>
<!-- Reference the jQuery library -->
<script type="text/javascript"
src="/scripts/jquery-3.7.0.min.js"></script>
</head>
<body>
<h1>
<!-- Display the text "Hello, World!" using the jQuery document.write() function -->
<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</h1>
</body>
</html>
In the above example, the jquery script is added to the inside a /scripts folder
JQuery must be referenced before the jQuery code is written! If you added jQuery after the document.ready() function, the interpreter would return an error.
Fetching the jQuery library using CDN
As previously mentioned, jQuery can be implemented via a Content Delivery Network. For the purposes of the manual, the Google CDN will be used.
<html>
<head>
<title>Fetching the jQuery library using CDN</title>
<!-- Reference the jQuery library using Google CDN -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
</head>
<body>
<h1>
<!-- Print the text "Hello, World!" using the
jQuery document.ready() function
-->
<script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</h1>
</body>
</html>
Calling the jQuery function
Most things you can do with jQuery involve reading or manipulating the DOM. To ensure that events will work on a given webpage, they need to be added as soon as the DOM is ready.
For this purpose, events are subscribed to within the $(document).ready() function. Everything inside this function will load as soon as the DOM loads, and before the page content loads.
$(document).ready(function() {
// Execute the code when the DOM is ready
});
Like all other JavaScript code, jQuery functions are written in an HTML document within the <script></script> element.
<html>
<head>
<title>jQuery example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
</script>
</head>
<body>
<div>
By clicking on the div element, a window with the message
"Hello, World!" will pop up.
</div>
</body>
</html>
This example is a simple HTML document that demonstrates the use of jQuery for handling a click event on an HTML element.
When you load this HTML in a browser, you will see a page with a div element containing the text "By clicking on the div element, a window with the message 'Hello, World!' will pop up." When you click on this div, an alert box with the message "Hello, world!" will appear, demonstrating a basic interaction using jQuery.