jQuery
a bad-ass Javascript framework
Wednesday, September 19, 12
Slide 2
Slide 2 text
Where
Javascript ends and
jQuery begins
Wednesday, September 19, 12
Slide 3
Slide 3 text
Javascript
• Scripting language
• Not compiled
• Traditionally client-side
• Run on the user’s computer
• Heavy
Wednesday, September 19, 12
Slide 4
Slide 4 text
jQuery
• What is it?
• A Javascript framework
• What’s a Javascript framework?
• A library of pre-written
Javascript code to allow for
easier development.
Wednesday, September 19, 12
Slide 5
Slide 5 text
It’s dangerous to go alone...
take this.
• Understand the DOM
• jQuery is primary used to
manipulate the DOM.
• How to wrap jQuery code
• We’ll see this in the demo
Wednesday, September 19, 12
Slide 6
Slide 6 text
The DOM
• DOM: Document Object Model
• Used in HTML, XHTML and XML
• Used to describe and provide
access to all elements in a markup
document.
Wednesday, September 19, 12
Slide 7
Slide 7 text
window
html
div#container
section
section
p
Wednesday, September 19, 12
Slide 8
Slide 8 text
The DOM
• A great way to semantically label
and identify elements.
• A great way to then access those
elements
Wednesday, September 19, 12
Slide 9
Slide 9 text
Selecting Elements
• CSS
#box {
background: white;
}
• jQuery
$('#box')
$('#box .phrase')
Wednesday, September 19, 12
Slide 10
Slide 10 text
A Few Examples
• Change text
• Add a class to an element
• Move an element
• Hide an element
Wednesday, September 19, 12
Slide 11
Slide 11 text
Events
• Old and busted (inline Javascript)
I like to do things and such.
• New hotness (unobtrusive jQuery)
$('.phrase').click(function(){
$(this).css('color', 'red');
});
O hai!
Wednesday, September 19, 12
Slide 12
Slide 12 text
Demo!
Wednesday, September 19, 12
Slide 13
Slide 13 text
Alternative
Frameworks
• MooTools
• Prototype and Scriptaculous
• Dojo
• Ext JS
• YUI
• Lots more...
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Wednesday, September 19, 12
Slide 14
Slide 14 text
Resources
• Javascript
• Javascript: The Good Parts
• jQuery
• http://docs.jquery.com
• jQuery in Action
• Ryan L. Cross (@slant)
Wednesday, September 19, 12
Slide 15
Slide 15 text
Enclave Discussions
• Photoshop (August 16th)
• Bob Crum (Midsummer Night’s Design)
• Typography (September 20th)
• Gordon Brander (Crowd Favorite)
Wednesday, September 19, 12