Introduction to jQuery

Load up this page in your browser.
Not required, but good: Download and Install Firefox and Firebug.
All code here:

What is jQuery?

Why jQuery?

Who uses jQuery?

jQuery is pretty popular.

Easy to learn and master

The Focus of jQuery


The jQuery Object


Graceful Scripting


Ready Event

	// Your jQuery code goes in here

Find Some Elements

Selectors in jQuery

  • Selector:
<div id="body">

<h2>Some Header</h2>

<div class="contents">

<p>Paragraph 1</p>

<p>Paragraph 2</p>


Some Header

Paragraph 1

Paragraph 2


$("button").parent().css("border", "3px solid red");



Chained Traversal

	.parent().css("border", "3px solid red")
	.siblings().css("border", "3px solid green");

Do something with them

Manipulation - .after()

  .after("<img src='open.png'/>");

Manipulation - .append()

  .append(" (Opens in New Window)");

Manipulation - .css()

$("li a").css({
  color: "red",
  fontWeight: "bold"

HTML Selector

    .attr("href", "")
    .html("John Resig")

Event - .submit()

  if ( $("#name").val() === "" ) {
    return false;

Event - .click()

  return false;

Event - .hover()

  $(this).animate({marginLeft: 38, marginRight: 0});
}, function(){
  $(this).animate({marginLeft: 18, marginRight: 18});

Event Delegation

Live Events

$("").live("hover", function(){
  return false;

Effect - .slideToggle()

  return false;

Effect - .animate()

  fontSize: "2em",
  width: "+=20%",
  backgroundColor: "green"

Effect - .hide()/.show()

$("div.block").hide("slow", function(){

Ajax - Load XML

	url: "file.xml",
	success: function( xml ) {
			  "<li>" + $(this).text() + "</li>");

Ajax - Get JSON

$.getJSON("file.js", function( obj ) {
	for ( var prop in obj ) {
			"<li>" + prop + ": " + obj[prop] + "</li>");

Ajax - .load()


Ajax - .load()

$("div.load").load("file.html h2");

jQuery Bookmarklet

Build a Todo List

jQuery Plugins

Developing a Plugin

jQuery.fn.slideRemove = function() {
	return this.slideUp("slow", function(){

What Makes a Plugin?

jQuery.expr[":"].unordered = function(elem) {
  return elem.parentNode.nodeName.toLowerCase() === "ul";

jQuery UI


Build a Social Network

jQuery CDN

<script src=''></script>

Minified and Gzipped

More Information

jQuery Books