Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JQuery

       SCOTT RYAN
        MAY 2008
SCOTT@THERYANSPLACE.COM
Agenda

  Web Development Introduction
  JQuery Introduction
  Selectors
  Modifiers
  Events
  Animation
  Ajax
 ...
Best Practices

  Separation of Concerns
     HTML – Layout

     CSS – Look and Feel

     JavaScript – Event Handlin...
Why JQuery

  Captures standard pattern
     Select ,add or filter, manipulate, repeat

     Unobtrusive JavaScript

 ...
Table Striping (Dom Code)

var tables =
  document.getElementsByTagName(quot;tablequot;);
  for ( var t = 0; t < tables.le...
Table Striping (Prototype)

$$(quot;tablequot;).each(function(table)
{
   Selector.findChildElements(table,
  [quot;trquot...
Table Striping (jQuery)

  $(quot;tr:nth-child(odd)quot;).addClass(quot;oddquot;);
JQuery Wrapper

  $(selector) or jQuery(selector)
  Returns an array of Dom elements
  Includes many methods
     Exam...
Document Ready Handler

  $(document).ready(function(){});
  $(function(){});
     Runs when DOM is loaded

     Cross...
Extending JQuery

  $.fn.samplefunc = function()
   {
   Return
   this.each(
   function(){code goes here});
   }


  $...
Other Libraries

  jQuery.noConflict();
Select
Selectors

  Generic
     Element Name (a, p, img, tr, etc)

     ID (#theId)

     Class (.theclassname)
       a#th...
Positional Selectors

  :first
  :last
  :first-child
  :last-child
  :only-child
  :nth-child(2)
  :nth-child(even)
Special Selectors

  :button                      :submit
  :checkbox                    :selected
  :checked        ...
Managing the Wrapped Set

  size
  get(x)
  index(element)
  add(expression)
  not(expression)
  filter(expression)
...
Selection Demo

  $(‘#hibiscus’)
  $(‘img[alt],img[title]’)
  $('img[alt]').add('img[title]')
  $('li > a')
  $('li >...
More Sample Selectors

  $(‘li:has(a)’);
  $(‘li a’);
Create/Filter/Manipulate
Creating HTML

  $(“<div>Hello</div>”) or $(“<div>”)


  $(“<div class=‘foo’>I have Foo</div><div>I Don’t</
   div>”)
 ...
DOM Manipulation

  Each accesses every element in the wrapped set
  Attr get and set values
     Can use json syntax

...
More Manipulation

  addClass                    append, appendTo
  removeClass                 prepend, prependTo
  ...
Replacing Elements

  $(‘#divToReplace’)
  .replaceWith(‘<p>This is new Data</p>’)
  .remove();
Events and Event Model

  Dom Level 0 Event Model
     Single Events

     Event Class (Proprietary)

  Dom Level 2 Ev...
JQuery Event Model

  Unified Event Model
  Unified Event Object
  Supports Model 2 Semantics
  Propagation
     Casc...
Event Semantics

  bind(eventType,data,listener)
  eventTypeName(listener)
  one(eventType, data,listener)
  unbind(ev...
Simple Bind

  $(function(){
$(‘#sample’)
.bind(‘click’,clickOne)
.bind(‘click’,clickTwo)
.bind(‘click’,clickThree)
.bind...
Event Sample (Toggle/Inline)

$(function(){
   $(‘#sample’).toggle(
      function(event){
        $(event.target).css(‘op...
Event Sample (Hover/External)

$(‘#sample’)
  .bind(‘mouseover’ , report)
  .bind(‘mouseout’ , report);

function report (...
Animation and Effects

  show (speed, callback)
  hide(speed, callback)
  toggle(speed, callback)
     Callback is a f...
JQuery Utility Functions

  browser, box model, float style flags
  trim
  each
  grep
  inArray, makeArray, unique, ...
Plugins

  Complex extensions
  Should be developed to work with other libraries
  Custom Utility functions
  Custom w...
Ajax

  load (url, parameters, callback)
  serialize, serializeArray
  get
  getJSON
  post
  ajax
Upcoming SlideShare
Loading in …5
×

DOSUG Intro to JQuery JavaScript Framework

4,506 views

Published on

An Intro to the JQuery JavaScript Framework by Scott Damon Ryan of the Denver Open Source Users Group (DOSUG)

Published in: Technology
  • Be the first to comment

DOSUG Intro to JQuery JavaScript Framework

  1. 1. JQuery SCOTT RYAN MAY 2008 SCOTT@THERYANSPLACE.COM
  2. 2. Agenda   Web Development Introduction   JQuery Introduction   Selectors   Modifiers   Events   Animation   Ajax   Plugins
  3. 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. 4. Why JQuery   Captures standard pattern   Select ,add or filter, manipulate, repeat   Unobtrusive JavaScript   Table Striping Example
  5. 5. Table Striping (Dom Code) var tables = document.getElementsByTagName(quot;tablequot;); for ( var t = 0; t < tables.length; t++ ) { var rows = tables[t].getElementsByTagName(quot;trquot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^| s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += quot; oddquot;; }
  6. 6. Table Striping (Prototype) $$(quot;tablequot;).each(function(table) { Selector.findChildElements(table, [quot;trquot;]) .findAll(function(row,i){ return i % 2 == 1; }) .invoke(quot;addClassNamequot;, quot;oddquot;); });
  7. 7. Table Striping (jQuery)   $(quot;tr:nth-child(odd)quot;).addClass(quot;oddquot;);
  8. 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. 9. Document Ready Handler   $(document).ready(function(){});   $(function(){});   Runs when DOM is loaded   Cross Browser   Don’t need to wait for resources
  10. 10. Extending JQuery   $.fn.samplefunc = function() { Return this.each( function(){code goes here}); }   $(‘#sample’).samplefunc().addClass(‘NewClass’);
  11. 11. Other Libraries   jQuery.noConflict();
  12. 12. Select
  13. 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. 14. Positional Selectors   :first   :last   :first-child   :last-child   :only-child   :nth-child(2)   :nth-child(even)
  15. 15. Special Selectors   :button   :submit   :checkbox   :selected   :checked   :text   :contains(text string)   :visible   :enabled   :disabled   :input   :hidden
  16. 16. Managing the Wrapped Set   size   get(x)   index(element)   add(expression)   not(expression)   filter(expression)   Slice(begin, end)
  17. 17. Selection Demo   $(‘#hibiscus’)   $(‘img[alt],img[title]’)   $('img[alt]').add('img[title]')   $('li > a')   $('li > a:first')   $(quot;#aTextFieldquot;).attr(quot;valuequot;,quot;testquot;)   $(‘input[type=text]’)   $(‘a[href$=.pdf]’)   $(‘div[title^=my]’)
  18. 18. More Sample Selectors   $(‘li:has(a)’);   $(‘li a’);
  19. 19. Create/Filter/Manipulate
  20. 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. 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. 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. 23. Replacing Elements   $(‘#divToReplace’)   .replaceWith(‘<p>This is new Data</p>’)   .remove();
  24. 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. 25. JQuery Event Model   Unified Event Model   Unified Event Object   Supports Model 2 Semantics   Propagation   Cascade   Bubble
  26. 26. Event Semantics   bind(eventType,data,listener)   eventTypeName(listener)   one(eventType, data,listener)   unbind(eventType, listener)   unbind(event)   trigger(eventType)   toggle(oddListener,evenListener)
  27. 27. Simple Bind   $(function(){ $(‘#sample’) .bind(‘click’,clickOne) .bind(‘click’,clickTwo) .bind(‘click’,clickThree) .bind(‘mouseover’,mouse);
  28. 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. 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. 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. 31. JQuery Utility Functions   browser, box model, float style flags   trim   each   grep   inArray, makeArray, unique, extend   getScript
  32. 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. 33. Ajax   load (url, parameters, callback)   serialize, serializeArray   get   getJSON   post   ajax

×