I have written several tutorials on jQuery starting from the basics to the advanced levels. I have consolidated all the tutorials and prepared a list of tutorials in a systematic manner. Here I will share the list that contains the links to all those tutorials on jQuery in a well designed sequence, which will help you learn jQuery faster with less effort. This jQuery tutorial is designed for beginners as well as for those who wants to learn advanced jQuery.
1. What is jQuery?
1. jQuery is the easiest and the most popular javascript library. A library is just a collection of tools that allows us to implement functionality or effects without the need to write all the code that is needed to perform a certain task.
2. The purpose of jQuery is make it easier for you to use javascript on your website.
3. jQuery is a light-weight javascript library which means “write less, do more”.
4. jQuery library allows you to do following things:
- HTML/DOM(Document Object Model) Manipulation.
- CSS manipulation.
- Provides event methods to trigger and respond to a events on an html page such as mouse click, keypress etc.
- Simplifies AJAX calls.
2. Prerequisite
To learn jQuery faster and with less effort, you must have a basic knowledge of CSS, HTML & JavaScript.
3. jQuery Get Started
In this section, we will learn how to install and use jQuery in your project.
3.1 How to Add jQuery to your website
There are two ways you can add jQuery to your web pages.
1. Download the jQuery library from jQuery.com -> Not recommended method.
2. Include jQuery to your project using the CDN provided by Google, Microsoft etc -> Recommended Method.
3.1.1 Download the jQuery library from jQuery.com
To download the jQuery visit this official page: http://jquery.com/download/. Here you will find two versions.
Production version: Download this version, if you intend to use the downloaded library for a live website.
Development version: Download this version for testing and development purposes.
After download:
Once you have downloaded the jQuery library. You need to add the reference to it from every webpage of your website, to do this add the link to the jQuery library inside <script> tag and in the <head> section of the webpage.
Place the downloaded jQuery file in the same folder where you have placed all of your webpages and then add the reference to the jQuery file in head section of every webpage like this:
<head> <script src="jquery-3.4.0.min.js"></script> </head>
3.1.2 Use jQuery CDN
In this method, you do not have to download and host the jQuery file, you can use the jQuery file provided by Google and Microsoft CDN (Content Delivery Network). These CDNs are fast as they deliver the file from your nearest hosting server which is why I have recommended this method. All the tutorials that I have written on jQuery, I have used the CDN provided by Google.
jQuery file provided by Google CDN:
You refer the file like this in the head section of your webpage:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head>
4. First jQuery Example
In the following example we are using the jQuery to hide all the paragraphs when the button is clicked. We have added to the reference to jQuery CDN file in the <script> tag inside <head>.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>jQuery tutorial on Beginnersbook.com</h2>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<button>hide</button>
</body>
</html>
Output:
Before the button is clicked: