I’m going to demonstrate a few basic jQuery stuff that you should know before delving into jQuery. If you are new to Javascript you need to be starting here[link]. This might help[link] too. The audience for this tutor are ideally JavaScript novices who want to make a start with jQuery.Let’s start by understanding this small example -
the window.onload() event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Basics</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ alert("Hello JavaScript!, document Loaded."); }
</script>
</body>
</html>
Now, As you are already aware, the window.onload event is fired when the HTML window loads. In the above code, look at the Javascript, on window.onload() event, we are calling a function, which alert’s the text “Hello Javascript!, document Loaded.”. This code usually runs smoothly unless for instance, if you are loading a lot of images, Then Javascript code isn’t run until all images have finished loaded, including banner ads etc.
Now, We have an interesting problem, In your window.onload() event, if you want to manipulate your document,( which is essentially the HTML DOM (document object model) ), then your document hasn’t loaded yet and your Javascript might not work correctly.
In order to over come this problem, jQuery gives you a basic construct the - ready event which looks like
$(document).ready(function(){
//Your Javascript code here..
});
Let’s now quickly try an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Basics</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("document has loaded, you can execute your js here..!");
});
});
</script>
</body>
</html>
First thing to note is that above example links to Google’s CDN to load the jQuery core file. You can download the latest version of this file from the jQuery website.Here, the alert statement is guaranteed to work only after the document has finished loading.
jQuery CSS example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Basics</title>
<style>
label.test {font-weight: bold;}
</style>
</head>
<body>
<label>This is a label</label>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("label").addClass("test");
});
</script>
</body>
</html>
Here, we use the .addClass method to the label element to add a css class. Notice that this code is placed inside the $(document).ready(function(){}); To remove the class ‘test’ for the label element, replace the addClass(“"test”) with the removeClass(“test”);
jQuery Effects example
jQuery Effects example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Basics</title>
</head>
<body>
<labe>This is a label</label>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("label").click(function(){
$(this).hide("slow");
});
});
</script>
</body>
</html>
Click on the label and notice that it slows disappears.
jQuery Callback example
The syntax for executing a callback with no arguments
$.get('myhtmlpage.html',myCallBack);Here, the function myCallBack() is executed after the page ‘myhtmlpage.html’ is got from the server.
What the above Javascript code is doing is, It’s registering the function ‘myCallBack’ (notice that when you write it, it’s without () ), to the get event. i.e ‘myCallBack’ will be executed after the get is done.
Now, Consider a scenario wherein you need to register a callback function by passing arguments.
Do not try doing this, this is Wrong
$.get('myhtmlpage.html', myCallBack(param1, param2));The above line won’t work because, myCallBack(param1,param2) is executed before it’s registered. In other words, The returned value of myCallBack(param1, param2) is registered as a callback function, which is not write.Javascript is expecting a function pointer here. so, the right way to do this will be to enclose myCallBack(param1, param2) with function(){ }. Yes, you guessed it, that’s the anonymous function. (I’m really really found of this Javascript feature, sometimes it makes me think, that’s where languages like C# got the ideas from, C++ is an obvious choice 
)
)$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
In the above example, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of 'function(){'. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.
I’ll soon be writing more on jQuery and jQuery UI which i’ve started to use extensively off late. The following is worth reading for more.
Next Steps
1. Process Explorer 
