jQuery and Visual Studio

Cool Stuff! Microsoft has announced that they will be shipping jQuery with Visual Studio going forward.  For more information on this announcement, you can refer to Scott Guthrie’s or Bertrand Le Roy’s announcement.  It will be licensed under the MIT license (as it is now) and will not be altered from the original source.  The one feature that will be added is Visual Studio IntelliSense  which is an excellent feature to have “built-in” rather than having to “hack” it.  One thing to note is that this isn’t a replacement for the Microsoft ASP.NET AJAX Library.  This is simply an addition which will compliment the existing ASP.NET AJAX Library and as you can see, everything plays nice together.

jQuery Overview

Perhaps you haven’t heard of jQuery?  Hard to believe :), but anyway… In short, jQuery is a popular JavaScript library that allows for many cool features that make JavaScript coding easier, for example:

• The ability to get elements using CSS-type syntax.  In CSS we are able to select things by class name for example, “.myClass”.  You can now do this in JavaScript as this example shows:

  $('.myClass').doSomething();

  This is a simplistic example, but if you think about this feature, it’s very powerful.  jQuery supports a wide array of CSS selectors including some of their own.   (Note, that the jQuery CSS selectors are NOT reliant on those actually found in CSS. So this means you could use something like: input[type=text] in an older browser without any worry since all of this logic is built into the jQuery source).

• The ability to chain methods, for example, you are able to convert something like this:

  var startDateInput = document.getElementById('startDate');
  startDateInput.doSomething();
  startDateInput.doSomethingElse();
  startDateInput.yetAnotherFunction();

to this:

$('#startDate').doSomething().doSomethingElse().yetAnotherFunction();

• The ability to easily add effects, such as sliding, toggling, fades, etc.  We’ve all written code that would hide an show an element, for example (this example taken from http://snippets.dzone.com/posts/show/1721):

  function toggle(){
      var div1 = document.getElementById('div1')
      if (div1.style.display == 'none') {
          div1.style.display = 'block'
      } else {
          div1.style.display = 'none'
      }
  }

  Using jQuery, this would just be:

  $('div1').toggle();

  or you can easily add cool effects, for example, the “Blind” effect is shown below…
  

I haven’t even scratch the surface of all the coolness found in jQuery. If you want to learn more, I would highly recommend picking up the book jQuery in Action.

Impressions

It’s great to see Microsoft embracing jQuery.  In fact, if you read through the ASP.NET AJAX Roadmap, you’ll notice many jQuery type features being included (e.g. the $query() shortcut).  I wonder if the $query() function will be removed from the plan now that we have the jQuery selector, $()?  I guess time will tell.