Here we will learn how to install jquery or setup a jquery development environment to use jquery in our web application with examples.
In web applications we can use jQuery in two different ways, those are
We have two versions of jQuery libraries available for download, those are full (uncompressed) and minified. We can include any of these versions based on our requirements.
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 the 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.
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 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>
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 the browser. In case if we request the same web page, the jQuery file will be loaded from cache instead of downloading again from CDN.
In the next chapters, we will learn how to use jQuery in our web applications with examples.