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:
After the button is clicked:
There are couple of things you may be wondering about in the above example. Don’t worry, we will discuss everything in detail in the separate tutorials. I have added the links to those tutorials at the end of this article. For now, just discuss little bit about everything so we get to know what is happening here.
The following is the jQuery part in the above example:
<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>
Here the first line is the reference to the jQuery CDN, this gives us access to the jQuery library which is full of tools that we can use to implement functionality or effect in our webpage without writing code. For example, here we use the jQuery method hide() to hide all the paragraphs, the actual implementation of hide() method is available in the file which you are referring using the CDN.
4.1 The Document Ready function
We always write the jQuery code inside document ready function like this:
$(document).ready(function(){
// jQuery code
});
We do this to prevent any jQuery code from running before the document is finished loading. It is always best to wait for the document to be fully loaded before any of the jQuery code runs, this prevents the unexpected behaviour that may arise if write the jQuery code outside document ready function.
5. jQuery tutorials
jQuery Selectors tutorials
List of tutorials on jQuery Selectors.
| Link | Example | Description |
|---|---|---|
| * Selector | $(“*”) | Selects all the elements of an html page. |
| #id Selector | $(“#myid”) | Selects the element with id value equals to “myid”. |
| .class Selector | $(“.myclass”) | Selects all the elements with class “myclass”. |
| Multiple class Selector | $(“.myclass1,.myclass2”) | Selects all the elements with class “myclass1” or “myclass2”. |
| Element Selector | $(“p”) | Selects all the paragraphs |
| Multiple elements Selector | $(“h2,p,a”) | Selects all the h2, p and a elements of an html page |
jQuery Events Tutorials
List of tutorials on jQuery events.
jQuery Mouse Events
| Tutorial link | Description |
|---|---|
| click | jQuery click event occurs when a user clicks on an html element. |
| dblclick | jQuery dblclick event occurs when a user double clicks on an html element. |
| mouseenter | jQuery mouseenter event occurs when the mouse pointer enters the html element. |
| mouseleave | jQuery mouseleave event occurs when the mouse pointer leaves the html element. |
| mousedown | jQuery mousedown event occurs when any of the mouse button is pressed down while the mouse pointer is over an html element. |
| mouseup | jQuery mouseup event occurs when any of the mouse button is released while the mouse pointer is over an html element. |
| hover | jQuery hover event is a combination of mouseenter() and mouseleave() methods. First event handler function executes when mouse pointer enters the html element and the second event handler function executes when the mouse pointer leaves the html element. |
jQuery Form Events
| Tutorial link | Description |
|---|---|
| focus | jQuery focus event occurs when a form field gets focus. |
| blur | jQuery blur event occurs when a form field loses focus. |
| submit | jQuery submit event occurs when a form is submitted. |
| change | jQuery change event occurs when the value of an element has been changed. The applicable elements for this event are: <input>, <textarea> and <select> |
jQuery Keyboard Events
| Tutorial link | Description |
|---|---|
| keypress | jQuery keypress event occurs when a button is pressed down. The keypress event is not triggered for special keys such as ALT, CTRL, SHIFT, ESC. |
| keydown | jQuery keydown event occurs when a keyboard key is pressed down. Unlike keypress event, this event is triggered for ALT, CTRL, SHIFT, ESC keys. |
| keyup | jQuery keyup event occurs when a keyboard key is released |
jQuery Window Events
| Tutorial link | Description |
|---|---|
| resize | jQuery resize event occurs when the browser window is resized. |
| scroll | jQuery scroll event occurs when user scrolls in the specified html element. |
jQuery Effects tutorials
List of tutorials on jQuery Effects.
| Tutorial link | Description |
|---|---|
| jQuery show and hide | jQuery show() and hide() methods explained with examples. |
| jQuery Fading effects | jQuery fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods explained with examples |
| jQuery sliding effects | jQuery slideDown(), slideUp() and slideToggle() methods explained with examples. |
| jQuery animate | jQuery animate() method with examples. |
| jQuery stop() | jQuery stop() method explained with examples. |
| jQuery Callback | jQuery callback function with examples. |
| jQuery chaining | jQuery chaining multiple methods/actions. |
jQuery HTML/CSS
List of jQuery HTML/CSS tutorials.
| Tutorial link | Description |
|---|---|
| jQuery addClass() | This method used for adding one or more classes to the selected elements |
| jQuery hasClass() | Checks if any of the selected elements has the specified class assigned to it. |
| jQuery removeClass() | It removes one or more specified classes from the selected elements. |
| jQuery toggleClass() | It toggles between adding/removing classes from the selected elements. |
| jQuery after() | This method inserts specified content after selected elements. |
| jQuery before() | This method inserts specified content before the selected elements. |
| jQuery append() | Inserts content at the end of selected elements. |
| jQuery appendTo() | This method inserts html tags at the end of selected elements. |
| jQuery clone() | It makes a copy of selected elements. |
| jQuery insertBefore() | It inserts html elements before selected elements. |
| jQuery insertAfter() | It inserts html elements after the selected elements. |
| jQuery attr() | It sets or returns the attributes or values of the selected elements. |
| jQuery text() | It sets or returns the text content of the selected elements. |
| jQuery val() | Sets or returns value attribute of the selected elements. |
| jQuery css() | Sets or returns css style properties from the selected elements. |
| jQuery prepend() | Inserts html elements at the beginning of the selected elements. |
| jQuery remove() | Removes the selected elements along with all the child nodes, data and events associated with it. |
| jQuery empty() | This method is similar to remove() method except that it doesn’t remove the elements rather removes the child nodes and content associated with the element. |
| jQuery detach() | It removes the selected elements, child nodes and content but keeps the data and events. |
Caps Koiwu says
This is one of the Best Tutorials I have Ever Seeing on the Web. thank you so much for the effort.