Developing with jQuery in Microsoft Visual Studio 2008

First, I needed to get jQuery. Since my version of Visual Studio doesn't yet understand jQuery, I also needed to get the jQuery support files. Fortunately, they're both available from one place, here.

There are two .js files; one (jQuery-1.2.6.js) is the actual jQuery library and the other (jQuery-1.2.6-vsdoc.js) is a support file for IntelliSense to use. To keep my day simple, I put both files in the same directory as my HTML file.

According to a blog that I found here, I needed to add these lines to my source code:

<script src="jQuery-1.2.6.js" type="text/javascript"></script>

<% if (false) { %>     <script src="jQuery-1.2.6-vsdoc.js"

type="text/javascript"></script>

<% } %>

The odd-looking second through fourth lines are surrounded by some C# code that will prevent the second JavaScript file from being sent down to the browser, as it's only needed within Visual Studio during coding.

But now I had a problem. I had created just an HTML page, not an ASP.NET ASPX page. This page didn't do C#. That's fine; I just simplified these lines like so:

<script src="jQuery-1.2.6-vsdoc.js" type="text/javascript"></script>

And then if I were to release something, I'd replace this line with the following:

<script src="jQuery-1.2.6.js" type="text/javascript"></script>

(I'll explain in a moment why this works.)

Next I tried out IntelliSense in the coding. The previous code example can be rewritten to use jQuery like so:

function foo() {

    $('#mydiv1').html($('#mytext1').val());

}

Although I'm talking about IntelliSense here, there probably is curiosity about this code. Like many JavaScript libraries, jQuery recognizes that the document.getElementById() function is probably the single most used function in JavaScript programming, and as such offers a simpler function, one whose name is just the dollar sign, as in $( ).

The parameter to the $ function isn't just the name of an element. Instead, it's a Cascading Style Sheets selector, and as such can be a style class name, an element type or an element name. In CSS, element names are prepended with a pound sign. Since I'm looking for the element named mydiv1, I pass #mydiv1 to the function.

The function doesn't return an HTML object but rather a jQuery object that serves as a proxy to my HTML element. This object includes a method called html() that either returns the inner HTML of the element (when you pass no parameters) or sets the contents (when you pass a string as a parameter). I wanted to set the contents, so I passed a string consisting of the value of the text element. Obtaining the text element's value works similarly, except I called val() instead of html(), and since I wanted to read the value, I passed no parameters.

Easy enough. But when I typed this into Visual Studio, IntelliSense went to work and then understood jQuery. When I type $, a popup appears listing commands, and that one is first. But the whole command is a single character, so I just continued. I typed an open parentheses, and an expanded IntelliSense message displayed.

This message told me the name of the function and the parameters, and additionally described each parameter for me; the message changed as I typed each next parameter. That's just like coding in C#.

Next: IntelliSense and jQuery: Making It Work >>