Jim Doran

1

• Jim Doran

2
jQuery feels like cheating.
3

• jQuery is a fast and concise JavaScript library
  that simplifies HTML document traversing, event
  handling, animation, and Ajax interactions for
  rapid web development.

4
Get jQuery

• Download jQuery at http//jquery.com/

5

• About 19KB in size Minified and Gzipped

6
(function()var lthis,g,yl.jQuery,pl.,ol.jQue
ryl.function(E,F)return new
o.fn.init(E,F),D/lt(lt(.\s)gt)gt(\w-
)/,f/.\\.,/o.fno.prototypeinitfu
nction(E,H)EEdocumentif(E.nodeType)this0E
this.length1this.contextEreturn
thisif(typeof E"string")var
GD.exec(E)if(G(G1!H))if(G1)Eo.clean(
G1,H)elsevar Idocument.getElementById(G3)
if(II.id!G3)return o().find(E)var
Fo(I)F.contextdocumentF.selectorEreturn
Felsereturn o(H).find(E)elseif(o.isFunction(
E))return o(document).ready(E)if(E.selectorE.
context)this.selectorE.selectorthis.contextE.c
ontextreturn this.setArray(o.isArray(E)?Eo.makeA
rray(E)),selector"",jquery"1.3.2",sizefunction
()return this.length,getfunction(E)return
Eg?Array.prototype.slice.call(this)thisE,pu
shStackfunction(F,H,E)var Go(F)G.prevObjectth
isG.contextthis.contextif(H"find")G.selecto
rthis.selector(this.selector?"
""")Eelseif(H)G.selectorthis.selector"."H
"("E")"return G,setArrayfunction(E)this.len
gth0Array.prototype.push.apply(this,E)return
this,eachfunction(F,E)return
o.each(this,F,E),indexfunction(E)return
o.inArray(EE.jquery?E0E,this),attrfunction(
F,H,G)var EFif(typeof F"string")if(Hg)r
eturn this0oG"attr"(this0,F)elseEE
FHreturn this.each(function(I)for(F in
E)o.attr(G?this.stylethis,F,o.prop(this,EF,G,I
,F))),cssfunction(E,F)if((E"width"E"hei
ght")parseFloat(F)lt0)Fgreturn
this.attr(E,F,"curCSS"),textfunction(F)if(typeo
f F!"object"F!null)return
this.empty().append((this0this0.ownerDocumen
tdocument).createTextNode(F))var
E""o.each(Fthis,function()o.each(this.childNo
des,function()if(this.nodeType!8)Ethis.nodeTy
pe!1?this.nodeValueo.fn.text(this)))return
E,wrapAllfunction(E)if(this0)var
Fo(E,this0.ownerDocument).clone()if(this0.pa
rentNode)F.insertBefore(this0)F.map(function()
var Gthiswhile(G.firstChild)GG.firstChildret
urn G).append(this)return this,wrapInnerfuncti
on(E)return this.each(function()o(this).contents
().wrapAll(E)),wrapfunction(E)return
this.each(function()o(this).wrapAll(E)),append
function()return this.domManip(arguments,true,fun
ction(E)if(this.nodeType1)this.appendChild(E)
),prependfunction()return this.domManip(argume
nts,true,function(E)if(this.nodeType1)this.ins
ertBefore(E,this.firstChild)),beforefunction()
return this.domManip(arguments,false,function(E)
this.parentNode.insertBefore(E,this)),afterfunc
tion()return this.domManip(arguments,false,functi
on(E)this.parentNode.insertBefore(E,this.nextSibl
ing)),endfunction()return this.prevObjecto(
),push.push,sort.sort,splice.splice,fin
dfunction(E)if(this.length1)var
Fthis.pushStack(,"find",E)F.length0o.find(E,
this0,F)return Felsereturn
this.pushStack(o.unique(o.map(this,function(G)ret
urn o.find(E,G))),"find",E),clonefunction(G)v
ar Ethis.map(function()if(!o.support.noCloneEven
t!o.isXMLDoc(this))var Ithis.outerHTMLif(!I)
var Jthis.ownerDocument.createElement("div")J.ap
pendChild(this.cloneNode(true))IJ.innerHTMLretu
rn o.clean(I.replace(/ jQuery\d"(?\dnull)"/g
,"").replace(/\s/,""))0elsereturn
this.cloneNode(true))if(Gtrue)var
Hthis.find("").andSelf(),F0E.find("").andSelf
().each(function()if(this.nodeName!HF.nodeNam
e)returnvar I
7

• About 19KB in size Minified and Gzipped
• Supports CSS 1-3 selectors

8

• About 19KB in size Minified and Gzipped
• Supports CSS 1-3 selectors
• IE 6.0, FF 2, Safari 3.0, Opera 9.0, Chrome

9

• About 19KB in size Minified and Gzipped
• Supports CSS 1-3 selectors
• IE 6.0, FF 2, Safari 3.0, Opera 9.0, Chrome
• Theres a big community developing plug-ins

10

• About 19KB in size Minified and Gzipped
• Supports CSS 1-3 selectors
• IE 6.0, FF 2, Safari 3.0, Opera 9.0, Chrome
• Theres a big community developing plug-ins
• Animation effects, table sorting, drag-and-drop,
  form validation, AJAX

11
"Cowboy" Ben Alman's photo
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
Web Standards
Structure
Behavior
Formatting
DOM
21
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999
/xhtml"gt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetutf-8"
/gt lttitlegtGetting Staredlt/titlegt ltscript
type"text/javascript" src"jquery.js"gtlt/scriptgt
ltscript type"text/javascriptgt (document).ready
(function() ("a").click(function(event)
alert("Thanks for visiting!") )
) lt/scriptgt lt/headgt ltbodygt lta
href"http//wordpress.org/"gtWordPresslt/agt lt/bodygt
lt/htmlgt
22
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999
/xhtml"gt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetutf-8"
/gt lttitlegtGetting Staredlt/titlegt ltscript
type"text/javascript" src"jquery.js"gtlt/scriptgt
ltscript type"text/javascriptgt (document).ready
(function() ("a").click(function(event)
alert("Thanks for visiting!") )
) lt/scriptgt lt/headgt ltbodygt lta
href"http//wordpress.org/"gtWordPresslt/agt lt/bodygt
lt/htmlgt
23
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999
/xhtml"gt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetutf-8"
/gt lttitlegtGetting Staredlt/titlegt ltscript
type"text/javascript" src"jquery.js"gtlt/scriptgt
ltscript type"text/javascriptgt (document).ready
(function() ("a").click(function(event)
alert("Thanks for visiting!") )
) lt/scriptgt lt/headgt ltbodygt lta
href"http//wordpress.org/"gtWordPresslt/agt lt/bodygt
lt/htmlgt
24
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999
/xhtml"gt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetutf-8"
/gt lttitlegtGetting Staredlt/titlegt ltscript
type"text/javascript" src"jquery.js"gtlt/scriptgt
ltscript type"text/javascriptgt (document).ready
(function() ("a").click(function(event)
alert("Thanks for visiting!") event.preventD
efault() ) ) lt/scriptgt lt/headgt ltbodygt lta
href"http//wordpress.org/"gtWordPresslt/agt lt/bodygt
lt/htmlgt
25
Plays well with others

• (p)

26
Plays well with others

• (p)
• (document)

27
Plays well with others

• (p)
• (document)
• By default, jQuery uses "" as a shortcut for
  "jQuery"

28
Plays well with others

• (p)
• (document)
• By default, jQuery uses "" as a shortcut for
  "jQuery"
• Can be used with other framework (like
  Prototype), which also use ()

29
Plays well with others
jQuery.noConflict() jQuery(document).ready(func
tion() jQuery("div").hide() ) // Use
Prototype with (...), etc. ('someid').hide()
30
(No Transcript)
31
lta hrefsomepage.php classexternalgtMy Johns
Hopkinslt/agt
.external backgroundurl(../images/popout.gif)
right top no-repeat height12px
padding-right13px
('a.external').click(function(event) window.open
(this.href) )
32
lta hrefsomepage.php classexternalgtMy Johns
Hopkinslt/agt
.external backgroundurl(../images/popout.gif)
right top no-repeat height12px
padding-right13px
('a.external').click(function(event) window.open
(this.href) )
33

• jQuery UI Reference
• Interactions
• Draggable
• Droppable
• Sortable
• Selectable
• Resizable
• Widgets
• Accordion
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs
• Effects
• Theming
• Theming Overview
• Theming API

• jQuery API Reference
• jQuery Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Internals

34
More on Selectors
Element Returns ArrayltElement(s)gt Matches all
elements with the given tag name. ("div").css("bo
rder","9px solid red")
35
More on Selectors
Element Returns ArrayltElement(s)gt Matches all
elements with the given tag name. ("div").css("bo
rder","9px solid red") id Returns
ArrayltElementgt Matches a single element with the
given id attribute. ("myDiv").css("border","3px
solid red")
36
More on Selectors
Element Returns ArrayltElement(s)gt Matches all
elements with the given tag name. ("div").css("bo
rder","9px solid red") id Returns
ArrayltElementgt Matches a single element with the
given id attribute. ("myDiv").css("border","3px
solid red") .class Returns ArrayltElement(s)gt M
atches all elements with the given
class. (".myClass").css("border","3px solid
red")
37
More on Selectors
Element Returns ArrayltElement(s)gt Matches all
elements with the given tag name. ("div").css("bo
rder","9px solid red") id Returns
ArrayltElementgt Matches a single element with the
given id attribute. ("myDiv").css("border","3px
solid red") .class Returns ArrayltElement(s)gt M
atches all elements with the given
class. (".myClass").css("border","3px solid
red") .class.class Returns ArrayltElement(s)gt Ma
tches all elements with the given
classes. (".myClass.myOtherClass").css("border","
3px solid red")
38
Contextual Selectors Chaining
("div p").css("border","9px solid red") All the
paragraphs in a div
39
Contextual Selectors Chaining
("div p").css("border","9px solid red") All the
paragraphs in a div (.post gt
img").slideDown("slow") Finds all the images in
the element with id main
40
Contextual Selectors Chaining
("div p").css("border","9px solid red") All the
paragraphs in a div (.post gt
img").slideDown("slow") Finds all the images in
the element within the class .post ("trfirst")
.css("font-style", "italic") Makes the font
style for the first row in a table italicized
41
Contextual Selectors Chaining
("div p").css("border","9px solid red") All the
paragraphs in a div (.post gt
img").slideDown("slow") Finds all the images in
the element within the class .post ("trfirst").
css("font-style", "italic") Makes the font style
for the first row in a table italicized (this).n
ot(("nav gt li.on")).removeClass("over")
Demonstrates chaining
42
(No Transcript)
43
(No Transcript)
44
(No Transcript)
45
ltdiv id"slideshow"gt ltimg src"images/1.jpg"
height"200" width"200" altAmy Hopkins" /gt
ltimg src"images2.jpg" height"200" width"200"
altJenn Hopkins" /gt ltimg src"images/3.jpg"
height"200" width"200" alt"Johns Hopkins"
/gt lt/divgt
('slideshow').cycle()
jquery.cycle.lite.min.js 4kb
http//malsup.com/jquery/cycle/lite/
46
ltdiv id"slideshow"gt ltimg src"images/1.jpg"
height"200" width"200" altAmy Hopkins" /gt
ltimg src"images2.jpg" height"200" width"200"
altJenn Hopkins" /gt ltimg src"images/3.jpg"
height"200" width"200" alt"Johns Hopkins"
/gt lt/divgt
('slideshow').cycle()
jquery.cycle.lite.min.js 4kb
http//malsup.com/jquery/cycle/lite/
47
jquery.pngFix.js http//jquery.andreaseberhard.de/
pngFix/
jquery.ifixpng.js http//jquery.khurshid.com/ifixp
ng.php
48
(No Transcript)
49
var XMLHttpRequestObject false if
(window.XMLHttpRequest)
XMLHttpRequestObject new
XMLHttpRequest( ) else if
(window.ActiveXObject)
XMLHttpRequestObject new
ActiveXObject(Microsoft.XMLHTTP)
function getData(dataSource, divID)
if(XMLHttpRequestObject) var obj
document. getElementById(divID)
XMLHttpRequestObject.open(GET, dataSource)
XMLHttpRequestObject.onreadystatechange
function( ) if (XMLHttpRequestObject.readyS
tate 4 XMLHttpRequestObject
.status 200)
obj.innerHTML XMLHttpRequestObject.responseText
ltformgt ltinput typebutton valueFetch
the message onclickgetData(message.txt,targ
etDiv)gt lt/formgt
50
(document).ready(function()
("div").load("message.txt") )
51
.ajax( type "POST", url "some.php",
data "nameJimlocationBaltimore", success
function(msg) alert( "Data Saved " msg )
)
52
var library 'name' Enoch Pratt',
'_at_open' 1940-17-7', 'address' 'city'
Baltimore', 'zip' '12345', 'state'
'MD', 'street' Cathedral' ,
'books' 'title' 'Harry Potter', 'isbn'
'1234-1234', 'category' 'Childrens', 'availa
ble' '3', 'chapters' 'Chapter 1', 'Chapter
2' , 'title' 'Brief History of
time', 'isbn' '1234-ABCD', 'category'
'Science', 'chapters' '1', '2'
JSON (JavaScript Object Notation)
53
var jsonData "somepage.php" .ajax( url
jsonData, type 'GET', cache false,
data jsonData, contentType
'application/json charsetutf-8', dataType
'json', timeout 1000, error function()
alert('Error loading JSON' jsonData) ,
success function(json) ('div').html(jsonData
.value) )
54
.get('rss.php', function(data)
('rss').html(data) )
55
(No Transcript)
56
(No Transcript)
57
.get('rss.php', function(data)
('rss').html(data) )
58
(No Transcript)
59
jquery.corner.js 8kb (not minified)
60
('.tops').corners("10px top-left
top-right") ('.bottoms').corners("10px
bottom-left bottom-right") ('.rounded').corners
("7px") ('.round').corners("10px") ('.leftie
s').corners("10px top-left bottom-left ")
jquery.corner.js 8kb not minified
http//jquery.malsup.com/corner/
61
('.tops').corners("10px top-left
top-right") ('.bottoms').corners("10px
bottom-left bottom-right") ('.rounded').corners
("7px") ('.round').corners("10px") ('.leftie
s').corners("10px top-left bottom-left
") (".page_item").corners("10px top-left
bottom-left ")
jquery.corner.js 8kb not minified
http//jquery.malsup.com/corner/
62
Resources

• http//codex.wordpress.org/Theme_Development
• http//jquery.lukelutman.com/plugins/flash/ Flash
  Plug-in
• http//jqueryui.com/
• http//jquery.com/
• http//json.org/
• _at_jquery