Getting Started


Click Me!


jQuery Code

$(document).ready(function(){ $("#helloWorld").click(function(event){ alert("Hello World!"); }); });

jQuery Selectors


  

Row with Index #0
Row with Index #1
Row with Index #2
Row with Index #3


jQuery Code

$(document).ready(function(){ $("#btnEven").click(function(){ $("tr:even").toggleClass("redBG"); }); $("#btnOdd").click(function(){ $("tr:odd").toggleClass("blueBG"); }); });

jQuery Core - Each() function




  • One
  • Two
  • Three


jQuery Code

$("#btnEach").click(function () { $("li").each(function(){ $(this).toggleClass("red"); }); });

Chainability


Click to go to Google.com

Click to go to Microsoft.com

Click to hide me.



jQuery Code

$("a").filter(".clickme").click(function(){ return confirm("You are now leaving the site."); }).end() .filter(".hideme").click(function(){ $(this).hide(); return false; }).end();

Traversing


Hello, how are you?

Me? I'm good.



jQuery Code

$("p").find("span").css('color','red');

Attributes









 

Hello

and

Goodbye

jQuery Code

$("button:gt(1)").attr("disabled","disabled"); $("#btnAddClass").click(function(){ $("p:last").addClass("highlight"); }); $("#btnRemoveClass").click(function(){ $("p:last").removeClass("highlight"); });

Manipulation





This is span (1)

This is span (2)

jQuery Code

$("#btnAppend").click(function(){ $("#span2").appendTo("#span1"); });

Effects




Hello!

jQuery Code

$("#btnToggle").click(function(){ $("#block").slideToggle("slow"); };

AJAX


to get jQuery's definition from page 4 of the presentation.  



Loading...

jQuery Code

hideAnimation(); $("#btnAjax").click(function(){ $("#loading").show(); $("#myAjaxDiv").load("../index.htm #jQuery li:first", hideAnimation); }); function hideAnimation() { $("#loading").hide(); }