View
505
Download
2
Category
Preview:
DESCRIPTION
Slide deck from the 8/19/2010 CharlotteJS meetup.
Citation preview
introductiontojQuery
Garrett Johnson // CharlotteJS // 8-19-2010
Friday, August 20, 2010
Me?
Jr. Web Developer at Red Ventures
Student
I will program in just about anything.
Started this joint! (with a lot of help from Nathan and Aaron)
Friday, August 20, 2010
jQuery
Seriously?
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."
Friday, August 20, 2010
jQuery
selectors manipulation effects
attributes css ajax
traversing events utilities
Friday, August 20, 2010
Lets Get It
A quick tour with some stops on the way. Feel free to stop and start discussion.
Friday, August 20, 2010
document.ready?
just an event.*
gets triggered once the DOM is parsed/loaded.
use as much as you want.*
just put your <script></script> prior to </body> or right below the desired element.
DOM is ready at this point.
portability?*
Friday, August 20, 2010
document.ready?
1.html
Friday, August 20, 2010
selectors
node type descendants attributes
id child expressions*
class name multiples more
Friday, August 20, 2010
selectors
2.html
Friday, August 20, 2010
selectors
cache selectors
selector context
find()
exact on the left, general on the right.
avoid pure class or node selectors
keep it simple!
Friday, August 20, 2010
selectors
3.html
Friday, August 20, 2010
wait... what the $
$ === jQuery
$() is a factory.*
returns “array like” collection of “jQuery” objects.
not just css selectors.
raw elements.*
html.*
Friday, August 20, 2010
wait... what the $
4.html
Friday, August 20, 2010
manipulation
append html detach
prepend filter each
val *class more
Friday, August 20, 2010
manipulation
5.html
Friday, August 20, 2010
traversing
parents next attributes
children siblings *all
prev find more
Friday, August 20, 2010
traversing
6.html
Friday, August 20, 2010
traversing / manipulation
once you found it. do something.
tons more features for traversing and manipulation.
the docs are awesome.
Friday, August 20, 2010
events
binding proxy shorthands*
custom live delegate
namespaces delegation* more
Friday, August 20, 2010
events
find something. bind it.
$(‘.foo’).bind(‘click’, fn);
$(‘.foo’).click(fn);
$(‘.foo’).live(‘click’, fn);
$(‘#bar’).delegate(‘.foo’, ‘click’, fn)*
Friday, August 20, 2010
events
7.html
Friday, August 20, 2010
events
bubbling.
delegating.
lower memory foot print.
performance++
Friday, August 20, 2010
events
8.html
Friday, August 20, 2010
events
event.data
clean up that repetitive code.
binding time.*
Friday, August 20, 2010
events
9.html
Friday, August 20, 2010
events
custom events
clean up that repetitive code.**
trigger time.
Friday, August 20, 2010
events
10.html
Friday, August 20, 2010
effects
hide slide fadeOut
show toggle delays
animate fadeIn more
Friday, August 20, 2010
effects
nifty....
Friday, August 20, 2010
ajax
get getJSON ajaxSetup
post ajax events*
load getScript more
Friday, August 20, 2010
ajax
shorthand methods
the core ajax method
default configuration
events
global
local
Friday, August 20, 2010
ajax
12.html
Friday, August 20, 2010
extending
plugins
expressions
Friday, August 20, 2010
extending
13.html
Friday, August 20, 2010
what else?
questions?
favorite plugins?
problems?
Friday, August 20, 2010
peace!
gtalk: gjj391
aim: gjohnson391
pdf/code will be on github.com/gjohnson
Friday, August 20, 2010
Recommended