Introduction for Developers<br />
Survey<br />
Who Me?<br />Jörn Zaefferer from Cologne<br />Consultant for maxence integration technologies<br />jQueryteam member<br />...
Why bother?<br />
Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />ht...
Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />ht...
Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />ht...
What exactly is jQuery<br />jQuery is a JavaScript Library!<br />Dealing with the DOM<br />JavaScript Events<br />Animatio...
What does that mean?<br />
It means no more of this<br />var tables = document.getElementsByTagName(&quot;table&quot;);<br />for (vart = 0; t&lt;tabl...
Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />
Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery functio...
Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selecto...
Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selecto...
Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selecto...
It really is the “write less, do more” JavaScript Library!<br />
Why use jQuery<br />Helps us to simplify and speed up web development<br />Allows us to avoid common headaches associated ...
Why use jQuery over other solutions<br />Helps us to simplify and speed up web development<br />Allows us to avoid common ...
Concept 1. Find something, do something<br />
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul&gt;<br ...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul&gt;<br ...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quo...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot...
Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot...
Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&qu...
Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&qu...
Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&qu...
Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&qu...
Concept 3. Chaining<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br /...
Concept 3. Chaining<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br /...
Concept 4. jQuery parameter types<br />CSS Selectors & custom CSS expressions jQuery(&quot;#nav&quot;) and jQuery(&quot;:f...
Review<br />Find something, do something<br />Create something, do something<br />Chaining<br />jQuery parameter types<br />
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br ...
jQuery and $<br />var jQuery = window.jQuery = window.$ = function() {}<br />
jQuery and $<br />jQuery(document).ready(function($) {<br />	// ready code<br />});<br />or<br />jQuery(function($) {<br /...
jQuery.noConflict()<br />
Plugins<br />
A jQueryplugin in 6 steps<br />http://jsbin.com/asice/edit<br />
A jQueryplugin in 6 steps<br />Step 1. create a private scope for $ alias<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&g...
A jQueryplugin in 6 steps<br />Step 2. attach plugin to fn alias (aka prototype)<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt...
A jQueryplugin in 6 steps<br />Step 2. attach plugin to fn alias (aka prototype)<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt...
A jQueryplugin in 6 steps<br />Step 3. add implicit iteration<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;...
A jQueryplugin in 6 steps<br />Step 3. add implicit iteration<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;...
A jQueryplugin in 6 steps<br />Step 4. enable chaining<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I ...
A jQueryplugin in 6 steps<br />Step 4. enable chaining<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I ...
A jQueryplugin in 6 steps<br />Step 5. add default options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&g...
A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt...
A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt...
A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt...
A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt...
Pluginsare simple,just follow the steps!<br />
jQuery News<br />Moving towards a Conservancy (Software Freedom Law Center) owning the code<br />Tax-deductible donations<...
?<br />
Thank you!<br />
Upcoming SlideShare
Loading in...5
×

Stackoverflow DevDays: jQuery Introduction for Developers

6,705

Published on

Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,705
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
282
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • know jquery?worked with jquery?
  • Quick overview of me
  • before we start, for those not already using jQuery, lets answer this question: why bother?if you aren"t using it yet, is anyone else?
  • Very significant when you consider how many javascript solutions there are out there
  • It simplifies…dealing – selecting and manipulating elementsevent handling, eg. do something on a click eventanimating – slides, fadesajax – server stuff in the background
  • Will add a class to each odd table row inside of each table in an html pagenot too complex, already nine lines of codelead in: using jQuery…
  • Exchange 9 lines of code for a single jQuery statementLets examine this in detail
  • (just read)
  • While other solutions certainly provide the first two aspectsThese other four really set jQuery apartGood enough? Lets get down to the details!
  • Call out DTD
  • Call out DTD
  • Call out wrapper set using jQuery function
  • Call out implicit iteration
  • Repetition is the faster way to learn
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Point out that the html does not have to be in the actual DOM to operate on it
  • Make sure we understand all the functionality the jquery function provides us
  • plugins add new methods to the jQuery objectadd a custom do-somethinghow does that work?
  • Stackoverflow DevDays: jQuery Introduction for Developers

    1. 1. Introduction for Developers<br />
    2. 2. Survey<br />
    3. 3. Who Me?<br />Jörn Zaefferer from Cologne<br />Consultant for maxence integration technologies<br />jQueryteam member<br />jQuery UI lead developer<br />Co-Author jQuery Cookbook, due this month<br />
    4. 4. Why bother?<br />
    5. 5. Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />http://trends.builtwith.com/javascript/JQuery<br />
    6. 6. Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />http://trends.builtwith.com/javascript/JQuery<br />
    7. 7. Who uses jQuery<br />35% of all sites that use JavaScript, use jQuery<br />1 out 5 sites, of all sites, use jQuery<br />http://trends.builtwith.com/javascript/JQuery<br />
    8. 8. What exactly is jQuery<br />jQuery is a JavaScript Library!<br />Dealing with the DOM<br />JavaScript Events<br />Animations<br />Ajax interactions<br />
    9. 9. What does that mean?<br />
    10. 10. It means no more of this<br />var tables = document.getElementsByTagName(&quot;table&quot;);<br />for (vart = 0; t&lt;tables.length; t++) {<br />var rows = tables[t].getElementsByTagName(&quot;tr&quot;);<br /> for (vari = 1; i&lt;rows.length; i += 2) {<br /> if (!/(^|s)odd(s|$)/.test(rows[i].className)) {<br /> rows[i].className+= &quot; odd&quot;;<br /> }<br /> }<br />};<br />http://jsbin.com/esewu/edit<br />
    11. 11. Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />
    12. 12. Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery function<br />
    13. 13. Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selector (CSS expression)<br />jQuery function<br />
    14. 14. Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selector (CSS expression)<br />jQuery function<br />jQuery Wrapper Set<br />
    15. 15. Using jQuery we can do this<br />jQuery(&quot;tabletr:nth-child(odd)&quot;).addClass(&quot;odd&quot;);<br />jQuery Selector (CSS expression)<br />jQuery function<br />jQuery Method<br />jQuery Wrapper Set<br />
    16. 16. It really is the “write less, do more” JavaScript Library!<br />
    17. 17. Why use jQuery<br />Helps us to simplify and speed up web development<br />Allows us to avoid common headaches associated with browser development<br />Provides a large pool of plugins<br />Large and active community<br />Tested on 50 browsers, 11 platforms<br />Its for both coders and designers<br />
    18. 18. Why use jQuery over other solutions<br />Helps us to simplify and speed up web development<br />Allows us to avoid common headaches associated with browser development<br />Provides a large pool of plugins<br />Large and active community<br />Tested on 50 browsers, 11 platforms<br />Its for both coders and designers<br />
    19. 19. Concept 1. Find something, do something<br />
    20. 20. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    21. 21. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;ul&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    22. 22. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;ul&quot;).attr(&quot;id&quot;, &quot;nav&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    23. 23. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;#nav li&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    24. 24. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;#nav li&quot;).addClass(&quot;navLiItem&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    25. 25. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;#nav a&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    26. 26. Concept 1. Find something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br /> &lt;li&gt;&lt;a href=&quot;/home&quot;&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=&quot;/about&quot;&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;#nav a&quot;).each(function(){<br /> jQuery(this).attr(&quot;href&quot;, &quot;/&quot; + jQuery(this).text());<br /> });<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    27. 27. Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br />&lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    28. 28. Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;&lt;li&gt;home&lt;/li&gt;&quot;);<br /> jQuery(&quot;&lt;li&gt;about&lt;/li&gt;&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    29. 29. Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;&lt;li&gt;home&lt;/li&gt;&quot;).wrapInner(&quot;a&quot;);<br /> jQuery(&quot;&lt;li&gt;about&lt;/li&gt;&quot;).wrapInner(&quot;a&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    30. 30. Concept 2. Create something, do something<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ulid=&quot;nav&quot;&gt;<br /> &lt;li&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;&lt;li&gt;home&lt;/li&gt;&quot;).wrapInner(&quot;a&quot;).appendTo(&quot;#nav&quot;);<br /> jQuery(&quot;&lt;li&gt;about&lt;/li&gt;&quot;).wrapInner(&quot;a&quot;).appendTo(&quot;#nav&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    31. 31. Concept 3. Chaining<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a href=&quot;/home&quot;&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a href=&quot;/about&quot;&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;ul&quot;).attr(&quot;id&quot;,&quot;nav&quot;);<br /> jQuery(&quot;#nav li&quot;).addClass(&quot;navLiItem&quot;);<br /> jQuery(&quot;#nav a&quot;).each(function(){<br /> jQuery(this).attr(&quot;href&quot;, &quot;/&quot; + jQuery(this).text());<br /> });<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    32. 32. Concept 3. Chaining<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a href=&quot;/home&quot;&gt;home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li class=&quot;navLiItem&quot;&gt;&lt;a href=&quot;/about&quot;&gt;about&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br /> jQuery(&quot;ul&quot;).attr(&quot;id&quot;,&quot;nav&quot;)<br /> .find(&quot;li&quot;).addClass(&quot;navLiItem&quot;)<br /> .find(&quot;a&quot;).each(function(){<br /> jQuery(this).attr(&quot;href&quot;,&quot;/&quot; + jQuery(this).text());<br /> });<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />
    33. 33. Concept 4. jQuery parameter types<br />CSS Selectors & custom CSS expressions jQuery(&quot;#nav&quot;) and jQuery(&quot;:first&quot;)<br />HTML jQuery(&quot;&lt;li&gt;&lt;a href=“#”&gt;link&lt;/a&gt;&lt;/li&gt;&quot;)<br />DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)<br />A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})<br />
    34. 34. Review<br />Find something, do something<br />Create something, do something<br />Chaining<br />jQuery parameter types<br />
    35. 35. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />
    36. 36. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery()<br />each() <br />map()<br />size()<br />length<br />selector<br />context<br />index()<br />get()<br />
    37. 37. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery()<br />each()<br />map() <br />size()<br />length<br />selector<br />context <br />index()<br />get()<br />
    38. 38. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;p&gt;Gold&lt;/p&gt;<br />&lt;p&gt;Silver&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />alert(jQuery(&quot;p&quot;).map(function() {<br /> return $(this).text();<br />}).get());<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/orani/edit#html<br />
    39. 39. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />
    40. 40. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />
    41. 41. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />
    42. 42. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />
    43. 43. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />jQuery(&quot;a[title]&quot;)<br />
    44. 44. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />jQuery(&quot;a[title]&quot;)<br />jQuery(&quot;a[title][href=&apos;foo&apos;]&quot;)<br />
    45. 45. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />jQuery(&quot;a[title]&quot;)<br />jQuery(&quot;a[title][href=&apos;foo&apos;]&quot;)<br />jQuery(&quot;a:first[href*=&apos;foo&apos;]&quot;)<br />
    46. 46. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />jQuery(&quot;a[title]&quot;)<br />jQuery(&quot;a[title][href=&apos;foo&apos;]&quot;)<br />jQuery(&quot;a:first[href*=&apos;foo&apos;]&quot;)<br />jQuery(&quot;#header, #footer&quot;)<br />
    47. 47. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery(&quot;#nav li.contact&quot;)<br />jQuery(&quot;:visible&quot;)<br />jQuery(&quot;:radio:enabled:checked&quot;)<br />jQuery(&quot;a[title]&quot;)<br />jQuery(&quot;a[title][href=&apos;foo&apos;]&quot;)<br />jQuery(&quot;a:first[href*=&apos;foo&apos;]&quot;)<br />jQuery(&quot;#header, #footer&quot;)<br />jQuery(&quot;#header, #footer&quot;).filter(&quot;:visible&quot;)<br />
    48. 48. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />attr()<br />removeAttr()<br />addClass()<br />hasClass()<br />toggleClass()removeClass()<br />val()<br />
    49. 49. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />attr()<br />removeAttr()<br />addClass()<br />hasClass()<br />toggleClass()removeClass()<br />val()<br />
    50. 50. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;input type=&quot;text&quot; value=&quot;search&quot; /&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />$(&quot;input&quot;).focus(function(){<br /> var v = $(this).val(); <br /> $(this).val( v == this.defaultValue? &quot;&quot; : v);<br />}).blur(function(){<br /> var v = $(this).val(); <br /> $(this).val( !v ? this.defaultValue : v);<br />});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />http://jsbin.com/irico/edit#html<br />http://jsbin.com/ihale/edit#html<br />
    51. 51. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />add()<br />children()<br />closest()<br />find()<br />next()<br />nextAll()<br />prev() <br />prevAll() <br />siblings()<br />parent() <br />parents() <br />andSelf()<br />end()<br />eq()<br />filter()<br />is()<br />not()<br />slice()<br />
    52. 52. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />add()<br />children()<br />closest()<br />find()<br />next()<br />nextAll()<br />prev() <br />prevAll() <br />siblings()<br />parent() <br />parents() <br />andSelf()<br />end()<br />eq()<br />filter()<br />is()<br />not()<br />slice()<br />
    53. 53. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;h3&gt;Quotes&lt;/h3&gt;<br />&lt;div&gt;<br /> &lt;p&gt;Now or never&lt;/p&gt;<br /> &lt;p&gt;Because he could&lt;/p&gt;<br />&lt;/div&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />$(&quot;h3&quot;).click(function() {<br /> $(this).next().toggle();<br />}).next().hide();<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/uhole/edit#html<br />
    54. 54. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />html()<br />text()<br />append()<br />appendTo()<br />prepend()<br />prependTo()<br />after()<br />insertAfter()<br />before()<br />insertBefore()<br />wrap()<br />wrapAll()<br />wrapInner()<br />replaceWith()<br />replaceAll()<br />empty()<br />remove()<br />clone()<br />
    55. 55. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />html()<br />text()<br />append()<br />appendTo()<br />prepend()<br />prependTo()<br />after()<br />insertAfter()<br />before()<br />insertBefore()<br />wrap()<br />wrapAll()<br />wrapInner()<br />replaceWith()<br />replaceAll()<br />empty()<br />remove()<br />clone()<br />
    56. 56. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;p&gt;Make me bold!&lt;/p&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery(&quot;p&quot;).wrapInner(&quot;&lt;b&gt;&lt;/b&gt;&quot;);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/esuwu/edit#html<br />
    57. 57. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />css()<br />offset()<br />offsetParent()<br />postion()<br />scrollTop()<br />scrollLeft()<br />height()<br />width()<br />innerHeight()<br />innerWidth()<br />outerHeight()<br />outerWidth()<br />
    58. 58. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />css()<br />offset()<br />offsetParent()<br />postion()<br />scrollTop()<br />scrollLeft()<br />height()<br />width()<br />innerHeight()<br />innerWidth()<br />outerHeight()<br />outerWidth()<br />
    59. 59. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;style&gt;div{background-color:#ccc; width:100px; margin:0 20px; float:left;}&lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;script src=“jquery.js&quot; &gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery(&quot;div&quot;).height(jQuery(document).height());<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/iseti/edit#html<br />
    60. 60. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />blur()<br />change()<br />click()<br />dbclick()<br />error()<br />focus()<br />keydown()<br />keypress()<br />keyup()<br />mousedown()<br />mousenter()<br />mouseleave()<br />mouseout()<br />mouseup()<br />resize()<br />scroll()<br />select()<br />submit()<br />unload()<br />ready()<br />bind()<br />one()<br />trigger()<br />triggerHandler()<br />unbind()<br />live()<br />die()<br />hover()<br />toggle()<br />
    61. 61. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />blur()<br />change()<br />click()<br />dbclick()<br />error()<br />focus()<br />keydown()<br />keypress()<br />keyup()<br />mousedown()<br />mousenter()<br />mouseleave()<br />mouseout()<br />mouseup()<br />resize()<br />scroll()<br />select()<br />submit()<br />unload()<br />ready()<br />bind()<br />one()<br />trigger()<br />triggerHandler()<br />unbind()<br />live()<br />die()<br />hover()<br />toggle()<br />
    62. 62. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;p&gt;click me&lt;/p&gt;<br />&lt;p&gt;click me&lt;/p&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery(&quot;p&quot;).bind(&quot;click&quot;, function(){<br /> $(this).after(&quot;&lt;p&gt;click me&lt;/p&gt;&quot;); <br />});<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/ehuki/edit#html<br />
    63. 63. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;body&gt;<br />&lt;p&gt;click me&lt;/p&gt;<br />&lt;p&gt;click me&lt;/p&gt;<br />&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery(&quot;p&quot;).live(&quot;click&quot;, function(){<br /> $(this).after(&quot;&lt;p&gt;click me&lt;/p&gt;&quot;); <br />});<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://jsbin.com/epeha/edit#html<br />
    64. 64. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />show()<br />hide()<br />toggle()<br />slideDown()<br />slideUp()<br />slideToggle()<br />fadeIn()<br />fadeOut()<br />fadeTo()<br />animate()<br />stop()<br />
    65. 65. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />show()<br />hide()<br />toggle()<br />slideDown()<br />slideUp()<br />slideToggle()<br />fadeIn()<br />fadeOut()<br />fadeTo()<br />animate()<br />stop()<br />
    66. 66. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />var tooltip = $(&quot;&lt;div/&gt;&quot;)<br />.addClass(&quot;tooltip&quot;)<br />.appendTo(&quot;body&quot;);<br />$(&quot;input&quot;).mouseover(function(event) {<br /> tooltip.text(this.title).css({<br /> left: event.pageX,<br /> top: event.pageY<br /> }).fadeIn();<br />}).mouseout(function() {<br /> tooltip.fadeOut();<br />});<br />http://jsbin.com/enoco3/edit#html<br />
    67. 67. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />show()<br />hide()<br />toggle()<br />slideDown()<br />slideUp()<br />slideToggle()<br />fadeIn()<br />fadeOut()<br />fadeTo()<br />animate()<br />stop()<br />
    68. 68. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;<br />&lt;style&gt;<br />div{background-color:#bca;width:100px;border:1px solid green;}<br />&lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div id=&quot;block&quot;&gt;Hello!&lt;/div&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; &gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery(&quot;#block&quot;).animate({ <br /> width: &quot;70%&quot;,<br /> opacity: 0.4,<br />}, 1500); <br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />http://jsbin.com/ulexu/edit#html<br />
    69. 69. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery.ajaxSetup() <br />serialize()<br />serializeArray()<br />jQuery.ajax()<br />jQuery.get()<br />jQuery.getJSON() <br />jQuery,getScript() <br />jQuery.post()<br />load()<br />ajaxComplete()<br />ajaxError()<br />ajaxSend()<br />ajaxStart()<br />ajaxStop()<br />ajaxSuccess()<br />
    70. 70. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery.ajaxSetup() <br />serialize()<br />serializeArray()<br />jQuery.ajax()<br />jQuery.get()<br />jQuery.getJSON()<br />jQuery,getScript() <br />jQuery.post()<br />load()<br />ajaxComplete()<br />ajaxError()<br />ajaxSend()<br />ajaxStart()<br />ajaxStop()<br />ajaxSuccess()<br />
    71. 71. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; &gt;&lt;/script&gt;<br />&lt;script&gt;<br />jQuery.getJSON(&quot;http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?&quot;,<br />function(data){<br /> jQuery.each(data.items, function(i,item){ <br /> jQuery(&quot;&lt;img/&gt;&quot;)<br /> .attr(&quot;src&quot;, item.media.m)<br /> .appendTo(&quot;body&quot;); <br />if ( i == 30 ) return false; <br /> }); <br />});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />http://jsbin.com/ivifa/edit#html<br />http://jsbin.com/erase/edit#html<br />
    72. 72. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery.support<br />jQuery.boxModel<br />jQuery.each(), <br />jQuery.extend(), <br />jQuery.grep(), <br />jQuery.makeArray(), <br />jQuery.map(), <br />jQuery.inArray(), <br />jQuery.merge(), <br />jQuery.unique()<br />jQuery.isArray(), <br />jQuery,isFunction()<br />jQuery.trim()<br />jQuery.param()<br />
    73. 73. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery.support<br />jQuery.boxModel<br />jQuery.each(), <br />jQuery.extend(), <br />jQuery.grep(), <br />jQuery.makeArray(), <br />jQuery.map(), <br />jQuery.inArray(), <br />jQuery.merge(), <br />jQuery.unique()<br />jQuery.isArray(), <br />jQuery.isFunction()<br />jQuery.trim()<br />jQuery.param()<br />
    74. 74. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />// returns &quot;hello&quot;<br />jQuery.trim(&quot; hello &quot;);<br />
    75. 75. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />jQuery.support<br />jQuery.boxModel<br />jQuery.each(), <br />jQuery.extend(), <br />jQuery.grep(), <br />jQuery.makeArray(), <br />jQuery.map(), <br />jQuery.inArray(), <br />jQuery.merge(), <br />jQuery.unique()<br />jQuery.isArray(), <br />jQuery.isFunction()<br />jQuery.trim()<br />jQuery.param()<br />
    76. 76. Overview of jQuery API<br />Core<br />Selectors<br />Attributes<br />Traversing<br />Manipulation<br />CSS<br />Events<br />Effects<br />Ajax<br />Utilities<br />// returns &quot;name=John&url=ejohn.org&quot;<br />jQuery.param({ name: &quot;John&quot;, url: &quot;ejohn.org&quot; });<br />
    77. 77. jQuery and $<br />var jQuery = window.jQuery = window.$ = function() {}<br />
    78. 78. jQuery and $<br />jQuery(document).ready(function($) {<br /> // ready code<br />});<br />or<br />jQuery(function($) {<br />// ready code<br />});<br />
    79. 79. jQuery.noConflict()<br />
    80. 80. Plugins<br />
    81. 81. A jQueryplugin in 6 steps<br />http://jsbin.com/asice/edit<br />
    82. 82. A jQueryplugin in 6 steps<br />Step 1. create a private scope for $ alias<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){<br />})(jQuery);<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    83. 83. A jQueryplugin in 6 steps<br />Step 2. attach plugin to fn alias (aka prototype)<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){<br /> $(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}; <br />})(jQuery);<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    84. 84. A jQueryplugin in 6 steps<br />Step 2. attach plugin to fn alias (aka prototype)<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){<br /> $(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}; <br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    85. 85. A jQueryplugin in 6 steps<br />Step 3. add implicit iteration<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />this.each(function(){<br />$(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}); <br />}; <br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    86. 86. A jQueryplugin in 6 steps<br />Step 3. add implicit iteration<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}); <br />}; <br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    87. 87. A jQueryplugin in 6 steps<br />Step 4. enable chaining<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}); <br />}; <br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    88. 88. A jQueryplugin in 6 steps<br />Step 4. enable chaining<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,&quot;love&quot;)); <br />}); <br />}; <br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate().hide();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    89. 89. A jQueryplugin in 6 steps<br />Step 5. add default options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); <br />}); <br />}; <br />$.fn.loveNotHate.defaults = {text:&quot;love&quot;};<br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate();<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    90. 90. A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate = function(){ <br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); <br />}); <br />}; <br />$.fn.loveNotHate.defaults = {text:&quot;love&quot;};<br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate({text:&quot;love-love-love&quot;});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    91. 91. A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate= function(options){ <br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); <br />}); <br />}; <br />$.fn.loveNotHate.defaults = {text:&quot;love&quot;};<br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate({text:&quot;love-love-love&quot;});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    92. 92. A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate= function(options){ <br />options = $.extend({},$.fn.loveNotHate.defaults, options);<br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text)); <br />}); <br />}; <br />$.fn.loveNotHate.defaults = {text:&quot;love&quot;};<br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate({text:&quot;love-love-love&quot;});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    93. 93. A jQueryplugin in 6 steps<br />Step 6. add custom options<br />&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;<br />&lt;p&gt;I hate jQuery!&lt;/p&gt;<br />&lt;p&gt;I mean really hate jQuery!&lt;/p&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script&gt;<br />(function($){ <br />$.fn.loveNotHate= function(options){ <br />options = $.extend({},$.fn.loveNotHate.defaults, options);<br />return this.each(function(){ <br />$(this).text($(this).text().replace(/hate/g,options.text)); <br />}); <br />}; <br />$.fn.loveNotHate.defaults = {text:&quot;love&quot;};<br />})(jQuery);<br />jQuery(&quot;p&quot;).loveNotHate({text:&quot;love-love-love&quot;});<br />&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;<br />
    94. 94. Pluginsare simple,just follow the steps!<br />
    95. 95. jQuery News<br />Moving towards a Conservancy (Software Freedom Law Center) owning the code<br />Tax-deductible donations<br />Four conferences next year (Boston, San Francisco, London, and online)<br />jQuery.org project site<br />T-shirts<br />jQueryForum moving away from Google Groups<br />Revamp of the plugin site<br />
    96. 96. ?<br />
    97. 97. Thank you!<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×