jQuery Setup Development Environment

Here we will learn how to install jquery or setup jquery development environment to use jquery in our web application with examples.

jQuery Setup Development Environment

In web applications we can use jQuery in two different ways, those are

 

  • Direct download
  • Refering a jQuery from CDN (Google, MAXCDN)

Direct Download

We have a two versions of jQuery libraries available for downloading, those are full (uncompressed) and minified. We can include any of these versions based on our requirement. 

 

The full (uncompressed) version contains the proper description of each method along with the comments. It is user friendly and also gets easily debugged, but slower to load and heavier as compared to the minified version. This should be used mainly in the development process.

 

On the other hand the minified version eliminates any unnecessary spaces and comments and hence is not so user friendly. This loads faster and is much lighter than the full version. So this version should be used when your project goes live. We can download both the versions from jQuery.com url. 

 

Download the latest version of jQuery library (jquery-3.2.1.min.js) from jQuery.com and add that downloaded file to your web root directory.

 

Now add the path of downloaded file in header (<head>) section by using src attribute of the <script> tag like as shown below

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery Example</title>

 

<script src="~/jquery/jquery-3.2.1.min.js"></script>

 

</head>

<body>

<div></div>

</body>

</html>

If you observe above <script> tag, we skipped adding attribute type="text/javascript" because JavaScript is the default scripting language in HTML5 and all modern browsers. 

Referring jQuery from CDN

In case ,if we don’t want to download the jQuery library, then we can directly add it to our webpage by referencing it from public CDN (Content Delivery Network) such as Google, Microsoft, CDNJS, MAXCDN like as shown below.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery Example</title>

 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 

</head>

<body>

<div></div>

</body>

</html>

Here we used MAXCDN jQuery library same way we can include Google, Microsoft or any other public CDN network.

jQuery CDN from Google

Following is the example of referring a jQuery file from Google CDN.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery Example</title>

 

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

 

</head>

<body>

<div></div>

</body>

</html>

jQuery CDN from Microsoft

Following is the example of referring a jQuery file from Microsoft CDN.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery Example</title>

 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

 

</head>

<body>

<div></div>

</body>

</html>

Generally, the CDN’s will provide a performance benefit by reducing the loading time, because the jQuery files hosted on the multiple servers which are spread across the globe so when a user requests the file, it will be served from the nearest server to them.

 

Once we request a webpage and load a jQuery from CDN’s, then that file will be cached in browser. In case if we request a same web page, then the jQuery file will be loaded from cache instead of downloading again from CDN. 

 

In next chapters we will learn how to use jQuery in our web applications with examples.