CHAPTER 12 271 jQuery Availability: Any IntelliSens e Support from VisualStudio 2008 Onward “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/ In a surprising but excellent move, late 2008 Microsoft announced that it would be integrating jQuery into Visual Studio. jQuery is used by some very big names such as Amazon, Google, Dell, IBM, and Slashdot (for a full list, please refer to http://docs.jquery.com/Sites_Using_jQuery). JavaScript is a very powerful language and can produce some amazing results in the right hands. But let’s be honest; writing JavaScript can be a painful process. There is nothing intrinsically wrong with JavaScript (apart from unhelpful error messages), but few take the time to learn and understand its intricacies. If you are involved in web development, you will work with JavaScript at some point. jQuery can make your life much easier by providing easy-to-use methods to perform common tasks in a cross- browser friendly manner. jQuery or Microsoft AJAX libraries? There is certainly overlap in the functionality provided by jQuery and the Microsoft AJAX libraries. Theoretically, there is nothing stopping you from using both (especially because now Microsoft AJAX libraries work very well with jQuery), but you don’t want your users to have to download unnecessary additional scripts. Each set of libraries has its own strength; the Microsoft AJAX Libraries (discussed in Chapter 11) contain rich data binding functionality and make it very easy to communicate with .NET web services and AJAX-enabled methods (as you will see, this is also possible with jQuery). In this release, Microsoft has done some work to integrate the two (see Chapter 11). On the other hand, jQuery has arguably better support for manipulating and querying the DOM, and is better supported with many examples and extensions or plug-ins. My own preference is certainly jQuery over the Microsoft AJAX libraries for a general purpose framework. CHAPTER 12 JQUERY 272 jQuery Overview jQuery is a lightweight (18 KB at time of writing) JavaScript library, first released in 2006 by John Resig. jQuery provides the following: • Numerous ways to select, traverse, and manipulate elements on the page • “Chainability “of functions that allows the results of one function to be fed into another • Functionality to separate code from design • Utilities for performing common tasks such as AJAX calls and browser capability checks • Special effects, such as fades and glides, and easy manipulation of CSS • Easy to extend plug-ins Figure 12-1 shows a high-level view of the jQuery architecture. Antonio Lupetti has produced a much more detailed diagram that I would encourage you to take a look at here: http://www.box.net/ shared/as4xkezd6a. Figure 12-1. Overview of jQuery libraries Downloading jQuery jQuery scripts (version 1.3.2) are included out of the box with ASP.NET web site and application projects and MVC projects. The latest release is always available from jQuery’s home page at http://jquery.com/. You can also obtain the latest development version from http://github.com/jquery/jquery. CHAPTER 12 JQUERY 273 IntelliSense VisualStudio provides intellisense support for jQuery from VisualStudio 2008 onward (see Figure 12-2). To provide intellisense support, a special file with the ending –vsdoc is used that describes jQuery’s functionality to Visual Studio. This file shouldn’t be used in production and is automatically referenced by the IDE. The use of an external file means that if you want intellisense support, you probably will not be using the latest version of jQuery until the vsdoc file is produced for it. Figure 12-2. VisualStudio intellisense support for jQuery Script Hosting You can utilize Microsoft and Google’s extensive content delivery networks to host jQuery libraries for free. Content delivery networks through DNS trickery serve content from a server as near to the user as possible, resulting in a very fast download and saving bandwidth costs. For information on Microsoft’s service (which also hosts Microsoft AJAX libraries), please refer to http://www.asp.net/ajax/cdn/; for Google’s service, please refer to http://code.google.com/apis/ ajaxlibs/documentation/. CHAPTER 12 JQUERY 274 Hello jQuery Enough talk; let's get into some jQuery: Create a new C# web site project called Chapter12. Delete ~/default.aspx. Add a new HTML page called default.htm. We need to reference the jQuery libraries before we can use them, so either drag the jQuery script file from the Solution Explorer to the code window or add the following to the header element of your page (this line will change depending on the jQuery version you are using): <script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript" ></script> We will now add a couple of inline styles to help demonstrate some of jQuery's functionality. Add the following styles inside the header tag: <style> .standardDiv { background:#cccccc; width:300px; height:200px; } .specialDiv { background:#00ff00; width:300px; height:200px; } </style> We will now need some HTML elements to manipulate so add the following inside the body tag: <input type="button" value="Hello jQuery" onclick="javascript:hellojQuery();" /> <div id="div1" class="standardDiv"> I am a boring grey div element </div> <br /> <div id="div2" class="standardDiv"> I am a boring grey div element </div> <br /> <div id="div3" class="specialDiv"> I am a special div! </div> CHAPTER 12 JQUERY 275 At the bottom of the page, add a script block containing a very simple jQuery function (you will see at a better way of wiring up this script to the click of a button shortly): <script language="javascript"> function hellojQuery() { $("#div1").html("hello jQuery"); } </script> Press F5 to run your application and click the Hello jQuery button; the text of the first div should change to “hello jQuery”. How Does It All Work? Probably the only weird looking bit of code is this line: $("#div1").html("hello jQuery"); Let's dissect it: • The $ sign is an alias that tells the browser to use the jQuery namespace. You could instead replace it with jQuery("#div1") if you want, but that would involve more typing, so don’t be silly. • The text "#div1" tells jQuery to select all elements with an ID of div1. jQuery will return a wrapped set of all elements matching the selector. Note that even if your selector returns just one element, you will be working with a wrapped set. jQuery also allows you to utilize CSS type selectors and adds a few of its own that you will look at shortly. • The .html() function is jQuery's version of the innerHTML property and it applies the change to all elements in the returned set. USING .HTML() Warning: note the difference when using .html() and .innerHTML: .html("hello jQuery") .innerHTML="hello jQuery" Selecting Elements jQuery’s strength is the ease with which you can select and manipulate elements on the page. We have used a selector method already to select all div elements that have an ID of div1: $("#div1").html("hello jQuery"); . .standardDiv { background:#cccccc; width: 300 px; height: 200 px; } .specialDiv { background: #00 ff 00; width: 300 px; height: 200 px; } </style> We will now need some. http://github.com/jquery/jquery. CHAPTER 12 JQUERY 273 IntelliSense Visual Studio provides intellisense support for jQuery from Visual Studio 200 8 onward (see Figure 12-2). To provide intellisense support,. CHAPTER 12 271 jQuery Availability: Any IntelliSens e Support from Visual Studio 200 8 Onward “jQuery is a fast and concise JavaScript Library that simplifies HTML document