01- jQuery Introduction

Introduction

jQuery is a JavaScript library that makes the use of JavaScript easier and simpler. There are many people who still think that jQuery is a software to be installed on the computer or a new programming language, but it is not. It is just a library that is very fast, light-weight and feature-rich. By using jQuery, you can implement much critical functionalities that you would have to write hundreds of lines of JavaScript with one or two lines of code. This will make coding so faster and also result in simple and cleaner code. However, this does not mean that jQuery is a replacement to JavaScript. It simply enhances the productivity of the developer by writing less and doing more.

jQuery Referencing

Being a JavaScript library, you need to reference jQuery before using. You can reference it either offline or online. If your Internet connection is not that stable, you can download jQuery from the official website “http://jquery.com/download/” and add reference to the required file in your .html or .js file you plan to use jQuery. If you visit the site, you could find two versions of jQuery, jQuery 1.x and jQuery 2.x. Though the core functionality of jQuery remains the same in both these versions, it is always better to download the latest version of jQuery. Obviously, the latest version will have more enhanced features.

Under each version, you could find a production version and a development version. These versions are exactly the same when it comes to functionalities. The only difference is in their performance. If you download both of these files and see the file size, you could find a huge difference. Suppose you download the production and development versions of jQuery 2.x, you could find that the file size of development version is 241 KB where as the size of production version is only 84 KB. Hence, if you are referencing the production version, your page will load lot faster than referencing development version.

Suppose you downloaded the jQuery file, say jquery.js, and saved it inside the folder D:\jQuery and you want to add a reference to it from D:\MySite\index.html file, then inside the <head> section of the index.html file, you should have the following line of code:

    <script src="D:\jQuery\jquery.js"></script>

Of course, the path will be different based on where you have saved the jQuery file.

To reference it online, just add the following lines of code:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Sample Code

<html>
 <head>
  <title>Sample</title>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function() {
    $("#btnClick" ).click(function() {
       alert("You clicked me!!" );
      });
    });
  </script>
 </head>
 <body>
    <button id="btnClick">Click Me!!</button>
 </body>
</html>

We will see how jQuery code works in the coming chapters in detail. This is just to give you a feel of how jQuery looks like. You might be finding the code very complex to understand. In fact, jQuery is very simple to understand and easy to code. Copy the above lines of code into an empty file and save it as a .html file. Of course, make sure that you download the latest version of jQuery file from the official website and save it in the same folder where this .html file resides with the name jQuery.js (you can rename the jQuery file you download the way you want because the name of the downloaded file is too lengthy including its version details). Open the file using your browser and you will get the output.

You might not find a difference in the number of lines of code as this is a very simple example. But as we start implementing complex functionalities, you will find the difference.

Summary

In this tutorial, we have seen what jQuery is. To code using jQuery, you need to have the basic knowledge of HTML, CSS and JavaScript. If you are a JavaScript expert, you will be really fascinated to see the fewer lines of code that implement even complex functionalities. We are going to do wonder using jQuery in the following chapters.

Like us on Facebook