In 2008, Microsoft welcomed the jQuery framework by elevating its status to a first-class citizen in the Visual Studio world. This adoption accelerated jQuery's popularity and helped interest for .NET, ASP.NET, and Visual Studio developers in learning more about this fluent JavaScript library and framework. jQuery's importance is no different today as it provides developers with an elegant means to manipulate HTML5 elements with ease. In this article, I'll give you a guided tour of jQuery's feature set, to help you experience the jQuery library's simplicity and ease of use.
Getting Started with jQuery
The first step in unleashing jQuery's power is to download the beast. You can download jQuery here. Just like any other JavaScript library, jQuery needs to be referenced before it is used. You can set up the reference in a page's head section, as in the following example:
After referring the library, you are now ready to use it. To understand the workings of the library, we'll start with a very simple application that alerts the type of DIV element on screen. The alert will be invoked when the user clicks the button. The following snippet uses the plain-vanilla JavaScript to accomplish the task.
As expected, the alert box in Figure 1 clearly shows that the object is of type HTMLDivElement, which refers to a DIV element in the DOM tree.
Next, we'll implement the same scenario using the jQuery library, as shown in the following code sample, and examine how it differs from the previous one.
Figure 2 shows the result: The object returned is not of the type HTMLDivElement but an object. By investigating further, you'll realize that the object is of type jQuery.
This is where the jQuery library really shines. Instead of returning the type of the DOM element that was requested, the jQuery library returns the jQuery object. The jQuery object contains many different functions and attributes that can be used in different scenarios. This also makes it easy to add custom plug-ins to the jQuery library.
jQuery Syntax
jQuery uses a combination of XPath and CSS selector syntax to access elements inside the DOM tree. The selector syntax allows jQuery to manipulate the HTML elements as a group or as an individual element. Take a look at the following selectors in jQuery that are most commonly used in an application.
Fetching by element ID. The hash (#) sign is used to fetch the element using the element ID. This is the equivalent of using the document.getElementById function. For example:
$("#myTextBoxId") //
returns the control whose ID is myTextBoxId.
Fetching by class name. The period (.) operator is used to retrieve the element by using the class name. For example:
$(".greenColorTextBoxes") //
returns all the controls whose class name is greenColorTextboxes.
Fetching by element type. The element tag name indicates that the element will be fetched by its type. This is equivalent to using the document.getElementsByTagName function. For example:
$("p") //
returns all the p elements on the page.
$("p.display")
returns the
element with the class display.
$("p#display")
returns the first
element with the ID display.
jQuery uses the XPath syntax to select elements using their attributes:
- $("[href]") selects all the elements having the href attribute.
- $("[href='#']) selects all the elements having the href attribute #.
- $("[src='.jpg']") selects all the image elements with the source attribute ending in .jpg.
Now that you're familiar with different retrieval strategies using the jQuery library, we'll move on to discussing how to use jQuery effects.
Effects in jQuery
The jQuery framework comes with several built-in effects. If you need to create more advanced effects, you can do so using the jQuery UI library, which you can download at jqueryui.com. The effects that alter the appearance of elements are mostly UI based. The code in Figure 3 uses the built-in effect to show and hide a div element.
Creating animation effects. There are times when jQuery built-in effects are not enough. In such cases, you can use the power of jQuery's animation class, which lets you create custom animations. The animation can be performed on properties consisting of numerical values—for example, width, height, and margin. You can even perform animation on color properties by assigning the color in the color code format. The following example shows how to perform animation on a simple DIV control and change its width property.
$(document).ready(function() {
$("#btnAnimate").click(function() {
$(".block").animate(
{
width:"100%"
}
);
});
});
You can even move the DIV across the screen using the marginLeft and marginRight properties, as the following example shows:
$(document).ready(function() {
$("#btnAnimate").click(function() {
$(".block").animate(
{
marginLeft:"40%"
}
);
});
});
jQuery can also manipulate color properties of the element if they're used in the form of color codes instead of names, as you can see in the following example. Note that the color animation works only when the jQuery UI reference is added (as mentioned previously).
$(document).ready(function() {
$("#btnAnimate").click(function() {
$(".block").animate(
{
marginLeft:"40%",
backgroundColor:'#ffbfff'
}
);
});
});
The previous code also demonstrates the use of multiple properties in the animation function. The animation function provides most of the features to create custom animation, but sometimes we need to plug in our custom animation function in the jQuery framework. In the next section, I'll show you how to extend the existing jQuery functions and how to successfully add your own behavior.
Creating Custom Effects by Extending jQuery
jQuery is an open extension framework that enables developers to easily extend the functionality in the existing the API. For instance, if you're interested in creating a FadeInFadeOut effect, you can easily extend the jQuery.fn class to include new methods and add custom behavior. Take a look at the following code, which demonstrates how to extend jQuery.fn to include FadeInFadeOut effects.
jQuery.fn.fadeInFadeOut = function(speed) {
return $(this).fadeIn(speed,
function() {
return $(this).fadeOut(speed);
});
}
Finally, we can use our new function by employing the following code:
$("#divMessage").html("Item has been saved").fadeInFadeOut(3000);
This shows how easy it is to leverage the existing jQuery functionality and create new effects.
Drag-and-Drop Operations Using jQuery
If you've ever written plain old vanilla JavaScript to create drag-and-drop effects, you're aware of the pain you need to go through to make it work. jQuery makes it easy to perform drag-and-drop operations. The drag-and-drop operations are contained in the jQuery.UI framework.
The first task in implementing jQuery drag and drop is to create a draggable item. We will be dragging a simple DIV element. The definition of the DIV element is as follows:
The DIV uses the style "draggableElement" defined by the following code:
.draggedElement
{
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 100px;
height: 100px;
margin: 10px;
overflow:auto;
padding:1em 1em 1em 1em;
z-index:9999;
cursor:move;
}
Next, to make the DIV draggable we need to use the jQuery draggable function. Here's the implementation:
And that's it! Now run the application in your browser, and you'll be amazed that by adding a single line of code you can drag the element.
Although we are able to drag the DIV element, we're dragging the original element. In most cases you do not want to drag the original element but the clone. Not to worry, since jQuery provides attributes to add this feature. To make a clone of the dragged element, just use the helper attribute, as in the following example:
This code creates a clone of the dragged element, which is easily visible because of the opacity. Figure 4 shows the clone of the dragged element.
At this point we have implemented only the functionality for the dragged element. But this is only half of the story. The dragged element eventually needs to be dropped. This is where drop zones come into action. A drop zone is an area where a draggable element can be dropped. Creating a drop zone is straightforward, as it can be represented by a simple DIV element:
$(".dropZone").droppable();
The .dropZone class is used to decorate the drop zone with styling features:
.dropZone
{
background-color: #e9b96e;
border: 3px double #c17d11;
width: 300px;
height: 300px;
margin: 10px;
overflow:auto;
position:absolute;
top: 5px;
right: 30%;
padding: 1em 0 0 0;
}
Just as we initialized the draggable element, we need to initialize the drop zone. This is accomplished by using a single line of code:
$(".dropZone").droppable();
Although the drop zone has been initialized, we still need to provide it with additional information so that it knows what kinds of elements are accepted in the drop zone. The following code accomplishes this:
$(".dropZone").droppable(
{
accept: '.draggedElement',
hoverClass: 'dropZoneHover',
drop: function(ev, ui) {
}
}
);
The accept attribute represents the class that is accepted by the drop zone. This means any element having class draggedElement can be dropped into the drop zone. The hoverClass attribute represents the class that will become active once the draggable element hovers over the drop zone. Take a look at Figure 5, which shows the drop zone becoming active once the draggable element hovers over it.
Now, let's take a look at the most important feature of the drop zone, the drop function:
$(".dropZone").droppable(
{
accept: '.draggedElement',
hoverClass: 'dropZoneHover',
drop: function(ev, ui) {
var droppedItem = ui.draggable.clone().addClass("droppedItemStyle");
$(this).append(droppedItem);
}
}
);
Inside the droppable function, we have used JavaScript closures to handle the drop event. The $(this) refers to the DIV element that acts as a "DropZone" and is consuming the ".dropZone" class. The dropped item is decorated with droppedItemStyle. Once the dropped element is dropped, it is added to the drop zone element as a child. Figure 6 shows the dropped element added in the drop zone.
The jQuery drag-and-drop API is very useful for creating interactive applications. The ease of use of the drag-and-drop framework lets a developer build complicated client-side applications more quickly.
jQuery AJAX API
jQuery not only provides a strong DOM manipulation library, it also includes a very handy AJAX API. jQuery provides a couple different methods to make an AJAX call, as I'll demonstrate.
The $.ajax function is the most flexible of all jQuery AJAX functions, since it allows a developer to indicate the options manually. Here is a small piece of code that invokes the Greetings web service method and returns a message to the user.
$(document).ready(function() {
$("#btnGreet").click(function() {
$.ajax(
{
type: "POST",
contentType: "application/json",
data: "{}",
dataType: "json",
url:"AjaxService.asmx/Greeting",
success: function(response) {
alert(response.d);
}
}
);
The $.ajax function defined in this code calls the Greeting method contained in the AjaxService.asmx web service. Here's the implementation of the web service:
[System.Web.Script.Services.ScriptService]
public class AjaxService : System.Web.Services.WebService
{
[WebMethod]
public string Greeting()
{
return "Hello World";
}
}
Greeting is a simple method decorated with the [WebMethod] attribute. Another important thing to note about the AjaxService is that it's decorated with the [System.Web.Script.Services.ScriptService] attribute, which allows the web service to be called from the client-side code. Figure 7 shows the result.
You can also return XML just by changing the contentType to support XML, as shown by the following:
$(document).ready(function() {
$("#btnGreet").click(function() {
$.ajax(
{
type: "POST",
contentType: "application/xml",
data: "",
dataType: "xml",
url:"AjaxService.asmx/Greeting",
success: function(response) {
alert(response.childNodes[0].firstChild.textContent);
}
}
);
It's a good idea to return the result as JSON format. JSON makes it easy to parse the object and usually represents the structure similar to the domain model.
Sending Parameters Using jQuery's AJAX API
In the previous examples, we invoked the methods and returning the results on the client side without sending any input parameters. In real-world applications, our result will depend on the parameters passed to the web method.
In the following example, our result will be based on the parameters sent by the client. We'll use the SQL Server Northwind database, since it's available on most machines. A user will be allowed to select a category from the DropDownList. When the category is selected, the related products are fetched using an AJAX request.
The following code shows the implementation of the GetProductsByCategoryId. The example uses LINQ to SQL as the data access layer, but you may use whatever data access mechanism you want.
[WebMethod]
public string GetProductsByCategoryId(int categoryId)
{
var json = new JavaScriptSerializer();
using(var db = new NorthwindDataContext())
{
var products = from p in db.Products
where p.CategoryID == categoryId
select p;
foreach(var p in products)
{
p.Category = null; // removing the circular reference!
}
return json.Serialize(products);
}
}
The JavaScriptSerializer object has a limitation in that it cannot detect and ignore the circular references. For this reason, I've manually eliminated the circular references by setting the Category object to null. You can also return an anonymous type with the required properties to the client.
Figure 8 shows the implementation of the getProducts function, which is used to fire the AJAX request and create the product list display. In the code in Figure 8, note that the name of the parameters matches exactly with the parameter names of the web method.
function getProducts() {
var list = document.getElementById('<%= ddlCategories.ClientID %>');
var categoryId = list.options[list.selectedIndex].value;
$("#productList").children().remove();
var params = "{'categoryId':'" + categoryId + "'}";
$.ajax(
{
type: "POST",
dataType: "json",
data: params,
contentType: "application/json",
url: "AjaxService.asmx/GetProductsByCategoryId",
success: function(response) {
var products = $.evalJSON(response.d);
for (i = 0; i < products.length; i++) {
var product = document.createElement("li");
product.innerHTML = products[i].ProductName;
$("#productList").append(product);
}
}
}
);
}
This means that if the web method parameter is called categoryId, then the AJAX call should specify categoryId as the parameter. Additionally, we've used a jQuery plug-in to evaluate the JSON string as an Object. Figure 9 shows the output.
jQuery Support in Visual Studio 2010
The jQuery library is already supported in Visual Studio 2008, but to get the IntelliSense feature working, you need to download a Meta file and place it in a special location. In Visual Studio 2010 jQuery is treated as a first-class citizen, and the IntelliSense support is activated by default. This creates an easy way for developers to discover the jQuery API without having to refer to the documentation.
Wrapping Up
jQuery is a fascinating JavaScript library that has grown exponentially since its inception in 2006. In 2008 Microsoft embraced the popularity of this powerful library by giving it space in Visual Studio. jQuery's ease of use and advanced UI-manipulation features put it at the top of the stack of your choices of a client-side framework for any web application. Next, Dan Wahlin will provide you with some helpful web development writing tips in "5 Web Development Tips to Improve Your jQuery Coding."
