Welcome to the third and final installment of the jQuery saga.  This post will cover some of the more advanced features of jQuery such as Ajax, utility functions and plugins.  Along the way I will give examples that show how to use the functionality.  I suggest that you read through the first two parts of my jQuery overview which cover the basics of jQuery before reading this post.

Ajax

In addition to all of the goodness that jQuery provides that we covered in previous posts, jQuery also enables developers to easily make Ajax calls to a server.  In this post we will cover a few of the different methods available for making asynchronous calls.

The first and simplest Ajax method that jQuery provides is the load() function.  This function can be called on a jQuery wrapped set of elements and allows you to make an Ajax call to a server and insert the Ajax response into the selected elements.  The function has the following signature:

• load(url, [data], [complete])

where url is the url you want to send the Ajax request to, data is an optional key-value map that you can send as parameters with the request, and complete is an optional callback function that is called when the request completes.  This function is great if you just want to receive data from the server and display it directly to the user.  For example, let’s say you have a SELECT list containing a list of products.  When the user selects a product from the list you can use the id of the product to send a request to the server that returns the corresponding description for the given id.  Using the load() function of jQuery you can fill a DIV with the description.  Here is the html for the example:

...
<select id="products">
  <option value="">Select...</option>
  <option value="1">Toaster</option>
  <option value="2">Microwave</option>
  <option value="3">Stove</option>
</select>
<div id="description"></div>
...

And here is the JavaScript:

$(function() {
  $('#products').change(function () {
    if ($(this).val() != "") {
      $('#description').load('GetPageDescription.php', { 'productId' : $(this).val() });
    }
  });
});

The result of this code is that when the product dropdown is changed, an Ajax request will be made to the server passing the value of the selected option as the productId parameter.  jQuery will take care of inserting the description into the DIV when the response returns from the server.

If you want to do more that simply load the response from the server into a DOM element then jQuery providers two additional functions: jQuery.get() and jQuery.post().  Both of these functions have the same signature:

• jQuery.get(url, [data], [complete], [datatype])
• jQuery.get(url, [data], [complete], [datatype])

The first three parameters are exactly the same as the parameters for load().  The datatype parameter allows you to specify what data type you are expecting to receive from the server.  This can have values such as “html”, “xml”, “script”, “json” and “text”.  The main difference between these functions and the load() function is that these are not called on a jQuery wrapped set, but instead are standalone functions.  If you want to do something with the response from the server you will have to pass in a handler function for the complete parameter.

Finally, if you want very fine control of the Ajax call, jQuery provides the jQuery.ajax() function.  This function takes in a single parameter: an object containing key-value pairs that allow you to set specific options for the Ajax call.  In addition to the parameters used by the other Ajax functions, you can pass a parameter that specifies whether the request should be asynchronous or not, parameters that allow you to specify callback functions for different stages in the Ajax lifecycle, and many more.  Regardless of your required level of control, jQuery will provide you with tools that will make Ajax easy and accessible.

Utilities

jQuery provides many useful utility functions that allow you to perform common tasks easily.  A small subset of these functions follows:

• jQuery.inArray(value, array)
• jQuery.map(array, callback(element, index))
• jQuery.parseJSON(json)
• jQuery.trim(string)

The jQuery.inArray() function will allow you to check if a value is in an array.  It takes the value and the array as parameters and returns a number.  The number will be -1 if the value is not in the array, otherwise it will be the index of the value in the array.

The jQuery.map() function should be familiar to those who have worked with functional programming languages.  It will take an array and a function as a parameter and apply the function to each element in the array to return a new array of the results.  For example, if we wish to take an array of numbers and square them we can use the following code:

var numbers = [2,3,5,6];
var squares = $.map(numbers, function(element,index) {
  return element * element;
});

The squares array will contain the values: 4, 9, 25 and 36.

The jQuery.parseJSON() function is especially useful when using the Ajax functionality.  The server may return a JSON string in the response.  In that case you can pass the JSON string to this function.  The function will parse the string and return a JavaScript object.

Finally, the jQuery.trim() function allows you to trim all whitespace off of the beginning and end of a string.  Simply pass the string to the function and it will return the trimmed string.

As you can see, the jQuery utility functions are very helpful.  While they are not as significant as the rest of jQuery’s features, they certainly do contribute to making JavaScript easier to use.

Plugins

The ability to extend jQuery with plugins may be one of its most important features.  The core of jQuery provides a strong foundation for your JavaScript code, so it is only natural that you may want to tie additional functionality to jQuery’s existing functionality.  In addition to creating your own jQuery plugins, you also can go to http://plugins.jquery.com to get access to hundreds of existing plugins that have been created.  If you can think of a problem, chances are that somebody has already created a plugin to help get around it.  Two useful jQuery plugins are the jQuery Validation plugin and the jQuery UI plugin.

The jQuery Validation plugin makes doing client-side validation easy!  In fact, Microsoft has chosen to use both jQuery and jQuery Validation by default in their latest version of ASP.NET.  Utilizing jQuery Validation in an ASP.NET MVC 3 is as easy as turning on client-side validation in the web.config (which is on by default) and setting some data annotation attributes on your model classes.  jQuery Validation contains many useful validation constraints.  For example, you can easily check to make sure that the user input is a valid email address or credit card number.  jQuery Validation has built in error messages that are displayed to the user when there is a problem.  The error messages can easily be customized.

The jQuery UI plugin is another very useful jQuery plugin that is available.  It makes doing tasks such as making your DOM elements draggable or resizable trivial.  For example, if you have a div with an id of “box” that you want to be able to drag around, simply do the following:

$('#box').draggable();

That’s it!  Your box is now draggable.  In addition to easily adding behaviors, you can also you jQuery UI to create cool widgets.  For example, jQuery UI comes with a great date picker widget.  If you have a textbox with id “postDate” that you want to use for dates, simply do the following:

$('#postDate').datepicker();

This will cause a calendar widget to appear on the screen below the textbox whenever the textbox receives focus.  Very useful!

Another cool widget that you can use it the dialog widget.  With the dialog widget you can turn any div into a dialog that pops up on the screen.  You can easily customize the appearance and behavior of the dialog, and even make it a modal dialog, a dialog that causes the rest of the page behind it to become grayed out and inaccessible until the dialog is closed.  This is just the tip of the iceberg when it comes to jQuery plugins.  I strongly encourage you to check out the jQuery Plugins page to see what else is available.

Conclusion

We have finally reached the end of our jQuery journey.  I hope you were able to learn about some of the amazing features that have made jQuery the most popular JavaScript library in use today.  In this article we covered some of the more advanced jQuery features such as its Ajax support, utilities, and its huge library of plugins.  At this time I encourage you to dive into jQuery.  Read some tutorials on the jQuery website, pick up a book, and start using jQuery in your own code today!  You may even contribute to the jQuery community by creating your own plugin and sharing it on the jQuery website.

Want to learn more?

As I mentioned in the first two parts of this series, two great resources for learning jQuery are the jQuery website at http://jquery.com as well as the book jQuery in Action by Bear Bibeault and Yehuda Katz, which I highly recommend.  I hope you enjoyed this article!

-Dylan

Welcome to the second part of my overview of jQuery. This article is part of a 3 part series. If you did not read the first article, you may want to go back and read that first. This article is going to pick up where the last article left off and cover more jQuery basics. Specifically, the events and effects functionality will be discussed. Afterwords, I will show some example code that utilizes many of the techniques that we have learned.

Events

Event handling can sometimes be a problem when developing cross-browser applications. There are often at least two different ways of doing things depending on which browser is being used. jQuery helps us by abstracting the event handling logic. Behind the scenes jQuery will use feature detection to figure out which browser the code is being run on and then utilize the appropriate functionality for the specific browser. The user of the library is presented with a single, clean, unified API that they can use to add event handling to any element on the page in a cross browser fashion. The first of these functions that I am going to cover is the bind function. This function accepts two arguments; a string containing the type of event, and a function to handle the event. Multiple event handlers can be bound to an element this way. Here is an example:

$('#myButton').bind('click', function() {
  $('p').css('color', 'red');
});

This code finds the element with an id of “myButton” and adds an event handler to it. The handler, when the element is clicked, will find all paragraph elements and make their text a red color. If you wish to remove an event handler from an element, you can use the unbind function. There are many useful overloads of the function. If you pass it no parameters then it will remove all events from the selected elements. If you pass it the name of the event it will remove all handlers for that event type. If you pass it the name of the event and the handler function it will remove only that handler from the element. If we run the follow code then the button will no longer respond to the click event we set up previously.

$('#myButton').unbind('click');

jQuery also provides shortcuts for most of the events. Instead of using the bind function you can use a specialized event function. An example of this is the click function. It takes a handler function as its sole argument. Here is a copy of the above code using the click function instead of bind:

$('#myButton').click(function() {
  $('p').css('color', 'red');
});

All event handlers can optionally take in an argument of the event object. The event object also has cross browser differences. jQuery creates a cross-browser version of the event object for us to use in our handlers. The details of this object are described on the jQuery website.

Effects

Another cool feature of jQuery is its support for effects. jQuery provides a handful of simple effects out of the box, but allows for extending the library by adding new effects. We will cover a couple effects in this article. The hide and show effects can be used to make elements on the page appear and disappear. At their simplest they take no arguments, and when called simply make the element appear or disappear from the page. You can also pass them a number specifying the milliseconds that the effect should take. When a number is provided, the element will shrink in size while also becoming transparent until it disappears from the screen if using hide, or will appear on the screen and grow in size and opacity if using show. Here is a demo:

$('img.hideable').click(function() {
  $(this).hide(2000);
});
$('#myButton').click(function() {
  $('img.hideable').show();
});

This demo selects all images with class “hideable” and assigns a click handler to them. If they are clicked on the will disappear from the screen over a two second interval. Because a time is given the image will shrink and become transparent over the time period. A click handler is also assigned to a button. When clicked it will make the image appear on the screen (if hidden). It is not passed a number so it will appear instantly. Another useful function is the toggle function. When used it will cause an element to appear if hidden, or disappear if visible. It also can take a time value. It is demonstrated below:

$('#myButton').click(function() {
  $('img.magic').toggle(3000);
});

When the button is clicked the images with class “magic” either appear or disappear, depending on their current state. There are other available effects such as slideUp, slideDown, fadeIn, and fadeOut. If you wish to make more complex animations you can use the animate function which allows very fine control. You can read about all of these on the jQuery website and many other effects exist on the plugins page of the site.

Example

Now it is time to look at a complete example. You can download a zip file containing all of the source code here. In this example we are going to create a simple page containing nested lists. The levels of the list will be able to expand or collapse when clicked on. If there is no sublist under the current list element, then clicking on the element will do nothing. Here is the code for the HTML page:

<html>
  <head>
    <title>jQuery Part 1 Example</title>
    <link rel="stylesheet" type="text/css"
          href="jQueryExample1.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="jQueryExample1.js">
    </script>
  </head>
  <body>
    <h1>jQuery Part 1 Example</h1>
    <p>Here is a list containing other nested lists.
         We can use jQuery to hide or show the list
         elements.</p>
    <ul>
      <li>
        jQuery Part 1: The Basics
        <ul>
          <li>
            Introduction
            <ul>
              <li>What is jQuery?</li>
              <li>Where to Get jQuery</li>
            </ul>
          </li>
          <li>
            Core jQuery
            <ul>
              <li>Selectors</li>
              <li>The Wrapped Set</li>
              <li>The jQuery Function</li>
              <li>Traversing the DOM</li>
              <li>
                Manipulation
                <ul>
                  <li>Attributes</li>
                  <li>CSS</li>
                  <li>Other</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Events</li>
          <li>Effects</li>
          <li>Example</li>
          <li>
            Conclusion
            <ul>
              <li>Summary</li>
              <li>
                Want To Learn More?
                <ul>
                  <li>Next Article</li>
                  <li>jQuery.com</li>
                  <li>jQuery In Action</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

And here is the JavaScript code for the example:

$(function() {
  $('li > ul').hide().each(function() {
    var sublist = this;
    $(this).parent().addClass('collapsed').click(function(event) {
      if (this == event.target) {
        $(this).toggleClass('collapsed expanded');
        $(sublist).toggle(1000);
      }
    });
  });
  $('li:not(:has(ul))').removeClass('collapsed
                                     expanded').addClass('leaf');
});

You will see that the HTML for the example is very clean. All styles are in an external stylesheet (not shown, but included in the download) and all the Javascript is in a separate file. The jQuery code starts with the jQuery function setting up a function to be run when the page is ready. We first select all of the ul elements on the page that are children of li elements. These are the sublists. We call the hide function to immediately hide the sublists. Next we use the each function to run code on each element of the wrapped set. The first thing we do inside of the each is set a variable called sublist to the current element (using ‘this’). This allows us to create a closure to access the element from within event handlers defined below it.

Next, we get the parents of the wrapped set elements and make a wrapped set out of them using the parent function. This set contains the li elements that the sublists reside in. We then add a class called “collapsed” to the li elements. This refers to a style declared in the external stylesheet that makes the bullet for the li element into a plus sign. This makes it easier to see that the list can be expanded at this point. We create a click handler for the li elements which first check if the element handling the event is the actual element that was clicked. This is done to ensure that no other elements respond to the event when the event is bubbling up or down the DOM. Next we use the toggleClass function to set the class to either collapsed or expanded. We also use the toggle function to toggle the visibility of the sublist of that element. Finally, in a completely new jQuery statement, we select all li elements that do not contain sublists. We remove any existing collapsed or expanded class and add the leaf class to them. This replaces the bullet for the list element with an empty circle. This shows that there is no sublist below this node.

That’s it! In this small about of code we were able to create some pretty cool functionality. I suggest that you download the code and try it out for yourself. Tweak the code to see what else you can do with it. Have fun!

Conclusion

That is all that I am going to cover in this article. We learned about how jQuery handles events as well as how to create some cool effects to liven up your page. Finally, we went through an example that brought everything we learned together.

Want to Learn More?

The next and final article in this series will cover some advanced jQuery functionality. I will be covering the topics of ajax, utilities, and plugins, as well as another exciting example! Again, keep in mind that I am only covering a very small subset of what is available in the jQuery library. I suggest you check out the jQuery documentation page at jQuery.com. The documentation for jQuery is excellent and provides many useful examples. I also recommend jQuery In Action by Bear Bibeault and Yehuda Katz. It is an excellent book and worth checking out. I hope you enjoyed this article. The next part should be out within the next couple of weeks.

-Dylan

Welcome to my first blog post on the topic of jQuery. This is the first part of a three part series. This post will cover most of the basic features of jQuery. The next post will wrap up the basic jQuery features and go through an example using what we learned. The final post will cover jQuery’s more advanced features and include another example.

What is jQuery?

jQuery is a Javascript library. At its core, jQuery enables authors to easily select and manipulate the elements of an HTML page. But jQuery is much more than just that. jQuery was designed for extension. There are over a thousand plugins available for jQuery with functionality ranging from rich UI features to Ajax. With all of this power it is easy to see why jQuery has become one of the web’s most loved Javascript libraries.

Where to Get jQuery

jQuery is available for download from jQuery.com. You can download the library right from the home page. There are two versions available. The production version has a tiny footprint of just 24KB! The code has been compressed though, so if you feel like reading through the actual library code to see how jQuery works then you should download the development version. Once you download the library, simply add the script reference to your HTML file and you are good to go!

Core jQuery

Selectors

The central feature of jQuery is its ability to make finding the elements that you want to manipulate ridiculously easy. To find elements jQuery uses something called a selector. These are the same selectors that are available in CSS, so if you already know how to use CSS (If you don’t, then you should learn!) then you will be able to directly apply your knowledge to jQuery. For those of you who don’t know CSS, a selector is, in essence, a string that defines a pattern that identifies a set of elements that you would like to apply a style to or, in the case of jQuery, manipulate with Javascript. The selectors available in jQuery are very powerful and allow you to easily apply your code to whatever elements you like.

There are many types of selectors. The most simple specify an HTML tag. For example, the selector img will match all image elements in the HTML. Other common types of selectors include:

You can also combine selectors:

jQuery selectors also include ways to filter the match:

This is only the tip of the iceberg. jQuery supports many more selectors that allow you have very precise control over which elements you are selecting.

The jQuery Function

Now that we have covered selectors, we can talk about the jQuery function. The jQuery function is at the heart of the library and has many overloads. We will be covering two of these overloads. The first overload simply takes in a string containing a selector. This version of the jQuery function uses the selector passed to it to find and return all elements matched by selector. Another overload of the jQuery function takes in a function. The purpose of this overload is to be able to run the code in the passed in function once the DOM tree for the page is ready to be worked with. This works much better than the onready event because, unlike the onready event, this overload of the jQuery function does not need to wait for images or page assets to finish loading. This allows us to work with the page as soon as possible. By default, jQuery gives an alias for the jQuery function. The dollar sign ($) can be used in the place of “jQuery”.

The Wrapped Set

You may be wondering what the first version of the jQuery function returns. This functions returns an object called the wrapped set. The wrapped set is essentially an array of all the elements matched by the selector. Most jQuery functions are called upon the wrapped set and commonly returns the wrapped set after the main body of the function runs. This allows jQuery functions to be chained together, making it very easy to accomplish a lot with a single line of code.

Traversing the DOM

Sometimes once you have a wrapped set containing a group of DOM elements, you may want to obtain a new wrapped set based on the initial wrapped set. For example, we may want a wrapped set containing all of the parent elements of the elements of the current wrapped set. jQuery provides a number of functions that provide functionality like this. If we wish to obtain a set of all of the parent elements of all of the paragraph elements on the page we would write: $(‘p’).parent(). The first part of this statement uses the dollar sign alias of the jQuery function to find all of the paragraph elements on the page. Next, the parent function is called on the wrapped set of paragraphs and returns a wrapped set of all of the parent elements of the paragraphs.

Manipulation

Now that we can find the elements that we are interested in, what can we do with them?

Manipulating Attributes

jQuery provides functions which allow you to manipulate the attributes of wrapped set elements easily. If we wish to read the value of an attribute we can use the attr function. The attr function takes in a string of the attribute name and returns the value of the attribute for the first element of the wrapped set. An overload of the attr function allows you to set the value of an attribute for all elements of the wrapped set. This is done by passing a second argument containing the value. For example, if we wish to set the alt attribute of an image with an id of “myImage” to the value of the image’s title attribute we would write: $(‘#myImage’).attr(‘alt’, $(‘#myImage’).attr(‘title’)). If you wish to do this for each member of the wrapped set instead of just the first we can take advantage of the each function. The each function allows you to define a function that will be run on each element of the wrapped set. Within the function, the “this” keyword refers to the element. For example:

$('img').each(function() {
  $(this).attr('alt', $(this).attr('title'));
});

This code will take all the images on the page and set their alt attribute to the value of their title attribute.

Manipulating CSS

jQuery also allows you to easily work with the styling of the elements of the wrapped set. We will cover four functions: css, addClass, removeClass, and toggleClass. The css function works similarly to the way the attr function works. Passing it the name of a CSS property will return the value of the property for that element. Passing it the name of the CSS property and a value will set the property to that value for the element. For example, $(‘div.special’).css(‘color’, ‘red’) sets the text within all div elements with class “special” to a red color.

The addClass function allows you to add classes to HTML elements. The function accepts a string containing a space separated list of classes that you wish to add to the element. For example, $(‘div:has(p)’).addClass(’special’) will add the class “special” to all div elements that have a paragraph element within them. If the class already is associated with the element then nothing happens. The removeClass function is similar to addClass. It also accecpts a space separated string of classes. The classes you pass to the function will be removed if they are declared on the element. The toggleClass function will either remove a class from the element if it exists on the element or it will add a class to the element if it does not already exist on the element. Assuming we have a div with class “bad” and id “myDiv”, if we run the code $(‘#myDiv’).toggleClass(‘bad good’) then we will remove the bad class form the div and add the good class to the div.

Other Manipulation

Sometimes we may wish to manipulate the position of elements within the DOM. One example of this is the append function. This function will append an element to the end of the children of the selected element in the wrapped set. The overload we will be covering takes a single string containing valid HTML tags. The DOM objects for the HTML you specify will be generated and appended onto the elements you specify in the wrapped set. Take a look at this example: $(‘div.myClass > ul’).append(‘<li>New item</li>’). This code will append a new list element onto any unordered list that is a direct child of a div element with class “myClass”.

Conclusion

That’s about all that I am going to cover for now. We looked at the core features of jQuery that allow us to find elements on the page based on the power of CSS selectors as well as many functions that operate on the elements in the wrapped set. These functions allow us to easily manipulate any element on our page.

Want to Learn More?

If you want to learn more jQuery, be sure to read that next part of this article. I will be covering the topics of events and effects, as well as showing a fun example demonstrating all of the skills we have learned. Keep in mind that I am only covering a very small subset of what is available in the jQuery library. I suggest you check out the jQuery documentation page at jQuery.com. The documentation for jQuery is excellent and provides many useful examples. If books are more your style then I would strongly recommend the book jQuery In Action by Bear Bibeault and Yehuda Katz. I have read through the entire first edition of the book and it was very helpful. The second edition just came out and it looks very similar except that it contains much more coverage of the jQuery UI plugin (which will be covered a little in Part 3 of this article). You should definitely check it out. The next part of this article should be posted soon. See you then!