How to use a jQuery library in your project ?
In this article, we will see how to use jQuery library in a project. There are two methods to add jQuery library in a project which are –
- Include jQuery library from CDN link
- Download jQuery library from the official website
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:
HTML
<!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:
HTML
<!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:
Please Login to comment...