In this tutorial you will learn about the jQuery Getting Started and its application with practical example.
There are following ways you can include jQuery on your web page:
- Download a copy of jQuery library and include it in your web page.
- Include jQuery library directly from any of freely available CDN.
Downloading jQuery
To start using jQuery you need to download a copy of jQuery library and include it in your web document. There are mainly two versions of jQuery library available for downloading:
- Compressed version – The compressed version of jQuery library is best suited for live website because it is minified which makes it load faster.
- Uncompressed version – The uncompressed version is best suited for development as it is uncompressed readable code file which simplify development and debugging.
Both of the jQuery versions can be downloaded from here:
https://jquery.com/download/
jQuery is basically a simple JavaScript file. Once you’ve downloaded the jQuery file you can include in your web page simply using a HTML <script> tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Simple HTML Document</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <h1>Hello, World!</h1> </body> </html> <script> $(document).ready(function(){ alert("Hello World!"); }); </script> |
Notice: The <script> tag should be inside the <head> section
Including jQuery from CDN
If you don’t want to download and host it on your server, you can include it using a freely available CDN (Content Delivery Network) links. Including jQuery from CDNs results in performance benefit by reducing the loading time. Below is list of some of freely available jQuery CDN links:
jQuery Google CDN:-
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
jQuery StackPath CDN:-
|
1 |
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
Example:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Simple HTML Document</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>Hello, World!</h1> </body> </html> <script> $(document).ready(function(){ alert("Hello World!"); }); </script> |
