Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
jQuery
Ryan L. Cross
September 19, 2012
Programming
6
340
jQuery
Ryan L. Cross
September 19, 2012
Tweet
Share
More Decks by Ryan L. Cross
See All by Ryan L. Cross
slant
0
76
slant
1
190
slant
1
250
slant
1
190
Other Decks in Programming
See All in Programming
yumcyawiz
4
640
cwozaki
1
1.8k
77web
0
210
siketyan
1
110
yamotuki
0
130
showwin
0
120
inoue2002
0
270
itosho525
0
140
line_developers_tw
0
530
akatsukinewgrad
0
190
chichou
1
840
kubode
0
200
Featured
See All Featured
holman
461
280k
sachag
446
36k
keavy
106
14k
hannesfritz
27
930
jnunemaker
PRO
40
4.6k
caitiem20
308
17k
nonsquared
81
3.3k
addyosmani
494
110k
cromwellryan
101
5.9k
wjessup
338
16k
myddelton
109
11k
hatefulcrawdad
257
17k
Transcript
Enclave Discussions by Ryan L. Cross Tuesday, September 18, 12
What is jQuery? j•Query noun \jā-ˈkwir-ē\ A fast and concise
JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Tuesday, September 18, 12
The Players ‣ The jQuery object ‣ jQuery(document) ‣ $(document)
‣ Selectors ‣ $('div') ‣ Methods ‣ $('p').show() ‣ Method chaining ‣ $('p').val('Hello there').show() ‣ Functions ‣ function say(something) { alert(something) } ‣ (function(){ alert("Hello there!") })() Tuesday, September 18, 12
Selectors ‣ Element selector ‣ $('p') ‣ ID and Class
selectors ‣ $('div#things') ‣ $('p.note') ‣ Attribute selectors ‣ $('input[type=text]') ‣ Pseudo selectors ‣ $('input:focus') ‣ $('input:blur') ‣ Pseudo selectors ‣ $(':has(p)') http://api.jquery.com/category/selectors An extremely powerful way to specify which elements you want. <p>first</p> <p>second</p> <div id="things"></div> <p class="note"></p> <input type="text" /> <input /> <div><p></p></div> Tuesday, September 18, 12
Effects ‣ Show and hide ‣ $('#box').hide() ‣ $('#box').show() ‣
Fade ‣ $('#box').fadeOut() ‣ $('#box').fadeIn() ‣ Animate ‣ $('#box').animate( { opacity: 0.5 }, 5000, function(){ alert('It moved!') } ) http://api.jquery.com/category/effects Making things look pretty Tuesday, September 18, 12
Events ‣ Events in general ‣ $('button').click(function(){ alert('Clicked!') }) ‣
$('input').focus(function(){ alert('Please type a thing.') }) ‣ A problem ‣ $('.add-li').click(function(){ $('ul').append('<li class="cats"></li>') }) ‣ $('.cats').click(function(){ alert('Clicked!') }) ‣ bind() and live() ‣ $(...).bind(...) ‣ $(...).live(...) ‣ Introducing on() ‣ $('button').on('click', function(){ alert('Clicked!') }) http://api.jquery.com/category/events Responding to user actions Tuesday, September 18, 12
Hey document, are you ready? ‣ document object ‣ $(document).ready()
‣ $(document).ready(function(){ // do things here }) Tuesday, September 18, 12
AJAX ‣ AJAX requests ‣ $.ajax({ url: 'http://example.com/users.json', data: {
name: 'Ryan' }, type: 'post', complete: function(data, textStatus, jqxhr){ alert('Done!') } }) ‣ GET requests ‣ $.get('http://example.com/users.json') ‣ POST requests ‣ $.post( 'http://example.com/users.json', { name: 'Ryan' }, function(data){ alert('Done!') } ) ‣ load() ‣ $('#things').load('http://example.com/users.json') http://api.jquery.com/category/events How to communicate with an API Tuesday, September 18, 12
Live Demo Guaranteed to fail many times! Tuesday, September 18,
12
Fin Tuesday, September 18, 12
Ryan L. Cross github.com/cylence @slant Coming up next Oct 16,
2012 Backbone.js Nov 20, 2012 Node.js Tuesday, September 18, 12