Weitere ähnliche Inhalte
Ähnlich wie Cooking with jQuery @ OSCON 2010 (20)
Kürzlich hochgeladen (20)
Cooking with jQuery @ OSCON 2010
- 3. OSCON jQuery Training
Introduction to jQuery
‣ The jQuery Project
‣ Including jQuery
‣ The jQuery Object
‣ Introduction to JavaScript
‣ Lifecycle of a Page
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 5. OSCON jQuery Training
jQuery Project - jquery.org
(Software Freedom Conservancy)
jQuery Core jQuery UI
jquery.com jqueryUI.com
Sizzle JS QUnit
sizzlejs.com qunitjs.com
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 6. OSCON jQuery Training
‣ jquery.com Downloading
‣ api.jquery.com Documentation
‣ forum.jquery.com Community
‣ meetups.jquery.com Local Community
‣ plugins.jquery.com Extending
‣ jqueryui.com Project Supported UI Library
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 8. OSCON jQuery Training
Locations
‣ http://code.jquery.com/jquery-1.4.2.min.js
‣ SSL vs. Non SSL?
‣ src=“//code.jquery.com/jquery-1.4.2.min.js”
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 10. OSCON jQuery Training
The jQuery Object
function jQuery(selector) {
...
}
// Select an element with jQuery
jQuery(‘body’);
// Use the $ for brevity
var $ = jQuery;
$(‘body’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 12. OSCON jQuery Training
Introduction to JavaScript
‣ Script blocks
‣ Quotes and Whitespace
‣ Variables
‣ Functions
‣ Object-Hash
‣ Objects
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 13. OSCON jQuery Training
Script Blocks
‣ Scripts can be included inline
‣ <script type=”text/javascript”>
// Your script here
</script>
‣ Or externally
‣ <script src=”url-to-script.js” type=”text/javascript”></script>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 14. OSCON jQuery Training
Quotes & Whitespace
// Single Quotes
var name = ‘John’;
// Double Quotes
var name = “John”;
// Whitespace
var name = ‘John’;
// Terminate statements with a semi colon;
// Will work, but bad practice!
var name = ‘John’
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 15. OSCON jQuery Training
Variables
‣ Variable names may include a-zA-Z0-9_$ as valid characters
‣ Variable scope is applied through the use of the var keyword
‣ Variables have type:
‣ object, number, string, boolean
‣ array(object), function(object)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 16. OSCON jQuery Training
Variables
// String
var name = ‘John’;
// Integer(number)
var age = 30;
// Array
var children = [‘Jane’, ‘Jimmy’];
// Boolean
var isMarried = true;
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 17. OSCON jQuery Training
Functions
function alertName() {
alert(‘Hello John’);
}
// Accept arguments
function alertName(name) {
alert(‘Hello ‘ + name);
}
// Call the function
alertName(‘John’); //Hello John
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 18. OSCON jQuery Training
Functions
// Function assignment
var alertName = function(name) {
alert(‘Hello ‘ + name);
}
// Call the function
alertName(‘John’); //Hello John
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 19. OSCON jQuery Training
Variable Scope
var name = ‘John’;
function myFunction() {
alert(‘Name is: ‘ + name);
}
...
myFunction(); //Name is John
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 20. OSCON jQuery Training
Variable Scope
var name = ‘John’;
function myFunction() {
var name = ‘Jim’;
alert(‘Name is: ‘ + name);
}
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 21. OSCON jQuery Training
Object-hash (Object Literal)
// Empty object
var person = {};
// Object-hash may contain key/values
var person = {
name: ‘John’,
age: 30,
children: [‘Jane’, ‘Jimmy’],
isMarried: true
};
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 22. OSCON jQuery Training
Object
var person = {
name: ‘John’,
age: 30,
introduceYourself: function() {
alert(this.name + ‘ is ‘ + this.age);
}
};
person.introduceYourself(); //John is 30
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 24. OSCON jQuery Training
Lifecycle of a Page
‣ Initial HTTP Request
‣ Load Scripts, Stylesheets and Images
‣ Scripts block!
‣ Head first style, scripts later
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 25. OSCON jQuery Training
Page Load
<!doctype html>
<html><head>
<link href=”style.css” rel=”stylesheet” />
<script src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(‘p’).css(‘color’, ‘red’); //magic
</script>
</head> <body>
<p>Hello world!</p>
</body></html>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 26. OSCON jQuery Training
DOM Ready
// Callback function
function domIsReady() {
$(‘body’).append(‘Hello world’); //magic
}
$(document).ready(domIsReady);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 27. OSCON jQuery Training
Page Load
<!doctype html>
<html><head>
<link href=”style.css” rel=”stylesheet” />
<script src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
function domIsReady() {
$(‘p’).css(‘color’, ‘red’); //magic
}
$(document).ready(domIsReady);
</script>
</head> <body>
<p>Hello world!</p>
</body></html>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 28. OSCON jQuery Training
Page Load
<!doctype html>
<html><head>
<link href=”style.css” rel=”stylesheet” />
</head><body>
<p>Hello world!</p>
<script src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(‘p’).css(‘color’, ‘red’); //magic
</script>
</body>
</html>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 31. OSCON jQuery Training
jQuery and Selectors
‣ Selectors
‣ Compound Selectors
‣ Selecting by the API
‣ The Context Argument
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 32. OSCON jQuery Training
Selectors
// Select By ID
<div id=”foo”></div>
<div></div>
$(‘#foo’);
<div id=”foo”></div>
<div></div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 33. OSCON jQuery Training
Selectors
// Select by class
<div class=”myClass foo bar”></div>
<div class=”baz myClass”></div>
<div class=”bar”></div>
$(‘.myClass’)
<div class=”myClass foo bar”></div>
<div class=”baz myClass”></div>
<div class=”bar”></div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 34. OSCON jQuery Training
Selectors
// Select by tag
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>
$(“li”);
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 35. OSCON jQuery Training
Compound Selectors
<p class=”important”></p>
<p></p>
<p class=”warning”></p>
<p class=”important warning”></p>
$(‘p.important,p.warning’);
<p class=”important”></p>
<p></p>
<p class=”warning”></p>
<p class=”important warning”></p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 36. OSCON jQuery Training
Compound Selectors
‣ As of 1.4+ elements are always returned in document order
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 38. OSCON jQuery Training
Select By Relationship
// Children by method
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>
$(“ul”).children();
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 39. OSCON jQuery Training
Select By Relationship
// Children by selector
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>
$(“ul > li”);
<ul>
<li>Fork</li>
<li>Spoon</li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 40. OSCON jQuery Training
Select By Relationship
// Siblings by method
<div>
<a href=’#’>link</a>
<p>Lorem Ipsum</p>
</div>
<div>
<a href=’#’>another link</a>
<p>Lorem Ipsum</p>
</div>
$(‘a’).siblings();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 41. OSCON jQuery Training
Select By Relationship
// Siblings by method
<div>
<a href=’#’>link</a>
<p>Lorem Ipsum</p>
</div>
<div>
<a href=’#’>another link</a>
<p>Lorem Ipsum</p>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 42. OSCON jQuery Training
Select By Relationship
// Parent by method
<div>
<a href=’#’>link</a>
<p>Lorem Ipsum</p>
</div>
<div>
<a href=’#’>another link</a>
<p>Lorem Ipsum</p>
</div>
$(‘a’).parent();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 43. OSCON jQuery Training
Select By Relationship
// Parent result
<div>
<a href=’#’>link</a>
<p>Lorem Ipsum</p>
</div>
<div>
<a href=’#’>another link</a>
<p>Lorem Ipsum</p>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 44. OSCON jQuery Training
Select By Relationship
// Descendant by method
<ul>
<li>Fork <a href=’#’>Click to use</a></li>
<li>Spoon <a href=’#’>Click to use</a></li>
</ul>
$(“ul”).find(‘a’); //selector within find method
<ul>
<li>Fork <a href=’#’>Click to use</a></li>
<li>Spoon <a href=’#’>Click to use</a></li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 45. OSCON jQuery Training
Select By Relationship
// Descendant by selector
<ul>
<li>Fork <a href=’#’>Click to use</a></li>
<li>Spoon <a href=’#’>Click to use</a></li>
</ul>
$(“ul a”);
<ul>
<li>Fork <a href=’#’>Click to use</a></li>
<li>Spoon <a href=’#’>Click to use</a></li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 46. OSCON jQuery Training
Selector Pitfalls
//Over selection
$(‘div#myId’); vs. $(‘#myId’);
//Under selection
$(‘.randomClass’); vs. $(‘div.randomClass’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 47. OSCON jQuery Training
The Context
//Entire Document
$(‘div’)
//Scope your selector
//$(‘selector’, <context>)
$(‘#table’).find(‘selector’)
$(‘a’).click(function() {
$(‘span’, this)...
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 48. OSCON jQuery Training
The Context
‣ Two different scoping methods
‣ $(‘selector’, this)
‣ $(this).find(‘selector’)
‣ Can access context with the context property
‣ 1.3 and later
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 49. OSCON jQuery Training
Context Pitfalls
var $mySelection = $(‘selector’, ‘#myid’);
var $mySelection.context = ?
var $mySelection2 = $(‘selector’, $(‘#myid’)[0]);
var $mySelection2.context = ?
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 52. OSCON jQuery Training
jQuery and Methods
‣ Do Something
‣ Showing and Hiding
‣ Iteration
‣ Styling
‣ Behavior
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 53. OSCON jQuery Training
Do Something
$('p').bind('click',function(){
$(this).effect('drop');
});
// hides element by pulling it left
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 54. OSCON jQuery Training
Do Something
<p>One</p>
<p>Two</p>
<p>Three</p>
// Find Something
$(‘p’)
// Do Something
$(‘p’).hide();
// Generic Syntax
$(‘p’) . <Method Name> ( [PARAMETERS] );
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 56. OSCON jQuery Training
Showing and Hiding
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Show the elements
$(‘p’).show();
// Hide the elements
$(‘p’).hide();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 57. OSCON jQuery Training
Showing and Hiding
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Show the elements
$(‘p’).show();
// Hide the elements
$(‘p’).hide();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 58. OSCON jQuery Training
Showing and Hiding
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Show the elements
$(‘p’).show();
// Hide the elements
$(‘p’).hide();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 60. OSCON jQuery Training
Iteration
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).each(function() {
// Operates on each p individually
var rand;
rand = Math.floor( Math.random() * 1 );
if(rand > 1) {
$(this).hide();
}
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 61. OSCON jQuery Training
Iteration
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).each(function() {
// Operates on each p individually
var rand;
rand = Math.floor( Math.random() * 1 );
if(rand > 1) {
$(this).hide();
}
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 62. OSCON jQuery Training
Iteration
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).each(function() {
// Operates on each p individually
var rand;
rand = Math.floor( Math.random() * 1 );
if(rand > 1) {
$(this).hide();
}
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 63. OSCON jQuery Training
Iteration
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).each(function() {
// Operates on each p individually
var rand;
rand = Math.floor( Math.random() * 1 );
if(rand > 1) {
$(this).hide();
}
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 64. OSCON jQuery Training
Iteration
‣ The anonymous function
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 65. OSCON jQuery Training
The Anonymous Function
function foo() { ... }
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 66. OSCON jQuery Training
The Anonymous Function
function foo() { ... }
var foo = function() { ... }
//do this
$(document).click(foo);
//dont do this
$(document).click(foo());
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 67. OSCON jQuery Training
The Anonymous Function
function foo() { ... }
var foo = function() { ... }
$(document).click(foo);
$(document).click(function() { ... });
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 68. OSCON jQuery Training
Iteration
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Changes all elements returned
// via Implicit Iteration
$(‘p’).css(‘color’,‘red’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 69. OSCON jQuery Training
“Each”itis AntiPattern
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Changes all elements returned
// via incredibly inefficient explicit iteration
$(‘p’).each(function(i,v){
$(this).css(‘color’,‘red’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 71. OSCON jQuery Training
Styling
// HTML
<p>One</p>
<p class=”foo”>Two</p>
<p>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 72. OSCON jQuery Training
Styling
// HTML
<p class=”enabled”>One</p>
<p class=”enabled foo”>Two</p>
<p class=”enabled”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 73. OSCON jQuery Training
Styling
// HTML
<p class=”enabled”>One</p>
<p class=”enabled”>Two</p>
<p class=”enabled”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 74. OSCON jQuery Training
Styling
// HTML
<p class=”enabled foo”>One</p>
<p class=”enabled foo”>Two</p>
<p class=”enabled foo”>Three</p>
$(‘p’).addClass(‘enabled’);
$(‘p’).removeClass(‘foo’);
$(‘p’).toggleClass(‘foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 75. OSCON jQuery Training
Styling
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).css(‘color’,‘red’);
$(‘p’).css(‘font-weight’,‘bold’);
$(‘p’).css({
color: ‘red’,
fontWeight: ‘bold’
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 76. OSCON jQuery Training
Styling
<p style=”color: red;”>One</p>
<p style=”color: red;”>Two</p>
<p style=”color: red;”>Three</p>
$(‘p’).css(‘color’,‘red’);
$(‘p’).css(‘font-weight’,‘bold’);
$(‘p’).css({
‘background-color’: ‘blue’,
fontWeight: ‘bold’,
border: ‘1px solid black’
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 78. OSCON jQuery Training
Behavior
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).click(function(event) {
$(this).css(‘color’, ‘red’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 79. OSCON jQuery Training
Behavior
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
$(‘p’).hover(function(event) {
$(this).css(‘color’, ‘red’);
}, function(event) {
$(this).css(‘color’, ‘’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 80. OSCON jQuery Training
Behavior
// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>
// Add event
$(‘p’).click(function(event) {
$(this).css(‘color’, ‘red’);
});
// Remove event
$(‘p’).unbind(‘click’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 83. OSCON jQuery Training
Chaining and Sentences
‣ Method Chaining
‣ The Stack Architecture
‣ Finding vs. Filtering Elements
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 85. OSCON jQuery Training
Method Chaining
$(‘#myForm a’)
.addClass(‘.highlight’)
.click(function(){...})
.hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 86. OSCON jQuery Training
Method Chaining
$(‘#myForm a’)
.addClass(‘.highlight’)
.click(function(){...})
.hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 87. OSCON jQuery Training
Method Chaining
$(‘#myForm a’)
.addClass(‘.highlight’)
.click(function(){...})
.hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 88. OSCON jQuery Training
Method Chaining
$(‘#myForm a’)
.addClass(‘.highlight’)
.click(function(){...})
.hover(function(){...},function(){...});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 89. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...) //jQuery selector
.html(‘Hello world’)
.addClass(‘hello’)
$(...)
.html()
.addClass(‘hello’)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 90. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...)
.html(‘Hello world’) //non breaking
.addClass(‘hello’)
$(...)
.html()
.addClass(‘hello’)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 91. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...)
.html(‘Hello world’)
.addClass(‘hello’) //class will be added
$(...)
.html()
.addClass(‘hello’)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 92. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...)
.html(‘Hello world’)
.addClass(‘hello’)
$(...) //jQuery selector
.html()
.addClass(‘hello’)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 93. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...)
.html(‘Hello world’)
.addClass(‘hello’)
$(...)
.html() //breaking
.addClass(‘hello’)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 94. OSCON jQuery Training
What Breaks the Chain?
//Getters vs. Setters
$(...)
.html(‘Hello world’)
.addClass(‘hello’)
$(...)
.html()
.addClass(‘hello’) //runtime error
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 95. OSCON jQuery Training
What Breaks the Chain?
//put getter last
var myHtml = $(...)
.addClass(‘hello’)
.html();
//store selection in variable
//when multiple getters
//are needed
var $mySelection = $(...);
var myHtml = $mySelection.html();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 97. OSCON jQuery Training
jQuery Collections (Buckets)
$(‘body’) [body]
.find(‘p’) [p, p, p] => [body]
.find(‘a’) [a, a] => [p, p, p] => [body]
.addClass(‘foo’)
.end() [p, p, p] => [body]
.end() [body]
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 98. OSCON jQuery Training
Method Chaining
$(‘tr’)
.filter(‘:odd’)
.addClass(‘odd’)
.end()
.find(‘td.company’)
.addClass(‘companyName’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 100. OSCON jQuery Training
Finding Elements
$(‘body’) [body]
.find(‘p’) [p, p, p] => [body]
.find(‘a’) [a, a] => [p, p, p] => [body]
.addClass(‘foo’)
.end() [p, p, p] => [body]
.end() [body]
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 101. OSCON jQuery Training
Filtering Elements
$(‘a’) [a, a.foo, a]
.filter(‘.foo’) [a.foo] => [a, a.foo, a]
.attr(‘href’, ‘http://appendto.com’)
.end() [a, a.foo, a]
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 102. OSCON jQuery Training
Find vs. Filter
‣ find() searches the DOM for descendants of elements in the current jQuery
wrapped collection
‣ filter() searches the current jQuery collection and returns a reduced set (sub set)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 104. OSCON jQuery Training
jQuery and DOM Manipulation
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 105. OSCON jQuery Training
jQuery and DOM Manipulation
‣ Creating Elements
‣ Inserting Elements
‣ Removing Elements
‣ Cloning Elements
‣ Wrapping Elements
‣ Attributes
‣ Data
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 107. OSCON jQuery Training
Creating Elements
$(‘<div></div>’);
// Creates ...
<div></div>
var ul = $(‘<ul><li>Hello</li></ul>’);
// Creates ...
<ul>
<li>Hello</li>
</ul>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 108. OSCON jQuery Training
Creating Elements
// New in 1.4
$("<div/>", {
class: "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
});
// Clicking toggles the class
<div class=”test”>Click me!</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 110. OSCON jQuery Training
Inserting Elements
// Before
<p>Apple</p>
<p>Orange</p>
$(‘p’).after(‘<img src=”logo.png” />’);
// After
<p>Apple</p>
<img src=”logo.png />
<p>Orange</p>
<img src=”logo.png />
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 111. OSCON jQuery Training
Inserting Elements
// Before
<p>Apple</p>
<p>Orange</p>
$(‘p’).before(‘<img src=”logo.png” />’);
// After
<img src=”logo.png” />
<p>Apple</p>
<img src=”logo.png” />
<p>Orange</p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 112. OSCON jQuery Training
Inserting Elements
// Before
<p id=”apple”>Apple</p>
<p id=”orange”>Orange</p>
$(‘#apple’).prepend(‘<img src=”apple.png” />’);
$(‘#orange’).append(‘<img src=”orange.png” />’);
// After
<p id=”apple”><img src=”apple.png” />Apple</p>
<p id=”orange”>Orange<img src=”orange.png” /></p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 113. OSCON jQuery Training
// Before
<p id=”apple”>Apple</p>
<p id=”orange”>Orange</p>
$(‘<img src=”apple.png” />’).prependTo(‘#apple’);
$(‘<img src=”orange.png” />’).appendTo(‘#orange’);
// After
<p id=”apple”><img src=”apple.png” />Apple</p>
<p id=”orange”>Orange<img src=”orange.png” /></p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 114. OSCON jQuery Training
Element Creation Best Practice
//Use object literal syntax for single (non-nested)
element creation
//If creating nested elements use a single string
//yes
$(‘<div><a href=”url”>link text</a></div>’)
.appendTo(‘body’);
//slower
$(‘<a href=”url”>link text</a>’)
.appendTo(‘<div>’)
.appendTo(‘body’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 116. OSCON jQuery Training
Removing Elements
// Before
<div>
<p>Red</p>
<p>Green</p>
</div>
// Removing Elements Directly
$(‘p’).remove();
// After
<div>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 117. OSCON jQuery Training
Empty Elements
// Before
<div>
<p><em>Red</em></p>
<p><em>Green</em></p>
</div>
$(‘p’).empty();
// After
<div>
<p></p>
<p></p>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 118. OSCON jQuery Training
Detaching Elements
// Before
<div id=”container”>
<p>Foo Bar</p>
</div>
var $bucket = $(‘p’).detach();
$bucket.insertAfter(‘#container’);
// After
<div id=”container>
</div>
<p>Foo Bar</p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 120. OSCON jQuery Training
Cloning Elements
// Before
<div id=”source”> <strong>The Source</strong> </div>
// Copies the element instead of moving it
$(‘#source’).clone().appendTo(‘body’);
// After
<div id=”source”> <strong>The Source</strong> </div>
<div id=”source”> <strong>The Source</strong> </div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 121. OSCON jQuery Training
Cloning Elements
// Before
<div id=”source”> <strong>The Source</strong> </div>
// Copies the element instead of moving it
$(‘#source’).clone(true).appendTo(‘body’);
// After
<div id=”source”> <strong>The Source</strong> </div>
<div id=”source”> <strong>The Source</strong> </div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 123. OSCON jQuery Training
Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>
$(‘p’).wrap(‘<div></div>’);
// After
<div><p>Hello world</p></div>
<div><p>Foo bar</p></div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 124. OSCON jQuery Training
Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>
// As a group
$(‘p’).wrapAll(‘<div></div>’);
// After
<div><p>Hello world</p>
<p>Foo bar</p></div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 125. OSCON jQuery Training
Wrapping Elements
// Before
<p>Hello world</p>
<p>Foo bar</p>
// Wrapping Children
$(‘p’).wrapInner(‘<a href=”#”></a>’);
// After
<p><a href=”#”>Hello world</a></p>
<p><a href=”#”>Foo bar</a></p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 126. OSCON jQuery Training
Unwrapping Elements (new in 1.4+)
// Before
<div><p>Hello world</p></div>
<div><p>Foo bar</p></div>
//Individually
$(‘p’).unwrap();
// After
<p>Hello world</p>
<p>Foo bar</p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 128. OSCON jQuery Training
.attr()
// Before
<img id=”logo” />
$(‘#logo’).attr(‘src’, ‘logo.png’);
// After
<img id=”logo” src=”logo.png” />
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 129. OSCON jQuery Training
.attr()
// Markup
<img id=”logo” title=”Hello world” />
var title = $(‘#logo’).attr(‘title’);
//title === “Hello world”
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 130. OSCON jQuery Training
.attr()
// Before
<img id=”logo” />
$(‘#logo’).attr({
src: ‘logo.png’,
alt: ‘Company logo’
});
// After
<img id=”logo” src=”logo.png” alt=”Company logo” />
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 131. OSCON jQuery Training
.attr()
// Before
<img id=”logo” src=”logo.png” alt=”Company logo” />
$(‘#logo’).attr(‘class’, function() {
var c = [‘a’, ‘b’, ‘c’];
var r = Math.floor( Math.random() * 3 );
return c[r];
});
// After (randomized class name)
<img id=”logo” src=”logo.png” alt=”Company logo”
class=”a” />
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 132. OSCON jQuery Training
Element Contents
<div id=”header”>
<em>HEADER</em>
</div>
// Returns ‘<em>HEADER</em>
var theHtml = $(‘#header’).html();
$(‘#header’).html(‘<ul><li>One</li></ul>’);
<div id=”header”>
<ul><li>One</li></ul>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 133. OSCON jQuery Training
Element Contents
<div id=”header”>
<em>HEADER</em>
</div>
// Returns ‘HEADER’
$(‘#header’).text();
$(‘#header’).text(‘<em>Hello world</em>’);
<div id=”header”>
<em>Hello world</em>
</div>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 134. OSCON jQuery Training
.val()
<input id=”email” type=‘text’ value=‘foo bar’ />
// Returns ‘foo bar’
$(‘#email’).val();
// Sets value to ‘The value’
$(‘#email’).val(‘The value’);
<input id=”email” type=‘text’ value=‘The value’ />
$(‘select’).val([ ‘red’, ‘green’ ]);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 136. OSCON jQuery Training
Data
// HTML
<div id=”myDiv”>
<p>One</p>
</div>
// Potential for a Memory Leak
var elem = $(‘#myDiv’)[0];
elem.foo = new String(‘xyz’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 137. OSCON jQuery Training
Data
// HTML
<div id=”myDiv”>
<p>One</p>
</div>
// Cross Browser Safe Method to attach data
$(‘#myDiv’).data(‘foo’, new String(‘xyz’));
var myVar = $(‘#myDiv’).data(‘foo’);
$(‘#myDiv’).removeData(‘foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 138. OSCON jQuery Training
Data (new in 1.4+)
var object1 = { abc: 123 };
var object2 = { xyz: 789 };
$(‘#myDiv’).data(‘object1’, object1);
$(‘#myDiv’).data(‘object2’, object2);
var objects = $(‘#myDiv’).data();
objects.object1;
objects.object2;
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 141. OSCON jQuery Training
jQuery and Events
‣ Binding Events
‣ Binding Multiple Events
‣ The Event Object
‣ Event Namespacing
‣ Event Propagation
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 143. OSCON jQuery Training
jQuery Event Shortcuts
// Binding an event
$('a.tab').click(function(){
// event handling code
$(this).css(‘color’, ‘red’);
});
// Binding an event
$('a.tab').mouseover(function(){
// event handling code
$(this).css(‘color’, ‘red’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 144. OSCON jQuery Training
Common Types of Events
‣ click, dblclick, mouseover, mouseout
‣ mouseenter, mouseleave
‣ change, focus, blur
‣ keydown, keyup, keypress
‣ scroll, resize
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 145. OSCON jQuery Training
Hover Shortcut
// mouseenter, mouseleave
$(‘li’).hover(
function() {
$(this).addClass(‘hover’);
},
function() {
$(this).removeClass(‘hover’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 146. OSCON jQuery Training
Hover Shortcut
// mouseenter, mouseleave
$(‘li’)
.bind(‘mouseenter’, function() {
$(this).addClass(‘hover’);
})
.bind(‘mouseleave’, function() {
$(this).removeClass(‘hover’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 147. OSCON jQuery Training
Hover Shortcut
// Optimal hover
$(‘li’)
.hover(function(evt) {
var add = evt.type == ‘mouseenter’;
$(this).toggleClass(‘hover’, add);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 148. OSCON jQuery Training
Hover Shortcut
// Optimal hover
$(‘li’)
.hover(function(evt) {
$(this).toggleClass(‘hover’, evt.type ==
‘mouseenter’);
});
$(‘li’)
.bind(‘mouseenter mouseleave’,fn);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 149. OSCON jQuery Training
Binding Events with .bind()
// Binding an event
$('a.tab').bind('click',function(e){
// event handling code
$(this).css(‘color’, ‘red’);
});
// Unbinding an event
$('a.tab').unbind('click');
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 150. OSCON jQuery Training
Binding Events
// Bind an event to execute once
$('a.tab').one('click',function(e){
// event handling code
$(this).css(‘color’,‘red’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 152. OSCON jQuery Training
Binding Multiple Events
$(‘div’).bind(‘mouseover mouseout’,
function(e) {
if ( e.type == ‘mouseover’ ) {
$(this).addClass('highlight');
}
elseif ( e.type == ‘mouseout’ ) {
$(this).removeClass('highlight');
}
});
$(‘div’).unbind(‘mouseover mouseout’);
$(‘div’).unbind();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 153. OSCON jQuery Training
Binding Multiple Events
$('a.tab').hover(
function(e){
$(this).addClass('highlight');
},
function(e){
$(this).removeClass('highlight');
}
);
// Unbind the hover event
$(‘a.tab’).unbind('mouseenter mouseleave')
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 154. OSCON jQuery Training
Binding Multiple Events
// Arbitrary number of functions to execute
cyclically on click
$('a.tab').toggle(
function(){
$(this).css('color','red');
},
function(){
$(this).css('color','yellow');
},
function(){
$(this).css('color','green');
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 156. OSCON jQuery Training
The Event Object
‣ Event Object Properties
type pageX
timeStamp pageY
target data
relatedTarget result
currentTarget which
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 157. OSCON jQuery Training
The Event Object
‣ event.type
The name of the event (all lowercase)
‣ event.target
The element that the event originated at
‣ event.pageX, event.pageY
Coordinates in pixels of mouse position on page (not populated for key events)
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 159. OSCON jQuery Training
Event Namespacing
‣ Tagging for event handlers
‣ Added in jQuery 1.2
namespace post - http://bit.ly/aCaFXS
‣ Simplifies unbinding of events
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 160. OSCON jQuery Training
Binding Namespaced Events
$(‘div’)
.bind(‘click’, fn)
.bind(‘click.foo’, fn)
.bind(‘mouseover.foo’, fn);
// Unbind click.foo event
$(‘div’).unbind(‘click.foo’);
// Unbind all .foo namespaced events
// click.foo, mouseover.foo
$(‘div’).unbind(‘.foo’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 162. OSCON jQuery Training
Event Propagation - Anchor Tag
<div><p>
<a href=”#”>Link</a>
</p></div>
$(‘div’).click(function() {
alert(‘clicked div!’);
});
$(‘a’).click(function() {
alert(‘clicked!’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 163. OSCON jQuery Training
Event Propagation - Paragraph Tag
<div><p>
<a href=”#”>Link</a>
</p></div>
$(‘div’).click(function() {
alert(‘clicked div!’);
});
$(‘a’).click(function() {
alert(‘clicked!’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 164. OSCON jQuery Training
Event Propagation - Paragraph Tag
<div><p>
<a href=”#”>Link</a>
</p></div>
$(‘div’).click(function(evt) {
// evt.target == a
alert(‘clicked div!’);
});
$(‘a’).click(function() {
alert(‘clicked!’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 165. OSCON jQuery Training
Event Propagation - Div Tag
<div id=”navigation”><p>
<a href=”#”>Link</a>
</p></div>
$(‘#navigation’).click(function(evt) {
// evt.target == anchor tag
alert(‘clicked div!’);
// this = Reference to div DOM element
$(this).addClass(‘active’);
});
$(‘a’).click(function() { alert(‘clicked!’); });
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 166. OSCON jQuery Training
Event Propagation - Stopping Prop.
<div><p>
<a href=”#”>Link</a>
</p></div>
$(‘div’).click(function() {
alert(‘clicked div!’);
});
$(‘a’).click(function() {
alert(‘clicked!’);
return false;
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 167. OSCON jQuery Training
Event Propagation - Stopping Prop.
<div><p>
<a href=”#”>Link</a>
</p></div>
$(‘div’).click(function() { alert(‘clicked
div!’); });
$(‘a’).click(function(evt) {
alert(‘clicked!’);
evt.stopPropagation();
evt.preventDefault();
return false; // Same as two lines above
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 168. OSCON jQuery Training
Event Propagation - Returning False
Stop events from bubbling
Prevent the default event action from occurring
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 170. OSCON jQuery Training
Live Events - Binding
// Before
<p>One</p>
// Code
$(‘p’).live(‘click’,function() {
alert(‘P Pressed’)
});
$(‘<p />’).text(‘Two’).appendTo(‘body’);
// After
<p>One</p>
<p>Two</p>
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 171. OSCON jQuery Training
Live Events - Unbinding
// Remove with .die()
$(‘p’).die();
// .die() also accepts an event type
$(‘p’).die(‘click’);
// Namespace Example
$(‘p’).die(‘click.one’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 172. OSCON jQuery Training
Live Events - Namespacing
// .live() performs just like .bind()
$(‘p’).live(‘click dblclick’, function(e){
if(e.type == ‘click’) {
...
}
});
// .live() can take namespaced events
$(‘p’).live(‘click.one’,function(e) {
alert(‘Click.one’);
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 173. OSCON jQuery Training
Live and delegate
//1.4+ - live events can be given a context
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
//delegate is short hand method for this best
//practice pattern
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 174. OSCON jQuery Training
Triggering Events
// HTML
<p>One</p>
// Assign the event
$(‘p’).live(‘click’,function() {
alert(‘P Pressed’)
});
// Trigger the event manually
$(‘p’).trigger(‘click’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 175. OSCON jQuery Training
Triggering Events
// HTML
<p>One</p>
// Assign the event
$(‘p’).live(‘click’,function() {
alert(‘P Pressed’)
});
// Some Event types have shortcuts
$(‘p’).click();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 177. OSCON jQuery Training
Event Data - Event Object
// HTML
<p>One</p>
// Define the custom event
var foo = ‘bar’;
$(‘p’).bind(‘click’, {msg: foo},
function(evt){
alert(‘Parameter: ’+ evt.data.msg)
}
);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 180. OSCON jQuery Training
jQuery and Ajax
‣ Request Types
‣ Data Formats
‣ Request Callbacks
‣ Making a Request
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 182. OSCON jQuery Training
Request Types
Core Method Shortcuts
‣ $.ajax(); ‣ $.get();
‣ $.post();
‣ $.getJSON();
‣ $.getScript();
‣ $( ... ).load();
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 184. OSCON jQuery Training
Data Formats
‣ xml Returned as DOM
‣ html Returned as String
‣ json Returned as Object
‣ jsonp Returned as Object
‣ text Returned as String
‣ script Evaluated & Returned as String
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 186. OSCON jQuery Training
Request Callbacks
‣ success: function(data, status, XMLHttpRequest) { ... }
‣ error: function(XMLHttpRequest, textStatus, error) { ... }
‣ complete: function(XMLHttpRequest, status) { ... }
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 188. OSCON jQuery Training
Making a Request
$.get(‘page.php’, function(data) {
$(data).appendTo(‘body’);
}, ‘html’);
var data = { fname: ‘Andrew’, lname: ‘Wirick’ };
$.post(‘page.php’, data, function(data) {
$(data).appendTo(‘body’);
}, ‘html’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 189. OSCON jQuery Training
Making a Request JSON
// Response
{“names”: [“Jonathan”, “Mike”, “Andrew”],
“states”: {“NE” : “Nebraska”},
“year” : “2010” }
$.getJSON(‘page.php’, function(json) {
$(‘body’).append( json.names[0] );
$(‘body’).append( json.states.NE );
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 190. OSCON jQuery Training
Making a Request JSON
// Response
{ “names”: [“Jonathan”, “Mike”, “Andrew”] }
$.getJSON(‘page.php’, function(json) {
$.each(json.names, function(i, val) {
$(‘body’).append( val );
});
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 191. OSCON jQuery Training
Making a Request XML
// Response
<movies><movie id=”123”><title>Back to the future</
title></movie></movies>
$.get(‘movies.php’, function(xml) {
var title = $(xml)
.find(‘movie[id=123] > title’)
.text();
$(‘body’).append( title );
}, ‘xml’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 192. OSCON jQuery Training
Making a Request XML
// Response
<document><![CDATA[
<h1>Some data</h1>
]]></document>
$.get(‘movies.php’, function(root) {
var title = $(root)
.find(‘document’)
.text();
$(‘body’).append( title );
}, ‘xml’);
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 193. OSCON jQuery Training
Cross Domain Requests
var url = ‘http://flickr.com...’;
$.getJSON(url, function(json) {
// Iterate the items and generate HTML
});
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY
- 195. OSCON jQuery Training
Thank you for coming!
http://appendTo.com
@appendTo
Copyright © 2010 appendTo, LLC.
THE jOUERY COMPANY