At the Forge - jQuery

An initial look at jQuery, an increasingly popular JavaScript library.

and there isn't any such item, jQuery happily will return the set of elements matching that query—an empty set.

This might seem a bit weird at first. After all, don't you need to know in advance how many results you'll get, or even if there will be results at all? Otherwise, how can you know whether to call a function on the one returned element or to iterate over a set of elements and call the function on each of them?

Things make much more sense once you understand that many of jQuery's functions operate using what's known as implicit iteration. That is, you can say:

$('p').show();

and jQuery will grab all the paragraphs in a document and show them. If there aren't any paragraphs, nothing happens. If only one paragraph matches, it is shown (if it wasn't showing already). The idea that you don't have to use an each() loop to go through each element is a powerful one, and it repeats itself often in jQuery code.

Equally powerful is the fact that most jQuery methods return the same set they were passed. For example, if we want to show all paragraphs and then make their background color red, we could say:

$('p').show().css({'background-color': '#f00'});

Chaining methods together in this way is quite typical in jQuery, and it helps make code more readable and concise.

When I first saw the way jQuery uses $(), I realized this meant I probably wouldn't be able to use both jQuery and Prototype in the same program, because there would be a namespace collision between $() in each of the two systems. However, the authors of jQuery thought about this very issue and have made it possible to load jQuery without activating $(), making it possible to mix jQuery and Prototype in the same file:

jQuery.noConflict();

Although I'm not sure that it's a good idea to go into a project planning to mix JavaScript libraries, there are times when you might want to use a particular effect or widget, which is available in (for example) YUI, but not jQuery.

Effects and AJAX

Like many other JavaScript libraries, jQuery comes with a set of visual effects that you can use on a page. We already have seen mention of show and hide, although each of these also can take an argument (slow, normal or fast, or an integer) indicating the speed at which the effect should run:

$('p').show('slow').css({'background-color': '#f00'});

Similarly, you can have elements hide and reveal themselves by sliding (slideUp and slideDown) or fading (FadeIn and FadeOut). And, of course, you always can modify one or more CSS attributes, as we saw in an earlier example, overriding their original settings.

Event Handlers and AJAX

It's easy to set an event handler in jQuery. For example, if you want to pop up an alert every time someone clicks on the button with an id attribute of mybutton, you would write:

$('#mybutton').bind('click', function() {
        alert("Hello, there!");
    });

Because it is so common to bind an event handler to the click of a button, you can shorten it to:

$('#mybutton').click(function() {
        alert("Hello, there!");
    });

The thing is, where do we put this event handler? We can't put it in the <head> of the document, because the <body> (in which the button presumably is contained) is not yet defined and available. We could assign it to a DOM handler, but there are issues associated with that. The jQuery method is both unobtrusive (as modern JavaScript should be), effective and cross-browser-compatible. We register an event handler for when the document is ready, and then put any event handlers we want in there:

$(document).ready(function() {
    $('#mybutton').click(function() {
            alert("Hello, there!");
        });
}

If you put this in the <head> of your HTML file, jQuery will execute the function when the document is ready. This means by the time the HTML is rendered for the user, event handlers all will be in place. It is not uncommon for the invocation of $(document).ready() to contain the key JavaScript invocation code for a site, with long, complex functions placed in an external library.

Like other JavaScript libraries, jQuery also provides built-in support for AJAX (behind-the-scenes HTTP) requests. For example, we can make it such that clicking on a button sends an HTTP request to a server, grabs the returned HTML snippet and then puts that snippet in the user's browser window. To do that, we need an HTML file:


<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen" 
     href="test.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // JavaScript code here
      $(document).ready(function() {
          $('#mybutton').click(function() {
              $('#message-paragraph').load('blah.html');
          });
      });
    </script>
  </head>
  <body>
    <h1>Test page</h1>

    <p id="message-paragraph">This is a paragraph</p>
    <p><input type="button" id="mybutton" value="Button" /></p>
  </body>
</html>

In the head of the file, we have a standard call to $(document).ready, which assigns a handler to the click event on the button at the bottom of the page, whose id attribute is mybutton. The function, very simply, tells the paragraph (message-paragraph) to load the file blah.html from the same origin (that is, server) as the current page. The browser retrieves the file in the background, asynchronously, allowing the user to do other things while the contents of blah.html are retrieved and then stuck into the appropriate paragraph.

The above demonstrated that jQuery can retrieve HTML from an external file. But, jQuery can do more than that, retrieving not only HTML, but also XML and JSON (JavaScript Object Notation) over the network and then parsing it. We even can load a JavaScript file and execute it:


<html>
  <head>
    <link rel="stylesheet" type="text/css" media="screen" 
     href="test.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // JavaScript code here
      $(document).ready(function() {
          $('#mybutton').click(function() {
              $.getScript('blah.js');
          });
      });
    </script>
  </head>
  <body>
    <h1>Test page</h1>

    <p id="message-paragraph">This is a paragraph</p>
    <p><input type="button" id="mybutton" value="Button" /></p>
  </body>
</html>

Then, I create blah.js:


$('#message-paragraph').html("<h1>Boo!</h1>");

In other words, I've split the functionality from one file into two different ones. The difference is that the loaded file is treated as a program and is executed as such. So, when I click on the button, the contents of blah.js are loaded by jQuery, which then modifies the paragraph.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

jjquery website

kashrut's picture

I think it should be www.jquery.com (not .org as in the article)

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState