Introduction to JQuery

SCOTT RYAN MAY 2008 [email_address] 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

http://scottryansblog.blogspot.com	31
http://www.slideshare.net	3
http://scryan7371.onsugar.com	2
http://soaringeagleco.com	1
http://webcache.googleusercontent.com	1

Introduction to JQuery

by Soaring Eagle L.L.C. on May 31, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 38

Statistics

Introduction to JQuery — Presentation Transcript