Introduction to JQuery

SCOTT RYANMAY 2008

[email protected]

JQuery

Agenda

Web Development IntroductionJQuery IntroductionSelectorsModifiersEventsAnimationAjaxPlugins

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 elementsIncludes 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

sizeget(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

addClassremoveClasstoggleClasscss(name,value)width,height, csshasClass,

getClassNameshtml, html(data)text , text(data)

append, appendToprepend, prependTobefore,insertBeforeafter, insertAfterwrap,

wrapAll,wrapInnerremoveemptyreplaceWith

(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 ModelPropagation (Bubble and Capture)

JQuery Event Model

Unified Event ModelUnified Event ObjectSupports Model 2 SemanticsPropagation

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, fadeToslideDown, slideUp, slideToggleCustom animations

JQuery Utility Functions

browser, box model, float style flagstrimeachgrepinArray, makeArray, unique, extendgetScript

Plugins

Complex extensionsShould be developed to work with other

librariesCustom Utility functionsCustom wrapped methodsForm, Dimensions, Live Query, UI, MarkitUpBeware of the $ but not too timidNaming jquery.pluginname.jsParameter Tricks

Ajax

load (url, parameters, callback)serialize, serializeArraygetgetJSONpostajax