In this article, we will see how to use the jQuery library in a project. There are two methods to add a jQuery library to a project which are
Include jQuery library from CDN link: CDN stands for Content Delivery Network which is basically a set of servers used for storing and delivering data. Basically, these jQuery library files are already uploaded to various CDNs and we can use them directly on our web page. Then, we don’t need to download any files on our local machine.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
We can see the CDN link inside the “src” attribute. We have successfully added jQuery to our web page. We can use all the features of jQuery on our page. While loading the page, the browser will automatically download the jQuery library files from the CDN link.
Example: In this example, we will use CDN link for including CDN link
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Include jQuery library from CDN link
</h3>
<h2>Welcome to GeeksforGeeks</h2>
<button id="id_attr">Add Style</button>
<script>
$(document).ready(function() {
$('#id_attr').click(function() {
$('h2').css("color", "green");
});
});
</script>
</body>
</html>
|
Output:
Download the jQuery library: In this section, first, we download the jQuery library from the downloadable link. After downloading the files, we will add the downloaded files to our web page in this manner.
<script src=”file_name_with_full_path”></script>
Example: In this example, we will download the jQuery library
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="jquery-3.6.0.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Download the jQuery library
</h3>
<h2>Welcome to GeeksforGeeks</h2>
<button id="id_attr">Add Style</button>
<script>
$(document).ready(function() {
$('#id_attr').click(function() {
$('h2').css("color", "green");
});
});
</script>
</body>
</html>
|
Output: