Introduction to jQuery

Updated on: September 18, 2018

  • jQuery is small, fast and featured rich javascript library.

  • It works on multiple browsers

  • It helps in DOM manipulation, event handling, and showing animations on the web page.

  • It can be used to upload file functionality and making API calls through ajax

How to add jQuery to html web page :

You can add jQuery to your web page by adding jQuery .js file.

Following is the sample HTML and it’s output after adding jQuery

<html>

<head>

<title>Sample jQuery Application</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $('body').html('<h1>Sample jQuery Application</h1>');

});

</script>

</head>

<body>

</body>

</html>

I have used CDN path of Google to add jQuery to our web page.

The output of above program is :

DOM Manipulations :

jQuery uses selectors for DOM manipulation.

Following are the selectors in jQuery:

  • Element selector

  • ID selector

  • Class selector

Event Handling :

jQuery handles mouse click, mouse hover, mouse move events. Following is the button click event, “btnShowProducts”, on click of the button “productListDiv” div will get visible on the DOM.

$(‘#btnShowProducts’).click(function(){

  $(‘#productListDiv’).show();

});

Ajax Implementation :

$.ajax({

url:’api/products/laptop’

data:{category:’gaming’},

success:function(data){

   console.log(data);

},

error:function(error){

   console.log(‘error occurred’);

}

});