In this series, we will have a formal introduction to JQuery with a simple Hello World
Table of Content
- Introduction
- Background
- What is JQuery?
- Useful Features of JQuery-Why it has become so popular?
- Let us see our first JQuery Program-"Hello World"
- Let's get familiar to the new JQuery syntax
- How JQuery works?
- How to debug JQuery?
- What are the ways to include JQuery library on the page?
- Conclusion
Since the last few months I have been working in JQuery and has gained some knowledge which I wanted to share here especially for those who are about to start learning JQuery from more of a step by step approach as well as for those who has done some basic JQuery works but did not got much exposure to it and wanted to learn more or refresh it.
JQuery has now become a defracto client side scripting language and has become a necessity rather than luxury to become familiarize with it.Working with JQuery for sometime gave me real pain as well as pleasure but I want to share the learning with you all through this tutorial.I have found many peoples who have interest in the JQuery side, but didn't get any chance to work with because of many reason(may be they are not getting the exposure in their work field, lack of time to spend on the subject, frequent movement of projects etc.). Henceforth, I thought of writing this article where basically I will talk about those features which I have touched upon as of now in my real time project. I will try to compile this article more of hands on approach so that people can refresh/learn by looking into it.After all, one picture is worth a thousand words. This "Let us learn JQuery" will be a series of article on JQuery.The full series is comprised as under :
- JQuery - A formal introduction using "Hello World"
- JQuery Selectors
- JQuery Traversal
- CSS with JQuery
- Javascript for Designers
- The plugin architecture is nice for extensibility.
- It is faster,easier to use and comparatively productive than traditional JavaScript
- The amount of code we need to write is comparatively less
- It is free open source software.
- Helps in producing dynamic websites.
- Instead of downloading the jQuery files and adding the same in the project, we can also reference the files directly using a Content Delivery Network (CDN).Refer Visual Studio jQuery Intellisense over CDN for more on this.
Well, as we know that it is better to start with the very simplest program available in the world i.e. "Hello World".This tutorial is also not a exception.So let's start.
Step 1:Let us open VS 2010
Step 2:File->New->Website->Asp.net Website. Give a suitable location and click on OK button.The website will be created for us.Now looking at the default project structure , we can make out that inside the "Scripts" folder, the JQuery files are available.
These files are a little older.So we can always download the latest version of JQuery from here.Let us download the "jquery-1.7.2.js" file and add the same into the "Script" folder
Step 3:Add a page called "HelloWorld.aspx" and delete the other dafault pages.After cleaning up, the project structure should now look as under
Step 4:Add a button control to the Page as under
<asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />
Step 5:Add the below script inside the "Head" tag
<head id="Head1" runat="server">
<title>Hello world program using JQuery</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js" temp_src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var btnObject = $('#btnSayHello');
btnObject.click(function () {
alert("Hello World...My First JQuery Program");
});
});
</script>
</head>
Step 6:Run the application and click on the "Say Hello" button to get the below output
Cool.The target achieved..right?.But there are a lot of new things on the plate like
- Dollar($)
- $(document).ready()
- A new syntax altogether.What are all they?
Nothing to worry!.These seems to be little difficult to grasp at the beginning but once use to it will be very simple to use.And moreover, we are here to learn.So we will surely learn it but with patience.
Case 1: Using $(document).ready(handler)
The basic syntax of JQuery will be
$(document).ready(function () {
//Some DOM manipulation code
});
The Dollar Sign($) is an alias for jQuery.This is also call as $ function. We can even write the above JQuery syntax using jQuery.That means the above and below will both work
Case 2: Using jQuery(document).ready(handler)
jQuery(document).ready(function () {
//Some DOM manipulation code
});
Case 3: Using $(handler)
$(function () {
//Some DOM manipulation code
});
Case 4: Using $().ready(handler)
$().ready((function()
{
//Some DOM manipulation code
});
The $ function returns a special document object.The JQuery selector($)(as it is also call) selects which DOM objects and elements to return.
Prior to JQuery, we used to take the help of document object's getElementById method and passed the element name to it.e.g.
var btnObject = document.getElementById('btnSayHello');
But the JQuery Dollar Function($()) retrieves the object using a reduced code
var btnObject = $('#btnSayHello');
The (document).ready() function indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts of the page content(e.g. images/other external resources) are not fully loaded.As soon as the DOM is loaded, everything inside the (document).ready() should be load even before the page contents are loaded.We pass a JavaScript function to the ready() function of the docuemnt object which is being return by the $ function. The JavaScript function that being passed inside the ready function is executed as soon as the DOM gets ready.
N.B.~It is worth mentioning at this juncture that the onLoad function for the window object executes after the entire page is fully loaded.Untill DOM tree is completely created and all images/other associated resources (like audio files,video files etc) are fully loaded,this onLoad function is never executed and hence thescript execution needs to wait till the page is loaded.It is because of this reason that JQuery code runs faster
For more information on this topic, we can go through Introducing $(document).ready() tutorial.
Typically, JQuery undergoes the below actions for execution:
- Wait for the DOM of the page to be ready.
- Finds the appropriate HTML elements that needs to be acted on by using selector.
- Add event handlers.
Let us describe the above process with an example
//Step 1: Wait for the DOM of the page to be ready.
$(document).ready(function () {
//Step 2: Finds the appropriate HTML elements that needs to be acted on by using selector
var btnObject = $('#btnSayHello');
//Step 3: Add event handlers (Here click events)
btnObject.click(function () {
alert("Hello World...My First JQuery Program");
});
});
- Placing debugger keyword
- Inserting a break point after attaching worker process
There are a number of ways of including JQuery library on the page.They are as under
- Refer to a local copy using the <script> tag.The file is provided by JQuery foundation which supports the development of JQuery.e.g.
<script type="text/javascript" src="Scripts/jquery-1.7.2.js" temp_src="Scripts/jquery-1.7.2.js"></script>
-
Refer to a remote copy on JQuery.com or the remote copy in the Google AJAX API.This kind is call as Hosted JQuery library where the JQuery library is hosted with the parent companies e.g.
| Parent Company Name |
Hosted Site |
|
| Microsoft |
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js |
| Google |
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js |
The advantage with Hosted JQuery library is that we can run it directly from the Content Delivery Network (CDN) as along as we have an internet connection.e.g.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" temp_src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
- Refer to a local copy using Script Manager Control
- Refer to an embedded script using the ClientScript object
It was just an introductory part about JQuery which gives a feel about the technology, it's importance, why to use it, the basic syntax and a simple working example as how to work with it. We will take it forward from here and will learn more in subsequent articles.Thanks for reading