(A d van ced : Even ts,

Ef f
e cts, D O M
M an ip u lation &

Ern est S liter

M ich ael
D u ckw orth
Tasn em Jah an g ir
Patrycja Lab ed z
M axin e M w azaka
Z erin R ah m an
V u on g Tran

jQuery EVENTS:

B row ser Even ts

.resize()

scroll()

D ocu m en t Load in g

.load ()

.read y()

.u n load ()

Even t H an d ler
A ttach m en t

Form Even ts

.b lu r()

.ch an g e()

.focu s()

K eyb oard Even ts

.b in d ()

.d eleg ate()

.focu sou t()

.of f
()

.keyd ow n ()

.keyp ress()

Even t O b ject

even t.tim eS tam p

even t.typ e

M ou se Even ts

.click()

.d b lclick()

Ef f
e cts
The JQ uery library provides severaltechniques for
adding anim ations to w eb pages. Som e are very
standard anim ations that w e have used to create
pow erpoint slides

.anim ate()
.clearQ ueue()
.delay()
.dequeue()
.fadeIn()
.fadeO ut()

.fadeTo()
.fadeToggle()
.fi
nish()
.hide()

http://api.jquery.com/category/effects/

Exam p le (Ef f
e cts)
The .anim ate() function is a custom
function that allow s users to custom ize
their anim ations
SYN TAX REQ U IRED
$(selector).anim ate({param s},speed,callback);
http://w w w .w 3schools.com /jquery/eff
_anim ate.asp

D O M : D O C U M EN T O B JEC T
M O D EL
W hat is D O M ?
D ocum ent O bject M odel: A program m ing
interface to support htm l, xm land svg
docum ents. Provides a w ay to structure
docum ents.

M A N IP U LATIO N

.addClass()
.after()
.append()
.appendTo()
.attr()
.before()
.clone()

.detach()
.em pty()
.hasClass()

http://api.jquery.com/category/manipulation/

D O M M A N IP U LATIO N M ETH O D S
text() - Sets or returns the text content of
selected elem ents
htm l() - Sets or returns the content of selected
elem ents (including H TM L m arkup)
val() - Sets or returns the value of form fi
elds

Traversin g
A m ethod used to fi
nd H TM L elem ents
based on their relations to other
elem ents.

- Traversing allow s you to easily m ove up to

ancestors, dow n to descendants, and sidew ays
to siblings.

Traversin g
Traveling up the D O M

parent()
parents()
parentsU ntil()

Traveling dow n the D O M

children()
fi
n d()

Traveling sidew ays in the D O M

siblings()
next()
nextAll()
nextU ntil()

prev()
prevAll()
prevU ntil()

Traversin g (Filterin g )

First() M ethod
last() M ethod
eq() M ethod
fi
lter() M ethod
not() M ethod

Exam p le
$(docum ent).ready(function(){
$("div p").fi
rst();
});
Exam p le
$(docum ent).ready(function(){
$("p").fi
lter(".intro");
});

D em o