Introduction to jQuery




Load up this page in your browser.
http://ejohn.org/apps/workshop/intro/
Not required, but good: Download and Install Firefox and Firebug.
All code here: http://github.com/jeresig/jquery-workshop

What is jQuery?

Why jQuery?

Who uses jQuery?

jQuery is pretty popular.

Easy to learn and master

The Focus of jQuery

$("div").addClass("special");

The jQuery Object

$("div").addClass("special");

Graceful Scripting

$(".idontexist").addClass("special");

Ready Event

$(document).ready(function(){
	// 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>

  </div>

</div>

Some Header

Paragraph 1

Paragraph 2

Traversing

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

Chaining

$("div").hide();
$("div").hide().css("color","blue");
$("div").hide().css("color","blue").remove();

Chained Traversal

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

Do something with them

Manipulation - .after()

$("a[target=_blank]")
  .after("<img src='open.png'/>");

Manipulation - .append()

$("a[target=_blank]")
  .append(" (Opens in New Window)");

Manipulation - .css()

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

HTML Selector

$("<li><a></a></li>")
  .find("a")
    .attr("href", "http://ejohn.org/")
    .html("John Resig")
  .end()
  .appendTo("ul");

Event - .submit()

$("form").submit(function(){
  if ( $("#name").val() === "" ) {
    $("span.help").show();
    return false;
  }
});

Event - .click()

$("a.menu").click(function(){
  $(this).next().toggle();
  return false;
});

Event - .hover()

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

Event Delegation

Live Events

$("a.menu").live("hover", function(){
  $(this).next().toggle(200);
  return false;
});

Effect - .slideToggle()

$("a.menu").click(function(){
  $(this).next().slideToggle("slow");
  return false;
});

Effect - .animate()

$("div.block").animate({
  fontSize: "2em",
  width: "+=20%",
  backgroundColor: "green"
});
hello!

Effect - .hide()/.show()

$("div.block").hide("slow", function(){
  $(this).show("slow");
});
hello!

Ajax - Load XML

$.ajax({
	url: "file.xml",
	success: function( xml ) {
		$(xml).find("tab").each(function(){
			$("ul").append(
			  "<li>" + $(this).text() + "</li>");
		});
	}
});

Ajax - Get JSON

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

Ajax - .load()

$("div.load").load("file.html");
hello!

Ajax - .load()

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

jQuery Bookmarklet

Build a Todo List

jQuery Plugins

Developing a Plugin

jQuery.fn.slideRemove = function() {
	return this.slideUp("slow", function(){
		$(this).remove();
	});
};
$("li.remove").slideRemove();

What Makes a Plugin?

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

jQuery UI

Themeroller

Build a Social Network

jQuery CDN

<script src='http://code.jquery.com/jquery.js'></script>

Minified and Gzipped

More Information

jQuery Books