Stack Overflow Austin - jQuery for Developers

  • 5,370 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • الى كل من يهمه الامر !!!!اسأل مجرب مسابقة انتيكات السعدي هو النسخة العربية من برنامج المسابقات الأشهر في العالم تطلقه عبر الشرق الأوسط؛ حيث يتلقى الفائز النهائي جائزة مالية قدرها 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/ وسوف تشمل الأخبار اليومية على آخر الأخبار في العالم في الفئات المختلفة للأنباء. قد يكون من قطاع تكنولوجيا المعلومات أو أنه قد يكون من أي أخبار أخرى انتيكات السعدي
    انتيكات السعدي
    Are you sure you want to
    Your message goes here
  • Nice slides for introducing jQuery.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,370
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
434
Comments
2
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduc)on
for
Developers
  • 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. Who
am
I? • Own
a
horse
  • 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. 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. 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. 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. 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. What
does
that
mean?
  • 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. Poetry jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • 12. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
func)on
  • 13. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’); jQuery
Selector
(CSS
Expression) jQuery
func)on
  • 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. 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. Using
jQuery
we
can
do
this jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • 17. Further
Reduced $(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • 18. Further
Reduced var jQuery = function(...) { ... }; // $ is a valid variable character in JavaScript var $ = jQuery; $(‘table tr:nth-child(odd)’).addClass(‘odd’);
  • 19. It
really
is
the
 “write
less,
do
more”
 JavaScript
Library!
  • 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. 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. Ok,
lets
get
to
it!
  • 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. 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. 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. 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. 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. 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. 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. Concept
2.
Create
something,
do
something <!DOCTYPE html> <html> <body> <ul id=‘nav’> </ul> </script> </body> </html>
  • 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. 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. 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. 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. 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. 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. 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. 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. Review • Find
something,
do
something • Create
something,
do
something • Chaining
&
Opera)ng • Understanding
Implicit
Itera)on • Knowing
the
jQuery
parameter
types
  • 40. jQuery
API
overview • Core • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  • 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. 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. 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. 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. Overview
of
jQuery
API • Core • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  • 46. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  • 47. Overview
of
jQuery
API • Core $(‘#nav li.contact’) • Selectors $(‘:visible’) • A]ributes • Traversing • Manipula)on • CSS • Events • Effects • Ajax • U)li)es
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Plugins!
  • 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. 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. A
jQuery
plugin
in
6
steps h]p://jsbin.com/eheku/edit
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Plugins
are
simple,
just
follow
the
steps!
  • 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. ?
  • 104. Jonathan
Sharp
(@jdsharp) Special
thanks
to
Cody
Lindley