jQuery Tutorial

jQuery Introduction

« Previous Next »

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library.
jQuery simplifies javascript programming and easy to learn.
jQuery is a lightweight JavaScript library, cross-platform
It makes things like HTML document traversal and manipulation (DOM Manipulation), event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility.
jQuery is developed by John Resig in 2006 with a nice motto − Write less, do more.
We can download jquery library files in jquery.com.

How to use jQuery in HTML document?

Two different ways to use jQuery.

Local machine: we can download jQuery library on local machine from jquery.com and include it in HTML code.
CDN Based Version: we can include jQuery library into HTML code directly from Content Delivery Network (CDN).
The following CDNs also host compressed and uncompressed versions of jQuery releases.

How to include jQuery file in HTML code?

The src attribute in the <script> element is used to link the external jQuery file.

<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body></body>
</html>

Example jQuery code:

$(document).ready() method allows us to execute a function when the document is fully loaded,

$( document ).ready(function() {
      alert( "Clicked the link!" );
});

alert method will be invoked when clicking on anchor tag in HTML document.

$( document ).ready(function() {
   $( "a" ).click(function( event ) {
      alert( "Clicked the link!" );
  });
});

For click event here and most other events, you can prevent the default behavior by calling event.preventDefault() in the event handler.

What are the jQuery Features?

DOM Traversal and Manipulation: jQuery has libraries for DOM manipulations. html content of div element with class 'heading' will be updated as "Heading".
```
$( "div.heading" ).html( "Heading" )
```
Event Handling: provides the libraries to define event handlers for elements or tags.
```
$( "#btn-submit").on( "click", function( event ) {
// .. define statements
});
```

AJAX support libraries

 
$.ajax({
  url: "/api",
  data: {
  input: ""
 },
 success: function( result ) {
 $('#element_id').html(result);
}
});

Animations: jQuery comes with more built-in animation effects which can be used in websites.
Cross Browser Support: jQuery is working in multiple browsers.
CSS3 supports and light weight libraries.

Example HTML document with jQuery Code

<html>
   <head>
      <title>The jQuery Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script type = "text/javascript">
         $(document).ready(function(){
            alert("Hello jQuery!");
         });
      </script>		
   </head>
	
   <body>
      <h1>First document!</h1>
   </body>
	
</html>

Output: