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
[email protected]
4th June 2008 jQuery in a nutshell
Questions
4th June 2008 jQuery in a nutshell
