Tech Curry..: jQuery-Write Less Do More

Hi all, this is my first blog. I am highly intreseted in technical stuff and here to learn and share my thoughts. So, please provide feedback, comments or whatever you want. You can like it or kick it as well.

People must have heard about few emerging technologies. When we talk about people, we are refering to those who have interest in all these.

With this blog I am going to discuss one of the most emerging technolgies...JQuery.

I am sharing my thoughts here with taking a very basic introduction and how it works.

JQuery is a very fast javascript library that have a lot of advantages over traditional programming using javascript. Few of them are listed here:

1) Event handling,

2) Cross-browser indepedent,

3) Ajax implementation(the most imp),

4) Animation and many more....

Here I am sharing a simple example, which will give an alert message on click of a button and hopefully it may give a brief overview of jQuery.

First we have one html page having nothing but the jQuery file required to make our application compatible to it and name it as jquery.js.

<html>

<head>

<title>

First Jquery Example

</title>

</head>

<body>

<h2>Welcom to the world of jquery.</h2>

</body>

</html>

It completes our HTML part. This code is not having javascript part where we give alert message. Lets have code for this:

$(document).ready(function(){

$("#clickMeButton").click(function(){

alert("hi buddy!");

});

</script>

Wait- wait -wait....

I will explain lines one by one...

1)$():

$ is the representation of jQuery objet. That means $() will return you an jQuery object.

2) $(document).ready(function(){}):

In our traditional javascript programming, we generally write like this:

window.onLoad=function(){ alert("hi buddy!"); }

problem with this code is, java script code doesn't run until all images, ads and banners finished loading and we have to put behavioural markup in html. With $(document).ready(function(){}) this is not the case. Whatever is inside this, get fired before window loads. so it solves our above problems with traditional javascript code. This gives us the fastest effect i.e., as soon as DOM get registered in browser we get our things done(which also gives us some nice animations in our page).

2) $("#clickMeButton").click(function(){});

Here we select the button with its ID. This is the syntax for selecting control.

Tech Curry..

Thursday, August 12, 2010

jQuery-Write Less Do More

1 comment: