jQuery

• jquery.js
• Originally written by John Resig
  

<script type="text/javascript" src="jquery.js"></script>

<!-- Load jQuery using the Google Ajax Libraries API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3.2");</script>

• Uses Sizzle (CSS selector engine, which originated in jQuery)

Library functions

• $ is an alias for the jQuery namespace

// The following are equivalent
$.trim(str);
jQuery.trim(str);

• $. is used for utility functions
  

$.someFunction()

$()

• Acts on a CSS selector
• Returns the set of matching elements, as a jQuery object
  

$("p.foo").addClass("bar");                     // For every p with class "foo", add class "bar"

$("div.test").add("p.quote").addClass("blue")   // For every div.test or p.quote, add class "blue"

$.each

$.each([1,2,3], function() { document.write(this); });   // Output: 123

Ajax

$.ajax

• Request the output for the specified URL

$.ajax({
    url: 'index.php',
    type: 'POST',                   // 'POST', 'GET'
    data: 'apple=red&lime=green',
    dataType: 'text',               // 'text', 'xml', 'json'  (Default: 'text')
    timeout: 1000,
    success: function(data){ ... },
    error: function(){ ... }
});

Accessing the data

data              // text
$(data)           // XML
data.myProperty   // JSON

load

• Update the specified DOM element using the output from the specified URL

$('#myId').load('data.txt');

Misc

Running code when the page has loaded

$(document).ready(function() {
    myfunc();
});

Misc functions

• addClass("one two")
• hasClass("one")
• removeClass("one two")
• toggleClass("one")
• toggleClass("one", bool)