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

  1. Light Weight, 30kb file (minified and gziped).
  2. Upto 50% less syntax than JavaScript.
  3. Support I.E. 8 and below browsers ( JQuery 1+ versions).
  4. 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  );
  }
});