Introduction to jQuery

Perancangan dan Pemrograman Web

2014
Sumber: www.w3schools.com, www. jquery.com


What is jQuery

jQuery s a !as", small, and !ea"ure#rch $a%aScr&" lbrary. '"

ma(es "hngs l(e )*+, documen" "ra%ersal and
man&ula"on, e%en" handlng, anma"on, and -ja. much
sm&ler w"h an easy#"o#use -P' "ha" wor(s across a
mul""ude o! browsers. W"h a combna"on o! %ersa"l"y and
e."ensbl"y, jQuery has changed "he way "ha" mllons o!
&eo&le wr"e $a%aScr&".

jQuery s a lgh"wegh", /wr"e less, do more/, $a%aScr&"

lbrary.

jQuery "a(es a lo" o! common "as(s "ha" requre many lnes

o! $a%aScr&" code "o accom&lsh, and wra&s "hem n"o
me"hods "ha" you can call w"h a sngle lne o! code.


Installing jQuery

0ownload "he lbrary !rom jquery.com

'nser" a re!erence n "he )*+, &age

such below:


Installing jQuery
(via jQuery, Microsoft,
and Google)

1esde downloadng "he lbrary, $Query

can be ncluded !rom 203 42on"en
0el%ery 3e"wor(5.

$Query, +croso!" and 6oogle hos"

$Query ja%ascr&".


Installing jQuery
(via jQuery, Microsoft,
and Google)
Google CDN
Microsoft CDN


Installing jQuery
(via jQuery, Microsoft,
and Google)
JQuery CDN


jQuery Syntax

1asc syn"a. : $(selector).action()

- 7 sgn "o de!ne8access jQuery

- 4selec"or5 "o /query 4or !nd5/ )*+,

elemen"s

- jQuery ac"on45 "o be &er!ormed on

"he elemen"4s5


jQuery Syntax

-ll jQuery me"hods are wr""en nsde a

documen" ready e%en".

*hs s "o &re%en" any jQuery code !rom

runnng be!ore "he documen" s !nshed
loadng 4s ready5.



jQuery Syntax
Example


jQuery Examle


jQuery Selectors

jQuery selec"ors allow you "o selec" and

man&ula"e )*+, elemen"4s5.

jQuery selec"ors are used "o /!nd/ 4or

selec"5 )*+, elemen"s based on "her
d, classes, "y&es, a""rbu"es, %alues o!
a""rbu"es and much more.


jQuery Selectors


jQuery Selectors


jQuery !id Selector

*he jQuery 9d selec"or uses "he d

a""rbu"e o! an )*+, "ag "o !nd "he
s&ec!c elemen".

-n d should be unque w"hn a &age, so

you should use "he 9d selec"or when
you wan" "o !nd a sngle, unque
elemen".


jQuery !id Selector


jQuery !class Selector

*he jQuery class selec"or !nds elemen"s

w"h a s&ec!c class.

*o !nd elemen"s w"h a s&ec!c class,

wr"e a &erod charac"er, !ollowed by "he
name o! "he class


jQuery !class Selector


jQuery Events

-ll "he d!!eren" %s"or:s ac"ons "ha" a

web &age can res&ond

*he &recse momen" when some"hng

ha&&ens


jQuery Events


jQuery Effects

)de8Show 40emo5

;ade

Slde

-nma"e 40emo5

S"o&

2allbac(

2hanng


jQuery "#M$

<ne %ery m&or"an" &ar" o! jQuery s "he

&ossbl"y "o man&ula"e "he 0<+.

jQuery comes w"h a bunch o! 0<+

rela"ed me"hods "ha" ma(e " easy "o
access and man&ula"e elemen"s and
a""rbu"es.


jQuery "#M$

jQuery 6e"

jQuery Se"

jQuery -dd

jQuery =emo%e

jQuery 2SS 2lases

jQuery css45

jQuery 0mensons


jQuery Get and Set

*hree sm&le, bu" use!ul, jQuery

me"hods !or 0<+ man&ula"on are:

"e."45 : Se"s or re"urns "he "e." con"en"

o! selec"ed elemen"s

h"ml45 : Se"s or re"urns "he con"en" o!

selec"ed elemen"s 4ncludng )*+,
mar(u&5

>al45 : Se"s or re"urns "he %alue o! !orm

!elds


jQuery %dd

jQuery has 4 me"hods "o add new

con"en":

a&&end45 # 'nser"s con"en" a" "he end o!

"he selec"ed elemen"s

&re&end45 # 'nser"s con"en" a" "he

begnnng o! "he selec"ed elemen"s

a!"er45 # 'nser"s con"en" a!"er "he

selec"ed elemen"s

be!ore45 # 'nser"s con"en" be!ore "he

selec"ed elemen"s


jQuery &emove

jQuery has "wo me"hods "o remo%e

elemen"s and con"en"s:

remo%e45 # =emo%es "he selec"ed

elemen" 4and "s chld elemen"s5

em&"y45 # =emo%es "he chld elemen"s

!rom "he selec"ed elemen"


jQuery #raversing

jQuery "ra%ersng, whch means /mo%e

"hrough/, are used "o /!nd/ 4or selec"5
)*+, elemen"s based on "her rela"on
"o o"her elemen"s


jQuery #raversing

jQuery -nces"ors

jQuery 0escendan"s

jQuery Sblngs

jQuery ;l"erng


jQuery 'I

jQuery ?' s a cura"ed se" o! user

n"er!ace n"erac"ons, e!!ec"s, wdge"s,
and "hemes bul" on "o& o! "he jQuery
$a%aScr&" ,brary. Whe"her you:re
buldng hghly n"erac"%e web
a&&lca"ons or you jus" need "o add a
da"e &c(er "o a !orm con"rol, jQuery ?'
s "he &er!ec" choce.


jQuery 'I

'n"erac"ons

Wdge"s

@!!ec"s

?"l"es


"o( to 'se jQuery 'I

Aou:ll need "o nclude "hree !les on your

)*+, &age.


jQuery 'I Getting
Started

0ownload "he la"es" jQuery ?' lbrary

!rom : h""&:88jqueryu.com8download8

?sng lbrary !rom jQuery 230

4code.jquery.com5


jQuery 'I
Imlementation
Examle ()emo)