More Related Content More from Remy Sharp (20) jQuery Loves Developers - SWDC20092. Hi, I'm Remy.
Enjoys: JavaScript &
dressing (sort of) like Mr T.
5. Just as bad
<a href=quot;#quot; onclick=quot;window.open(
'help.html')quot;>Help</a>
8. Corporate
policies
NoScript Firefox
plugin No!
Network script
stripping proxies
9. Corporate
policies
NoScript Firefox
plugin No!
Network script
stripping proxies
14. GD vs. PE
• Old way
• Top down
• All singing all dancing
first
• Add fail cases
• Run out of time, you're
caught out
15. GD vs. PE
• Old way • New way
• Top down • Bottom up
• All singing all dancing • Layered development
first
• No environment
• Add fail cases assumptions
• Run out of time, you're • Works by default
caught out
27. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Community
28. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
jquery-dev
Community jquery-ui-en
jquery-ui-dev
jquery-a11y
29. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Community jquery-ui-en
jquery-ui-dev
@jquerysites
@jqueryui jquery-a11y
30. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Community jquery-ui-en
jquery-ui-dev
@jquerysites
@jqueryui jquery-a11y
IRC channel
freenode.net/#jquery
33. • Selector engine: Sizzle
• DOM manipulation
• Events
• Effects
• Ajax
• Utilities
What's in the box?
41. $
• Selectors - CSS1, CSS2 and some CSS3
• DOM elements
• Raw HTML
• quot;Readyquot; functions
55. ew in
N
1.3 Selector Attributes
• selector, e.g. $('li').find('a').selector == 'li a'
• context
60. Behind the Scenes
• getElementById
• getElementsByTagName
• querySelectorAll
• getElementsByClassName
74. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
75. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
76. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
77. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
78. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
79. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
80. One line!
$img = $('<img />')
.addClass('loading')
.load(function () {
$img.removeClass('loading');
})
.error(function () {
$img.addClass('error')
.attr('src', 'empty.gif');
})
.attr('src', 'somebigimage.jpg')
.appendTo('body');
84. <ul>
$('li a')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
85. <ul>
$('li a')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
86. <ul>
$('li a').next()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
87. <ul>
$('li a').next()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
88. <ul>
$('li a').next().parent()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
89. <ul>
$('li a').next().parent()
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
90. <ul>
$('li a').parents('ul')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
91. <ul>
$('li a').parents('ul')
<li>
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
92. ew in
N
1.3 .closest('expr')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
93. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
94. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
95. ew in
N
1.3 $('img').closest('ul')
<ul>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
</ul>
98. <li>
$('li')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
99. <li>
$('li')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
100. <li>
$('li').filter(':has(img)')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
101. <li>
$('li').filter(':has(img)')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
102. <li>
$('li').not(':first')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
103. <li>
$('li').not(':first')
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
104. <li>
$('li').slice(0, 2)
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
105. <li>
$('li').slice(0, 2)
<a href=quot;#firstquot;>1st</a>
<img src=quot;one.gifquot;>
</li>
<li>
<a href=quot;#secondquot;>2nd</a>
<img src=quot;two.gifquot;>
</li>
<li>
<a href=quot;#thirdquot;>3rd</a>
</li>
107. • append, appendTo, prepend, prependTo
• after, before, insertAfter, insertBefore
• wrap, wrapAll, wrapInner
• empty, remove
• clone
• html, text
121. $('a').attr({ class :
'home', href : '/home' });
<a href=quot;/logoutquot; class=quot;logoutquot;>Go</a>
122. $('a').attr({ class :
'home', href : '/home' });
<a href=quot;/homequot; class=quot;homequot;>Go</a>
124. • width, height
• innerHeight, innerWidth
• outerHeight, outerWidth (pass true to
include margins)
• scrollLeft, scrollTop
• offset, position (includes margin)
139. blur mousemove
change * mouseout
click mouseover
dblclick mouseup
error ready
focus resize
hover scroll
keydown select
keypress submit
keyup toggle
load unload
mousedown
142. Event object
• preventDefault()
• stopPropagation()
• return false (preventDefault +
stopPropagation)
• stopImmediatePropagation()
ew in
N
1.3
147. Live support
• Supported: click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout,
keydown, keypress, keyup
• Not supported: blur, focus,
mouseenter, mouseleave, change,
submit
149. Built in Effects
• show, hide, toggle
• fadeIn, fadeOut, fadeTo
• slideUp, slideDown, slideToggle
• animate - roll your own!
153. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
154. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
155. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
156. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
157. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
158. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
159. $('#block').animate({
'opacity' : 0.5,
'width' : '-=20px',
'height' : '-=20px',
'top' : (winHeight - 168) + 'px'
}, 400, 'easeOutBounce').animate({
'foo' : 1 // acts as a pause
}, 500).animate({
'left' : '150%' // fly off screen
}, 500, function () {
$(this).hide();
});
168. UI Effects Core
• addClass, removeClass, toggleClass
• show, hide, toggle
• animate
172. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');
173. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');
174. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');
175. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');
176. Über Easy Ajax
$(expr).load - squirt into expr
$('#info').load('info.html #links li');
178. $.ajax
• Full control
• Global setup available
• Much easier to debug
• http://docs.jquery.com/Ajax/
jQuery.ajax#options
179. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});
180. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});
181. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});
182. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});
183. $.ajax({
url: 'http://www.twitter.com/
statuses/user_timeline/rem.json?
callback=?',
dataType: 'jsonp',
cache: false,
success: function(data) {
// this == XMLHttpRequest object
$('#status').html(data[0].text);
},
error: function(xhr, status, e) {
// debugging enabled
console.log(arguments);
}
});
186. Tests, Iterators &
Operations
• $.inArray, $.isFunction, $.isArray,
• $.each, $.extend, $.grep, $.map
• $.merge, $.unique, $.makeArray
187. Good Guys Come Last
1. Include other library first (that uses $)
2. Then include jQuery, then:
$.noConflict();
// or
$j = $.noConflict();
191. ew in
N
1.3
$.support
boxModel leadingWhitespace opacity
cssFloat noCloneEvent scriptEval
hrefNormalized objectAll style
htmlSerialize tbody
192. Remy Sharp
@rem
remy@leftlogic.com
http://remysharp.com
http://jqueryfordesigners.com
http://full-frontal.org
P h o t o s by
charliebrewer, manfrys, magw21,
abbydonkrafts, nicora, leecullivan,
jaako, thetruthabout, artisandhu,
sundazed, otterfreak, frf_kmeron,
mattlogelin, dandiffendale,
mwagner, stanrandom, anniewong,
legin, kerotab