Slideshow Transcript

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