I have been hearing about jQuery from the day it is introduced. My thought was ,it is just a javascript library and who wants it, where I have my favorite Silverlight with C# support & Flash. They served all the needs at client side / browser and I didn’t even cared about creating a sample using jQuery.
But now things changed with the arrival of HTML 5.It has so many capabilities which I thought a RIA can only support.What does that mean? Death of RIA technologies such as Silverlight & Flash? Most probably they will.If the normal HTML page is capable of rendering the rich web contents who will go for a third party RIA application?
That is about the UI.The story never ends with UI alone.What about the interactivity? That is the main attraction of RIA technologies.When HTML 5 comes how the interaction will take place? Obviously we need to write code to get the interaction.So in those days the hero will be javascript which is a good friend of HTML from the very beginning.
Next question.How much code we need to write to accomplish UI interactions like what Silverlight and Flash giving to us right now? Its a big .So what a normal developer will do? He just creates a library which is reusable in all his projects.That is what jQuery javascript library means.
If you still didn’t understand the importance of jQuery, here is the last sentence.Once the HTML 5 is in place we need javascript to make the page interactive and jQuery will help us to write less code to achieve more functionalities.We can also expect ASP.Net 5/6 emitting HTML 5 contents with stunning animations :-)
The main motivation to write this post is a seminar conducted in our company about jQuery.One of my colleagues explained it very well.
What is jQuery
jQuery is just a javascript library ie a .js file containing some functions and classes which helps the developer to write minimal code. For example lets consider the scenario of changing the width of a div on a button click.
The normal js code.
<script type="text/javascript"> 1: function btnIncrease_Click() { 2: div1.style.width = "400px";
3: }
</script>
<body>
<div id="div1" style="width:100px;height:63px; background-color:Red" ></div>
<input type="button" name="btnIncrease" value ="Increase size" onclick="btnIncrease_Click()" />
</body>
The jQuery equivalent
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 1:
2: btn1<script type="text/javascript">$(document).ready(function () { 3: //$("#div1").fadeOut("normal", function () { }); 4: $("#btn1").click(function () { 5: jQuery("#div1").width("400px"); 6: });
7: });
</script>
<div id="div1" style="width:100px;height:63px; background-color:Red" ></div>
<input type="button" id="btn1" name="btnIncrease" value ="Increase size"/>
Its very simple in the first look if you are good in javascript.We are including a js file which is the jQuery library and using the ‘$’ symbol. We are calling the functions inside the library.The event subscription of the button.click,we are doing in the documentReady event.#btn1 will translate to the btn1 object and on its click we are changing the size of the div.
Ok.Let us think in another way.If you have 10 divs which are using same style class how will you change the size of all those divs? The jQuery implementation is given below.
<script type="text/javascript"> 1:
2: $(document).ready(function () { 3: //$("#div1").fadeOut("normal", function () { }); 4: $("#btn1").click(function () { 5: jQuery(".divStyle").width("200px"); 6: });
7: });
</script>
Its very simple use .divStyle as the parameter and its done.
Visual Studio & Intellisense
I am from the Visual studio environement and I would like to be in it.So I obviously look for the VS intellisense support .And it is there if you use the vs specific version of jQuery.
jquery-1.4.1-vsdoc.js
In VS2010 if you create a new ASP.Net project you can find the jQuery library in the scripts folder.The above picture shows 3 js files for jQuery which does the same job.If you use jquery-1.4.1-vsdoc.js you will the the intellisense as shown in the image.
Don’t confuse with the $ symbol which is there in the jQuery like me.Its just a variable.You may use jQuery instead of $.See the js file if you want to change it to your name.
if you are non Visual Studio developer download the jQuery library from http://docs.jquery.com/Downloading_jQuery
