In this article I will start with basic of the client side web development using the Jquery library. This article should help you to getting started with UI development
You should have basic understanding of Javascript. For Javascript articles you can go to this link.
In this article I will discuss:
- Why to work on Jquery
- Downloading Jquery API
- Including jquery API in the Application.
- Including Jquery from CDN
- How to create a jquery object.
- Difference between window.onload and $(document).ready() functions
Why to work on Jquery
- Single Javascript File
- Works across all the browsers. Handles the events, ajax calls or finding things in DOM.
- Works with the most powerful language feature based on selectors.
- Easy to create a Jquery object on any of the DOM object and work with it.
- Lots of plugins available to do complex stuff which otherwise will take huge time.
- It really makes client side development fun.
Download the Jquery API:
We can download the latest version of the Jquery API from this link. There you will find two versions. One is the compressed and other one is uncompressed. Compressed version can be used for the production code for limiting the download size. Uncompressed is the version which we can use for development purpose which is more easily understandable.
Including jquery API in the Application:
Once we have downloaded the js file from the link mentioned in the previous section. We need to include the Javascript file in the HTML page where we want to use jquery API.
I have created a new Visual Studio web project. I have created a project of type ASP.NET Web Application. And Selected Empty from the ASP.NET Template. I have named the project as JqueryStart. I have added a blank html page named Home.html. Please check the below figure for project structure.
I have added a folder named Scripts in the project. And kept the “jquery-3.1.1.js” file in this folder. This is the same file which I downloaded in the first part of the article.
We need to add the following line of code to be able to work with jquery in our html file. I have included the “Scripts” folder for the location.
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
Once added we are good to go and use jquery.
Including Jquery from CDN
Instead of loading the Jquery file from our own server we can load the script from other servers. These can be Google, Microsoft or any other remote server. We call these server Content Delivery Networks. There are many benefits of using CDN as source for Jquery. Some of them are listed below.
- If some site is using the CDN url for the script download and if we visit the site. The script is cached. If we are again going to some other siee which uses the same url, it can use now the cached script which was stored in cache while visiting the earlier site.
- The CDN data centers are scattered around the globe and it can give us some speed benefit by contacting the nearest possible data center for script download.
- The browser does not make parallel calls to the same domain. By providing a different domain we can leverage parallelism feature of browser, as we are loading the file from the different server then our web server.
Now there can be a case where we are not able to load the jquery file from CDN. The reason could be network issue or issue with CDN itself. In that case all the cool features of jquery won’t work. To address this issue there is a fall back mechanism provided which we can use.
As soon as jquery is loaded we have a Jquery object attached to the window object. We will use the same property for fallback. If the property is not present we will insert the location of the local jquery file in document. Please check the code below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script type="text/javascript" src="Scripts/jquery-3.1.1.js"><\/script>')
</script>How to create a jquery object.
As I have discussed, as the jquery file loads there is jquery object created for the window. We can use the same jquery object by wrapping the element inside it. We can use Jquery or $ to create a jquery object. Please check the code below.
jQuery('#myContent').html('Hello World');In this code I am creating the jquery object wrapper around an element named “myContent” which is s selector. I will discuss about selectors in my future posts.
Another way to create a jquery object is as shown below by using the $ sign.
$('#myContent').html('Hello World');Difference between window.onload and $(document).ready() functions
While working with jqeury we should be careful with DOM object. We should only work on these objects once the DOM objects are loaded. We can check if the DOM of the page is loaded by using the ready function provided and getting it for document object. This doesn’t wait until everything is loaded like CSS, images and all these types of file which is the case with window.onload method of Javascript.
I can start manipulating the DOM objects as soon as my document is ready and I should not wait for all the files to get loaded.
Please find the code of the Home.html file below which should be enough to get you started with jquery.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script type="text/javascript" src="Scripts/jquery-3.1.1.js"><\/script>')
</script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#myContent').html('Hello World');
});
window.onload = function () {
alert('Window loaded');
};
</script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="myContent">
My jQuery enabled Page!
</div>
</body>
</html>In my further article I will discuss about more about Jquery. I will cover about selectors, events and ajax calls using jquery.