jQuery in a nutshell

Scotch on the Rocks

Wednesday 4th June 2008

Neil Middleton
Development Manager
Monochrome Ltd

4th June 2008 jQuery in a nutshell

 Who am I?

Development Manager at
Monochrome
Creator of Feed-Squirrel.com
Web Developer since 1996

4th June 2008 jQuery in a nutshell

 About Monochrome

Established in 1999 as a traditional

web development agency.
Acquired Prismix (one of the first
Macromedia/Adobe Flex Partners in
the UK) in April 2006 to increase
knowledge share in the RIA space.
Monochrome has challenged
mainstream opinions within the
industry by becoming an early
adopter of Rich Internet development
since 2003.
Monochrome is an established Adobe
Silver Partner and Adobe Flex Partner.

4th June 2008 jQuery in a nutshell

 WTF is jQuery?

Simply put, a Javascript library

• Lightweight (only around 15kb when packed and zipped)

• Fast

• Simple

• Extendable

• Cross-browser

4th June 2008 jQuery in a nutshell

 Compatability

Firefox 1.5+

Internet Explorer 6+

Safari 2.0.2+

Opera 9+

Known problems with FF 1.0.x, IE 1-5.x, Safari 1.x, Safari 2.0, Opera
1.0-8.5, Konqueror

4th June 2008 jQuery in a nutshell

 Who uses jQuery?

Google Salesforce
Dell Newsgator
Digg The Onion
MSNBC Feedburner
Amazon Vodafone
Intel Linux.com
BBC Logitech
Newsweek Mozilla
AOL Wordpress
Oracle Drupal
Cisco Systems Trac
Technorati Joomla
Sourceforge

4th June 2008 jQuery in a nutshell

 Firebug

getfirebug.com

4th June 2008 jQuery in a nutshell

 aptana.com

4th June 2008 jQuery in a nutshell

 $()
4th June 2008 jQuery in a nutshell
Find this, do something

$(“#div1”).show();

$(“#div2”).addClass(“alert”);

4th June 2008 jQuery in a nutshell

Find this, do something

<div id=”body”>
<h2>The header</h2>
<div class=”contents”>
<P>...</P>
<P>...</P>
</div>
</div>

4th June 2008 jQuery in a nutshell

Find this, do something

$(“div”)

<div id=”body”>
<h2>The header</h2>
<div class=”contents”>
<P>...</P>
<P>...</P>
</div>
</div>

4th June 2008 jQuery in a nutshell

Find this, do something

$(“#body”)

<div id=”body”>
<h2>The header</h2>
<div class=”contents”>
<P>...</P>
<P>...</P>
</div>
</div>

4th June 2008 jQuery in a nutshell

Find this, do something

$(“div > div”)

<div id=”body”>
<h2>The header</h2>
<div class=”contents”>
<P>...</P>
<P>...</P>
</div>
</div>

4th June 2008 jQuery in a nutshell

Find this, do something

$(“div:has(div)”)

<div id=”body”>
<h2>The header</h2>
<div class=”contents”>
<P>...</P>
<P>...</P>
</div>
</div>

4th June 2008 jQuery in a nutshell

 Now what?

Events (click, hover, toggle)

DOM Manipulation (append, prepend, remove)

Effects (hide, show, slideDown, fadeOut)

AJAX (load, get, post)

4th June 2008 jQuery in a nutshell

 Events

$(“form input:last”).click(function() {
$(“#menu”).slideDown(“slow”);
});

4th June 2008 jQuery in a nutshell

 DOM Manipulation

$(“a[target]”).append(“ (Opens in New Window)”);

$(“#body”).css({
border: “1px solid green”,
height: “40px”
});

4th June 2008 jQuery in a nutshell

 Effects

$(“#menu”).slideDown(“slow”);

$(“div”).hide(500,function(){
$(this).show(500);
});

4th June 2008 jQuery in a nutshell

 AJAX

$(“#body”).load(“sample.html”);

$.getScript(“test.js”);

$.ajax();

4th June 2008 jQuery in a nutshell

 Chaining

$(“div”).hide();

$(“div”).hide().color(”blue”);

$(“div”).hide().color(”blue”).slideDown();

4th June 2008 jQuery in a nutshell

4th June 2008 jQuery in a nutshell
 Demo

4th June 2008 jQuery in a nutshell

 Plugins

4th June 2008 jQuery in a nutshell

 Plugins

Plugins are a neat way of packaging up methods and

functionality

Most of jQuery is written using the jQuery plugin constructs

4th June 2008 jQuery in a nutshell

 A simple plugin

jQuery.fn.debug = function() {
return this.each(function() {
alert(this);
});
};
jQuery.log = function (message) {
if(window.console) {
console.debug(message);
} else {
alert(message);
}
}

4th June 2008 jQuery in a nutshell

 Demo

4th June 2008 jQuery in a nutshell

 jQuery UI

4th June 2008 jQuery in a nutshell

 ui.jquery.com

4th June 2008 jQuery in a nutshell

 More info

jquery.com

docs.jquery.com

jquery.com/plugins

learningjquery.com

neilmiddleton.com
neil@monochrome.co.uk

4th June 2008 jQuery in a nutshell

 Questions

4th June 2008 jQuery in a nutshell