Intro to jQuery

Starting with the 1.5 release, DotKernel will make the switch from Dojo to jQuery.

On jQuery’s website, there’s an excellent “Getting started with jQuery tutorial“, as well as a extensive documentation for the framework, so I’ll just go over a few basic concepts and common examples.

The jQuery object

jQuery is the global object that contains all of jQuery’s functionality. You will probably want to use $ instead which is a synonim of the same object, only faster to type.

It contains a few useful methods such as jQuery.map, but it’s mostly used with a selector parameter to retrieve a set of matched elements.

Selectors

jQuery supports the same selectors as CSS (note: all selectors will work even in browsers that don’t actually have CSS support for them)

Examples:

// the element that matches an id
$("#someId");
// all elements with a certain class
$(".someClass")
// all odd rows from a certain table
$("table#monthlyStats tbody tr:nth-child(odd)")

The results of these expressions is a jQuery object that contains one, more, or no matched elements.

Manipulating matched elements

There are a number of functions that can be applied to a jQuery object, for example:

$("input#username").addClass("error")

Since most of these functions will also return the same jQuery object, they can be chained. For example, the following expression will set the text of the #errors element and fade it in:

$("#errors").text("The was an eror").fadeIn()

Events

Adding events in Javascript instead of using “onclick” attributes in HTML means that the markup is much cleaner, and you get better support for more events in all browsers.

In the following example, a click event is attached to an element. The function that will be called when the event is fired (callback) is passed as an argument to the click function

$("#helpButton").click(function(){
    $("#helpMessage").show()
});

Ajax

jQuery has many ajax helper functions, here is a simple example that will replace the contents of an element with data loaded from the server:

$.get("get-news.php", function(result){
   $("#news").html(result)
})

Putting it all together

The following snippet can be used on a registration form to check whether the username already exists, before the form is submitted.

$(document).ready(
  $("input#username").blur(function(){
    $.getJSON(
      "/check-username.php",
      {
         username:$("input#username").val()
      },
      function(data){
        if (data.taken === true){
          $("input#username").addClass("taken")
        }else{
          $("input#username").removeClass("taken")
        }
      }
  });
);