What is jQuery and explain basics about JQuery
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?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 you can do with JQuery?
In summary JQuery is smart javascript library which allows you to do complex javascript code in a minute. It has also capability of performing AJAX Operations. Here are Few examples of Jquery usage in real life application
Example 1: You can use JQuery to show tooltip on textbox focus.
Example 2: You can perform Photo Corp using JQuery
Example 3: You can fill cascading dropdown using Ajax JQuery In Below example, When you select country, it will fill state/region drop-down and when you select state/region, it will cities based on values in database using JQuery Ajax web service call.
Example 4: JQuery Homepage slider, which is very common now a days on many websites homepage.
Example 5: Autocomplete JQuery Textbox.
And the example list goes on and on.
- You can do various effects with JQuery
- You can have all controls like Asp.net Ajax Control toolkit with JQuery UI
- You can use various third party plugins to do various stuff and much more...
What is use of JQuery?
What is use of JQuery?
Advantages of using JQuery in web application?
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.
