jQuery is a lightweight, “write less, do more”, JavaScript library.
There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.

The purpose of jQuery is to make it much easier to use JavaScript on the webpage. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.
Before you start studying jQuery, you should have a basic knowledge of:
- HTML
- CSS
- JavaScript
Let’s get jQuery started:
Adding jQuery to HTML
There are several ways to start using jQuery on your website:
Downloading jQuery
There are two versions of jQuery available for downloading:
- Production version – this is for your live website because it has been minified and compressed
- Development version – this is for testing and development (uncompressed and readable code)
Both versions can be downloaded from jQuery.com.
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag.
Note: The <script> tag should be inside the <head> section.
<head>
<script src="jquery-3.4.1.min.js"></script>
</head>
jQuery CDN
If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:
Google CDN:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h4>jQuery CDN</h4>
<p>Click on the button.</p>
<p>To hide the paragraphs.</p>
<button>Click me</button>
</body>
</html>
Output:
jQuery CDN
Click on the button.
To hide paragraphs.
Microsoft CDN:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h4>Microsoft CDN</h4>
<p>Click on the button.</p>
<p>To hide paragraphs.</p>
<button>Click me</button>
</body>
</html>
Output:
Microsoft CDN
Click on the button.
To hide paragraphs.
Enjoy coding!
Read also: