S C O T T R Y A N M A Y 2 0 0 8

S C O T T @ T H E R Y A N S P L A C E . C O M

JQuery

Agenda

 Web Development Introduction  JQuery Introduction  Selectors  Modifiers  Events  Animation  Ajax  Plugins

Best Practices

 Separation of Concerns  HTML – Layout  CSS – Look and Feel   JavaScript – Event Handling and Dynamic Behavior  Ajax – Remote access and dynamic data

Why JQuery

 Captures standard pattern  Select ,add or filter, manipulate, repeat  Unobtrusive JavaScript

 Table Striping Example

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";

}

Table Striping (Prototype)

$$("table").each(function(table) { Selector.findChildElements(table,

["tr"]) .findAll(function(row,i){ return i % 2 == 1; }) .invoke("addClassName", "odd"); });

Table Striping (jQuery)

 $("tr:nth-child(odd)").addClass("odd");

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

Document Ready Handler

 $(document).ready(function(){});  $(function(){});

 Runs when DOM is loaded  Cross Browser  Don’t need to wait for resources

Extending JQuery

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

 $(‘#sample’).samplefunc().addClass(‘NewClass’);

Other Libraries

  jQuery.noConflict();

Select

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

Positional Selectors

 :first  :last  :first-child  :last-child  :only-child  :nth-child(2)  :nth-child(even)

Special Selectors

  :button   :checkbox   :checked   :contains(text string)   :enabled   :disabled   :input   :hidden

  :submit   :selected   :text   :visible

Managing the Wrapped Set

 size  get(x)   index(element)  add(expression)  not(expression)  filter(expression)  Slice(begin, end)

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]’)

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>”)

  .filter(“.foo”)   .click(function(){alert (‘I am Foo’);})   .end()   .appendTo(“#somedivoutthere”);

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”);

More Manipulation

  addClass   removeClass   toggleClass   css(name,value)  width,height, css  hasClass, getClassNames  html, html(data)   text , text(data)

  append, appendTo  prepend, prependTo  before,insertBefore   after, insertAfter  wrap, wrapAll,wrapInner   remove   empty   replaceWith

(after.remove)

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 Event Model  Multi Event  Event Class  Non IE

 IE Event Model  Propagation (Bubble and Capture)

JQuery Event Model

 Unified Event Model  Unified Event Object  Supports Model 2 Semantics  Propagation

 Cascade  Bubble

Event Semantics

 bind(eventType,data,listener)  eventTypeName(listener)  one(eventType, data,listener)  unbind(eventType, listener)  unbind(event)  trigger(eventType)  toggle(oddListener,evenListener)

Simple Bind

 $(function(){ $(‘#sample’) .bind(‘click’,clickOne) .bind(‘click’,clickTwo) .bind(‘click’,clickThree) .bind(‘mouseover’,mouse);

Event Sample (Toggle/Inline)

$(function(){ $(‘#sample’).toggle( function(event){ $(event.target).css(‘opacity’0.4);}, function(event){ $(event.target).css(‘opacity”,1.0;} ); });

Event Sample (Hover/External)

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

function report (event) { $(‘#output’).append(‘<div>’+event.type+’</div>’); }

$(‘#sample’).hover(report , report);

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

JQuery Utility Functions

 browser, box model, float style flags  trim  each  grep   inArray, makeArray, unique, extend  getScript

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

Ajax

  load (url, parameters, callback)  serialize, serializeArray  get  getJSON  post  ajax