Your SlideShare is downloading. ×
0
SCOTT RYAN MAY 2008 [email_address] JQuery
Agenda <ul><li>Web Development Introduction </li></ul><ul><li>JQuery Introduction </li></ul><ul><li>Selectors </li></ul><u...
Best Practices <ul><li>Separation of Concerns </li></ul><ul><ul><li>HTML – Layout </li></ul></ul><ul><ul><li>CSS – Look an...
Why JQuery <ul><li>Captures standard pattern </li></ul><ul><ul><li>Select ,add or filter, manipulate, repeat </li></ul></u...
Table Striping (Dom Code) <ul><li>var tables = document.getElementsByTagName(&quot;table&quot;);  </li></ul><ul><li>for ( ...
Table Striping (Prototype) <ul><li>$$(&quot;table&quot;).each(function(table) </li></ul><ul><li>{  </li></ul><ul><li>Selec...
Table Striping (jQuery) <ul><li>$(&quot;tr:nth-child(odd)&quot;).addClass(&quot;odd&quot;); </li></ul>
JQuery Wrapper <ul><li>$(selector) or jQuery(selector) </li></ul><ul><li>Returns an array of Dom elements </li></ul><ul><l...
Document Ready Handler <ul><li>$(document).ready(function(){}); </li></ul><ul><li>$(function(){}); </li></ul><ul><ul><li>R...
Extending JQuery <ul><li>$.fn.samplefunc = function() </li></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>Retu...
Other Libraries <ul><li>jQuery.noConflict(); </li></ul>
Select
Selectors <ul><li>Generic </li></ul><ul><ul><li>Element Name (a, p, img, tr, etc) </li></ul></ul><ul><ul><li>ID (#theId) <...
Positional Selectors <ul><li>:first </li></ul><ul><li>:last </li></ul><ul><li>:first-child </li></ul><ul><li>:last-child <...
Special Selectors <ul><li>:button </li></ul><ul><li>:checkbox </li></ul><ul><li>:checked </li></ul><ul><li>:contains(text ...
Managing the Wrapped Set <ul><li>size </li></ul><ul><li>get(x) </li></ul><ul><li>index(element) </li></ul><ul><li>add(expr...
Selection Demo <ul><li>$(‘#hibiscus’) </li></ul><ul><li>$(‘img[alt],img[title]’) </li></ul><ul><li>$('img[alt]').add('img[...
More Sample Selectors <ul><li>$(‘li:has(a)’); </li></ul><ul><li>$(‘li a’); </li></ul>
Create/Filter/Manipulate
Creating HTML <ul><li>$(“<div>Hello</div>”) or $(“<div>”) </li></ul><ul><li>$(“<div class=‘foo’>I have Foo</div><div>I Don...
DOM Manipulation <ul><li>Each accesses every element in the wrapped set </li></ul><ul><li>Attr get and set values </li></u...
More Manipulation <ul><li>addClass </li></ul><ul><li>removeClass </li></ul><ul><li>toggleClass </li></ul><ul><li>css(name,...
Replacing Elements <ul><li>$(‘#divToReplace’) </li></ul><ul><li>.replaceWith(‘<p>This is new Data</p>’) </li></ul><ul><li>...
Events and Event Model <ul><li>Dom Level 0 Event Model </li></ul><ul><ul><li>Single Events </li></ul></ul><ul><ul><li>Even...
JQuery Event Model <ul><li>Unified Event Model </li></ul><ul><li>Unified Event Object </li></ul><ul><li>Supports Model 2 S...
Event Semantics <ul><li>bind(eventType,data,listener) </li></ul><ul><li>eventTypeName(listener) </li></ul><ul><li>one(even...
Simple Bind <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘click’,clickOne) </li></ul><ul><...
Event Sample (Toggle/Inline) <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’).toggle( </li></ul><ul><li>function(event...
Event Sample (Hover/External) <ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘mouseover’ , report) </li></ul><ul><li>.bind(‘...
Animation and Effects <ul><li>show (speed, callback) </li></ul><ul><li>hide(speed, callback) </li></ul><ul><li>toggle(spee...
JQuery Utility Functions <ul><li>browser, box model, float style flags </li></ul><ul><li>trim </li></ul><ul><li>each </li>...
Plugins <ul><li>Complex extensions </li></ul><ul><li>Should be developed to work with other libraries </li></ul><ul><li>Cu...
Ajax <ul><li>load (url, parameters, callback) </li></ul><ul><li>serialize, serializeArray </li></ul><ul><li>get </li></ul>...
Upcoming SlideShare
Loading in...5
×

Introduction to JQuery

4,326

Published on

Presentation at Denver Open Source Users\' Group and the Colorado Springs Open Source User\'s Group on JQuery

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • Thanks for sharing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,326
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
205
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to JQuery"

  1. 1. SCOTT RYAN MAY 2008 [email_address] JQuery
  2. 2. Agenda <ul><li>Web Development Introduction </li></ul><ul><li>JQuery Introduction </li></ul><ul><li>Selectors </li></ul><ul><li>Modifiers </li></ul><ul><li>Events </li></ul><ul><li>Animation </li></ul><ul><li>Ajax </li></ul><ul><li>Plugins </li></ul>
  3. 3. Best Practices <ul><li>Separation of Concerns </li></ul><ul><ul><li>HTML – Layout </li></ul></ul><ul><ul><li>CSS – Look and Feel </li></ul></ul><ul><ul><li>JavaScript – Event Handling and Dynamic Behavior </li></ul></ul><ul><ul><li>Ajax – Remote access and dynamic data </li></ul></ul>
  4. 4. Why JQuery <ul><li>Captures standard pattern </li></ul><ul><ul><li>Select ,add or filter, manipulate, repeat </li></ul></ul><ul><ul><li>Unobtrusive JavaScript </li></ul></ul><ul><li>Table Striping Example </li></ul>
  5. 5. Table Striping (Dom Code) <ul><li>var tables = document.getElementsByTagName(&quot;table&quot;); </li></ul><ul><li>for ( var t = 0; t < tables.length; t++ ) </li></ul><ul><li>{ </li></ul><ul><li>var rows = tables[t].getElementsByTagName(&quot;tr&quot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += &quot; odd&quot;; </li></ul><ul><li>} </li></ul>
  6. 6. Table Striping (Prototype) <ul><li>$$(&quot;table&quot;).each(function(table) </li></ul><ul><li>{ </li></ul><ul><li>Selector.findChildElements(table, [&quot;tr&quot;]) .findAll(function(row,i){ return i % 2 == 1; </li></ul><ul><li>}) .invoke(&quot;addClassName&quot;, &quot;odd&quot;); </li></ul><ul><li>}); </li></ul>
  7. 7. Table Striping (jQuery) <ul><li>$(&quot;tr:nth-child(odd)&quot;).addClass(&quot;odd&quot;); </li></ul>
  8. 8. JQuery Wrapper <ul><li>$(selector) or jQuery(selector) </li></ul><ul><li>Returns an array of Dom elements </li></ul><ul><li>Includes many methods </li></ul><ul><ul><li>Example </li></ul></ul><ul><ul><ul><li>$(“div.fademeout”).fadeOut(); </li></ul></ul></ul><ul><li>Can be chained and always return a new array of elements </li></ul><ul><li>Supports CSS selectors and custom selectors </li></ul>
  9. 9. Document Ready Handler <ul><li>$(document).ready(function(){}); </li></ul><ul><li>$(function(){}); </li></ul><ul><ul><li>Runs when DOM is loaded </li></ul></ul><ul><ul><li>Cross Browser </li></ul></ul><ul><ul><li>Don’t need to wait for resources </li></ul></ul>
  10. 10. Extending JQuery <ul><li>$.fn.samplefunc = function() </li></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>Return </li></ul></ul></ul><ul><ul><ul><li>this.each( </li></ul></ul></ul><ul><ul><ul><li>function(){code goes here}); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>$(‘#sample’).samplefunc().addClass(‘NewClass’); </li></ul>
  11. 11. Other Libraries <ul><li>jQuery.noConflict(); </li></ul>
  12. 12. Select
  13. 13. Selectors <ul><li>Generic </li></ul><ul><ul><li>Element Name (a, p, img, tr, etc) </li></ul></ul><ul><ul><li>ID (#theId) </li></ul></ul><ul><ul><li>Class (.theclassname) </li></ul></ul><ul><ul><ul><li>a#theId.theclassname </li></ul></ul></ul><ul><ul><ul><li>p a.theclassname </li></ul></ul></ul><ul><li>Parent – Child </li></ul><ul><ul><li>ul.myList > li > a </li></ul></ul>
  14. 14. Positional Selectors <ul><li>:first </li></ul><ul><li>:last </li></ul><ul><li>:first-child </li></ul><ul><li>:last-child </li></ul><ul><li>:only-child </li></ul><ul><li>:nth-child(2) </li></ul><ul><li>:nth-child(even) </li></ul>
  15. 15. Special Selectors <ul><li>:button </li></ul><ul><li>:checkbox </li></ul><ul><li>:checked </li></ul><ul><li>:contains(text string) </li></ul><ul><li>:enabled </li></ul><ul><li>:disabled </li></ul><ul><li>:input </li></ul><ul><li>:hidden </li></ul><ul><li>:submit </li></ul><ul><li>:selected </li></ul><ul><li>:text </li></ul><ul><li>:visible </li></ul>
  16. 16. Managing the Wrapped Set <ul><li>size </li></ul><ul><li>get(x) </li></ul><ul><li>index(element) </li></ul><ul><li>add(expression) </li></ul><ul><li>not(expression) </li></ul><ul><li>filter(expression) </li></ul><ul><li>Slice(begin, end) </li></ul>
  17. 17. Selection Demo <ul><li>$(‘#hibiscus’) </li></ul><ul><li>$(‘img[alt],img[title]’) </li></ul><ul><li>$('img[alt]').add('img[title]') </li></ul><ul><li>$('li > a') </li></ul><ul><li>$('li > a:first') </li></ul><ul><li>$(&quot;#aTextField&quot;).attr(&quot;value&quot;,&quot;test&quot;) </li></ul><ul><li>$(‘input[type=text]’) </li></ul><ul><li>$(‘a[href$=.pdf]’) </li></ul><ul><li>$(‘div[title^=my]’) </li></ul>
  18. 18. More Sample Selectors <ul><li>$(‘li:has(a)’); </li></ul><ul><li>$(‘li a’); </li></ul>
  19. 19. Create/Filter/Manipulate
  20. 20. Creating HTML <ul><li>$(“<div>Hello</div>”) or $(“<div>”) </li></ul><ul><li>$(“<div class=‘foo’>I have Foo</div><div>I Don’t</div>”) </li></ul><ul><li>.filter(“.foo”) </li></ul><ul><li>.click(function(){alert (‘I am Foo’);}) </li></ul><ul><li>.end() </li></ul><ul><li>.appendTo(“#somedivoutthere”); </li></ul>
  21. 21. DOM Manipulation <ul><li>Each accesses every element in the wrapped set </li></ul><ul><li>Attr get and set values </li></ul><ul><ul><li>Can use json syntax </li></ul></ul><ul><ul><li>Attr(title:’test’, value:’yes’) </li></ul></ul><ul><ul><li>removeAttr </li></ul></ul><ul><ul><li>$(“a[href^http://]”).attr(“target”,”_blank”); </li></ul></ul>
  22. 22. More Manipulation <ul><li>addClass </li></ul><ul><li>removeClass </li></ul><ul><li>toggleClass </li></ul><ul><li>css(name,value) </li></ul><ul><li>width,height, css </li></ul><ul><li>hasClass, getClassNames </li></ul><ul><li>html, html(data) </li></ul><ul><li>text , text(data) </li></ul><ul><li>append, appendTo </li></ul><ul><li>prepend, prependTo </li></ul><ul><li>before,insertBefore </li></ul><ul><li>after, insertAfter </li></ul><ul><li>wrap, wrapAll,wrapInner </li></ul><ul><li>remove </li></ul><ul><li>empty </li></ul><ul><li>replaceWith (after.remove) </li></ul>
  23. 23. Replacing Elements <ul><li>$(‘#divToReplace’) </li></ul><ul><li>.replaceWith(‘<p>This is new Data</p>’) </li></ul><ul><li>.remove(); </li></ul>
  24. 24. Events and Event Model <ul><li>Dom Level 0 Event Model </li></ul><ul><ul><li>Single Events </li></ul></ul><ul><ul><li>Event Class (Proprietary) </li></ul></ul><ul><li>Dom Level 2 Event Model </li></ul><ul><ul><li>Multi Event </li></ul></ul><ul><ul><li>Event Class </li></ul></ul><ul><ul><li>Non IE </li></ul></ul><ul><li>IE Event Model </li></ul><ul><li>Propagation (Bubble and Capture) </li></ul>
  25. 25. JQuery Event Model <ul><li>Unified Event Model </li></ul><ul><li>Unified Event Object </li></ul><ul><li>Supports Model 2 Semantics </li></ul><ul><li>Propagation </li></ul><ul><ul><li>Cascade </li></ul></ul><ul><ul><li>Bubble </li></ul></ul>
  26. 26. Event Semantics <ul><li>bind(eventType,data,listener) </li></ul><ul><li>eventTypeName(listener) </li></ul><ul><li>one(eventType, data,listener) </li></ul><ul><li>unbind(eventType, listener) </li></ul><ul><li>unbind(event) </li></ul><ul><li>trigger(eventType) </li></ul><ul><li>toggle(oddListener,evenListener) </li></ul>
  27. 27. Simple Bind <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘click’,clickOne) </li></ul><ul><li>.bind(‘click’,clickTwo) </li></ul><ul><li>.bind(‘click’,clickThree) </li></ul><ul><li>.bind(‘mouseover’,mouse); </li></ul>
  28. 28. Event Sample (Toggle/Inline) <ul><li>$(function(){ </li></ul><ul><li>$(‘#sample’).toggle( </li></ul><ul><li>function(event){ </li></ul><ul><li>$(event.target).css(‘opacity’0.4);}, </li></ul><ul><li>function(event){ </li></ul><ul><li>$(event.target).css(‘opacity”,1.0;} </li></ul><ul><li>); </li></ul><ul><li>}); </li></ul>
  29. 29. Event Sample (Hover/External) <ul><li>$(‘#sample’) </li></ul><ul><li>.bind(‘mouseover’ , report) </li></ul><ul><li>.bind(‘mouseout’ , report); </li></ul><ul><li>function report (event) { </li></ul><ul><li>$(‘#output’).append(‘<div>’+event.type+’</div>’); </li></ul><ul><li>} </li></ul><ul><li>$(‘#sample’).hover(report , report); </li></ul>
  30. 30. Animation and Effects <ul><li>show (speed, callback) </li></ul><ul><li>hide(speed, callback) </li></ul><ul><li>toggle(speed, callback) </li></ul><ul><ul><li>Callback is a function that is passed a reference to this as the calling element. </li></ul></ul><ul><li>fadeIn, fadeOut, fadeTo </li></ul><ul><li>slideDown, slideUp, slideToggle </li></ul><ul><li>Custom animations </li></ul>
  31. 31. JQuery Utility Functions <ul><li>browser, box model, float style flags </li></ul><ul><li>trim </li></ul><ul><li>each </li></ul><ul><li>grep </li></ul><ul><li>inArray, makeArray, unique, extend </li></ul><ul><li>getScript </li></ul>
  32. 32. Plugins <ul><li>Complex extensions </li></ul><ul><li>Should be developed to work with other libraries </li></ul><ul><li>Custom Utility functions </li></ul><ul><li>Custom wrapped methods </li></ul><ul><li>Form, Dimensions, Live Query, UI, MarkitUp </li></ul><ul><li>Beware of the $ but not too timid </li></ul><ul><li>Naming jquery.pluginname.js </li></ul><ul><li>Parameter Tricks </li></ul>
  33. 33. Ajax <ul><li>load (url, parameters, callback) </li></ul><ul><li>serialize, serializeArray </li></ul><ul><li>get </li></ul><ul><li>getJSON </li></ul><ul><li>post </li></ul><ul><li>ajax </li></ul>
  1. A particular slide catching your eye?

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

×