JQuery Tutorial
Written By: Avinash Malhotra
What is JQuery?
JQuery is the most popular JavaScript Library. Libraries in programming are collections of multiple functions inside a single file, like Jquery. Jquery was released in 2006 and now a days, 75% of websites are using JQuery. JQuery has wide range of actions, like Event Handling, DOM Interaction, DOM manipulation, Animations, AJAX interaction etc making Jquery one of the most popular JavaScript Library. JQuery is also very easy to learn.
What Jquery can do?
JQuery can simplify Javascript Programming.
The best thing about Jquery is that Jquery is supported by Old Internet Explorer versions, like 6, 7,8 (jQuery 1 versions) . A Single line of Jquery Expression will work on new and old browsers.
Reason To Choose JQuery
- Light Weight, 30kb file (minified and gziped).
- Upto 50% less syntax than JavaScript.
- Support I.E. 8 and below browsers ( JQuery 1+ versions).
- 2000+ free plugins available on jQuery site.
Jquery Examples
jQuery can make selection very easy. Click on the items below to choose
Select Multiple Items in jQuery
Select Single Item in jQuery
Jquery Slide effect.
jQuery has build in functions for slide up and down.
Click on the link
Collapsible content using JQuery Click event and slideToggle.
Jquery Fade effect
jQuery also has build in functions for fade in and out.
Mouseover on the images below




Jquery Animation
jQuery supports Animation function much needed for frontend developers. JavaScript introduced Animation function in ES6 onwards.
Mouseover on the images below




There are many more interested things which we can do using JQuery. In our next article, we'll start from the beginning, how to include jQuery library, how to download, various versions of Jquery etc.
Jquery AJAX
JQuery supports AJAX with many build in functions like load. See example.
JQuery load function
$(".header").load("header.html);
JQuery AJAX
$.ajax({
url: "/api/pincode",
method: "GET",
data: {
zipcode: 972013
},
success: function( result ) {
$( "#pincode-data" ).html( result );
}
});