Creating your first application in JQuery
Creating your first application in JQuery
Creating your first Hello World application in JQuery
Step 1: Open Visual Studio and create a new web application project (Web site...)
Step 2: Open master page of your web application and add a reference to your jquery file
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
Above line adds JQuery library reference to your web application and then you can all the jquery syntax and functionalities present in this jquery file
Step 3: Insert your JQuery code within the script declared in step 2.
There are two ways you to execute your JQuery code.
As and when page loads, execute the JQuery code:
rsp160 rsp160 rsp160 <script language="javascript" type="text/javascript">
$(function () {
$("#div1").css("border", "2px solid green");
});
</script>
or
<script language="javascript" type="text/javascript">
$("#div1").css("border", "2px solid green");
</script>
The benefit of executing JQuery code in this way is that it doesn’t wait for the whole page to load completely, so in case you want the user to see the effects as soon as the corresponding elements are loaded, you can use this.
However the disadvantage is that if the element on which JQuery has to execute has not loaded, then it will error out and you will not get the desired result; so while using this way of executing JQuery code, you will have to make sure that the element on which you want to work with JQuery is loaded first.
Execute JQuery only when the complete DOM objects (the complete page has been loaded). You will have to wrap your code in .ready function.
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript">
$(document).ready(function () {
alert("Hello World");
});
</script>
This is the better and safer way to execute JQuery. This makes sure that JQuery code will execute only if complete page has been loaded in the browser.
Loading jQuery from CDN
What is CDN?
CDN Stands for Content Distribution Network or also called Content Delivery Network is a group of computers placed at various points connected with network containing copies of data files to maximize bandwidth in accessing the data. In CDN, a client accesses a copy of data nearer to the client location rather than all clients accessing from a single web server. This helps in better performance of data retrieval by client.
There are two leading CDNs available that host jQuery files.
Microsoft - to load jQuery from Microsoft AJAX CDN
jQuery file can be loaded from Microsoft AJAX CDN. More details are available here <https://www.asp.net/ajaxlibrary/cdn.ashx>. You will need to keep the following tags in your page.
rsp160 rsp160 rsp160 <script type="text/javascript" language="Javascript"
src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
Google - To load jQuery from Google Libraries API
A jQuery file can be loaded from Google CDN <https://code.google.com/apis/libraries/devguide.html>. You will need to keep the following tag in your page.
rsp160 rsp160 rsp160 <script type="text/javascript" language="Javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
Why to Load JQuery File from CDN?
You may ask that if we can load the JQuery file from our own server, why load it from the CDNs. The answer is logical and very simple. The browser behavior is that whenever it loads any webpage, it keeps related files (e.g., JavaScript file, CSS file and Images) used for that page into its cache. Next time when the user browses any web page, browser loads only those files that are new or modified and is not available in the browser cache or history. In this way, browser improves its performance and loads only the part of the page rather than the whole page.
The possibility is that if more and more websites are using CDNs, the user might have already browsed some other web pages that are using CDNs JQuery file and that file may be already residing in the browser cache; so when user browses your page and you are also using CDNs file, the older cached version of JQuery file will be used. In this way, your page will load faster as browser will not have to load the JQuery file for your page again.
The benefits are as follows:
Faster page load as JQuery file need not be downloaded
Saves your bandwidth as JQuery file is not loaded from your server
Scalable - generally CDNs place these files on the servers located at different geographical locations of the world so that they load faster so irrespective of from where your user is browsing your page, your application runs well.
What if the latest jQuery version is available and I am still referring to the older version of jQuery file from CDNs?
Do not worry about it, it’s a general promise made by CDNs that they will keep hosting the older version of the files on the same location; so even if newer version of the files are released, the older version remains there on the CDNs and your web page still works.
How to Load Local jQuery File in Case CDN is Not Available?
Sometimes, it may happen that the CDN you have used to load the JQuery file is not available (it rarely happens, however anything is possible, isn’t it?); in that case you should load your local JQuery file that is available on your server so that all JQuery related functionality still works on your page.
Write the following lines of code:
rsp160 rsp160 rsp160 <script type="text/javascript" language="Javascript"
src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
<script type='text/javascript'>//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript
src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]>
</script>
As you can see above, first line tries to load the JQuery file from CDN. If browser loads the file successfully, "JQuery" variable will not be undefined and next line will not run otherwise next line will run which will direct your browser to load the JQuery file from your server.
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
JQuery FAQ and Jquery Effects
Working with forms-Jquery form selector
Manipulating Elements and Animations Using Jquery
Select Groups of similar elements using position selector
Creating your first application in JQuery
Jquery features, Advantages and disadvantages
Playing with HTML using Jquery
Call .net service from javascript
Simple Ajax client server Example
Appending Html elements or contents dynamically
Post Comment