If you just want the annotated jQuery file download it here: jQuery with Intellisense comments. For more about it, read on!

I really like jQuery.  I might even say that I love jQuery.  It is a simple and elegant JavaScript framework.  The genius is that it realizes that what most people want to do with JavaScript is manipulate the DOM, and it makes doing that fun.  Look at this example from the jQuery home page:


$("p.surprise").addClass("ohmy").show("slow");

That will get all the p elements with the class surprise, add the class "ohmy", and then change the display to "block" with a slow animation. Go run it on the jQuery homepage.  Nice, eh?  The dollar function is magical.  You just give it a CSS selector, and it returns jQuery objects that you can do all kinds of cool things with.  Also, almost all the functions in the framework return this same jQuery object, so they are chainable like you see above.

Now, I also really like ASP.NET, and with the new ASP.NET MVC Framework coming out, I might even say that I love ASP.NET.  I would really like to use jQuery in my ASP.NET projects, but it has never worked too well.  The JavaScript intellisense features of VS 2008 wouldn't work right.  When Visual Studio 2008 was released, it came with better support for JavaScript.  Unfortunately, it did not work with jQuery, but after only a few months, Microsoft released a "Hot-Fix Roll-Up" patch.  This will make the intellisense work with jQuery, and fix some other things.

In order for you to get all the great hints in intellisense, you need to have XML comments in your JavaScript.  So I spent yesterday afternoon commenting jQuery, and it is awesome!  Download it yourself.

All you have to do to use it is include it in a script reference in your page, and add a reference comment in your .js file.  So in your HTML you'll have this under the head element:


  <script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>
  <script src="your.js" type="text/javascript"></script>

Then in your.js you'll need to tell VS about the jquery-1.2.3-intellisense.js file like so:


/// <reference path="jquery-1.2.3-intellisense.js" />

Now you'll have all the intellisense goodness for jQuery available in your.js.  You won't want to deploy the jquery-1.2.3-intellisense to production since it is quite a bit larger than the minified version, but for development it should work the same as jquery-1.2.3.  I didn't change any of the code, although in some cases it would have made for better intellisense.  Which brings me to my next point.

I couldn't get everything to work due to the way the library is written, and the JavaScript comments work.  For instance, some functions like append() in jQuery don't have parameters specified.  The functions still expect arguments, they just use the "arguments" array instead of formal parameters.  Another problem was that for serveral API functions, only one implemention is used.  For example the event helpers such as blur(), click(), focus(), etc. that fire events are the same function in jQuery.  For these, I've just written a generic XML comment.

I'll be speaking at Boise Code Camp on March 8th about using jQuery with ASP.NET.  It will be mostly an introduction, with a walk-through on changing a plain old contact form, into a fancy-schmancy AJAX one using jQuery.  So if you're around stop by and say hi.  This was my first blog post, and Code Camp will be my first speaking engagement so some things may still be a little rough around the edges.  The nice thing about Code Camp is that you don't have to be invited to speak :)

posted on Tuesday, February 12, 2008 10:49 AM |

Comments

2/15/2008 8:18 AM

Great work getting this file out there so fast after the VS patch!

I do worry though that with this approach you;ll have to manually patch in the documentation to each new release of JQuery. Also, there are certain methods that you simply can't comment, given the way JQuery uses closures to produce multiple methods from a single source function. I've just blogged (http://blogs.ipona.com/james) about how we've approached those problems with an auto-generated stub file (see link). Be interested to hear what you think...

2/27/2008 10:07 AM

Sorry for my bad english..
Apparently, both, yours and Brennan's stubs, works fine, being yours more complete (thanks both anyway), but I have noticed a bug, a problem, I don't know.
When you type your code like this $().css().add().parent(), intellisense works fine. But when you use the width() or height() function, intellisense stops working after the function.
Something like $().width().INTELLISENSE?? Lol! Weird.
Hope you all have a solution, I haven't too much knowledge at this to solve myself (yet! ;D). Thanks anyway.

2/27/2008 1:14 PM

Hi vFragoso, thanks for finding this. I must have missed those two functions while adding the comments. I've updated the file.

Those two functions actually share the same code in jQuery, so they have the same comment. You can see how I added it if you scroll down to line 1584. The comment I added tells the intellisense engine that these functions return the jQuery object, so the method chaining will work.

2/28/2008 5:30 PM

Nice work Lance! And thanks for the reply. I guess jscript intellisense in VS still needs a lot of improvements to get even close to C# or VB intellissense.

I guess if Microsoft adds some way to give multiple descriptions to one functions, like:
1. Gets computed pixel width..
2. Sets css width to..
Letting us to chose with those little cool arrows (like in C# intellisense)

It would be really useful, allowing us to define parameters, or not for each of these definitions.

Something like:
<definition>
<summary />
<param />
</definition>
<definition>
<summary />
<param />
</definition>

Anyway, thanks Lance. Nice job you are doing.

4/27/2008 9:55 AM

Thank you, I'm an avid jQuery user who is an ex-webform user and now dedicated asp.net mvc user.

This is a perfect fit!

4/30/2008 9:36 AM

@Steve, I think jQuery and the ASP.NET MVC Framework are a great match. I'm really glad Microsoft is introducing the MVC Framework. I probably would be looking more seriously at other platforms if they hadn't. I like having the control over the markup and the freedom of easily using other Javascript libraries.

Post Comment

Title *
Name *
Email
Url
Comment *  
Please add 5 and 6 and type the answer here: