Introduc)on
for
Developers
Who
am
I?
• Jonathan
Sharp,
Omaha,
Nebraska
• Freelance
Developer
(Out
West
Media.com)
• jQuery
Team
member,
(web
&
infras...
Who
am
I?
• Own
a
horse
Overview
• Who,
what,
and
why
of
jQuery
• 5
core
jQuery
concepts
• Overview
of
jQuery
API
• Build
a
plugin
in
6
steps
• jQ...
Who
uses
jQuery
• 35%
of
all
sites
that
use
JavaScript,
use
jQuery
• 1
out
5,
of
all
sites,
use
jQuery




               ...
Who
uses
jQuery
• 35%
of
all
sites
that
use
JavaScript,
use
jQuery
• 1
out
5,
of
all
sites,
use
jQuery
     reddit.com
   ...
Who
uses
jQuery
• 35%
of
all
sites
that
use
JavaScript,
use
jQuery
• 1
out
5,
of
all
sites,
use
jQuery
      reddit.com
  ...
What
exactly
is
jQuery

jQuery
is
a
JavaScript
Library!

• Interac)on
with
the
DOM
 (e.g.
selec)ng,
crea)ng,
traversing,
c...
What
does
that
mean?
Add
class
‘odd’
to
a
table
row...
var tables = document.getElementsByTagName(‘table’);

for (var t = 0; t < tables.length;...
Poetry

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
Using
jQuery
we
can
do
this

     jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);




jQuery
func)on
Using
jQuery
we
can
do
this

     jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);



                 jQuery
Selector
(...
Using
jQuery
we
can
do
this

     jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);



                     jQuery
Select...
Using
jQuery
we
can
do
this

     jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);



                     jQuery
Select...
Using
jQuery
we
can
do
this

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
Further
Reduced

$(‘table tr:nth-child(odd)’).addClass(‘odd’);
Further
Reduced

var jQuery = function(...) { ... };

// $ is a valid variable character in JavaScript
var $ = jQuery;

$(...
It
really
is
the


“write
less,
do
more”


 JavaScript
Library!
Why
use
jQuery
• Simplicity,
Speeds
up
web
development
• Avoids
common
headaches
w/
browsers
• Extensive
list
of
plugins
•...
Why
use
jQuery
over
other
soluNons
• Simplicity,
Speeds
up
web
development
• Avoids
common
headaches
w/
browsers
• Extensi...
Ok,
lets
get
to
it!
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul>
    
   <li><a>home</a></li>
    
   <li><a...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul>
    
   <li><a>home</a></li>
    
   <li><a...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li><a>home</a></li>
    
...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li><a>home</a></li>
    
...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><a>h...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><a>h...
Concept
1.
Find
something,
do
something
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><a h...
Concept
2.
Create
something,
do
something
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
</script>
</body>
</html>
Concept
2.
Create
something,
do
something
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
<script src=‘jquery.js’></scri...
Concept
2.
Create
something,
do
something
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
<script src=‘jquery.js’></scri...
Concept
2.
Create
something,
do
something
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>

   <li><a>home</a></li>

   <li><a>...
Concept
3.
Chaining
&
OperaNng
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><a href=‘/hom...
Concept
3.
Chaining
&
OperaNng
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
    <li class=‘navLiItem’><a href=‘/ho...
Concept
4.
Understanding
Implicit
iteraNon
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><...
Concept
4.
Understanding
Implicit
iteraNon
<!DOCTYPE html>
<html>
<body>
    <ul id=‘nav’>
    
   <li class=‘navLiItem’><...
Concept
5.
Knowing
the
jQuery
parameter
types


• CSS
Selectors
&
custom
CSS
expressions

 e.g. $(‘#nav’) and $(‘:first’)
...
Review
• Find
something,
do
something
• Create
something,
do
something
• Chaining
&
Opera)ng
• Understanding
Implicit
Iter...
jQuery
API
overview
• Core
• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Effects
• Ajax
• U)li)es
Overview
of
jQuery
API
• Core          $()


• Selectors     each()
                size()

• A]ributes     length()
     ...
Overview
of
jQuery
API
• Core          $()


• Selectors     each()
                size()

• A]ributes     length()
     ...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>


• A]ributes     <p>...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>


• A]ributes     <p>...
Overview
of
jQuery
API
• Core
• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Effects
• Ajax
• U)li)es
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• E...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes
• Traversing
• M...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          $(‘#nav li.contact’)


• Selectors     $(‘:visible’)


• A]ributes     $(‘:radio:en...
Overview
of
jQuery
API
• Core          attr()
                removeAttr()
• Selectors
                addClass()
• A]ribu...
Overview
of
jQuery
API
• Core          attr()
                removeAttr()
• Selectors
                addClass()
• A]ribu...
Overview
of
jQuery
API
• Core          <!DOCTYPE html><html><body>


• Selectors     <input type="text" value="search" />
...
Overview
of
jQuery
API
• Core          add()            eq()
                children()       filter()
• Selectors     clo...
Overview
of
jQuery
API
• Core          add()            eq()
                children()       filter()
• Selectors     clo...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>


• A]ributes     <p>...
Overview
of
jQuery
API
• Core          html()          replaceWith()
                text()          replaceAll()
• Select...
Overview
of
jQuery
API
• Core          html()          replaceWith()
                text()          replaceAll()
• Select...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>

• A]ributes     <p>j...
Overview
of
jQuery
API
• Core          css()

• Selectors     offset()
                offsetParent()
• A]ributes     posi...
Overview
of
jQuery
API
• Core          css()

• Selectors     offset()
                offsetParent()
• A]ributes     posi...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <head>
                <styl...
Overview
of
jQuery
API
• Core          ready()            blur()
                                   change()
• Selectors  ...
Overview
of
jQuery
API
• Core          ready()            blur()
                                   change()
• Selectors  ...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>

• A]ributes     <p>c...
Overview
of
jQuery
API
• Core          <!DOCTYPE html>
                <html>
• Selectors     <body>

• A]ributes     <p>c...
Overview
of
jQuery
API
• Core          show()
                hide()
• Selectors     toggle()

• A]ributes     slideDown()...
Overview
of
jQuery
API
• Core          show()
                hide()
• Selectors     toggle()

• A]ributes     slideDown()...
Overview
of
jQuery
API
• Core          <!DOCTYPE html><html><head>
                <style>
• Selectors     div{background-...
Overview
of
jQuery
API
• Core          jQuery.ajax()         jQuery.ajaxSetup()

                jQuery.get()          ser...
Overview
of
jQuery
API
• Core          jQuery.ajax()         jQuery.ajaxSetup()

                jQuery.get()          ser...
Overview
of
jQuery
API
• Core          <!DOCTYPE
html><html><body>

                <script
src="h]p://ajax.googleapis.com...
Overview
of
jQuery
API
• Core          $.support         $.trim()
                $.boxModel
• Selectors                  ...
Overview
of
jQuery
API
• Core          $.support         $.trim()
                $.boxModel
• Selectors                  ...
Overview
of
jQuery
API
• Core          $.each(data.items, function(i,item){


• Selectors     $("<img/>")
                ...
What
happen
to
the
$
alias
and
the
$
    (document).ready()
event
<!DOCTYPE html> <html>
<head>
<script src=“jquery.js”></...
What
happen
to
the
$
alias
and
the
$
    (document).ready()
event
<!DOCTYPE html> <html>
<head>
<script src=“jquery.js”></...
What
happen
to
the
$
alias
and
the
$
    (document).ready()
event
<!DOCTYPE html> <html>
<head>
<script src=“jquery.js”></...
What
happen
to
the
$
alias
and
the
$
    (document).ready()
event
<!DOCTYPE html>
<html>
<body>
<script src=“jquery.js”></...
What
happen
to
the
$
alias
and
the
$
    (document).ready()
event
<!DOCTYPE html>
<html>
<body>
<script src=“jquery.js”></...
Plugins!
So,
what
is
a
plugin?
A
plugin
is
nothing
more
than
a
custom
jQuery

method
created
to
extend
the
func)onality
of

the
jQu...
Why
Create
a
plugin?
You
want
to
“find
something”,
and
“do

something”
but
the
“do
something”
is
not

available
in
jQuery.
...
A
jQuery
plugin
in
6
steps



      h]p://jsbin.com/eheku/edit
A
jQuery
plugin
in
6
steps
Step
1.
create
a
private
scope
for
$
alias
<!DOCTYPE html><html><body>
<script src="http://ajax...
A
jQuery
plugin
in
6
steps
Step
2.
a]ach
plugin
to
fn
alias
(aka
prototype)
<!DOCTYPE html><html><body>
<script src="http:...
A
jQuery
plugin
in
6
steps
Step
2.
a]ach
plugin
to
fn
alias
(aka
prototype)
<!DOCTYPE html><html><body>
<p>I hate jQuery!<...
A
jQuery
plugin
in
6
steps
Step
3.
add
implicit
itera)on
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<script src="ht...
A
jQuery
plugin
in
6
steps
Step
3.
add
implicit
itera)on
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean reall...
A
jQuery
plugin
in
6
steps
Step
4.
enable
chaining
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate...
A
jQuery
plugin
in
6
steps
Step
4.
enable
chaining
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate...
A
jQuery
plugin
in
6
steps
Step
5.
add
default
op)ons
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really h...
A
jQuery
plugin
in
6
steps
Step
6.
add
custom
op)ons
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
A
jQuery
plugin
in
6
steps
Step
6.
add
custom
op)ons
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
A
jQuery
plugin
in
6
steps
Step
6.
add
custom
op)ons
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
A
jQuery
plugin
in
6
steps
Step
6.
add
custom
op)ons
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really ha...
Plugins
are
simple,
just
follow
the
steps!
jQuery
News
• jQuery.org
&
Founda)on
(Sobware
Freedom
Law

  Center)
• Tax‐deduc)ble
dona)ons
• Four
conferences
next
year...
?
Jonathan
Sharp
(@jdsharp)

 Special
thanks
to
Cody
Lindley
Upcoming SlideShare
Loading in …5
×

Stack Overflow Austin - jQuery for Developers

5,989 views

Published on

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
  • الى كل من يهمه الامر !!!!اسأل مجرب مسابقة انتيكات السعدي هو النسخة العربية من برنامج المسابقات الأشهر في العالم تطلقه عبر الشرق الأوسط؛ حيث يتلقى الفائز النهائي جائزة مالية قدرها 5 ألف ريال سعودي.وتعاقد البرنامج مع ادارة (انتيكات السعدي) ان تعلن عن يوم ميعاد السحب الثاني الموافق يوم 19/5/2012 ويتم السحب عن عشرة متسابقين قيمة كل متسابق 2800 جنية او انتيكات من عندنا بأختيار المتسابق ب 3000 جنية وشكرا للاقبال الكبير علي اشتراككم وتواصلكم في مسابقتنا الكبري حفاظا علي وقتكم ووقتنا فقد قررنا ألغاء اسئلة المسابقة واكفتفينا بالسحب العادل ويتم الاشتراك بالسحب في المسابقة عن طريق وضع او عمل اعجاب لاي صفحة من صفحاتنا المتعددة التابعة للادارة انتيكات السعدي :فمطلوب علي كل من لدية رغبة ان يشترك في مسابقتنا الكبري.............. ان يعمل (like) او اعجاب لاي صفحة من صفحاتنا المتعددة وهذا هو المطلوب لكل مشترك في مسابقتنا والسحب بأذن الله يتم بكل حيادية ويقوم بفرز السحب فريق من مشكل من لجنة محايدة بعيدا عن ادارة (انتيكات السعدي) ونحن متواصلين معكم في خلال24 ساعة متواصلة لاي استفسار او استعلام فنحن دائما نشجعكم علي تواصلكم معنا ان تعجبم لاي صفحة من صفحاتنا المتعددة الصفحات التي يتم الاعجاب بأحد الصفحات المتعددة من صفحات انتيكات السعدي: صفحة انتيكات السعدي/صفحة انتيكات السعدي واولادة/صفحة انتيكات اولاد السعدي/وصفحة انتيكات السعدي وشركاه/ وصفحة خرابيش السعدي/مجموعة خير زمان للانتيكات والتحف مع تحيات ادارة (انتيكات السعدي) انضم لينا وادخل واحكم انت صاحب القرار بس قول رايك اكتشف , راقب , أدرك مالايدركه الآخرون , شارك , أنت في أكثر الصفحات تأثيرا في النفس والمجتمع , استمتع !! ..... كل ده قريبا إن شاء الله في .. برنامج عملي تأسيسي لرفع الحس الواعي ~— مع ابراهيم السعدي اكتشف , راقب , أدرك مالايدركه الآخرون , شارك , أنت في أكثر الصفحات تأثيرا في النفس والمجتمع , استمتع !! ..... كل ده قريبا إن شاء الله في صفحة (خرابيش السعدي) و صفخة (انتيكات السعدي )و والموقع الرائيسي للانتيكات السعدي http://antiquessaadiy.blogspot.com/ وصفحاتنا المتنوعة انتيكات السعدي:https://www.facebook.com/pages/%D8%A7%D9%86%D8%AA%D9%8A%D9%83%D8%A7%D8%AA-%D8%A7%D9%84%D8%B3%D8%B9%D8%AF%D9%8A/117561978357148 انتيكات السعدي واولادة:https://www.facebook.com/abranem انتيكات اولاد السعدي:https://www.f/ الصفحة · 7.351 معجبون بهذا . http://news365all.blogspot.com/ وسوف تشمل الأخبار اليومية على آخر الأخبار في العالم في الفئات المختلفة للأنباء. قد يكون من قطاع تكنولوجيا المعلومات أو أنه قد يكون من أي أخبار أخرى انتيكات السعدي
    انتيكات السعدي
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice slides for introducing jQuery.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,989
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
449
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Stack Overflow Austin - jQuery for Developers

  1. 1. Introduc)on
for
Developers
  2. 2. Who
am
I? • Jonathan
Sharp,
Omaha,
Nebraska • Freelance
Developer
(Out
West
Media.com) • jQuery
Team
member,
(web
&
infrastructure
team) • Co‐authored
“jQuery
Cookbook”
(O’Reilly)
Q4
2009 • @jdsharp
  3. 3. Who
am
I? • Own
a
horse
  4. 4. Overview • Who,
what,
and
why
of
jQuery • 5
core
jQuery
concepts • Overview
of
jQuery
API • Build
a
plugin
in
6
steps • jQuery
Ini)a)ves • Ques)ons
  5. 5. Who
uses
jQuery • 35%
of
all
sites
that
use
JavaScript,
use
jQuery • 1
out
5,
of
all
sites,
use
jQuery h]p://trends.builtwith.com/javascript/JQuery
  6. 6. Who
uses
jQuery • 35%
of
all
sites
that
use
JavaScript,
use
jQuery • 1
out
5,
of
all
sites,
use
jQuery reddit.com
 whitehouse.gov
 overstock.com espn.com
 wikipedia.org
 )me.com ibm.com
 microsob.com
 capitalone.com stackoverflow.com
 amazon.com
 usatoday.com kickball.com
 netflix.com
 ning.com boxee.tv
 bing.com
 wordpress.com bit.ly monster.com
 dell.com twitpic.com tv.com twi]er.com h]p://trends.builtwith.com/javascript/JQuery
  7. 7. Who
uses
jQuery • 35%
of
all
sites
that
use
JavaScript,
use
jQuery • 1
out
5,
of
all
sites,
use
jQuery reddit.com
 whitehouse.gov
 overstock.com espn.com
 wikipedia.org
 )me.com ibm.com
 microsob.com
 capitalone.com stackoverflow.com
 amazon.com
 usatoday.com kickball.com
 netflix.com
 ning.com boxee.tv
 bing.com
 wordpress.com bit.ly monster.com
 dell.com twitpic.com tv.com twi]er.com h]p://trends.builtwith.com/javascript/JQuery
  8. 8. What
exactly
is
jQuery
 jQuery
is
a
JavaScript
Library! • Interac)on
with
the
DOM (e.g.
selec)ng,
crea)ng,
traversing,
changing
etc…) • JavaScript
Events • Anima)ons • Ajax
interac)ons
  9. 9. What
does
that
mean?
  10. 10. Add
class
‘odd’
to
a
table
row... var tables = document.getElementsByTagName(‘table’); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName("tr"); for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ‘odd’; } } }; ...becomes... h]p://jsbin.com/esewu/edit
  11. 11. Poetry jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  12. 12. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
func)on
  13. 13. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
Selector
(CSS
Expression) jQuery
func)on
  14. 14. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
Selector
(CSS
Expression) jQuery
func)on jQuery
Collec)on
  15. 15. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
Selector
(CSS
Expression) jQuery
func)on jQuery
Collec)on jQuery
Method
  16. 16. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  17. 17. Further
Reduced $(‘table tr:nth-child(odd)’).addClass(‘odd’);
  18. 18. Further
Reduced var jQuery = function(...) { ... }; // $ is a valid variable character in JavaScript var $ = jQuery; $(‘table tr:nth-child(odd)’).addClass(‘odd’);
  19. 19. It
really
is
the
 “write
less,
do
more”
 JavaScript
Library!
  20. 20. Why
use
jQuery • Simplicity,
Speeds
up
web
development • Avoids
common
headaches
w/
browsers • Extensive
list
of
plugins • Large
&
ac)ve
community • Extensive
test
coverage
(50
browsers,
11
plahorms) • API
for
both
coders
and
designers
  21. 21. Why
use
jQuery
over
other
soluNons • Simplicity,
Speeds
up
web
development • Avoids
common
headaches
w/
browsers • Extensive
list
of
plugins • Large
&
ac)ve
community • Extensive
test
coverage
(50
browsers,
11
plahorms) • API
for
both
coders
and
designers
  22. 22. Ok,
lets
get
to
it!
  23. 23. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body> </html>
  24. 24. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’); </script> </body> </html>
  25. 25. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’).attr(‘id’,‘nav’); </script> </body> </html>
  26. 26. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘#nav li’); </script> </body> </html>
  27. 27. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a>home</a></li> <li class=‘navLiItem’><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘#nav li’).addClass(‘navLiItem’); </script> </body> </html>
  28. 28. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a>home</a></li> <li class=‘navLiItem’><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘#nav a’); </script> </body> </html>
  29. 29. Concept
1.
Find
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘#nav a’).each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); }); </script> </body> </html>
  30. 30. Concept
2.
Create
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>
  31. 31. Concept
2.
Create
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> <script src=‘jquery.js’></script> <script> $(‘<li>home</li>’); </script> </body> </html>
  32. 32. Concept
2.
Create
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> <script src=‘jquery.js’></script> <script> $(‘<li>home</li>’).wrapInner(‘a’); </script> </body> </html>
  33. 33. Concept
2.
Create
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘<li>home</li>’).wrapInner(‘a’).appendTo(‘#nav’); $(‘<li>about</li>’).wrapInner(‘a’).appendTo(‘#nav’); </script> </body> </html>
  34. 34. Concept
3.
Chaining
&
OperaNng <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’).attr(‘id’,’nav’); $(‘#nav li’).addClass(‘navLiItem’); $(‘#nav a’).each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); }); </script> </body> </html>
  35. 35. Concept
3.
Chaining
&
OperaNng <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) // Push stack .addClass(‘navLiItem’) .find(‘a’) // Push stack .each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); }); </script> </body> </html>
  36. 36. Concept
4.
Understanding
Implicit
iteraNon <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); }); </script> </body> </html>
  37. 37. Concept
4.
Understanding
Implicit
iteraNon <!DOCTYPE html> <html> <body> <ul id=‘nav’> <li class=‘navLiItem’><a href=‘/home’>home</a></li> <li class=‘navLiItem’><a href=‘/about’>about</a></li> </ul> <script src=‘jquery.js’></script> <script> $(‘ul’) .attr(‘id’,’nav’) .find(‘li’) .addClass(‘navLiItem’) .find(‘a’) .each(function(){ $(this).attr(‘href’,’/’ + $(this).text()); }); </script> </body> </html>
  38. 38. Concept
5.
Knowing
the
jQuery
parameter
types • CSS
Selectors
&
custom
CSS
expressions
 e.g. $(‘#nav’) and $(‘:first’) • HTML
 e.g. $(‘<li><a href=“#”>link</a></li>’) • DOM
Elements e.g. $(document) or $(document.createElement('a')) • A
func)on
(shortcut
for
jQuery
DOM
ready
event) e.g. $(function(){}) = $(document).ready(function(){})
  39. 39. Review • Find
something,
do
something • Create
something,
do
something • Chaining
&
Opera)ng • Understanding
Implicit
Itera)on • Knowing
the
jQuery
parameter
types
  40. 40. jQuery
API
overview • Core • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  41. 41. Overview
of
jQuery
API • Core $() • Selectors each() size() • A]ributes length() selector() context() • Traversing eq() get() • Manipula)on index() • CSS data() removeData() queue() • Events dequeue() • Effects jQuery.fn.extend() jQuery.extend() • Ajax jQuery.noConflict() • U)li)es
  42. 42. Overview
of
jQuery
API • Core $() • Selectors each() size() • A]ributes length() selector() context() • Traversing eq() get() • Manipula)on index() • CSS data() removeData() queue() • Events dequeue() • Effects jQuery.fn.extend() jQuery.extend() • Ajax jQuery.noConflict() • U)li)es
  43. 43. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>Element Node</p> <script src="http://ajax.googleapis.com/ajax/libs/ • Traversing jquery/1.3.2/jquery.min.js" ></script> <script> • Manipula)on alert($(‘p’).get(0).nodeType); </script> • CSS </body> </html> • Events • Effects • Ajax • U)li)es h]p://jsbin.com/aneki/edit#html
  44. 44. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>Element Node</p> <script src="http://ajax.googleapis.com/ajax/libs/ • Traversing jquery/1.3.2/jquery.min.js" ></script> <script> • Manipula)on alert($(‘p’).get(0).nodeType); alert($(‘p’)[0].nodeType); • CSS </script> </body> • Events </html> • Effects • Ajax • U)li)es
  45. 45. Overview
of
jQuery
API • Core • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  46. 46. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  47. 47. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  48. 48. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  49. 49. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  50. 50. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing $(‘a[title][href*=‘foo’]’) • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  51. 51. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing $(‘a[title][href*=‘foo’]’) • Manipula)on $(‘a:first[href*=‘foo’]’) • CSS • Events • Effects • Ajax • U)li)es
  52. 52. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing $(‘a[title][href*=‘foo’]’) • Manipula)on $(‘a:first[href*=‘foo’]’) • CSS $(‘#header,#footer’) • Events • Effects • Ajax • U)li)es
  53. 53. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing $(‘a[title][href*=‘foo’]’) • Manipula)on $(‘a:first[href*=‘foo’]’) • CSS $(‘#header,#footer’) • Events $(‘#mainContent,#sidebar’,’#content’) • Effects • Ajax • U)li)es
  54. 54. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes $(‘:radio:enabled:checked’) $(‘a[title]’) • Traversing $(‘a[title][href*=‘foo’]’) • Manipula)on $(‘a:first[href*=‘foo’]’) • CSS $(‘#header,#footer’) • Events $(‘#mainContent,#sidebar’,’#content’) • Effects h]p://codylindley.com/jqueryselectors/ • Ajax • U)li)es
  55. 55. Overview
of
jQuery
API • Core attr() removeAttr() • Selectors addClass() • A]ributes hasClass() toggleClass() • Traversing removeClass() • Manipula)on val() • CSS • Events • Effects • Ajax • U)li)es
  56. 56. Overview
of
jQuery
API • Core attr() removeAttr() • Selectors addClass() • A]ributes hasClass() toggleClass() • Traversing removeClass() • Manipula)on val() • CSS • Events • Effects • Ajax • U)li)es
  57. 57. Overview
of
jQuery
API • Core <!DOCTYPE html><html><body> • Selectors <input type="text" value="search" /> <script src="jquery.js"></script> • A]ributes <script> $('input') .focus(function(){ • Traversing var v = $(this).val(); $(this).val( v === this.defaultValue ? '' : v); • Manipula)on }) .blur(function(){ var v = $(this).val(); • CSS $(this).val( v.match(/^s+$|^$/) ? }); this.defaultValue : v); • Events </script></body></html> • Effects • Ajax • U)li)es h]p://jsbin.com/irico/edit#html
  58. 58. Overview
of
jQuery
API • Core add() eq() children() filter() • Selectors closest() is() contents() map() • A]ributes find() not() next() slice() • Traversing nextAll() offsetParent() • Manipula)on parent() parents() • CSS prev() prevAll() • Events siblings() • Effects andSelf() end() • Ajax • U)li)es
  59. 59. Overview
of
jQuery
API • Core add() eq() children() filter() • Selectors closest() is() contents() map() • A]ributes find() not() next() slice() • Traversing nextAll() offsetParent() • Manipula)on parent() parents() • CSS prev() prevAll() • Events siblings() • Effects andSelf() end() • Ajax • U)li)es
  60. 60. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>Make me bold!</p> <script src="http://ajax.googleapis.com/ajax/ • Traversing libs/jquery/1.3.2/jquery.min.js" ></script> <script> • Manipula)on $(‘p’) • CSS .contents() .wrap(‘<strong></strong>’); • Events </script> </body> • Effects </html> • Ajax • U)li)es h]p://jsbin.com/ituza/edit#html
  61. 61. Overview
of
jQuery
API • Core html() replaceWith() text() replaceAll() • Selectors append() empty() • A]ributes appendTo() remove() prepend() • Traversing prependTo() clone() • Manipula)on after() before() • CSS insert() insertAfter() • Events insertBefore • Effects warp() wrapAll() • Ajax wrapInner() • U)li)es
  62. 62. Overview
of
jQuery
API • Core html() replaceWith() text() replaceAll() • Selectors append() empty() • A]ributes appendTo() remove() prepend() • Traversing prependTo() clone() • Manipula)on after() before() • CSS insert() insertAfter() • Events insertBefore • Effects warp() wrapAll() • Ajax wrapInner() • U)li)es
  63. 63. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>jQuery</p> • Traversing <script src="jquery.js"></script> <script> • Manipula)on alert($(‘p’).text()); • CSS </script> • Events </body> </html> • Effects • Ajax • U)li)es
  64. 64. Overview
of
jQuery
API • Core css() • Selectors offset() offsetParent() • A]ributes position() scrollTop() • Traversing scrollLeft() • Manipula)on height() width() • CSS innerHeight() innerWidth() • Events outerHeight() outerWidth() • Effects • Ajax • U)li)es
  65. 65. Overview
of
jQuery
API • Core css() • Selectors offset() offsetParent() • A]ributes position() scrollTop() • Traversing scrollLeft() • Manipula)on height() width() • CSS innerHeight() innerWidth() • Events outerHeight() outerWidth() • Effects • Ajax • U)li)es
  66. 66. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <head> <style>div{background-color:#ccc; width:100px; • A]ributes margin:0 20px; float:left;}</style> </head> <body> • Traversing <div></div> • Manipula)on <div></div> <div></div> • CSS <script src=“jquery.js" ></script> <script> • Events $('div') • Effects .height($(document).height()); • Ajax </script> </body> </html> • U)li)es
  67. 67. Overview
of
jQuery
API • Core ready() blur() change() • Selectors bind() one() click() dbclick() • A]ributes trigger() triggerHandler() error() focus() unbind() keydown() • Traversing live() keypress() keyup() • Manipula)on die() mousedown() mousenter() • CSS hover() toggle() mouseleave() mouseout() mouseup() • Events resize() scroll() • Effects select() submit() • Ajax unload() • U)li)es
  68. 68. Overview
of
jQuery
API • Core ready() blur() change() • Selectors bind() one() click() dbclick() • A]ributes trigger() triggerHandler() error() focus() unbind() keydown() • Traversing live() keypress() keyup() • Manipula)on die() mousedown() mousenter() • CSS hover() toggle() mouseleave() mouseout() mouseup() • Events resize() scroll() • Effects select() submit() • Ajax unload() • U)li)es
  69. 69. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>click me</p> <p>click me</p> • Traversing <script src="jquery.js"></script> • Manipula)on <script> • CSS $("p").bind("click", function(){ $(this).after("<p>click me</p>"); }); • Events </script> • Effects </body> </html> • Ajax • U)li)es h]p://jsbin.com/ehuki/edit#html
  70. 70. Overview
of
jQuery
API • Core <!DOCTYPE html> <html> • Selectors <body> • A]ributes <p>click me</p> <p>click me</p> • Traversing <script src="jquery.js"></script> • Manipula)on <script> • CSS $("p").live("click", function(){ $(this).after("<p>click me</p>"); }); • Events </script> • Effects </body> </html> • Ajax • U)li)es h]p://jsbin.com/epeha/edit#html
  71. 71. Overview
of
jQuery
API • Core show() hide() • Selectors toggle() • A]ributes slideDown() slideUp() • Traversing slideToggle() • Manipula)on fadeIn() fadeOut() • CSS fadeTo() • Events animate() stop() • Effects • Ajax • U)li)es
  72. 72. Overview
of
jQuery
API • Core show() hide() • Selectors toggle() • A]ributes slideDown() slideUp() • Traversing slideToggle() • Manipula)on fadeIn() fadeOut() • CSS fadeTo() • Events animate() stop() • Effects • Ajax • U)li)es
  73. 73. Overview
of
jQuery
API • Core <!DOCTYPE html><html><head> <style> • Selectors div{background-color:#bca;width:100px;border:1px solid green;} • A]ributes </style> </head> <body> • Traversing <div id="block">Hello!</div> <script src="http://ajax.googleapis.com/ajax/ • Manipula)on libs/jquery/1.3.2/jquery.min.js" ></script> <script> • CSS $("#block").animate({ width: ‘70%’, • Events opacity: 0.4, marginLeft: ‘0.6in’, • Effects fontSize: ‘3em’, borderWidth: ‘10px’ • Ajax }, 1500); </script></body></html> • U)li)es h]p://jsbin.com/evage/edit#html
  74. 74. Overview
of
jQuery
API • Core jQuery.ajax() jQuery.ajaxSetup()
 jQuery.get() serialize() • Selectors jQuery.getJSON()
 serializeArray() • A]ributes jQuery.getScript()
 jQuery.post() • Traversing load() • Manipula)on ajaxCompete() • CSS ajaxError() ajaxSend() • Events ajaxStart() • Effects ajaxStop() ajaxSuccess() • Ajax • U)li)es
  75. 75. Overview
of
jQuery
API • Core jQuery.ajax() jQuery.ajaxSetup()
 jQuery.get() serialize() • Selectors jQuery.getJSON()
 serializeArray() • A]ributes jQuery,getScript()
 jQuery.post() • Traversing load() • Manipula)on ajaxCompete() • CSS ajaxError() ajaxSend() • Events ajaxStart() • Effects ajaxStop() ajaxSuccess() • Ajax • U)li)es
  76. 76. Overview
of
jQuery
API • Core <!DOCTYPE
html><html><body>
 <script
src="h]p://ajax.googleapis.com/ajax/libs/jquery/ • Selectors 1.3.2/jquery.min.js"
></script>
 <script>

 • A]ributes var
url
=
‘h]p://api.flickr.com/services/feeds/ photos_public.gne? • Traversing tags=jquery&tagmode=all&format=json&jsoncallback=?’; • Manipula)on $.getJSON(url,
func)on(data){
 • CSS 



$.each(data.items,
func)on(i,item){
 







$("<img/>") • Events 
 .a]r("src",
item.media.m).appendTo("body");
 







if
(
i
==
30
)
return
false;
 • Effects 



});
 });
 • Ajax </script>
</body></html> • U)li)es h]p://jsbin.com/erase/edit#html
  77. 77. Overview
of
jQuery
API • Core $.support $.trim() $.boxModel • Selectors $.param() • A]ributes $.each(),
 $.extend(),
 • Traversing $.grep(),
 $.makeArray(),
 • Manipula)on $.map(),
 $.inArray(),
 • CSS $.merge(),
 $.unique() • Events • Effects $.isArray(),
 $,isFunc)on() • Ajax • U)li)es
  78. 78. Overview
of
jQuery
API • Core $.support $.trim() $.boxModel • Selectors $.param() • A]ributes $.each(),
 $.extend(),
 • Traversing $.grep(),
 $.makeArray(),
 • Manipula)on $.map(),
 $.inArray(),
 • CSS $.merge(),
 $.unique() • Events • Effects $.isArray(),
 $,isFunc)on() • Ajax • U)li)es
  79. 79. Overview
of
jQuery
API • Core $.each(data.items, function(i,item){ • Selectors $("<img/>") .attr("src”,item.media.m).appendTo("body"); • A]ributes if ( i == 30 ) return false; }); • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  80. 80. What
happen
to
the
$
alias
and
the
$ (document).ready()
event <!DOCTYPE html> <html> <head> <script src=“jquery.js”></script> <script> $(document).ready(function{ //jQuery code here }) </script> </head> <body> </script> </body> </html>
  81. 81. What
happen
to
the
$
alias
and
the
$ (document).ready()
event <!DOCTYPE html> <html> <head> <script src=“jquery.js”></script> <script> $(document).ready(function{ alert($(document).jquery); }) </script> </head> <body> </script> </body> </html>
  82. 82. What
happen
to
the
$
alias
and
the
$ (document).ready()
event <!DOCTYPE html> <html> <head> <script src=“jquery.js”></script> <script> $(document).ready(function{ alert($(document).jquery); }) </script> </head> <body> </script> </body> </html>
  83. 83. What
happen
to
the
$
alias
and
the
$ (document).ready()
event <!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script> alert($(document).jquery); </script> </body> </html>
  84. 84. What
happen
to
the
$
alias
and
the
$ (document).ready()
event <!DOCTYPE html> <html> <body> <script src=“jquery.js”></script> <script> alert($(document).jquery); (function($){ alert($().jquery); })(jQuery); </script> </body> </html>
  85. 85. Plugins!
  86. 86. So,
what
is
a
plugin? A
plugin
is
nothing
more
than
a
custom
jQuery
 method
created
to
extend
the
func)onality
of
 the
jQuery
object $(‘ul’).myPlugin()
  87. 87. Why
Create
a
plugin? You
want
to
“find
something”,
and
“do
 something”
but
the
“do
something”
is
not
 available
in
jQuery.
 Roll
your
own
“do
something”
with
a
plugin!
  88. 88. A
jQuery
plugin
in
6
steps h]p://jsbin.com/eheku/edit
  89. 89. A
jQuery
plugin
in
6
steps Step
1.
create
a
private
scope
for
$
alias <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ })(jQuery); </script></body></html>
  90. 90. A
jQuery
plugin
in
6
steps Step
2.
a]ach
plugin
to
fn
alias
(aka
prototype) <!DOCTYPE html><html><body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,'love')); }; })(jQuery); </script></body></html>
  91. 91. A
jQuery
plugin
in
6
steps Step
2.
a]ach
plugin
to
fn
alias
(aka
prototype) <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ $(this).text($(this).text().replace(/hate/g,'love')); }; })(jQuery); $('p').loveNotHate(); </script></body></html>
  92. 92. A
jQuery
plugin
in
6
steps Step
3.
add
implicit
itera)on <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); $('p').loveNotHate(); </script></body></html>
  93. 93. A
jQuery
plugin
in
6
steps Step
3.
add
implicit
itera)on <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); $('p').loveNotHate(); </script></body></html>
  94. 94. A
jQuery
plugin
in
6
steps Step
4.
enable
chaining <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); $('p').loveNotHate(); </script></body></html>
  95. 95. A
jQuery
plugin
in
6
steps Step
4.
enable
chaining <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g,'love')); }); }; })(jQuery); $('p').loveNotHate().hide(); </script></body></html>
  96. 96. A
jQuery
plugin
in
6
steps Step
5.
add
default
op)ons <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); $('p').loveNotHate(); </script></body></html>
  97. 97. A
jQuery
plugin
in
6
steps Step
6.
add
custom
op)ons <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); $('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  98. 98. A
jQuery
plugin
in
6
steps Step
6.
add
custom
op)ons <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); $('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  99. 99. A
jQuery
plugin
in
6
steps Step
6.
add
custom
op)ons <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){ $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); $('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  100. 100. A
jQuery
plugin
in
6
steps Step
6.
add
custom
op)ons <!DOCTYPE html><html><body> <p>I hate jQuery!</p> <p>I mean really hate jQuery!</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <script> (function($){ $.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){ $(this).text($(this).text().replace(/hate/ g,options.text)); }); }; $.fn.loveNotHate.defaultOptions = {text:'love'}; })(jQuery); $('p').loveNotHate({text:'love-love-love'}); </script></body></html>
  101. 101. Plugins
are
simple,
just
follow
the
steps!
  102. 102. jQuery
News • jQuery.org
&
Founda)on
(Sobware
Freedom
Law
 Center) • Tax‐deduc)ble
dona)ons • Four
conferences
next
year
(Boston,
San
Francisco,
 London,
and
online) • Infrastructure
Upgrade
(MediaTemple
Sponsorship) • New
Plugin
site
(h]p://plugins.jquery.com) • jQuery
Forum
(moving
away
from
Google
Groups)
  103. 103. ?
  104. 104. Jonathan
Sharp
(@jdsharp) Special
thanks
to
Cody
Lindley

×