the jouery company - o'reilly mediaassets.en.oreilly.com/1/event/45/cooking with jquery...
TRANSCRIPT
![Page 1: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/1.jpg)
T H E j O U E R Y C O M P A N Y
Copyright © 2010 appendTo, LLC.
http://appendto.com
![Page 2: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/2.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to jQuery
![Page 3: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/3.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣The jQuery Project
‣ Including jQuery
‣The jQuery Object
‣ Introduction to JavaScript
‣ Lifecycle of a Page
Introduction to jQuery
![Page 4: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/4.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The jQuery Project
![Page 5: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/5.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery Core
jquery.com
jQuery UI
jqueryUI.com
Sizzle JS
sizzlejs.com
QUnit
qunitjs.com
jQuery Project - jquery.org(Software Freedom Conservancy)
![Page 6: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/6.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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
![Page 7: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/7.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Including jQuery
![Page 8: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/8.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣http://code.jquery.com/jquery-1.4.2.min.js
‣ SSL vs. Non SSL?
‣ src=“//code.jquery.com/jquery-1.4.2.min.js”
Locations
![Page 9: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/9.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Source
Minified
![Page 10: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/10.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The jQuery Objectfunction jQuery(selector) { ...}
// Select an element with jQueryjQuery(‘body’);
// Use the $ for brevityvar $ = jQuery;$(‘body’);
![Page 11: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/11.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to JavaScript
![Page 12: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/12.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Introduction to JavaScript‣ Script blocks
‣Quotes and Whitespace
‣Variables
‣ Functions
‣Object-Hash
‣Objects
![Page 13: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/13.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 14: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/14.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Quotes & Whitespace// Single Quotesvar name = ‘John’;
// Double Quotesvar name = “John”;
// Whitespacevar name = ‘John’;
// Terminate statements with a semi colon;// Will work, but bad practice!var name = ‘John’
![Page 15: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/15.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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)
![Page 16: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/16.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variables// Stringvar name = ‘John’;
// Integer(number)var age = 30;
// Arrayvar children = [‘Jane’, ‘Jimmy’];
// Booleanvar isMarried = true;
![Page 17: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/17.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Functionsfunction alertName() { alert(‘Hello John’);}
// Accept argumentsfunction alertName(name) { alert(‘Hello ‘ + name);}
// Call the functionalertName(‘John’); //Hello John
![Page 18: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/18.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Functions// Function assignmentvar alertName = function(name) { alert(‘Hello ‘ + name);}
// Call the functionalertName(‘John’); //Hello John
![Page 19: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/19.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variable Scopevar name = ‘John’;
function myFunction() { alert(‘Name is: ‘ + name);}
...
myFunction(); //Name is John
![Page 20: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/20.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Variable Scopevar name = ‘John’;
function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name);}
![Page 21: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/21.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Object-hash (Object Literal)// Empty objectvar person = {};
// Object-hash may contain key/valuesvar person = { name: ‘John’, age: 30, children: [‘Jane’, ‘Jimmy’], isMarried: true};
![Page 22: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/22.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Objectvar person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); }};
person.introduceYourself(); //John is 30
![Page 23: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/23.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lifecycle of a Page
![Page 24: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/24.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lifecycle of a Page‣ Initial HTTP Request
‣ Load Scripts, Stylesheets and Images
‣ Scripts block!
‣Head first style, scripts later
![Page 25: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/25.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 26: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/26.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
DOM Ready// Callback functionfunction domIsReady() { $(‘body’).append(‘Hello world’); //magic}
$(document).ready(domIsReady);
![Page 27: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/27.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 28: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/28.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 29: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/29.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 30: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/30.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Selectors
![Page 31: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/31.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣ Selectors
‣Compound Selectors
‣ Selecting by the API
‣The Context Argument
jQuery and Selectors
![Page 32: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/32.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selectors// Select By ID
<div id=”foo”></div><div></div>
$(‘#foo’);
<div id=”foo”></div><div></div>
![Page 33: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/33.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 34: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/34.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selectors// Select by tag<ul><li>Apple</li><li>Pear</li></ul>
$(“li”);
<ul><li>Apple</li><li>Pear</li></ul>
![Page 35: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/35.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 36: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/36.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Compound Selectors‣As of 1.4+ elements are always returned in document order
![Page 37: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/37.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Select By Relationship
![Page 38: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/38.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 39: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/39.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 40: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/40.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 41: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/41.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 42: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/42.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 43: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/43.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 44: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/44.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 45: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/45.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 46: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/46.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Selector Pitfalls//Over selection$(‘div#myId’); vs. $(‘#myId’);
//Under selection$(‘.randomClass’); vs. $(‘div.randomClass’);
![Page 47: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/47.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Context//Entire Document$(‘div’)
//Scope your selector//$(‘selector’, <context>)$(‘#table’).find(‘selector’)
$(‘a’).click(function() { $(‘span’, this)...});
![Page 48: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/48.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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
![Page 49: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/49.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Context Pitfallsvar $mySelection = $(‘selector’, ‘#myid’);var $mySelection.context = ?
var $mySelection2 = $(‘selector’, $(‘#myid’)[0]);var $mySelection2.context = ?
![Page 50: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/50.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 51: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/51.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Methods
![Page 52: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/52.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Do Something
‣ Showing and Hiding
‣ Iteration
‣ Styling
‣Behavior
jQuery and Methods
![Page 53: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/53.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Do Something$('p').bind('click',function(){ $(this).effect('drop');});
// hides element by pulling it left
![Page 54: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/54.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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] );
![Page 55: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/55.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Showing and Hiding
![Page 56: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/56.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 57: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/57.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 58: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/58.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 59: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/59.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration
![Page 60: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/60.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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(); }});
![Page 61: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/61.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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(); }});
![Page 62: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/62.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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(); }});
![Page 63: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/63.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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(); }});
![Page 64: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/64.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Iteration‣The anonymous function
![Page 65: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/65.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }
![Page 66: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/66.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }var foo = function() { ... }//do this$(document).click(foo);
//dont do this$(document).click(foo());
![Page 67: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/67.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Anonymous Functionfunction foo() { ... }var foo = function() { ... }$(document).click(foo);$(document).click(function() { ... });
![Page 68: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/68.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 69: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/69.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);});
![Page 70: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/70.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Styling
![Page 71: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/71.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 72: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/72.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 73: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/73.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 74: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/74.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 75: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/75.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’});
![Page 76: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/76.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’});
![Page 77: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/77.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior
![Page 78: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/78.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Behavior// HTML<p>One</p><p>Two</p><p>Three</p>
$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});
![Page 79: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/79.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’, ‘’);});
![Page 80: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/80.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 81: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/81.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 82: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/82.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Chaining and Sentences
![Page 83: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/83.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Method Chaining
‣The Stack Architecture
‣ Finding vs. Filtering Elements
Chaining and Sentences
![Page 84: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/84.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining
![Page 85: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/85.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
![Page 86: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/86.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
![Page 87: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/87.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
![Page 88: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/88.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});
![Page 89: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/89.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() .addClass(‘hello’)
![Page 90: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/90.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) //non breaking .addClass(‘hello’)
$(...) .html() .addClass(‘hello’)
![Page 91: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/91.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added
$(...) .html() .addClass(‘hello’)
![Page 92: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/92.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) //jQuery selector .html() .addClass(‘hello’)
![Page 93: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/93.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() //breaking .addClass(‘hello’)
![Page 94: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/94.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//Getters vs. Setters$(...) .html(‘Hello world’) .addClass(‘hello’)
$(...) .html() .addClass(‘hello’) //runtime error
![Page 95: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/95.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
What Breaks the Chain?//put getter lastvar myHtml = $(...) .addClass(‘hello’) .html();
//store selection in variable //when multiple getters//are neededvar $mySelection = $(...);
var myHtml = $mySelection.html();
![Page 96: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/96.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Stack Architecture
![Page 97: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/97.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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]
![Page 98: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/98.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Method Chaining$(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’);
![Page 99: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/99.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Finding vs. Filtering
![Page 100: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/100.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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]
![Page 101: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/101.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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]
![Page 102: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/102.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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)
![Page 103: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/103.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 104: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/104.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and DOM Manipulation
![Page 105: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/105.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Creating Elements
‣ Inserting Elements
‣Removing Elements
‣Cloning Elements
‣Wrapping Elements
‣Attributes
‣Data
jQuery and DOM Manipulation
![Page 106: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/106.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Creating Elements
![Page 107: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/107.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Creating Elements$(‘<div></div>’);
// Creates ...<div></div>
var ul = $(‘<ul><li>Hello</li></ul>’);
// Creates ...<ul> <li>Hello</li></ul>
![Page 108: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/108.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 109: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/109.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Inserting Elements
![Page 110: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/110.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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 />
![Page 111: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/111.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 112: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/112.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 113: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/113.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 114: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/114.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 115: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/115.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Removing Elements
![Page 116: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/116.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Removing Elements// Before<div> <p>Red</p> <p>Green</p></div>
// Removing Elements Directly$(‘p’).remove();
// After<div></div>
![Page 117: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/117.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 118: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/118.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 119: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/119.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cloning Elements
![Page 120: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/120.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 121: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/121.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 122: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/122.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Modifying Elements
![Page 123: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/123.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 124: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/124.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 125: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/125.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 126: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/126.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 127: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/127.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Attributes
![Page 128: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/128.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Before<img id=”logo” />
$(‘#logo’).attr(‘src’, ‘logo.png’);
// After<img id=”logo” src=”logo.png” />
![Page 129: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/129.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
.attr()// Markup<img id=”logo” title=”Hello world” />
var title = $(‘#logo’).attr(‘title’);//title === “Hello world”
![Page 130: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/130.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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” />
![Page 131: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/131.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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” />
![Page 132: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/132.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 133: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/133.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 134: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/134.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’ ]);
![Page 135: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/135.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data
![Page 136: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/136.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data// HTML<div id=”myDiv”> <p>One</p></div>
// Potential for a Memory Leakvar elem = $(‘#myDiv’)[0];
elem.foo = new String(‘xyz’);
![Page 137: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/137.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 138: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/138.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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;
![Page 139: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/139.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 140: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/140.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
jQuery and Events
![Page 141: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/141.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Binding Events
‣Binding Multiple Events
‣The Event Object
‣Event Namespacing
‣Event Propagation
jQuery and Events
![Page 142: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/142.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Events
![Page 143: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/143.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);});
![Page 144: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/144.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Common Types of Events‣ click, dblclick, mouseover, mouseout
‣mouseenter, mouseleave
‣ change, focus, blur
‣keydown, keyup, keypress
‣ scroll, resize
![Page 145: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/145.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// mouseenter, mouseleave
$(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); });
![Page 146: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/146.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// mouseenter, mouseleave
$(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); });
![Page 147: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/147.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// Optimal hover
$(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); });
![Page 148: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/148.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Hover Shortcut// Optimal hover
$(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); });
$(‘li’) .bind(‘mouseenter mouseleave’,fn);
![Page 149: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/149.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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');
![Page 150: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/150.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Events// Bind an event to execute once
$('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’);});
![Page 151: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/151.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Binding Multiple Events
![Page 152: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/152.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 153: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/153.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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')
![Page 154: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/154.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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'); });
![Page 155: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/155.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object
![Page 156: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/156.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object‣Event Object Properties
typetimeStamp
targetrelatedTargetcurrentTarget
pageXpageY
dataresultwhich
![Page 157: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/157.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
The Event Object‣event.type
The name of the event (all lowercase)
‣event.targetThe element that the event originated at
‣event.pageX, event.pageYCoordinates in pixels of mouse position on page (not populated for key events)
![Page 158: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/158.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Namespacing
![Page 159: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/159.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Namespacing‣Tagging for event handlers
‣Added in jQuery 1.2namespace post - http://bit.ly/aCaFXS
‣ Simplifies unbinding of events
![Page 160: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/160.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 161: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/161.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation
![Page 162: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/162.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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!’);});
![Page 163: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/163.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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!’);});
![Page 164: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/164.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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!’);});
![Page 165: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/165.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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!’); });
![Page 166: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/166.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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;});
![Page 167: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/167.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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});
![Page 168: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/168.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Propagation - Returning FalseStop events from bubblingPrevent the default event action from occurring
![Page 169: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/169.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Live Events
![Page 170: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/170.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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>
![Page 171: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/171.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 172: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/172.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);});
![Page 173: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/173.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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");});
![Page 174: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/174.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 175: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/175.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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();
![Page 176: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/176.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Parameters
![Page 177: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/177.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Event Data - Event Object// HTML<p>One</p>
// Define the custom eventvar foo = ‘bar’;$(‘p’).bind(‘click’, {msg: foo}, function(evt){ alert(‘Parameter: ’+ evt.data.msg) });
![Page 178: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/178.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 179: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/179.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Lesson 7
jQuery and Ajax
![Page 180: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/180.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
‣Request Types
‣Data Formats
‣Request Callbacks
‣Making a Request
jQuery and Ajax
![Page 181: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/181.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Types
![Page 182: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/182.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Types
‣$.ajax(); ‣$.get();
‣$.post();
‣$.getJSON();
‣$.getScript();
‣$( ... ).load();
ShortcutsCore Method
![Page 183: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/183.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Data Formats
![Page 184: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/184.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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
![Page 185: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/185.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Callbacks
![Page 186: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/186.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Request Callbacks‣ success: function(data, status, XMLHttpRequest) { ... }
‣error: function(XMLHttpRequest, textStatus, error) { ... }
‣ complete: function(XMLHttpRequest, status) { ... }
![Page 187: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/187.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Making a Request
![Page 188: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/188.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 189: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/189.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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 );});
![Page 190: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/190.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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 ); });});
![Page 191: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/191.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 192: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/192.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
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’);
![Page 193: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/193.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Cross Domain Requestsvar url = ‘http://flickr.com...’;
$.getJSON(url, function(json) { // Iterate the items and generate HTML });
![Page 194: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/194.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
Questions?
![Page 195: THE jOUERY COMPANY - O'Reilly Mediaassets.en.oreilly.com/1/event/45/Cooking with jQuery Presentation.pdfTHE jOUERY COMPANY OSCON jQuery Training Selectors // Select by class](https://reader031.vdocument.in/reader031/viewer/2022022011/5b0c5e267f8b9a6a6b8c3e48/html5/thumbnails/195.jpg)
Copyright © 2010 appendTo, LLC.T H E j O U E R Y C O M P A N Y
OSCON jQuery Training
http://appendTo.com@appendTo
Thank you for coming!