User Tools

Site Tools


quickref:jquery

This is an old revision of the document!


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.
quickref/jquery.1362065922.txt.gz · Last modified: 2013/02/28 15:38 by andy