This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
5. Audience
This presentation was crafted specifically for delivery at the Front End Design
Conference in St. Petersburg, FL. The audience consisted of designers who have
never used jQuery through developers who use jQuery regularly.
The slide portion of this presentation has a lot of getting started information, as
well as some tricks you may or may not know. The live coding portion (available on
Github) contains some more advanced techniques.
If you have any questions after watching this presentation and looking at the code,
please let me know: doug@dougneiner.com (Be sure to reference this presentation
when emailing!)
D
AN
9. Writing the name
A. Jquery C. jquery
B. JQuery D. jQuery
*It’soktowriteitinallcapswhenthe
restofthecontextisallcapsaswell.
D
AN
10. adding scripts
div
id=dan
I
am
Dan
/div HTML
style
#dan
{
display:
none;
}
Youobviously
/style wouldn’tdothis
div
id=cherrie
I
am
Cherrie
/div
style
#cherrie
{
background:
red;
}
/style
D
AN
11. adding scripts
div
id=dan
I
am
Dan
/div HTML
script
$(
#dan
).hide();
/script
Sopleasedon’t
dothis
div
id=cherrie
I
am
Cherrie
/div
script
$(
#cherrie
).hide().fadeIn(
500
);
/script
D
AN
12. adding scripts
div
id=dan
I
am
Dan
/div
div
id=cherrie
I
am
Cherrie
/div
HTML
script
src=//ajax.googleapis.com/ajax/ Better,butnow
libs/jquery/1.6.2/jquery.min.js/script #danand#cherrie
script
src=js/site.js/script blinkonforasplit-
/body secondbeforehiding
$(
#dan
).hide();
$(
#cherrie
).hide().fadeIn(
500
);
JS
D
AN
13. adding scripts
html
class=no-‐js
head NowthetwoelementsarehiddenbyCSS, HTML
... butonlywhenweknowJSisworking
script
document.documentElement.className
=
document.documentElement.className.replace(
no-‐js,
js
);
/script
link
rel=stylesheet
href=css/layout.css
/ IfyouareusingModernizr,it
alreadydoesthis,andyou
don'tneedthiscode
.js
#dan,
.js
#cherrie
{
display:
none;
} CSS
D
AN
14. adding scripts
div
id=dan
I
am
Dan
/div
div
id=cherrie
I
am
Cherrie
/div
HTML
script
src=//ajax.googleapis.com/ajax/ Nowwecanremove
libs/jquery/1.6.2/jquery.min.js/script thetwo.hide()
script
src=js/site.js/script statementsandjust
/body runfadeInon#cherrie
$(
#cherrie
).fadeIn(
500
); JS
D
AN
15. Adding scripts
• Use at least one external script file for your site, not tons of in-page script
blocks spread throughout your app.
• Include references to jQuery and your script just before the closing body tag
• Primarily on web sites (on JS-required apps inside head may be ok)
• Use no-js and js classes to provide styling until the script loads
D
AN
16. File layout
jQuery(
document
).ready(
function
()
{ JS
jQuery(
div
).each(
function
()
{
jQuery(
this
).hide();
});
Too…⋯Much…⋯
jQuery…⋯
jQuery.getJSON(
...,
function
(
data
)
{
jQuery.each(
data,
function
()
{
...
});
});
});
D
AN
17. File layout
(function
(
$
)
{ JS
var
sample
=
{
sample:
true
};
//
DOM
may
not
be
complete
$(
document
).ready(
function
()
{
//
DOM
is
ready.
Come
and
get
it!
});
}(
jQuery
));
D
AN
18. File layout
(function
(
$
)
{ JS
var
sample
=
{
sample:
true
};
//
DOM
may
not
be
complete Thisiscalledan
Immediately
InvokingFunction
$(
document
).ready(
function
()
{ ExpressionorIIFE.
//
DOM
is
ready.
Come
and
get
it!
});
}(
jQuery
));
D
AN
19. File layout (Alt)
jQuery(
document
).ready(
function
(
$
)
{ JS
//
DOM
is
ready.
Come
and
get
it!
});
Youcansupplyaparameterforthe
anonymousfunctioncallback,andit
willreferencejQuery.
Usethisasashortcutwhenallyour
codemustrunondocument.ready.
D
AN
21. Iteration
//
Explicit,
you
realize
this
is
looping
over
items JS
$(
div
).each(function
()
{
...
});
//
Implicit,
you
may
not
realize
each
call
is
looping
$(
div
)
.attr(
data-‐group,
doug
)
.addClass(
dougsGroup
)
.hide();
D
AN
22. CSS vs. Class
$(
div
).css({ JS
width:
20, Use.css()whenthe
height:
500 valuesmustbedynamic
});
Useclasseswhenyouknow
//
Or: thevaluesaheadoftime.
$(
div
).addClass(
tall
);
.tall
{
width:
20px;
height:
500px;
} CSS
D
AN
23. Toggle Methods
var
div
=
$(
div
); JS
if
(
div.hasClass(
frontendrocks
)
{
div.addClass(
frontendrocks
);
}
else
{
div.removeClass(
frontendrocks
);
}
//
A
better
way
to
write
it
div.toggleClass(
frontendrocks
);
D
AN
24. Toggle Methods
//
If
you
need
it
to
match
up
to
a
variable JS
var
something
=
true,
div
=
$(
div
);
//
This
forces
the
class
on
or
off
based
on
`something`
div.toggleClass(
frontendrocks,
something
);
//
Other
methods
support
this
too,
check
the
API
div.slideToggle(
200,
something
);
div.toggle(
something
);
D
AN
25. updating values
var
div
=
$(
div
);
//
Setting
a
single
key/value
div.attr(
key,
value
);
//
Setting
more
than
one
key/value
at
once
div.attr(
{
key:
value,
key2:
value2
});
//
Setting
the
value
using
a
callback
function
div.attr(
key
,
function
(i,
oldValue
)
{
return
newvalue;
});
D
AN
26. updating values
//
Other
methods
support
it
too,
check
the
API
div.addClass(
function
(i,
val)
{
//
This
returns
an
incremental
class
to
add
for
each
//
item
in
the
result
set
return
awesome-‐
+
i;
});
D
AN
27. Asynchronous code
var
loaded
=
false;
$.get(
http://url.com,
function
(
data
)
{
loaded
=
true;
}); Thismethodwillrunat
somepointinthefuture
if
(
loaded
===
true
)
{
Thisrunsrightaway,and
//
Never
runs willexecutebeforethe
} callbackfor$.getfires.
D
AN
28. Asynchronous code
var
loaded
=
false;
$.get(
http://url.com,
function
(
data
)
{
loaded
=
data.loaded;
if
(
loaded
===
true
)
{
//
This
runs
when
loaded
is
true
} Putlogicthatdependson
}); asynchronouscodeeitherin
thecallbackorinafunction
youexecutefromthecallback
D
AN
29. Lets Code!
Code is available here:
https://github.com/dcneiner/jquery-bling
D
AN
30. Links
• jQuery Tmpl
https://github.com/jquery/jquery-tmpl
• jQuery MockJax
http://code.appendto.com/plugins/jquery-mockjax
• jQuery doTimeout
http://benalman.com/projects/jquery-dotimeout-plugin/
• Alternate jQuery API
http://jqapi.com/
D
AN