jQuery Setup Development Environment

  Total Views : 240
  Comments : 0
  Keywords : We can use jquery in our web applications by directly downloading or including jquery from a cdn

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
  • Referencing a jQuery from CDN, like 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. 

Referencing 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.

 

Following are the examples of using jQuery from Google and Microsoft CDN’s.

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>

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. 

 
 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User