This article will explains JQuery and also familiarize about JQuery like what is advantage of using JQuery and why to use it in web application.
What is JQuery?
It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
What is use of JQuery?
JQuery is used in web application to improve user experience.
Advantages of using JQuery in web application?
1. It Improve the performance of the web application
2. It is light weight
3. Its language independent - It can be use with many different language, eg: Asp.Net, PHP, HTML, JSP,etc
4. It is browser compatible - Runs in most browser.
5. It is easy to learn - it uses javascript syntax.
6. You can do complex UI functionality with few lines of code.
7. You can implement ajax within your web application. It can be used to avoid round trip (avoid page post back) yet able to perform database operation.
8. It is open source library, which is also officially integrated in visual studio 2010.
9. You will find lot of JQuery functionality shared other developers, which helps you to avoid in reinventing the wheel.
And much more...
Where to download JQuery?
http://docs.jquery.com/Downloading_jQuery
If you want you can avoid downloading JQuery file and simply use from CDN (Content distribution network) link for google CDN
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Tips: While adding JQuery try using min version (Example: jquery-1.6.2.min.js), which is less file size, since space and line break are removed from that. This will help in faster loading of file and also improves performance of web application.
How to use JQuery in Asp.net Web Application?
Creating your first Hello World application in JQuery
Step 1: Open Visual Studio
Step 2: Create a new web application project (Web site...)
Step 3: Open master page of your web application.
Put this line of code, above </head>
<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Above line adds JQuery library reference to your web application, in simple terms with above line you web application understands JQuery syntax and work accordingly.
Step 4: Put following line of code in you content page inside <asp:Content>. Below line will display "Hello World" alert when page loads.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert("Hello World");
});
</script>
Understanding $(document).ready(function ()
If you want an JQuery event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
$(document) - means page on which JQuery code lies.
.ready() - means page is loaded and your JQuery code is ready to be executed.
And for that reason you may find that most of JQuery code lies within
<script language="javascript" type="text/javascript">
$(document).ready(function () {
JQUERY CODE GOES HERE
});
</script>
So finally you will be able to display alert on page load in your asp.net web application with JQuery.
May be this question might comes to your mind, I can show "Hello World" alert without using JQuery then what is fun of using JQuery?
Well its too early to judge, since this article is for beginners i have explained with simple example there is lot more coming. Please refer to my other upcoming JQuery tutorials.
For your JQuery practical practice, You can
download JQuery Demo Site which will contain all tutorials discuss combined in one vs.net 2010 project.
Back to
JQuery Tutorial Index
