My current project is a web part with a ton of that Web 2.0 goodness. The client wants a very rich user experience with lots of draggie droppie stuff. So my first thought was to do a quick prototype with ASP.NET AJAX and the AJAX Toolkit but I knew from past experiences the toolkit was very inflexible if it didn't do exactly what you wanted. And from talking to this client I knew they weren't going to scale down the requirements. So I downloaded and started using jQuery instead. I have been very pleased with what I have learned so far. First jQuery is just a JavaScript library and to include it in your project you just have to download the JavaScript file and include it on your page. So I liked that right away. The other cool thing is there are dozens of plugins (which are just more .js files) that you can add and leverage the functions in the plugin. You have the source so if you need to make modifications you can (flexibility). So I liked that as well.

Ok so now that the intro is out of the way one of the key principles in jQuery and Prototype is the concept of unobtrusive JavaScript. What this means is you don't mix JavaScript function calls within your html elements. The reasoning is similar to the reasons you don't or aren't supposed to mix inline styles in with your html. It is difficult to read and modify. So if we aren't suppose to do this then how do we create a click event on say a button. Take the following button:

<input type="button" id="MyButton" value="Publish" onclick="DoSomething()" />

Then of course in our script block or a .js file we would implement the DoSomething function. But what if we could wire the click event up when the page loads so we wouldn't even have to set the onclick property in our html. In jQuery (Note: you can also do this in Prototype and even plain old JavaScript) you can do this. Look at the following function that we would put in our script block:

$(document).ready(function(){

$("#MyButton").click(DoSomething);

)};

First what the hell does the dollar sign mean. The dollar sign, in JavaScript, usually represents a class. For jQuery, the $ represents the jQuery class which is a .js file that you will include in your page. You will see the $ used to start a selector a lot. The document.ready function gets called when a page loads. Then our button's id was MyButton so the #MyButton will select that element and wire the click event to call the function DoSomething.

I have several posts in the works over some jQuery concepts that include (I will post them here to motivate me to finish them) :

jQuery Basics – selectors and events
jQuery Links and Plugins Rollup
Mixing ASP.NET Controls with jQuery (or should you even try)
Ajax, WCF, and jQuery
Creating a Drag and Drop Sortable List inside a Modal Popup

Stay Tuned…