Post
Ask Question

jQuery Library

Introduction
  1. jQuery is a JavaScript library which is free and open source.
  2. jQuery makes the task of making interactive and creative web pages easier.
  3. With all the JavaScript code already written in this library, we have to write fewer lines of code. Hence, it is known as "The write less, do more, JavaScript library" 
  4. Traversing through the document, animations, ajax interactions and event handling can be done with extreme ease using jQuery.
How to use jQuery library?

Just as you include JavaScript in your page, you need to include jQuery library in your page, using <script> tag. Anyone can download jQuery and use it for free. Alternatively, one can use CDN too. (CDN is Content Delivery Network using which you can include external libraries into your application, using the links to the servers where they are located)

If you are using Visual Studio, you can also include the jQuery using the NuGet Package Manager.

I will show you both the ways in which you can include jQuery library in your code.

Method 1: Downloading and Including

First, download the jQuery library. You can download the compressed production version from here.

Once downloaded, put it in the same folder where your HTML code is present. In the HTML code, you can include it using the <script> tag, as follows:
  1. <script href="jquery-3.0.0.min.js"></script>  
Method 2: Using CDN
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>  
Check whether jQuery is correctly included or not, by writing a Demo Program:
  1. <html>  
  2.   
  3. <head>  
  4.    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>  
  5. </head>  
  6.   
  7. <body>  

  9.    <div id="demo"></div>  

  11.    <script type="text/javascript">  
  12.       $(document).ready(function(){  
  13.          $("#demo").html("Hey jQuery is working");  
  14.       });  
  15.    </script>  

  17. </body>  
  18.   
  19. </html>  
Output


Type the above code in your editor and view the result. For now, don't worry about the script. We will understand the script in detail, in my next article.