User Tools

Site Tools


quickref:jquery

Quick Reference - jQuery

This page is somewhere for me to note down the most important jQuery concepts while I'm learning it. For a proper reference, see the official API reference.

Simple Example

The example HTML page below shows how to load jQuery and install a simple handler:

jquery_simple.html
<html>
  <head>
    <title>Simple jQuery Test Page</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function()
      {
        $("a").click(function()
        {
          alert("hello, world");
        });
      });
    </script>
  <body>
    <h1>jQuery Test</h1>
    <p>
      This <a href="">page</a> is a <a href="">test</a> of jQuery.
    </p>
  </body>
</html>

This simple example waits until the DOM is ready and then installs a click handler on all <a> tags on the page to pop up an alert box when clicked. The read() handler is widely used, as it doesn't make sense to manipulate the DOM until it's fully instantiated.

This example can be decomposed into its elements:

$(document).ready(...) This adds a handler to be called when the DOM is fully loaded. It takes a callback function as its parameter, in this case (and frequently) an anonymous function defined in-place. Note that $ is just a standard Javascript identifier and is used by jQuery as an alias for the jQuery identifier - it is used nearly ubiquitously in all jQuery code.
$("a") This is a jQuery selector, returning a jQuery object representing all <a> elements within the DOM, in this example.
.click(...) Installs a click handler on the specified set of elements, similar to the onclick attribute of HTML elements. As with .ready() this takes a function as a parameter.

Selectors

There are two ways to select attributes in jQuery, both of which can be combined:

  • CSS and XPath selectors passed to the jQuery object.
    This was the approach demonstrated in the example above. Other examples includes #item to select tags with a specified id and .title to select tags with the specified CSS class. Many selectors can take another selector as a “parameter” and modify it. See the full list for more details.
  • Some methods of the jQuery object act as selectors, returning a restricted set of elements.
    An example of this is the not() method, which filters the set of items returned to be those not matching the specified selector.
quickref/jquery.txt · Last modified: 2013/02/28 15:56 by andy