JQuery

Contents
Chng1 - Gii thiu v jQuery...................................................................................................... 1

Chng 2 jQuery Selectors .......................................................................................................... 7
Chng 3 - Attributes ................................................................................................................... 20
Chng 4 S kin (Events) ......................................................................................................... 23
Chng 5 Hiu ng (Effects) ...................................................................................................... 42
Chng 6 Sa i DOM ............................................................................................................. 60
Chng 7: AJAX Phn 1 ............................................................................................................ 77
Chng 7 AJAX Phn 2 .......................................................................................................... 91

Chng1 - Gii thiu v jQuery
Vi s pht trin rt mau l ca Internet, ngi dng ngy cng quan tm hn n hnh thc
ca mt trang web. Trc y mt trang web ch cn c banner, ni dung v t footer hi ht
l c cho l mt trang web hon chnh. Nhng by gi trang web phi c banner bt
mt, ni dung hay v cn nhiu hiu ng l mt khc na th mi c th thu ht c ngi
c.
Chnh v th nhng web designer bt u ch n cc th vin JavaScript m nh jQuery
to ra cc hiu ng c th tng tc trc tip vi ngi c mt cch nhanh chng v d
dng hn rt nhiu l s dng thun JavaScript.
Nhng nu bn l ngi mi lm quen vi jQuery bn s thy khng bit phi bt u t u
v jQuery cng ging nh bt c th vin no khc cng c rt nhiu functions. Cho d bn
c c phn ti liu hng dn s dng ca jQuery th bn vn thy rt phc tp v kh hiu.
Nhng bn yn tm mt iu l jQuery c cu trc rt mch lc v theo h thng. Cch vit
code ca jQuery c vay mn t cc ngun m cc web designer a phn bit nh
HTML v CSS. Nu t trc n nay bn ch l Designer ch khng phi coder, bn cng c
th d dng hc jQuery v kin thc v CSS gip bn rt nhiu khi bt u vi jQuery.
Nhn thy jQuery cn kh mi m vi nhiu bn v n cng l th vin c ng o ngi
s dng. Izwebz gii thiu n cc bn lot bi v jQuery. Trong lot bi ny chng ta s tm
hiu v jQuery v cc tnh nng ca n. Trc ht bn nn bit jQuery c th lm c
nhng g.
Nhng g Jquery c th lm
Hng ti cc thnh phn trong ti liu HTML. Nu khng s dng th vin JavaScript
ny, bn phi vit rt nhiu dng code mi c th t c mc tiu l di chuyn trong cu
trc cy (hay cn gi l DOM = Document Object Model) ca mt ti liu HTML v chn ra
cc thnh phn lin quan. Jquery cho php bn chn bt c thnh phn no ca ti liu
vc mt cch d dng nh s dng CSS.
Thay i giao din ca mt trang web. CSS l cng c rt mnh nh dng mt trang
web nhng n c mt nhc im l khng phi tt c cc trnh duyt u hin th ging
nhau. Cho nn jQuery ra i lp ch trng ny, v vy cc bn c th s dng n gip
trang web c th hin th tt trn hu ht cc trnh duyt. Hn na jQuery cng c th thay
i class hoc nhng nh dng CSS c p dng ln bt c thnh phn no ca ti liu
HTML ngay c khi trang web c trnh duyt load thnh cng. Thay i ni dung ca
ti liu. Jquery khng phi ch c th thay i b ngoi ca trang web, n cng c th thay
i ni dung ca chnh ti liu ch vi vi dng code. N c th thm hoc bt ni dung
trn trang, hnh nh c th c thm vo hoc i sang hnh khc, danh sch c th c sp
xp li hoc thm ch c cu trc HTML ca mt trang web cng c th c vit li v m
rng. Tt c nhng iu ny bn hon ton c th lm c nh s gip ca API
(Application Programming Interface = Giao din lp trnh ng dng).
Tng tc vi ngi dng. Cho d cng c bn dng c mnh m n my, nhng nu bn
khng c quyn quyt nh khi no n c s dng th cng c cng coi nh b. Vi th
vin javaScript nh jQuery, n cho bn nhiu cch tng tc vi ngi dng v d nh khi
ngi dng nhp chut vo ng link th s c g xy ra. Nhng ci hay ca n l khng
lm cho code HTML ca bn ri tung ln chnh l nh cc Event Handlers. Hn na Event
Handler API s bo m rng trang web ca bn tng thch hu ht vi cc trnh duyt, iu
ny v ang lm au u rt nhiu cc web designer.
To hiu ng ng cho nhng thay i ca ti liu. tng tc tt vi ngi dng, cc
web designer phi cho ngi dng thy c hiu ng g s xy ra khi h lm mt tc v no
. Jquery cho php bn s dng rt nhiu hiu ng ng nh m dn, chy dc chy ngang
v.v.. v nu vn cha , n cn cho php bn t to ra cc hiu ng ca ring mnh.
Ly thng tin t server m khng cn ti li trang web. y chnh l cng ngh ngy
cng tr nn ph bin Asynchronous JavaScript And XML (AJAX), n gip ngi thit k
web to ra nhng trang web tng tc cc tt v nhiu tnh nng. Th vin jQuery loi b s
phc tp ca trnh duyt trong qu trnh ny v cho php ngi pht trin web c th tp
trung vo cc tnh nng u cui. n gin ho cc tc v javaScript. Ngoi nhng tnh nng
nh nu trn, jQuery cn cho php bn vit code javaScript n gin hn nhiu so vi
cch truyn thng nh l cc vng lp v iu khin mng.
Ti sao jQuery lm vic tt
Ngi dng ngy cng quan tm hn n Dynamic HTML, cng l nn mng cho s ra
i ca nhng javaScript Frameworks. C frameworks th ch tp trung vo mt vi tnh nng
va nu trn, c ci th rng bao gm tt c nhng hiu ng, tp tnh v nhi nht vo mt
package. m bo l mt th vin nhanh gn nh nhng vn ngon b r vi cc tnh
nng nu trn, jQuery s dng nhng chin lc sau:
Tn dng kin thc v CSS. Cc jQuery Selector hot ng y chang nh CSS Selector vi
cng cu trc v c php. Chnh v th th vin jQuery l ca ng cho cc web designer
mun thm nhiu tnh nng hn na cho trang web ca mnh. Bi v iu kin tin quyt
tr thnh mt web designer chuyn nghip l kh nng s dng CSS thun thc. Vi kin
thc c sn v CSS, bn s c s khi u thun li vi jQuery.
H tr Plugin. trnh b ri vo trng thi qu ti tnh nng, jQuery cho php ngi dng
to v s dng Plugin nu cn. Cch to mt plugin mi cng kh n gin v c hng
dn c th, chnh v th cng ng s dng jQuery to ra mt lot nhng plugin y tnh
sng to v hu dng.
Xo nho s khc bit gia trnh duyt. Mt thc t tn ti l mi mt h thng trnh duyt
li c mt kiu ring c trang web. Dn n mt iu lm au u cc web designer l
lm th no cho trang web c th hin th tt trn mi trnh duyt. Cho nn i khi ngi
ta phi lm hn mt phn code phc tp m bo rng trang web ca h c hin th gn
nh tng ng cc trnh duyt ph bin. Jquery gip bn thm mt lp bo v cho s khc
bit ca trnh duyt v gip qu trnh ny din ra d dng hn rt nhiu.
Lun lm vic vi Set. V d khi chng ta yu cu jQuery tm tt c cc thnh phn c class
l delete v n chng i. Chng ta khng cn phi loop qua tng thnh phn c tr v.
Thay vo , nhng phng php nh l hide() c thit k ra lm vic vi set thay v
tng thnh phn n l. K thut ny c gi l vng lp n, iu c ngha l chng ta
khng phi t vit code loop na m n vn c thc thi, chnh v th code ca chng ta
s ngn hn rt nhiu.
Cho php nhiu tc v din ra trn cng mt dng. trnh phi s dng nhng bin tm
hoc cc tc v lp tn thi gian, jQuery cho php bn s dng kiu lp trnh c gi l
Chaining cho hu ht cc method ca n. iu c ngha l kt qu ca cc tc v c
tin hnh trn mt thnh phn chnh l thnh phn , n sn sng cho tc v tip theo c
p dng ln n. Nhng chin lc c nu trn gip kch thc ca jQuery rt nh b ch
khong trn di 20Kb dng nn. Nhng vn m bo cung cp cho chng ta nhng k thut
gip code trn trang nh gn v mch lc.
Jquery s d tr nn ph bin l do cch s dng n gin v bn cnh cn c mt cng
ng s dng mnh m vn ngy ngy pht trin thm Plugin v hon thin nhng tnh nng
trng tm ca jQuery. Cho d thc t l vy, nhng jQuery li l th vin javaScript hon
ton min ph cho mi ngi s dng. Tt nhin n c bo v bi lut GNU Public
License v MIT License, nhng bn c yn tm l bn c th s dng n trong hu ht cc
trng hp k c thng mi ln c nhn.
To trang web u tin vi s h tr ca jQuery
Bi v jQuery l mt th vin JavaScript do vy s dng n bn phi chn n vo trang
web th mi c th s dng c. C hai cch chn jQuery vo mt trang web.
1. T host jQuery
Vo trang ch ca jQuery v download phin bn mi nht. Thng th c 2 phin bn ca
jQuery cho bn download. Phin bn cha nn dnh cho nhng ngi pht trin v ang hc
nh bn. Cn phin bn nn kia dnh cho phn s dng trc tip trn trang v n c dung
lng nh hn rt nhiu so vi phin bn cha nn. Bn khng cn phi ci t jQuery, bn
ch cn t ng link ti th vin l c. Bt c khi no bn cn s dng jQuery, bn
ch cn gi n trong ti liu HTML n ni lu tr n trn host ca bn.

2. Dng phin bn c sn trn server ca Google
Ngoi cch trn ra bn cng c th s dng phin bn nn ca jQuery c sn trn server ca
Google. S dng cch ny c 2 iu li l a) tit kim bng thng cho trang web ca bn v
b) jQuery s c load nhanh hn nu my ca ngi dng cache jQuery.
Tuy nhin trong phn sp ti chng ta s s dng phin bn c sn trn server ca Google m
khng cn phi download v my. C php chn jQuery s dng file c sn trn server
ca Google nh sau:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
Chun b ti liu HTML
Trong hu ht cc v d c s dng trong lot bi ny th c 3 thnh phn c s dng
nhiu nht chnh l ti liu HTML, Stylesheet CSS v mt ti liu JavaScript thc hin
lnh trn . Trong v d u tin chng ta s s dng mt ti liu HTML n gin vi mt
header, sidebar, content v footer. Trong phn content s c 3 on vn bn v mt s class
c sn. Tt nhin bn phi s dng CSS nh dng cho ti liu HTML ny. Bi v y l
tutorial v jQuery cho nn ti s khng gii thch v cc thuc tnh cng nh chc nng ca
CSS. Nu c im no khng r bn c th tham kho phn CSS ngay trn izwebz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Introduction</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen"
/>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script src=first-jquery.js type=text/javascript></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="logo">jQuery Introduction</h1>
</div>
<div id="mainContent">
<div id="sidebar">
<ul id="nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Forum</a></li>
<li><a href="ebook.pdf">Ebooks</a></li>
<li><a href="http://www.jquery.com">Tutorials</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="mailto:email@yahoo.com">Email</a></li>
</ul>
</div>
<div id="primary">
<h3>Lorem ipsum dolor sit amet</h3>
<p class="text">
some text here
</p>
<div>
<p>
some text here
</p>
</div>
<p class="text">
some text here
</p>
</div>
</div>
<div id="footer">
<p>©2010 Izwebz - Demon Warlock</p>
</div>
</div>
</body>
</html>
on code trn bn d dng nhn thy rng th vin jQuery c t di Stylesheet.
y l mt im rt quan trng m bn cn lu l th t ca cc file khi gi. Ban u phi
l CSS load trc, khi trang web load xong phn CSS th chng ta mi thm vo phn th
vin jQuery cui cng mi l code jQuery chng ta t vit ra. Nu khng khi code jQuery
ca bn s khng lm vic ng nh mong i nu th vin jQuery cha c load.
Bt u code jQuery
By gi bn m trnh son tho code ln v to mt file tn l first-jquery.js v file ny
c chng ta chn vo trong dng code:
<script src=first-jquery.js type=text/javascript></script>
G vo file va to 3 dng code nh sau:
$(document).ready(function() {
$('.text').addClass('important');
});
Thao tc c bn nht ca jQuery l chn mt phn no ca ti liu HTML. Bn tin hnh
n bng cch s dng hm $(). Thng th nm gia du ngoc () l mt chui di dng
tham s, n c th l nhng CSS Selectors. Trong v d ny chng ta mun tm tt c nhng
thnh phn no c class=text, c php ging nh khi bn vit code CSS vy. Tt nhin
nhng bi sau chng ta s tham kho thm nhiu nhng la chn khc hay hn na. Trong
chng 2 chng ta s nghin cu mt vi cch khc la chn cc thnh phn trong ti liu
HTML.
Hm $() chnh l mt jQuery Object, y l nn mng cho tt c nhng g chng ta s hc t
by gi. Jquery Object bao gm khng hoc nhiu thnh phn DOM v cho php chng ta
tng tc vi chng bng nhiu cch. Trong trng hp ny chng ta mun thay i cch
hin th ca nhng phn ny trong trang, chng ta thc hin n bng cch thay i class ca
n.
Thm vo mt class mi
Phng php .addClass(), cng ging nh hu ht cc phng php jQuery khc, c t
tn theo chc nng ca n. Khi c gi, n s thm mt class vo thnh phn chng ta
chn. Tham s duy nht ca n l tn class s c thm vo. Phng php ny v i ngc
vi n l .removeClass(), s cho php chng ta quan st jQuery hot ng nh th no khi
chng ta khm ph nhng phng php la chn c sn ca jQuery. Cn by gi, code
jQuery ca chng ta ch n gin thm mt class=important, v class ny c khai bo
trong stylesheet vi cc thuc tnh nh vin v nn hng nht.
border: 1px solid red; background: pink;

Bn cng nhn thy rng chng ta khng phi chy mt vng lp no thm class vo cc
on vn bn c cng chung class. y chnh l vng lp n ca cc phng php jQuery,
nh trong v d ny l .addClass(), cho nn bn ch phi gi ng mt ln v ch c vy
thay i nhng thnh phn bn mun trong ti liu. By gi nu bn chy th trang web va
to trn trnh duyt bn s thy 2 on vn c cng class l .text s b t hng v c vin mu
.
n y chng ta kt thc phn mt ca lot bi v jQuery. Trong bi ny bn bit
c jQuery c th lm nhng g? Bn cng hc c cch s dng jQuery trn mt ti
li HTML v cui cng l dng th mt phng php ca jQuery l .addClass().
Chng 2 jQuery Selectors
Th vin jQuery tn dng kin thc v th mnh ca CSS Selector cho php bn nhanh
chng v d dng truy cp nhiu phn t hoc nhm cc phn t trong DOM (Document
Object Model). Trong chng 2 ny chng ta s khm ph mt vi nhng Selector ny v c
nhng Selector ca jQuery. Chng ta cng s tm hiu thm v cch di chuyn trong cy th
mc v n cho chng ta thm linh ng t c nhng g mnh mun.

Document Object Model (M hnh i tng ti liu)
Mt trong nhng tnh nng mnh m nht ca jQuery l kh nng chn cc thnh phn trong
DOM mt cch d dng. Ni nm na th DOM l mt dng ph h ca cc thnh phn
HTML. Cc thnh phn ny c mi tng quan vi nhau nh mt gia nh HTML hnh
phc. Khi chng ta ni n cc mi quan h ny bn hy lin tng n mi quan h trong
gia nh nh ng b, b m, anh ch em v.v.. Bn c th xem bi Hng i tng da vo
cp bc XHTML bit r hn v mi quan h ca cc thnh phn HTML.
Hm $()
Cho d bn s dng Selector no i chng na trong jQuery, bn lun bt u bng mt du
dollar ($) v mt i ngoc n nh: $(). Tt c nhng g c th c s dng trong CSS
cng c th c lng vo du ngoc kp () v t vo trong hai du ngoc n, cho php
chng ta p dng cc phng php jQuery cho tp hp cc phn t ph hp.
Ba thnh phn quan trng nht ca jQuery Selector l tn th HTML, ID v Class. Bn c th
ch s dng n hoc kt hp vi nhng Selector khc chn. Di y l mt v d v mi
Selecter khi s dng mt mnh.

Nh ni chng 1, khi chng ta thm cc phng php vo hm $(), th cc phn t nm
trong i tng jQuery s c t ng loop v din ra hu trng. Cho nn chng ta
khng cn phi s dng bt c mt vng lp no c, nh vng lp for chng hn, iu ny
thng phi lm trong khi vit code v DOM. Sau khi bn nm bt c nhng khi nim
c bn, by gi chng ta s khm ph thm nhng tnh nng mnh m khc ca jQuery.
CSS Selector
Th vin jQuery h tr gn nh ton b cc CSS Selector chun t CSS1 cho n CSS3.
Chnh vic ny cho php nhng ngi lm web khng phi lo lng v liu trnh duyt
c h tr nhng Selector mi hay khng (c bit l trnh duyt IE) min l trnh duyt c
bt JavaScript.
Lu : nhng ngi lm web c kinh nghim v trch nhim lun nn p dng nguyn tc
nng cao lu tin v ging cp hi ho cho code ca h. H phi lun chc chn rng trang
web lun c hin th chnh xc, cho d khng c p nh khi JavaScript b tt hoc khi
n c bt. Chng ta s bn thm v nguyn tc ny trong sut chiu di ca lot bi ny.
tm hiu jQuery s dng CSS Selector nh th no th cch tt nht l lm bng v d.
Trong v d di y chng ta s s dng mt dng danh sch thng c dng lm
thanh di chuyn trn web. Code HTML s nh sau.
<ul id="nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Forum</a></li>
<li><a href="ebook.pdf">Ebooks</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
<li><a href="http://www.jquery.com">Tutorials</a></li>
<li><a href="#">Photoshop</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Effect</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</li>
<li><a href="mailto:email@yahoo.com">Email</a></li>
</ul>
Trong on code HTML trn chng ta n gin ch c mt unorder list vi id=nav ng
vai tr l menu chnh. Khi cha c style g p dng vo n th kt qu khi xem trnh duyt
s nh hnh di y. y chnh l nh dng mc nh ca trnh duyt cho cc Unorder List.

nh dng list-item
Tt nhin trong v d ny bn hon ton c th s dng CSS nh dng menu ny, nhng
v chng ta mun khm ph jQuery nn chng ta tm thi coi nh CSS khng tn ti. Gi s
trong v d ny bn mun nhng list-item chnh c gch chn m nhng ul ph ca n s
khng c gch chn.
.highlight {
border-bottom: 1px solid #e6db55;
padding: 5px;
}
Thay v chng ta s thm class trc tip vo ti liu HTML, chng ta s s dng jQuery
thm class vo nhng list-item tng 1 nh: Homepage, About Me, Forum, Ebooks, Tutorials,
Photoshop v Email.
$('#nav > li').addClass('highlight');
});
Nh bn chng 1, chng ta bt u on code jQuery vi $(document).ready(), n s
chy ngay khi DOM c load. Dng th 2 s dng CSS Child selector (>) thm
class=highlight ch cho list item tng 1. Ni theo ngn ng ca chng ta th on code trn
c ngha nh sau: jQuery hy tm mi mt list item (li) l con trc tip (>) ca thnh phn c
ID l nav (#nav). Vi class=highlight c thm vo, menu ca chng ta c nh sau.

nh dng cho nhng list item tng 2 c rt nhiu cch. Nhng mt trong nhng cch
chng ta s s dng trong phn ny l pseudo-class ph nh. Bng cch ny chng ta s i
xc nh tt c nhng item no m khng c class=highlight. Chng ta s vit code nh sau:
$('#nav > li').addClass('highlight');
$('#nav li:not(.highlight)').addClass('background');
});
on code trn c ngha nh sau:
1.Chn tt c nhng danh sch l con trc tip ca #nav
2.Nhng danh sch ny phi khng c class=highlight (:not(.highlight))
V chng ta s c hnh nh hnh di, tt nhin bn phi khai bo class=background
trong file CSS ca mnh.

Attribute Selectors
Attribute Selectors l b Selector ph ca CSS cng rt hu dng. N cho php chng ta
chn mt thnh phn no da vo c tnh HTML ca n nh: thuc tnh Title ca link
hoc thuc tnh Alt ca image. V d chn tt c cc tm hnh c thuc tnh Alt chng ta
lm nh sau:
$('img[alt]')
nh dng cho ng lin kt
Nu bn bit s qua v Regular Expressions trong ngn ng lp trnh nh PHP th Attribute
Selector trong jQuery chu nh hng bi phng php ny. V d du (^) dng xc nh
gi tr ti im bt u hoc ($) kt thc ca mt chui. N cng c th s dng du (*)
ch mt gi tr ti mt v tr bt k trong mt chui hoc s dng du chm than (!) biu th
mt gi tr ph nh. Trong phn CSS ny chng ta s nh dng cc ng lin kt nh sau:
a {
color: #00c;
}

.email {
padding-right: 20px;
background: url(images/mail.png) no-repeat right center;
}

.ebook {
background: url(images/pdf.png) no-repeat right center;
}

.hyperlink {
background: url(images/external.png) no-repeat right center;
}
Sau chng ta thm 3 class l email, ebook v hyperlink vo nhng ng lin kt thch
hp bng cch s dng jQuery. thm mt class vo tt c nhng ng lin kt email,
chng ta s to mt selector v n s tm tt c nhng thnh phn anchor (a) vi thuc tnh
href bt u bng chui mailto nh sau:
$('a[href^=mailto:]').addClass('email');
});
thm mt class vo tt c cc ng lin kt n nhng tp tin .pdf, chng ta s dng du
$ thay v du ^ nh trn. Bi v ln ny chng ta ch chn nhng ng lin kt no c
thuc tnh href kt thc bng cm .pdf.
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('ebook');
});
Attribute Selector cng c th c kt hp vi nhau. V d chng ta cng c th thm mt
class l hyperlink cho tt c cc ng lin kt vi gi tr href bt u bng http v cha cm
t hyper trong n.
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^=http][href*=jquery]').addClass('hyperlink');
});
Vi 3 class c p dng nh trn cho cc ng lin kt, chng ta s c kt qu nh hnh
di y. Bn s thy cnh mi ng link s c thm mt hnh icon ch cho ngi dng bit
mt cch rt trc quan l ng lin kt l v ci g.

Selector ring ca jQuery
Dng nh cn cha va vi nhng CSS Selector, jQuery c mt h thng nhng Selector
ca ring n. Hu ht nhng Selector ny u cho php chng ta chn bt c thnh phn no
trong ti liu HTML. C php cho nhng Selector ny tng ng vi c php ca CSS
pseudo-class, ni m cc selector bt u bng du hai chm (:). V d, chn th div th 2
ca tp hp nhng th div c class=horizontal, chng ta c cch vit code nh sau:
$('div.horizontal:eq(1)');
Bn nn lu phn ny l :eq(1) chn th div th hai t tp hp tr v bi v JavaScript
nh s array bt u t s 0. Ngc li, CSS li l bt u t s 1. Cho nn khi bn s dng
nth-child CSS Selector nh l $(div:nth-child(1)) s chn tt c cc th div l con u tin
ca thnh phn cha m. Tt nhin y l din gi l vy, nhng nu trong thc t th bn nn
dng $(div:first-child) th hp l hn.
nh dng bng kiu k sc
Hai trong s nhng jQuery selector rt hu dng l :0dd v :even. Trong v d di y
chng ta s s dng mt trong hai selector ny nh dng cho bng kiu k sc vi code
HTML nh sau:
<table>
<tr>
<td>Movies</td>
<td>Actors/ Actresses</td>
<td>Year Make</td>
</tr>
<tr>
<td>Terminator</td>
<td>arnold schwarzenegger</td>
<td>1991</td>
</tr>
<tr>
<td>Die Hard</td>
<td>Bruce Willis</td>
<td>2000</td>
</tr>
<tr>
<td>Speed</td>
<td>Sandra Bullock</td>
<td>1997</td>
</tr>
<tr>
<td>Independence Day</td>
<td>Will Smith</td>
<td>1999</td>
</tr>
<tr>
<td>Armageddon</td>
<td>Bruce Willis</td>
<td>1997</td>
</tr>
<tr>
<td>Under Siege</td>
<td>Steven Seagal</td>
<td>1996</td>
</tr>
<tr>
<td>Avatar</td>
<td>Unknown</td>
<td>2010</td>
</tr>
</table>
By gi bn c th thm style vo stylesheet cho tt c cc dng ca bng v s dng mt
class=alt cho nhng dng chn.
.alt {
background: #dda;
}

td {
padding: 10px;
}
Cui cng chng ta s vit code jQuery gn class vo cho nhng dng chn ca bng (
).
$('tr:0dd').addClass('alt');
});
Bn c thy code trn c iu g l khng? Odd ting Vit l l v Even l chn. Chng ta
ni s t mu cho dng chn nhng li s dng :0dd? Thc ra vn y cng tng t
nh :eq() trn, bi v :0dd v :even s dng dng nh s t s 0 nh trong JavaScript. Cho
nn dng th nht m l s 0 (s chn) v dng th hai m l 1 (s l). Do vi dng
code jQuery nh trn di y l kt qu chng ta c c.

Vn c v nh c gii quyt y, nhng nu bn c mt bng th hai trn cng
mt trang th kt qu li khng nh bn mun. V d, dng cui cng ca bng trn c mu
c a th dng u tin ca bng k tip s c mu trng. C cch trnh tnh trng ny l
s dng :nth-child() Selector. Selector ny c th ly tham s l odd, even hoc ch s.
Nhng cng lu bn l :nth-child() l selector duy nht ca jQuery nh s theo th t t 1.
Cho nn t c kt qu nh mong mun v nht qun vi nhiu bng trn trang, chng
ta c on code mi nh sau:
$('tr:nth-child(even)').addClass('alt');
});
By gi gi s chng ta mun t m cho ct no c cha tn ch Bruce Willis th
trc ht bn phi thm mt class=red vo phn stylesheet v sau th vit code jQuery
nh sau s dng :contains() Selector.
$('tr:nth-child(even)').addClass('alt');
$('td:contains(Bruce Willis)').addClass('red');
});
By gi th bng ca chng ta t m v in ch Bruce Willis.

Ti cng phi lu vi bn l :contains() Selector c phn bit gia IN HOA v in thng.
Cho nn nu bn ch g $(td:contains(bruce willis)) m khng vit hoa th s khng c ct
no c chn c.
Phi tha nhn rng vi v d n gin nh trn, bn khng cn phi s dng jQuery cng
t c kt qu nh mong mun. Tuy nhin, jQuery kt vi vi CSS, l mt la chn ph
hp cho kiu nh dng khi m ni dung c to ra t ng t CSDL v chng ta khng c
kh nng chi phi code HTML cng nh code c xut ra t PHP chng hn.
Form Selector
Khi lm vic vi form, nhng selector ca jQuery gip bn tit kim thi gian chn ch
nhng thnh phn no mnh mun. Bng biu sau l nhng selector ca jQuery lm vic
vi form.

Cng ging nh nhng Selector khc, form Selector cng c th c kt hp cho i
tng chn c c th hn. V d chng ta c th chn tt c cc nt radio c nh du
(ch khng phi hp kim) vi $(:radio:checked) hoc chn tt c cc trng nhp mt
khu v trng nhp d liu b tt vi $(:passowrd, :text:disabled). Cho d vi jQuery
Selector, nhng chng ta vn s dng nguyn tc ca CSS chn cc phn t cn chn.
Phng php di chuyn trong DOM
Nhng jQuery selector va c gii thiu trn cho php chng ta chn mt tp hp cc
phn t khi chng ta di chuyn ngang qua hoc dc xung cy DOM v chn lc kt qu.
Nu y l cch duy nht chn cc phn t th nhng la chn ca chng ta cng b hn
ch kh nhiu (mc d trong thc t nhng selector rt mnh m c bit l khi mang ra so
snh vi cch di chuyn trong DOM truyn thng). C nhiu trng hp khi bn cn phi
chn cha m hoc ng b ca cc phn t tr nn quan trng, chnh v vy phng php di
chuyn trong DOM c gii thiu. Vi nhng phng php ny chng ta c th i ln, i
xung, ngang dc hoc xung quanh cy DOM rt d dng.
Mt vi phng php c chc nng gn nh tng ng vi nhng ngi anh em Selector
trn. Nh trong v d v nh dng bng kiu k sc trn chng ta thm class=alt vi
$(tr:0dd).addClass(alt); cng c th c vit li vi phng php .filter() nh sau:
$('tr').filter(':0dd').addClass('alt');
Trong a s cc trng hp th hai cch trn b tr cho nhau. Hn na, c bit l phng
php .filter() cc k mnh m ch n c th ly mt hm lm tham s ca n. Hm cho
php chng ta to ra nhng php kim phc tp xc nh xem mt thnh phn no c
nn c gi li trong tp hp kt qu tr v. Ni v d chng ta mun thm mt class cho tt
c nhng ng lin kt ngoi. Jquery khng c selector no c th tin hnh tc v ny. Nu
khng c hm trong phng php .filter(), chng ta bt buc phi s dng vng lp nhy
qua tng thnh phn v kim tra n ring r. Tuy nhin vi nhng hm trong phng php
.filter() sau, chng ta vn c th da vo vng lp n ca jQuery v gi cho code ca chng
ta gn gng.
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
Dng code th 2 lc tp hp cc phn t <a> vi hai tiu ch sau:
1.N phi c thuc tnh href vi tn min (this.hostname). Chng ta s dng php kim ny
loi b nhng lin kt dng mailto v nhng th tng t.
2.Tn min m n lin kt ti (this.hostname) khng c ging (!=) vi tn min ca trang
hin ti (location.hostname).
Ni chnh xc hn th phng php .filter() lp qua tp hp nhng phn t ph hp, kim tra
tng gi tr tr v bng hm to. Nu hm tr v l false, th phn t s b loi khi tp
hp. Cn nu gi tr tr v l true, th phn t c gi li. By gi chng ta s xem li
bng kiu k sc v xem xem c th lm g vi phng php di chuyn ny.
nh dng tng c th
v d trn chng ta thm class=red cho nhng c cha ch Bruce Willis. Nu by
gi chng ta cng mun nh dng cho bn cnh cha Bruce Willis, chng ta c th bt
u vi Selector m chng ta to, v sau ch n gin ni n vi phng php .next().
$('td:contains(Bruce Wiliss)').next().addClass('red');
});
Bng ca bn s c nh sau

Phng php .next() ch la chn cc phn t ngay st cnh n. t m cho tt c cc
ng sau c cha Bruce Willis, chng ta c th s dng phng php .nextAll().
$('td:contains(Bruce Wiliss)').nextAll().addClass('red');
});
Bn cnh phng php .next() v .nextAll() chng ta cn c .prev() v prevAll(). Thm na,
.siblings() chn tt c cc phn t c cng chung mt cp bc trn DOM, m khng cn quan
tm n n xut hin trc hoc sau phn t c chn.
bao gm c ban u (l c cha Bruce Willis) v nhng theo sau n, chng ta c th
thm phng php .andSelf():
$('td:contains(Bruce Wiliss)').nextAll().andSelf().addClass('red');
});

Bn cng nn bit rng c v s nhng kt hp ca selector v phng php di chuyn m
da vo chng ta c th chn cng mt tp hp cc phn t. V d ny s cho bn thy
mt cch khc chn mi mt trong mt dng m c cha ch Bruce Willis:
$('td:contains(Bruce Willis)').parent().children().addClass('red');
});
y thay v chng ta di chuyn theo kiu ngang hng, chng ta di chuyn ln trn mt bc
ca cy DOM (
) vi phng php .parent() v sau chn tt c cc ca dng bng phng php
.children().

Kt hp (chaining)
Phng php di chuyn kt hp nh chng ta va khm ph trn th hin kh nng kt hp
ca jQuery. Vi jQuery bn c th chn tp hp cc phn t v thao tc nhiu tc v ln
chng, tt c trn cng mt dng code. Kiu kt hp ny khng nhng gi cho code jQuery
c sc tch m cn tng kh nng hot ng ca m. Nhng cho d c hn, bn cng
c th tch ra thnh nhiu hng. V d mt dy kt hp cc phng php c th c vit trn
mt dng nh sau:
$('td:contains(Bruce
Willis)').parent().find('td:eq(1)').addClass('red').end().find('td:eq(2)').
addClass('red');
hoc ct nh ra tng dng
$('td:contains(Bruce Willis)') // Tm tt c cc dng c cha Bruce Willis
.parent() // Di chuyn ln mt tng
.find('td:eq(1)') // Tm td vi th t l 1 (dng th 2)
.addClass('red') // Thm class='red'
.end() // quay v vi b m ca cha Henry
.find('td:eq(2)') // Tm tip td vi th t l 2 (dng 3)
.addClass('red') // thm class='red'
Tt nhin cch di chuyn kiu nh trn l lng vng n mc tha thi v khng c trong
thc t. Bi v c nhiu cch khc n gin hn, trc tip hn. Tuy nhin n cng cho bn
thy c s linh hot tuyt vi m kiu kt hp cho php chng ta.
Vit code kiu kt hp th ny nh l ni mt trng trong mt hi khng ngh. N gip bn
t mc tiu nhanh chng, nhng li kh cho ngi khc hiu c. Cho nn tch n ra v
thm comments c th gip bn tit kim thi gian v cng sc sau ny nu phi chnh sa
code.
Hng ti cc thnh phn DOM
Mi mt Selector v hu ht cc phng php ca jQuery u tr v mt i tng jQuery.
y chnh l iu chng ta lun mong i, bi v kh nng tin hnh vng lp n v kt hp
n c th lm. Nhng cng c lc chng ta mun hng ti mt phn t DOM mt cch trc
tip. V d, chng ta mun s dng mt tp hp cc phn t cho mt th vin JavaScript
khc. Hoc chng ta mun hng ti tn th ca mt phn t, m n li c sn nh l mt
thuc tnh ca phn t DOM. Tuy trng hp ny him khi xy ra, jQuery c phng php
.get(). hng ti thnh phn DOM u tin ch n bi mt i tng jQuery, chng ta s
s dng .get(0). Nu phn t DOM cn phi nm trong mt vng lp, chng ta s s dng
.get(index). Nh vy, nu chng ta mun bit tn th ca mt thnh phn vi id=my-
element, chng ta s vit code nh sau:
var myTag = $('#my-element').get(0).tagName;
tin dng hn na, jQuery cung cp cch vit tt cho phng php .get(). Thay v vit nh
dng code trn, chng ta c th s dng cp ngoc vung [] ngay ng sau selector:
var myTag = $('#my-element')[0].tagName;
Khng phi l ngu nhin m c php ny nhn ging nh l mt array ca cc phn t
DOM, s dng cp ngoc vung nh l x i lp v ti danh sch cc nt, c bao gm
lun c index (trong trng hp ny l 0) cng ging nh li tng thnh phn DOM ra vy.
Kt lun
Vi nhng k nng m chng ta hc trong chng ny, chng ta c th nh dng cho
tng mt v tng ph ca mt danh sch s dng nhng CSS Selector c bn, p dng nhng
style khc nhau cho cc loi ng lin kt khc nhau s dng Attribute Selector, t mu
khc nhau cho bng k sc bng cch s dng jQuery selector nh :0dd v :even hoc
Selector mi ca CSS l :nth-child(), v cui cng l t m cho tng trong bng bng
cch kt hp cc phng php jQuery. Cho n by gi chng ta s dng s kin
$(document).ready() thm class vo tp hp cc phn t. Trong chng ti, chng ta s
khm ph nhng cch thm class vo nhng s kin ngi dng t to.
Chng 3 - Attributes
A. Class
addClass( class ) Kiu tr v: jQuery
Thm cc class xc nh vo mi tp phn t ph hp. Nu c thm nhiu class th cc
class c
cc nhau bi khong trng.
V d: Thm class Maudo vo cc th p.
$("p").addClass("Maudo");
removeClass( class ) Kiu tr v: jQuery
Loi b tt c hoc cc class xc nh khi tp phn t ph hp.
V d: Loi b lass Maudo khi cc th p.
$("p").removeClass("Maudo");
toggleClass( class ) Kiu tr v: jQuery
Thm class nu class cha tn ti hoc loi b nu class tn ti.
V d: Thm class Maudo vo th p nu class Maudo cha tn ti trong th p hoc loi
b
class Maudo khi th p nu n tn ti.
$("p").toggleClass("Maudo");
V d: Vi_du_9_6.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_6.aspx.cs"
Inherits="Vi_du_9_6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Vi_du_9_6</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$("p").addClass("under");
$("p:last").removeClass("highlight");
$("p").click(function() {
$("p").removeClass("highlight");
$(this).toggleClass("highlight");
});
});
</script>
<style type ="text/css" >
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p class="blue">Visual Studio 2000</p>
<p class="blue">ASP.NET 3.5</p>
<p class="blue highlight">Cho mng bn n vi jQuery</p>
</body>
</html>

B.HTML, Text
html() Kiu tr v: String
Ly ni dung html (innerHTML) ca phn t.
V d: Mi khi click vo th p ly ni dung html ca th p v thng bo ni dung ly
c.
$("p").click(function() {alert($(this).html())});
html( val ) Kiu tr v: jQuery
Thit l ni dung html (innerHTML) cho phn t.
V d: Thit lp ni dung html cho th div.
$("div").html("<b>Cho cc bn!<i> Chc bui hc hm nay th v.</i></b>");
text() Kiu tr v: String
Ly ni dung text (innerText) ca phn t.
V d: Mi khi click vo th p ly ni dung text ca th p v thng bo ni dung ly
c.
$("p").click(function() {alert($(this).html())});
text( val ) Kiu tr v: jQuery
Thit lp ni dung text (innerText) cho phn t.
V d: Thit lp ni dung text cho th div.
$("div").text("Cho cc bn! Chc bui hc hm nay th v");
Chng 4 S kin (Events)
JavaScript c mt s cch c lp sn phn ng vi nhng tng tc ca ngi dng v
nhng s kin khc. lm cho trang web nng ng v tng tc tt, chng ta cn phi tn
dng chc nng ny, vo nhng thi im ph hp, chng ta c th s dng nhng k
thut jQuery hc v sp hc. Bn cng c th lm nhng vic sau vi anh bn thn
JavaScript, nhng jQuery nng cao v m rng nhng c ch qun l s kin c bn gip
n c c php p hn, tit kim thi gian hn v tt nhin cng mnh m hn.
Thc hin tc v khi trang c load
Chng ta bit cch lm cho jQuery phn ng nh th no khi trang web c load. B
qun l s kin $(document).ready() c th c dng kch hot mt hm no , nhng
chng ta c th bn thm mt cht v n.
nh thi gian thc thi code
Trong chng 1, chng ta bit rng $(document).ready() l cch ca jQuery thc hin cc
tc v tng ng vi cch m JavaScript thc hin tc v vi onload event c lp sn.
Thc t th hai cch ny u c tc dng ging nhau, nhng chng li kch hot tc v
nhng thi im hi khc nhau.
S kin window.onload c kch hot khi m trnh duyt hon ton load xong ti liu.
iu ny c ngha rng mi phn t trn trang sn sng c thao tc bi JavaScript.
y chnh l mt im thun li chng ta vit code m khng phi lo lng v trt t load.
Mt khc, b qun l ng k s dng $(document).ready() c kch hot khi DOM hon
ton sn sng s dng. iu ny cng c ngha rng mi thnh phn c th c truy cp
bi code ca chng ta, nhng khng nht thit l ti liu lin quan c download. Ngay
sau khi HTML c download v chuyn qua cy DOM, code c th c thc thi.
Lu : m bo rng trang web vn c nh dng trc khi code JavaScript c thc
hin, ngi ta thng t <link rel=stylesheet> ng trc th <script> trong phn <head>
ca ti liu.
V d chng ta c mt trang th vin hnh nh, trang bao gm nhiu hnh c dung lng
ln m chng ta c th n, hin, di chuyn hoc thao tc vi jQuery. Nu by gi chng ta
thit lp giao din s dng s kin onload, th ngi dng s phi i cho n khi mi tm
hnh c download trc khi h c th s dng trang web. Hoc t hn, nu nhng cch
x l cha c gn cho cc phn t c cch x l mc nh ring nh l cc ng lin kt,
th vic tng tc vi ngi dng s to ra nhng iu khng mong i. Tuy nhin khi chng
ta s dng $(document).ready(), th giao din s sn sng s dng sm hn rt nhiu vi
nhng cch x l mong mun.
Lu : Cch s dng $(document).ready() lun c a chung hn l s dng b qun l
onload, nhng chng ta cng nn nh rng bi v nhng tp tin h tr c th cha c load,
cho nn nhng thuc tnh nh cao v chiu rng ca tm hnh c th cha c sn trong lc
ny. Nu thc s cn thit, chng ta c th s dng b qun l onload (hoc hay hn c th
s dng jQuery thit lp b qun l cho load event). Hai cch ny hon ton tng thch
vi nhau.
Nhiu on m trn cng mt trang
Cch thng dng ng k b qun l s kin thng qua JavaScript l gn mt hm cho
thuc tnh tng ng ca phn t DOM. Gi s nh chng ta nh ngha mt hm:
function doStuff() {
//lm mt ci g
}
Sau chng ta c th gn n trong phn code HTML nh sau:
<body onload=doStuff();>
Hoc chng ta cng c th gn n trong code JavaScript:
window.onload = doStuff;
Hai cch ny u thc thi hm khi trang c load. Nhng im mnh ca cch th hai nm
ch nhng cch x l c tch ri khi m HTML.
Lu : Bn nn ch l khi chng ta gn mt hm lm b qun l, chng ta s dng tn hm
nhng b hai du ngoc n. Nu c hai du ngoc, hm s c gi ngay lp tc. Cn
nu khng c du ngoc, tn hm ch n gin c nh danh, v c th c dng gi
sau ny.
Nu ch vi mt hm th cch ny cng s dng c. Nhng nu chng ta c thm mt hm
na:
function doOtherStuff() {
//lm mt tc v khc
}
Sau chng ta cng th chy hm ny khi trang c load window.load = doOtherStuff;
Bn s thy hm th hai s thng hm u tin. Thuc tnh .onload ch c th mt lc cha
mt hm tham chiu, cho nn chng ta khng th thm vo cch x l hin ti. C ch
$(document).ready() gii quyt trng hp ny rt m xui. Mi mt ln phng thc c
gi, n s thm mt hm mi vo danh sch cch x l ni b, nn khi trang c load, tt c
cc hm s c thc hin. Cc hm s thc hin theo th t m chng c ng k.
Cch vit tt cho code ngn gn
Kt cu $(document).ready() thc cht l gi phng thc .ready() cho mt i tng jQuery
m chng ta to ra t phn t DOM. Hm $() cung cp cch vit tt cho chng ta bi v n
l mt tc v ph bin. Khi c gi m khng c tham s, th hm ny s hot ng nh l
khi ti liu c thng qua. Cho nn thay v chng ta vit:
//code y
});
Chng ta c th vit
$().ready(function() {
//code y
});
Hn na, hm $() c th ly mt hm khc lm tham s cho n. Cho nn khi chng ta lm
nh th, jQuery s tin hnh mt lnh gi n n .ready(), do vy cch vit nh sau cng cho
kt qu tng t
$(function()
//code y{
});
Tt nhin cch vit trn ngn gn hn, nhng ti khuyn bn nn s dng kiu vit y
cho r rng l on code ny c tc dng g.
Cng lm vic vi nhng th vin khc
Trong mt vi trng hp chng ta cn phi s dng nhiu hn mt th vin JavaScript trn
cng mt trang. Bi v nhiu th vin cng s dng k hiu nhn dng $ do n ngn v thun
tin, cho nn chng ta phi c cch no trnh xy ra xung t gia nhng tn ny.
Tht may mn khi m jQuery cung cp mt phng thc gi l .noConflict() tr k hiu
nhn dng $ v cho cc th vin khc. Cch s dng phng thc .noConflict() thng th
nh sau:
<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="myscript.js" type="text/javascript"></script>
u tin th vin Prototype c gi, y cng l mt th vin JavaScript . Sau l bn
thn jQuery c gi v n s s dng $ cho n. Tip theo phng php .noConflict() c
gi gii phng $, quyn iu khin by gi li quay tr v vi th vin c gi u tin,
y l Prototype. By gi code ca chng ta c th s dng c hai th vin, nhng bt c
khi no chng ta mun s dng mt phng thc jQuery, chng ta cn phi s dng jQuery
thay v du $ lm k hiu nhn dng.
Phng thc .ready() cn c mt im na c th gip chng ta trong trng hp ny. Hm
gi ngc m chng ta chuyn cho n c th nhn mt tham s n: chnh l bn thn i
tng jQuery. iu ny cho php chng ta t li tn cho n m khng s b xung t.
jQuery(document).ready(function($) {
//trong y, chng ta c th s dng $ bnh thng.
});
Hoc s dng kiu vit tt chng ta hc trn
jQuery(function($) {
//code s dng $
});
S kin c bn
C nhiu lc chng ta mun thc hin mt tc v no vo nhng thi im m khng ch
l lc trang c load. Cng nh vi JavaScript cho php chng ta n chn s kin load
trang vi <body onload=> hoc window.onload. N cung cp im neo cho nhng s kin
c ngi dng khi xng nh: nhp chut (onclick), trng nhp liu b thay i
(onchange) v ca s thay i kch thc (onresize). Khi c gn trc tip vo cc phn t
trong DOM, nhng cch ny cng c mt hn ch ging nh nhng iu chng ta ni v
onload. Cho nn, jQuery cho chng ta nhng cch ci tin hn x l nhng s kin ny.
B nt thay i mu ch
minh ho cho nhng cch qun l s kin, gi s chng ta mun c mt trang web c th
thay i mu sc cc on vn tu theo ca ngi dng. Chng ta s cho php ngi dng
nhp chut vo 3 nt thay i mu sc theo kiu Mc nh, Mu v Mu Xanh. Khi
nhn vo nt Mu , th ni dung s chuyn thnh mu , khi nhn vo nt Mu Xanh th
ni dung s thnh mu xanh v cui cng khi nhn vo nt Mc nh th ni dung quay v
trng thi ban u.
Trong thc t, ngi lm web c kinh nghim lun p dng nguyn tc nng cao lu tin.
Nu JavaScript khng c bt th nt thay i mu sc phi b n i, cn khng th vn phi
hot ng bng cc ng lin kt cho ra nhng phin bn khc nhau ca trang. Trong
tutorial ny, chng ta gi s ngi dng c bt JavaScript. Di y l code HTML ca nt
thay i mu sc ca chng ta:
<div id="switcher">
<h3>i nh dng</h3>
<div class="button selected" id="switcher-default">Mc
nh</div>
<div class="button" id="switcher-red">Mu </div>
<div class="button" id="switcher-green">Mu Xanh</div>
</div>
<div class="text">
<h1>This is the first para</h1>
<p class="chapter">Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor
sit amet, ante.
Donec eu libero sit amet quam egestas semper.
</p>
<h1>This is the second para</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor
sit amet, ante.
Donec eu libero sit amet quam egestas semper.
</p>
</div>
Vi mt cht CSS trang web mu ca chng ta s c dng nh hnh di y.

bt u, chng ta th vi nt Mu Xanh. Bn cn phi vit mt cht code CSS ch cho
n bit s thay i nh th no:
body.green .text{
color: green;
}
Mc ch ca chng ta s l thm mt class=green vo th <body>. iu ny cho php
stylesheet ti nh dng trang web sao cho ph hp. Vi kin thc bn hc c trong
chng 2, chng ta bit s phi vit code nh th no:
$('body').addClass('green');
Tuy nhin, ln ny chng ta mun khi ngi dng nhp chut vo nt th class=green mi
c thm vo ch khng phi nh trc l khi trang c load. lm c vic ny,
chng ta s cn n phng thc .bind(). Phng thc ny cho php chng ta c th ho bt
c mt s kin JavaScript no v gn mt cch x l cho n. Trong trng hp ny s kin
c gi l click v cch x l l mt hm bao gm mt dng code nh trn:
$('#switcher-green').bind('click', function() {
});
});
Nu bn lu li v xem th trn trnh duyt, khi bn nhp chut vo nt mu xanh, ni dung
ca n s bin thnh mu xanh l cy.

l tt c nhng g bn cn phi lm gn mt s kin. Th mnh ca phng thc
.ready() cng c s dng y. Phng thc .bind() c gi nhiu ln nhng vn hot
ng tt v nhiu cch x l c thm vo cng mt s kin khi cn thit. Tt nhin y
khng phi l cch hay nht hoc hiu qu nht hon hnh tc v ny. phn tip theo
ca tutorial, chng ta s m rng v ci tin m ca chng ta chng ta c th t ho v n.
Lm cc nt khc hot ng
By gi chng ta c nt mu xanh hot ng nh , vic tip theo chng ta phi lm l
cho hai nt cn li l Mc nh v Mu cng c th hot ng c. Vn kh l n
gin, chng ta s s dng phng thc .bind() thm vo mt b x l click cho mi mt
nt, thm hoc b class khi cn. Chng ta s vit m nh sau:
$('#switcher-default').bind('click', function() {
$('body').removeClass('red').removeClass('green');
});
$('#switcher-red').bind('click', function(){
$('body').addClass('red').removeClass('green');
});
$('body').addClass('green').removeClass('red');
});
});
Trong file stylesheet bn phi c lut sau
body.red .text {
color: red;
}
Vi on m trn chng ta tin hnh nhng vic nh sau:
1. 1.Nu ngi dng nhn vo th div vi ID #switcher-default th s b c hai class l
red v green i.
2. 2.Nu ngi dng nhn vo th div vi ID #switcher-red th chng ta s thm
class=red v b class=green i.
3. 3.Tng t nh bc 2 nhng b class=red v thm class=green.
V by gi khi nhn vo nt Mu th ch s c t thnh mu
B x l s kin ng cnh
Nt thay i mu sc ca chng ta lm vic nh mong mun, nhng ngi dng khng
bit c l nt no ang b bm. Cch chng ta s lm l thm class=selected cho nt no
ang c chn v b class i nhng nt khng c nhp. Chng ta ch n gin lm
cho nt ang c chn c t m hn mt cht.
.selected {
font-weight: bold;
}
Chng ta cng c th lm tng t nh cch lm trn bng cch gi mi nt bng ID
ring v thm v b class nu cn. Nhng thay vo , chng ta c th tm hiu thm mt gii
php khc hay hn v linh ng hn. N s s dng ng cnh m b x l s kin ang hot
ng.
Bt c khi no mt b x l s kin c kch hot, th t kho this i din cho phn t
DOM c gn mt kiu x l. nhng phn trc bn cng bit rng hm $() c th ly
mt phn t DOM lm tham s cho n. Bng cch vit $(this) trong b x l s kin, chng
ta to ra mt i tng jQuery tng ng vi phn t DOM, v chng ta c th thao tc vi
n nh l chng ta chn n bng b chn CSS. Do chng ta c th vit
$(this).addClass('selected');
Chn dng code ny vo c 3 b x l n s thm class=selected mi khi nt c nhn.
loi b class nhng nt khc, chng ta c th tn dng chc nng vng lp n ca jQuery
c:
$('#switcher .button').removeClass('selected');
Khi bn chn dng code trn vo code jQuery ca bn, n s loi b ht cc class tt c cc
th div c class=button.
$(this).addClass('selected')
});
});
$(this).addClass('selected')
});
});

Khi qut chung cc mnh bng cch s dng b x l ng cnh cho php chng ta lm
vic hiu qu hn. Chng ta c th tch phn highlight nt c chn vo mt b x l ring,
bi v n ging nhau c 3 nt. Cho nn chng ta c th lm nh sau:
});
});
});
$('#switcher .button').bind('click', function() {
});
});
on ti u ho m ny s dng 3 chc nng ca jQuery m chng ta hc. u tin l
vng lp n c s dng gn cng mt b x l click cho mi nt bm vi mt ln gi
.bind(). Th hai, th t cch x l cho php chng ta gn hai hm cho cng mt s kin click
m hm th 2 khng ln hm th nht. Cui cng, chng ta s dng kh nng kt hp ca
jQuery ghp hai on thm v b class trn cng mt dng.
Tip tc ti gin m
Cng on ti u ho m chng ta va lm trn l mt v d ca ti c cu. Ti c cu m
c ngha l chng ta phi chnh sa m ang c sao cho n c th hot ng hiu qu hn v
gn gng hn. tm ra thm nhng yu t khc c th ti c cu m, chng ta hy xem xt
nhng cch x l m chng ta va gn cho mi nt. Tham s ca phng thc
.removeClass() l khng bt buc, khi c b qua, n loi b tt c cc class ca phn t.
Da vo iu ny, chng ta c th rt ngn m xung cht xu na.
$('body').removeClass();
});
$('body').removeClass().addClass('red');
});
$('body').removeClass().addClass('green');
});
});
});
on m trn th t ca cc tc v b thay i mt cht ph hp vi vic loi b class
khng s dng tham s. Chng ta cn phi gi phng thc .removeClass() trc, nh th n
s khng loi b mt class khi chng ta gi .addClass() trn cng mt dng.
Lu : Trong v d ny chng ta c ton quyn quyt nh vi m HTML, cho nn chng ta
c th loi b ton b class. Tuy nhin khi chng ta vit m s dng li (nh l vit mt
Plugin), th chng ta nn tn trng nhng class khc v gi nguyn chng.
Hin ti chng ta vn chy cng mt on m cho mi b x l nt bm. Phn ny c th ti
c cu rt d dng bi mt b x l nt chung:
});
$('body').removeClass().addClass('red');
});
$('body').removeClass().addClass('green');
});
});
Chng ta di chuyn b x l nt chung ln trn nhng nt khc. Vy nn phng thc
.removeClass() cn phi xy ra trc khi phng thc .addClass() c gi. Vic ny c th
lm c bi v jQuery lun kch hot b x l s kin theo th t m chng c ng k.
Cui cng chng ta cng c th loi b lun c cc b x l cho tng nt bng cch s dng
s kin ng cnh. Bi v t kho this cho chng ta mt phn t DOM ch khng phi l mt
mt i tng jQuery, chng ta c th s dng nhng tnh nng ca DOM xc nh ID ca
mi phn t khi n c click. Do chng ta c th gn cng mt b x l cho tt c cc
nt, v nhng b x l ny tin hnh nhng tc v khc nhau cho mi nt bm.
if (this.id == 'switcher-red') {
$('body').addClass('red');
} else if (this.id == 'switcher-green') {
}
});
});
Trn y chng ta ch s dng mt mnh if else bnh thng kim tra xem nt ang
c click c ID l g ri a ra cch x l tng ng cho tng trng hp.
Nhng s kin vit tt
Gn mt b x l cho mt s kin (v d nh l mt s kin click) rt thng xy ra, cho nn
jQuery cung cp mt cch ngn gn hn. chnh l nhng phng php vit tt s kin, n
hot ng ging nh khi chng ta s dng .bind() nhng tit kim c vi ch.
V d, on m ca chng ta c th s dng .click() thay v .bind() nh sau:
$('#switcher .button').click(function() {
}
});
});
Nhng phng php vit tt s kin nh th ny tn ti vi tt c nhng s kin DOM tiu
chun:
blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup resize
scroll
select
submit
unload
Mi phng php vit tt s gn mt b x l vo mt s kin vi tn tng ng
S kin phc hp
Mi mt phng thc x l s kin ca jQuery u tng ng trc tip vi mt s kin
thun JavaScript. Tuy nhin, jQuery c mt vi b x l ring c thm vo cho d s dng
v ti u ho vic tng thch cc trnh duyt. Mt trong nhng phng thc ny chnh l
.ready(), m chng ta bn trn. Hai phng thc .toggle() v .hover() l hai b x l s
kin tu chnh na ca jQuery. Chng u c gi l b x l s kin phc hp bi v
chng tng tc vi ngi dng v phn ng li vi h s dng nhiu hn mt hm.
n v hin nhng tnh nng tin tin
Gi s chng ta mun n b thay i mu sc khi khng cn thit bng cch lm cho ba nt
bin mt. Chng ta s cho php ngi dng nhp chut vo phn tiu i kiu dng
n nt n i nhng vn gi nguyn tiu . Nu ngi dng nhp chut thm ln na s hin
li cc nt bm. Chng ta cn thm mt class na x l nhng nt c n.
.hidden {
display: none;
}
Chng ta c th thm chc nng va ni trn vo bng cch lu trng thi hin ti ca nt
vo mt bin, sau kim tra gi tr ca n mi khi tiu c nhp xc nh nn hay
khng nn loi b class=hidden trn cc nt bm. Chng ta cng c th kim tra trc tip s
hin din ca class trn mt nt, v s dng thng tin ny quyt nh s phi lm g.
Nhng thay vo , jQuery cho chng ta mt phng thc gi l .toggle(), s lm tt c
nhng vic phc tp trn cho mnh.
Phng thc .toggle() c th ly hai hoc nhiu tham s, mi mt tham s l mt hm. Khi
nhp chut ln u s chy hm th nht, nhp chut ln th hai s kch hot hm th hai
v.v.. Khi mi hm c kch hot, vng lp li bt u t hm nh nht. Vi .toggle(),
chng ta c th tin hnh n hin nt thay i kiu dng kh n gin:
$('#switcher h3').toggle(function() {
$('#switcher .button').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');
});

$('#switcher .button').click(function() {
}
});
});
Sau khi nhp chut mt ln nt s b n i

Nhp chut thm ln na s hin li

Mt ln na chng ta li s dng vng lp n n cc nt i m khng cn phi s dng
n mt phn t bao quanh. Vi trng hp c th ny, jQuery cung cp mt cch na dng
n hin b nt ca chng ta. Chng ta c th s dng phng thc .toggleClass() t
ng kim tra s hin din ca class trc khi thm hoc loi b n
$('#switcher h3').click(function() {
$('#switcher .button').toggleClass('hidden')
});
Trong trng hp ny, .toggleClass() l gii php hay hn, nhng .toggle() l cch linh hot
hn khi tin hnh hai hoc nhiu tc v khc nhau.
Highlight nt bm
chng minh cho kh nng ca s kin click c th lm vic vi nhng thnh phn khng
nhp chut c, chng ta to ra mt giao din vi nhng nt m thc cht ch l nhng
th div tr thnh mt phn sng ng ca trang, trc ch ngi dng s dng n. By gi
chng ta c th lm cho nt bm c th thay i trng thi khi di chut qua, cho ngi dng
bit rng nhng nt ny s lm mt vic g nu c bm.
#switcher .hover {
cursor: pointer
background-color: #afa;
}
CSS cung cp mt pseudo-class gi l :hover, cho php styesheet chi phi mt thnh phn
khi ngi dng di chut qua n. Nhng trong IE6, chc nng ny b gii hn ch vi nhng
ng lin kt, cho nn chng ta khng s dng n cho tt c cc trnh duyt c. Thay vo
, jQuery cho php chng ta s dng JavaScript thay i kiu dng ca mt phn t v
c th tin hnh bt c tc v no ln n. K c khi di chut ln phn t v di chut ra khi
phn t .
Phng thc .hover() ly hai tham s, ging nh v d v .toggle() trn. Trong trng hp
ny, hm u tin s c thc hin khi chut di qua n v hm th hai s c kch hot khi
chut ra khi n. Chng ta c th thay i class cho cc nt ti thi im ny to ra hiu
ng rollover:
$('#switcher h3').click(function() {
});
$('#switcher .button').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Chng ta li mt ln na s dng vng lp n v ng cnh s kin c on m ngn hn
v n gin hn. Nu by gi khi bn di chut qua cc nt bm, bn s thy c hiu ng
Rollover nh hnh

S dng .hover() cng gip chng ta trnh c nhng rc ri to ra bi lan truyn s kin
(event propagation) trong JavaScript. hiu c lan truyn s kin l g, chng ta hy
xem xt JavaScript quyt nh phn t no s c x l kin.
ng i ca mt s kin
Khi mt s kin xy ra trn mt trang, ton b cu trc bc thang ca cc phn t DOM u
c c hi x l s kin. Th tng tng mt m hnh nh sau:
<div class='mainContent'>
<span class='date'><a href='httt://www.izwebz.com'>jQuery tutorial from
izwebz</a></span>
<p> Khi mt s kin xy ra trn mt trang, ton b cu trc bc thang ca
cc phn t DOM u c c hi x l s kin.
</p>
Chng ta c th hnh tng ho on code trn vi hnh minh ha sau

Vi mi mt s kin, s c nhiu phn t c th chu trch nhim x l. V d khi ng link
v d trn c bm th ba thnh phn nh <div>, <span> v <a> u c c hi phn
ng li click . Bi v bn thy c 3 thnh phn trn u nm di con tr chut ca ngi
dng. Nhng phn t <p> li khng nm trong mi tng tc ny.
C mt cch cho php nhiu phn t phn ng li vi mt click c gi l Event
Capturing. Vi Event Capturing, th s kin c gi ti phn t chung nht sau n i
dn vo nhng phn t c th hn. v d ca chng ta, th s kin s chy qua th div, sau
n span v cui cng l th a.

Cch i lp vi cch trn c gi l Even Bubbling (s kin bong bng :-s). Ci ny bn
tng tng nh trong b c trong nh khi si nc vy. Nc si di, n bong bng t
di y h ln trn mt nc. S kin c gi ti thnh phn c th nht, v sau khi phn
t ny c c hi phn ng, s kin s thi bong bng ln nhng thnh phn chung
hn. Trong v d ca chng ta th th a s x l s kin trc, sau l th span v div l
cui cng.
Chng c g l ngc nhin khi nhng ngi pht trin trnh duyt quyt nh nhng m hnh
khc nhau cho s lan truyn s kin. H thng DOM tiu chun sau ny mi dn c pht
trin th nh ngha rng c hai cch trn nn l nh sau: u tin s kin b bt bi nhng
thnh phn chung nht ri mi n nhng phn t c th hn, sau s kin s c ni
bong bng ln trn nh ca cy DOM. B x l s kin c th c ng k mt trong
hai qu trnh trn.
Tic l khng phi ton b cc trnh duyt u p dng tiu chun mi ny, v nhng trnh
duyt c h tr Capture th ngi ta phi t tay bt tnh nng . tng thch vi mi trnh
duyt, jQuery lun ng k b x l s kin trong qu trnh bong bng ca m hnh.
Chng ta c th hiu rng, phn t c th nht s c c hi u tin phn ng li vi mt
s kin.
Phn ng ph ca s kin bong bng
Event Bubbling c th to ra nhng biu hin khng mong i, c bit l mt thnh phn
khng ch no phn ng li vi chut ca ngi dng. V d b x l s kin MouseOut
c gn vo th div trong v d ca chng ta. Khi chut ca ngi dng di chuyn ra ngoi
vng div, th b x l MouseOut s c chy nh mong i. Bi v y l tng cao nht ca
nc thang cho nn khng thnh phn no khc c nhn thy s kin. Mt khc, khi tr
chut di chuyn ra ngoi phn t a, mt s kin mouseout s c gi n n. S kin ny s
ni bong bng ln n th span v sau l th div, v kch hot cng mt b x l s
kin. Dy s kin bong bng ny c th khng c mong i trong v d v nt thay i
kiu dng ca chng ta v hiu ng t mu cho ng link c th b tt qu sm.
Phng thc .hover() hiu r nhng vn lin quan n s kin bong bng, v khi chng ta
s dng phng thc ny gn s kin. Chng ta c th b qua nhng vn to ra bi
nhng thnh phn khng mong c s phn ng vi s kin Mouse over v Mouse Out.
Cho nn iu ny lm cho phng php .hover() l mt la chn thch hp gn cho mi s
kin lin quan n chut.
Lu : Nu bn ch quan tm n khi ngi dng di chut qua hoc thot ra khi phn t,
m khng phi c hai, bn c th gn s kin mouseenter v mouseleave ca jQuery. Cch
ny cng trnh c s kin bong bng. Nhng bi v s kin lin quan n chut thng i
vi nhau, cho nn phng php .hover() thng l la chn ng dn.
Kch bn Mouse out va c nu ra trn cho thy chng ta cn phi gii hn phm vi ca
mt s kin. Trong khi .hover() x l tt trng hp ny, nhng cng c trng hp chng ta
cn phi gii hn mt s kin khng n c gi ti mt thnh phn c th khc hoc tm
thi gii hn mt s kin khng b gi trong bao nhiu ln.
Thay i ng i: i tng s kin
Chng ta thy mt trng hp m Event Bubbling c th to ra rc ri. Chng ta hy cng
khm ph mt trng hp m .hover() khng gip ch c g. Chng ta s sa li on
code lm sp nt thay i trng thi trn. Gi s chng ta mun m rng phm vi vng c
th nhp chut kch hot hiu ng thu nh hoc m rng b nt thay i nh dng. Cch
thc hin l di chuyn b x l s kin t phn label h3 sang phn t cha n l div
$('#switcher').click(function() {
});
Sau khi bn b th h3 phn Selector i th by gi nu bn click vo bt c ch no trong
phm vi ca b nt cng s lm n hin n. Nhng vn y l k c khi bn nhp chut
vo bt c nt no, tuy n vn thay i mu sc nh mong mun, nhng n li ng li. y
chnh l hiu ng bong bng, s kin ban u c x l bi cc nt. Sau n c truyn
ln cy DOM cho n khi n chm ti <div id=switcher>, b x l mi c kch hot
v n ht cc nt i.
gii quyt vn ny chng ta phi truy cp n i tng s kin. y l cu trc ca
JavaScript c truyn qua mi b x l s kin ca tng phn t mi khi n c kch hot.
N cung cp thng tin v s kin nh l v tr ca con tr chut ti thi im ca s kin.
N cng cung cp mt s phng php c th c s dng to nh hng n qu trnh
ca mt s kin thng qua DOM.
s dng i tng s kin trong b x l, chng ta ch cn thm mt tham s vo hm:
$('#switcher').click(function(event) {
});
ch s kin (Event Target)
By gi chng ta c i tng s kin nh l mt bin s kin trong b x l ca chng
ta. Tnh nng ca ch s kin rt hu dng trong vic qun l mt s kin s c xy ra
u. Tnh nng ny l mt phn ca DOM API (giao din lp trnh ng dng), nhng khng
c ci t mi trnh duyt. Vi .target, chng ta c th xc lp phn t no s nhn s
kin u tin nht. Trong trng hp ny l mt Click Event, i tng chnh c nhp
chut. Hy nh rng n cho chng ta mt phn t DOM x l s kin, cho nn chng ta
c th vit nh sau:
if(event.target == this) {
}
on code ny m bo rng i tng c click vo ch l <div id=switcher>, ch khng
phi l cc phn t ph ca n. By gi khi bn nhp chut vo cc nt s khng lm n b
chuyn i m nhn vo vng nn xung quanh s lm n n i. Nhng nu bn nhn vo nhn
ca b chuyn l th h3 th li khng c g xy ra bi v n cng l phn t con. Chng ta c
th thay i cch x l ca cc nt t c mc tiu.
Ngn chn s lan truyn s kin
i tng s kin cung cp phng php .stopPropagation(), c th c s dng ngn
chn hon ton qu trnh bong bng cho s kin. Ging nh .target, phng php ny l mt
tnh nng thun JavaScript, nhng khng tng thch vi mi trnh duyt. Min l khi chng
ta ng k tt c nhng b x l s kin s dng jQuery, chng ta c th s dng n m
khng s b li.
Chng ta s loi b event.target == this trn i v thay vo l mt t m cho cc nt:
$('#switcher .button').click(function(event) {
}
event.stopPropagation();
Nh trn chng ta cng cn phi thm mt tham s vo hm m chng ta ang s dng
x l click, chng ta c c quyn vo i tng s kin. Sau chng ta ch vic gi
event.stopPropagation() ngn chn cc phn t DOM khc khng phn ng li s kin.
By gi khi bn nhp chut, th ch c cc nt l x l s kin , v ch c cc nt thi, nu
nhp chut ra cc vng xunh quanh n s n hoc hin b nt.
Tc dng mc nh
Nu b x l s kin click ca chng ta c ng k cho mt phn t <a> thay v mt th
<div>, chng ta c th gp rc ri. Khi ngi dng nhp chut vo ng link, trnh duyt s
load mt trang web mi. y khng phi l hiu ng bong bng m chng ta tho lun
trn, m y chnh l tc dng mc nh cho ln nhp chut vo ng lin kt. Cng ging
nh khi phm Enter c nhn khi ngi dng agn in form, s kin submit s c kch
hot v form s c submit.
Nu nhng tc dng mc nh ny khng phi iu bn mun v bn gi .stopPrpagation() n
cng khng c tc dng g. Nhng tc dng ny chng xy ra ch no ca s lan truyn s
kin. Thay vo , phng php .preventDefault() s ngn chn s kin ngay ti thi im
trc khi tc dng mc nh c kch hot.
Lu : Gi .preventDefault() thng ch hu dng khi chng ta kim tra mi trng ca
s kin. V d trong khi in form, chng ta mun kim tra tt c cc trng bt buc phi
c in y , v ch ngn chn tc dng mc nh nu n cha c in. Chng ta s
hc thm v phn ny cc bi sau
S lan truyn s kin v tc dng mc nh l hai ch ti c lp, mt trong hai c th c
ngn chn trong khi ci khc vn xy ra. Nu chng ta mun ngn chn c hai, chng ta c
th return false ngay trong b x l s kin ca chng ta, cng chnh l ng tt gi
c hai .stopPropagation() v .preventDefault cho s kin.
U thc s kin (Event Delegation)
Event Bubbling khng phi lc no cng gy ra tr ngi, chng ta cng c th s dng n
lm nhng vic c ch. Mt k thut rt hay tn dng bong bng s kin c gi l u thc
s kin. Khi dng chng ta c th s dng mt b x l s kin trn mt phn t n v p
dng ln nhiu phn t khc.
Lu : trong jQuery 1.3 mt cp phng php c gii thiu l .live() v .die(). Hai
phng php ny lm vic ging nh .bind() v .unbind(). Nhng ng sau n, ngi ta s
dng u thc s kin lm nhng vic c ch m chng ta s bn thm phn ny.
Trong v d ca chng ta, chng ta ch c ba th <div class=button> c gn b x l
nhp chut. Nhng gi s chng ta c rt nhiu th div th sao? Vic ny xy ra nhiu hn
bn tng. Hy tng tng nu chng ta c mt bng v rt nhiu dng, mi dng c mt
phn cn c b x l nhp chut. Vng lp n c th th gn b x l s kin nhp chut d
dng, nhng n c th lm m ca bn hot ng km hiu qu bi v vng lp c to ra
bn trong jQuery thao tc vi cc b x l kia.
Thay vo , chng ta c th gn mt b x l nhp chut cho mt phn t gc trong DOM.
Mt s kin nhp chut khng gin on s dn dn c gi ti cc thnh phn con do hiu
ng bong bng s kin v chng ta c th lm vic .
minh ho, chng ta hy p dng k thut ny vo b thay i nh dng trn, cho d s
lng cc phn t khng nhiu m lm cch ny, nhng cng chng minh c cho
bn. Nh thy trn, chng ta c th s dng tnh nng event.target xc nh thnh
phn no ang nm di con tr chut khi ngi dng nhp chut.
if($(event.target).is('.button')) {
}
event.stopPropagation();
}
Chng ta va s dng mt phng php mi c gi l .is(). Phng php ny chp nhn
nhng Selector chng ta va hc phn trc v kim tra i tng jQuery hin ti vi
Selector. Nu c t nht mt phn t ph hp vi Selector th .is() s tr v gi tr True. Trong
v d ny, $(event.target).is(.button) hi xem thnh phn c nhp chut c class no gn
cho n khng. Nu c, th hy tip tc m t , vi mt thay i rt ln: t kho this by gi
ni n <div id=switcher>, cho nn mi khi chng ta quan tm n nt c nhp chut,
chng ta phi gi n vi event.target.
Lu : Chng ta cng c th kim tra s tn ti ca mt class trn mt phn t vi phng
php ngn hn l .hasClass(). Nhng phng php .is() th linh ng hn v c th kim tra
bt c Selector no.
Tuy nhin chng ta vn c mt hiu ng ph khng mong i trong on m trn. Khi chng
ta nhp chut vo mt nt, c nhm s b ng li nh trc khi chng ta gi
.stopPropagation(). B x l cho vic n hin b nt by gi c gn cho thnh phn ging
nh cc nt, cho nn nu bn ch ngn chn bong bng s kin s khng chn c vic thay
i class b kch hot. khc phc vn ny, chng ta s loi b .stopPropagation() v
thay vo l mt phng php .is() na.
if (!$(event.target).is('.button')) {
$('#switcher .button').toggleClass('hidden');
}
});
if($(event.target).is('.button')) {
}
}
});
});
Thc t th v d ny hi b phc tp ho, nhng khi s thnh phn v b x l s kin tng
ln, th u thc s kin l cch m bn nn dng.
Lu : U thc s kin cng hu dng trong cc trng hp khc m chng ta s hc sau
ny nh l khi thm vo cc phn t bi phng php DOM Manipulation hoc s dng
AJAX.
Loi b mt b x l s kin
C nhng lc chng ta s dng xong mt b x l s kin m c ng k t trc.
V d nh trng thi ca trang thay i m s kin khng cn ph hp na. Bn cng
c th s dng nhng mnh c iu kin x l tnh hung ny, nhng cch hay hn c
th l hon ton g b (unbind) b x l .
Gi s chng ta mun b nt thay i kiu dng vn c m rng bt c khi no trang web
khng s dng trng thi mc nh. Khi m nt Mu Xanh v Mu c nhn, th b nt
s khng b thay i g khi ngi dng nhp chut xung quanh n. Chng ta c th lm c
vic ny bng cch s dng phng php .unbind() loi b b x l ng li b nt khi m
mt trong nhng nt bm khng phi l nt mc nh c nhp chut.
if (!$(event.target).is('.button')) {
$('#switcher .button').toggleClass('hidden');
}
});
$('#switcher-red, #switcher-green').click(function() {
$('#switcher').unbind('click');
});
});
By gi khi bn nhp chut vo nt Mu Xanh hoc Mu , th b x l nhp chut th
div m s b loi b, cho nn khi nhp chut vo vng xunh quanh ca hp s khng lm n
b nt i. Nhng h thng nt ca chng ta cng khng lm vic na. Bi v n cng c
gn vi b x l nhp chut ca th <div> m do chng ta vit li s dng u thc s kin.
Cho nn khi chng ta gi $(#switcher).unbind(click), c hai cch x l u b loi b.
Chng 5 Hiu ng (Effects)
Cc hiu ng ng ca jQuery s lm cho trang web ca bn thm phn sinh ng. Jquery
cho php bn n hin, trt ln trt xung cc thnh phn ca trang web. Bn cng c th
cho n xy ra cng mt lc hoc theo th t nh trc. Trong phn ny chng ta s tm hiu
cc hiu ng jQuery v kt hp chng to ra nhng hiu ng hay.
Thay i Inline CSS
Trc khi chng ta hc nhng hiu ng jQuery, chng ta cn xem li mt cht v CSS.
Trong nhng chng trc y chng ta thay i giao din ca cc thnh phn trn trang
bng cch khai bo thuc tnh ca class trong mt stylesheet ring bit. Sau chng ta thm
hoc loi b nhng class bng jQuery. V c bn th cch ny nn c s dng thm
CSS vo HTML bi v n tn trng quy lut tch ring phn trnh by v cu trc. Tuy nhin,
i khi chng ta mun p dng style cho nhng thnh phn cha c, hoc kh m c,
nh dng bng stylesheet. Nhng rt may mn l jQuery c phng thc .css() s dng
cho nhng trng hp ny.
Phng thc ny hot ng bng c hai cch ly v t. ly gi tr ca mt thuc tnh,
chng ta ch cn chuyn tn ca thuc tnh thnh mt mt chui, dng nh
.css(backgroundColor). Jquery c th hiu c nhng thuc tnh kt hp bi nhiu t v
ni vi nhau bng du nh l trong CSS (background-color), hoc dng vit hoa ch ci
u nh l (backgroundColor). nh dng thuc tnh style, phng thc .css() c hai
cch s dng. Cch th nht ch nhn mt cp thuc tnh gi tr. Cch th hai l nhn mt
tp hp cc cp thuc tnh gi tr.
.css('property','value')
.css({property1: 'value1', 'property-2': 'value2'})
Nhng ngi quen vi JavaScript s nhn ra y l dng i tng trc kin JavaScript.
Ch : Cc gi tr s khng dng du ngoc kp trong khi gi tr chui phi c du ngoc
kp. Tuy nhin, khi s dng bn k hiu, du ngoc kp khng bt buc cho nhng tn
thuc tnh c vit di dng in hoa ch ci u.
Chng ta s dng phng thc .css() cng ging nh cch chng ta s dng .addClass().
Bng cch gn n cho mt Selector sau th Bind n vo mt s kin. minh ho, chng
ta s s dng b nt thay i nh dng trong chng 3, nhng vi m HTML khc.
<div id="switcher">
<div class="label">C ch</div>
<button id="switcher-default">Mc nh</button>
<button id="switcher-large">Ln</button>
<button id="switcher-small">Nh</button>
</div>

<div class="speech">
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper.
Aenean ultricies mi vitae est.
</p>
</div>
Vi mt cht nh dng CSS c bn chng ta c c hnh di y.

Xem Demo online Example 1
Khc vi b nt chng trc, trong chng ny chng ta s s dng phn t <button>.
Khi ngi dng nhp chut vo nt Ln hoc Nh s tng hoc gim c ch trong th <div
class=speech>. Cui cng h cng c th nhn vo nt Mc nh tr c ch v gi tr
ban u.
Nu chng ta ch mun tng c ch mt ln vi mt gi tr t trc th chng ta vn c th
s dng phng thc .addClass(). Nhng ln ny chng ta s cho php ngi dng nhp
chut nhiu ln vo nt, v mi ln nhp c ch s tng hoc gim dn ln. Tt nhin bn
cng c th to ra nhiu class v gn chng cho mi ln nhp chut v sau chng ta cho
chy vng lp qua tng class. Nhng lm nh th n th cng qu v rt mt thi gian, cho
nn cch l hn s l ly c ch ca on vn trc, sau th tng n ln vi gi tr mnh
mun. Trong v d ny chng ta s cho tng c ch ln 40% mi khi ngi dng nhp chut.
on m ca chng ta s bt u bng $(document).ready() v b x l s kin $(#switcher-
large).click()
$('#switcher-large').click(function() {
});
});
bit c c ch ca on vn l bao nhiu rt n gin, jQuery c phng thc .css()
cho php bn lm vic ny. Tuy nhin phng thc ny li tr v gi tr c thm ci ui
px, v d l on vn c kch thc ch l 16px th gi tr tr v s l 16px. Cho nn chng
ta phi tm cch ct ci ui px i v ch gi li phn gi tr s l 16. Mt im na l
khi chng ta nh s dng mt i tng jQuery nhiu ln, bn nn nh li selector bng cch
lu i tng vo mt bin.
var $speech = $('div.speech'); //lu i tng jQuery vo bin $speech
var num = parseFloat($speech.css('fontSize'), 10);
});
});
dng code th 2 chng ta to ra mt bin l $speech v lu i tng jQuery vo .
Bn cng nn lu cch ti t tn bin bt u bng du $, bi v trong javaScript bn hon
ton c th s dng du $ t tn cho bin. Cho nn y l cch nhc nh chng ta v
sau l bin ny ang cha mt i tng jQuery.
Trng b x l .click(), chng ta s dng hm parseFloat() ct i phn ui px v ch gi
li phn gi tr s. Hm parseFloat() s kim tra mt chui theo th t t tri qua cho n khi
n gp mt k t khng phi l dng s. Chui s s c bin thnh dng s thp phn.
Trong v d ny n s bin chui 16 thnh dng s 16 (qu gii >:<) v tt nhin n cng s
ct phn ui 'px' i bi v n khng phi l s. Cn trong trng hp chui bt u bng
ch thay v l s, hm .parseFloat() s tr v mt gi tr l NaN, l ch vit tt ca Not A
Number (khng phi s). Hm parseFloat() c argument th hai m bo rng gi tr s
tr v di dng hng chc ch khng phi cc dng khc.
Cui cng chng ta ch cn nhn bin num vi 1.4 (tng 40%) v sau t kch c ch bng
cch kt hp num vi px
var $speech = $('div.speech');
var num = parseFloat($speech.css('fontSize'), 10 );
num *= 1.4;
$speech.css('fontSize', num + 'px');
});
});
Lu : Phng trnh num *= 1.4 l dng vit tt ph bin. N tng ng vi num = num
* 1.4. Nu bn thy cch vit thng d hiu hn th bn cng c th s dng. Cn nu
khng bn cng c th dng cch vit trn cho cc phng trnh khc nh tnh cng num +=
1.4, tnh tr num -= 1.4, tnh chia num /= 1.4 v chia vi s d num %= 1.4.

By gi nt Nh Hn c th hot ng, chng ta s chia num /= 1.4. Hn na chng ta s
kt hp c hai php tnh trn vo mt b x l .click() cho tt c cc phn t <button> nm
trong th <div id=switcher>. Sau khi tm ra c gi tr s, v da vo ID ca nt no
c nhn, chng ta s s dng php nhn hoc chia. Di y l on m lm vic ny.
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
if (this.id == 'switcher-large') {
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + 'px);
});
});
Nh li chng 3 chng ta c th ly thuc tnh id ca mt phn t DOM bng cch s
dng t kho this, trong trng hp ny n xut hin trong mnh if else. Lm nh vy
th n hiu qu hn l phi to ra mt i tng jQuery ch kim tra gi tr ca mt thuc
tnh.
Tip theo chng ta cng phi lm cho nt Mc nh hot ng ngi dng c th tr v
gi tr mc nh lc ban u. Vic chng ta cn lm l lu kch thc font ch ca on vn
vo mt bin ngay khi DOM sn sng. Sau chng ta c th gi li gi tr ny mi khi nt
Mc nh c nhp. Chng ta cng c th s dng thm mt mnh else if na, nhng
c l mnh Switch trong trng hp ny l hp l hn.
var defaultSize = $speech.css('fontSize');
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.css('fontSize', num + 'px');
});
});
on code trn chng ta vn kim tra gi tr ca this.id v thay i kch thc ch da vo
n, nhng nu gi tr ca n khng phi l switcher-large hoc switcher-small th n s
mc nh l kch c ban u.
n hin c bn
Hai phng thc .hide() v .show(), khi khng c tham s, c th c coi l phng thc rt
gn ca .css(display,'string), string l mt gi tr bt k. Hiu ng t c ca hai
phng thc ny th cng n gin nh tn gi, c ngha l n s n hoc hin mt thnh
phn no .
Phng thc .hide() s lm cho thuc tnh inline style cho cc phn t ph hp tr thnh
display:none. Nhng ci hay ca phng thc ny l ch n ghi nh gi tr thuc tnh ca
display (thng l inline hoc block) trc khi n b i thnh none. Ngc li, phng thc
.show() li tr v gi tr thuc tnh display ban u trc khi n b bin thnh display:none.
Tnh nng ny ca .show() v .hide() c bit c ch khi bn mun n mt thnh phn no
c thuc tnh display mc nh c khai bo trong stylesheet. V d, phn t <li> c gi
tr display mc nh l display:block, nhng chng ta li mun bin n thnh display:inline
s dng trong menu nm ngang. May cho chng ta l khi s dng phng thc .show()
cho mt thnh phn b n nh v d ny l nhng th <li>. N s khng tr li gi tr mc
nh l display:block, bi v nu nh th th mi th <li> li xut hin trn mt hng th hng
ht. Thay vo , cc phn t s c tr li trng thi trc l display:inline, nh th th
menu nm ngang mi c th hot ng c.
minh ho cho tnh nng trn, chng ta s thm mt on vn bn th hai v mt th link
read more vo sau on vn th nht.
<div id="switcher">

<p>
malesuada
ultricies eget,
semper.
</p>
<p>
malesuada
ultricies eget,
semper.
</p>

<a href="#" class="more">Read More</a>
Khi DOM sn sng th on vn th hai b n i
$('p:eq(1)').hide();
});

Khi ng link Read More c click th on vn th 2 s xut hin v ch Read More s b
n i
$('p:eq(1)').hide();
$('a.more').click(function() { //Khi th <a class='more'> c
click
$('p:eq(1)').show(); //cho hin th on vn th 2
$(this).hide(); //this y l ch i tng jQuery a.more n
i
return false; // ngn khng cho ng link hot ng nh mc
nh
});
});

Dng m m bn cn lu trn l on return false. Bi v mc nh ca ng lin kt
mi khi c nhp l s lin kt n trang khc hoc phn no . Nhng khi ta thm dng
return false, n s gip ngn chn mc nh ca ng lin kt.
Hai phng thc .show() v .hide() trn tuy ngn gn v d s dng nhng n li khng
c mt cho lm, cho nn phn tip theo chng ta s lm cho n mt hn.
Hiu ng v tc
Khi ta thm tc , hay ni chnh xc hn l khong thi gian, vo phng thc .show() hoc
.hide(), n s tr thnh hiu ng ng xy ra trong mt khong thi gian nh trc. V d
nh phng thc .hide() lm gim chiu cao, rng v tnh trong sut ca mt phn t cng
mt lc cho n khi c ba gi tr u bng khng. n lc thuc tnh ca CSS l display:
none s c p dng. Mt khc, phng thc .show() th tng chiu cao ca mt phn t t
trn xung di, chiu rng t tri qua phi v trong sut t 0 n 1 cho n khi phn t
hon ton c th c nhn thy.
Tc
Vi hiu ng jQuery, chng ta c th s dng ba tc c sn l: slow, normal v fast.
S dng .show(slow) s lm cho hiu ng Show din ra trong 0.6 giy, .show(normal)
trong vng 0.4 giy v .show(fast) l 0.2 giy. Nu bn mun chnh xc hn na, bn c th
s dng millisecond nh: .show(850). Khng ging nh dng ch, khi dng millisecond, s
khng cn phi b trong du nhy.
Quay li v d trn, by gi chng ta s thm tc vo xem n nh th no.
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').show('slow');
$(this).hide();
return false;
});
});
Fade in v Fade out
Hai phng thc .show() v .hide() cng mt ri, nhng c i khi bn li thy
mt qu cng khng tt. Cho nn jQuery cho chng ta mt s nhng hiu ng ng c sn
khc thm phn linh hot. V d khi bn mun c on vn xut hin t t bng cch tng
dn trong sut ca n, chng ta c th s dng .fadeIn(slow):
$('p:eq(1)').hide();
$('p:eq(1)').fadeIn('slow');
$(this).hide();
return false;
});
});
Nu mun bn cng c th th vi .fadeOut(slow) xem cng dng ca n nh th no.
Hiu ng a hp
i khi chng ta mun o trng thi n hin mt thnh phn no thay v ch hin th n
mt ln nh chng ta lm cc bc trn. o trng thi c th lm c bng cch kim
tra nhn thy ca mt tp hp cc thnh phn trc, sau th gn mt phng thc ph
hp cho n. S dng li hiu ng fade, chng ta c th sa li m nh sau:
var $firstPara = $('p:eq(1)');
$firstPara.hide();
if ($firstPara.is(':hidden')) {
$firstPara.fadeIn('slow');
$(this).text('read less');
} else {
$firstPara.fadeOut('slow');
$(this).text('read more');
}
return false;
});
});
Nh chng ta tng lm trn, chng ta lu selector vo mt bin, trong v d ny l
$firstPara = $(p:eq(1)), trnh phi lp li vic ln xung cy DOM. Chng ta cng khng
cn n i ng lin kt m thay i ch ca n.
S dng mnh if else l hon ton hp l o trng thi n hin ca mt phn t.
Nhng vi hiu ng a hp ca jQuery, chng ta khng cn phi s dng dng iu kin ny
na. Jquery c mt phng thc l .toggle(), hot ng ging nh .show() v .hide(), n cng
c th nhn hoc khng nhn tham s tc . Mt phng thc a hp na l .slideToggle(),
n c s dng n hoc hin mt phn t bng cch t t tng hoc gim cao ca n.
on m di y chng ta s s dng phng thc .slideToggle().
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$firstPara.slideToggle('slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Ln ny t kho $(this) c dng nhiu ln, cho nn chng ta lu n li vo mt bin $link
on m hot ng hiu qu hn v cng d c hn. Hn na, mnh iu kin ch
kim tra ni dung ch ca ng lin kt thay v xem xem on vn th 2 c hin hay khng.
Bi v chng ta ch s dng mnh ny thay i ch ca n.
T to hiu ng ng
Ngoi nhng phng thc c sn, jQuery cung cp thm mt phng thc rt mnh na l
.animate(). N cho php chng ta t to ra nhng hiu ng ng theo thch ca mnh.
Phng thc .animate() c hai dng. Dng th nht c th nhn bn i s.
1.Cp thuc tnh v gi tr ging nh .css() m chng ta tho lun trn.
2.Tc tu chn c th l mt trong nhng tc c sn hoc mt s di dng
millisecond.
3.Kiu di chuyn s c bn k hn chng sau
4.Mt hm gi ngc s c bn phn di.
Kt hp li th bn i s trn s c dng cng thc chung nh sau
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert(' tin hnh xong');
});
Dng th hai ly vo 2 i s, thuc tnh v tu chn.
.animate({properties}, {options})
Khi chng ta xung dng d c hn th dng th 2 nhn nh sau:
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function() {
alert('The animation is finished.');
},
queue: boolean,
step: callback
});
Trc ht chng ta s s dng dng th nht ca .animate(), sau chng ta s s dng dng
th 2 phn sau ca chng ny khi chng ta bn ti xp hng hiu ng.
o trng thi Fade
Khi chng ta ni v hiu ng a hp, bn c thy rng khng phi phng thc no cng c
nhng phng thc o trng thi i km. V d phng thc .slide() th c .slideToggle(),
nhng khng c .fadeToggle() cho .fadeIn() v .fadeOut(). Nhng chng ta c th d dng s
dng phng thc .animate() to ra hiu ng o trng thi fade. on m di y,
chng ta s thay th phng thc .slideToggle() vi hiu ng ng t to.
$('p:eq(1)').hide();
$('p:eq(1)').animate({opacity: 'toggle'}, 'slow');
} else {
}
return false;
});
});
Xem v d bn s thy, phng thc .animate() cng cho php s dng nhng t kho nh
show, hide v toggle. Khi m nhng phng thc rt gn khc khng ph hp vi tc
v.
Hiu ng ng a thuc tnh
Vi phng thc .animate(), chng ta c th cng mt lc sa i bt c s kt hp no ca
cc thuc tnh. V d khi bn mun cng mt lc to ra hai hiu ng trt v m i khi o
trng thi ca on vn th 2, chng ta ch vic thm cp thuc tnh gi tr chiu cao vo
bn thuc tnh .animate().
$('p:eq(1)').hide();
$('p:eq(1)').animate({
opacity: 'toggle',
height: 'toggle'
},
'slow');
} else {
}
return false;
});
});
Hn na, chng ta khng ch c nhng thuc tnh nh dng s dng cho nhng phng
thc rt gn m chng ta cn c nhng thuc tnh khc nh: left, top, fontSize, margin,
padding v borderWidth. Hy nh li on m thay i kch thc ch ca on vn trn.
Chng ta c th tng hoc gim kch thc bng cch dng .animate() thay cho .css().
var defaultSize = $speech.css('fontSize');
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.animate({fontSize: num + 'px'},
'slow');
});
});
Nhng thuc tnh va nu trn cn cho php chng ta to ra nhiu hiu ng phc tp khc.
V d chng ta c th di chuyn mt thnh phn t tri sang phi ca trang web v cng mt
lc tng chiu cao ca n ln 20px v thay i dy ca border ln thnh 5px. Chng ta s
thc nghim vi th <div id=switcher>.
Vi nhng giao din co gin, chng ta phi tnh ton c khong cch m hp div s di
chuyn trc khi n chm vo ng bin bn phi ca trang.Gi s rng rng ca on
vn bn l 100%, chng ta c th ly rng ca on vn bn tr i rng ca hp C
Ch. Jquery c mt phng thc l .width() c th s dng c trong trng hp ny, tuy
nhin n li khng tnh c padding tri phi hoc rng ng vin. Vi jQuery phin
bn 1.2.6, chng ta c thm phng thc .outerWidth(). y chnh l phng thc chng ta
s s dng trnh phi tnh thm vo padding v border. Trong v d ny chng ta s bt
u hiu ng ng khi m ngi dng nhp chut vo t C Ch, ngay pha trn hng nt.
on m s tng t nh sau
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({left: paraWidth - switcherWidth,
height: '+=20px', borderWidth: '5px'}, 'slow');
});
});
Bn nn ch n thuc tnh height c du += trc gi tr pixel. N c ngha l gi tr tng
i. Nn thay v n lm cho hp bin thnh 20px, n s lm cho hp to ra 20 px ln hn so
vi kch thc hin ti.
Mc d on m trn lm cho th div cao ln v border dy ln, nhng n khng di chuyn
sang bn tay phi nh chng ta mun. Chng ta phi thay i thuc tnh position ca n trong
CSS.
nh v tr vi CSS
Khi bn lm vic vi .animate(), bn nn nh n tm nh hng ca CSS ln cc thnh phn
chng ta mun sa i. V d khi bn iu chnh thuc tnh left nh trn, n s khng to ra
thay i g vi cc phn t tr khi nhng phn t bn mun thay i c thuc tnh position
l relative hoc absolute trong CSS. V tr mc nh ca CSS cho nhng thnh phn Block-
level l static, c ngha l tnh, iu ni ln l do ti sao n vn gi nguyn v tr khi bn
c gng di chuyn n. Do vy nu bn mun n c thay i, bn phi sa li gi tr
position ca n trong CSS.
#switcher {
position: relative;
}
Sau khi thay i thuc tnh position trong CSS, hp nt ca chng ta di chuyn sang
bn tay phi nh hnh

Hiu ng ng b v theo th t
Phng thc .animate() nh chng ta bit c s dng to ra hiu ng ng b cho
mt tp hp cc phn t. Nhng cng c lc chng ta li mun cc hiu ng xy ra theo th
t ht ci ny ri mi n ci kia.
Lm vic vi mt tp hp cc phn t n l
Khi bn mun p dng nhiu hiu ng cho cng mt tp hp cc phn t, queuing d dng
c to ra bng cch kt ni cc hiu ng li. minh ho cho vic ny, chng ta li s di
chuyn hp C Ch sang bn tay phi v tng chiu cao v ng bin ca n. Tuy nhin
ln ny chng ta s cho 3 hiu ng xy ra ln lt theo th t. Chng ta ch cn t mi
hiu ng trong mt phng thc .animate() v sau th kt ni chng li vi nhau
$switcher
.animate({left: paraWidth - switcherWidth},
'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');
});
});
Tt nhin khi kt ni cc phng thc li, chng ta c th c ba phng thc .animate()
trn cng mt dng, nhng v nh th n hi kh c do vy chng ta mi phng thc
trn mt dng cho n d c hn.
Chng ta c th xp hng bt c phng thc jQuery no bng cch kt ni chng vi nhau.
V d chng ta cng c th kt ni cc hiu ng cho th <div id=switcher> vi th t sau:
1.Lm gim trong sut ca n xung .5 vi .fadeTo().
2.Di chuyn n sang tay phi vi .animte().
3.Tng li trong sut thnh 1 vi .fadeTo().
4.n n i vi .slideUp().
5.Cho hin li n vi .slideDown().
Tt c nhng g chng ta phi lm l kt ni nhng hiu ng trn vi th t tng t trong
on m ca chng ta.
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});
Nhng nu by gi chng ta mun di chuyn th <div> sang bn tay phi v cng mt lc
lm gim trong sut ca n i mt na th sao? Nu hai hiu ng ny cng xy ra vi cng
mt tc , th chng ta n gin ch cn kt hp n vo mt phng thc .animate() l .
Nhng trong v d ny, phng thc fade s dng tc l fast trong khi di chuyn sang
phi li s dng tc l slow. y chnh l lc chng ta cn s dng n dng th 2 ca
phng thc .method().
$switcher
.fadeTo('fast',0.5)
.animate({
}, {duration: 'slow', queue: false})
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});
i s th 2 y l mt ho tu chn, cho ta tu bin queue. Nu queue c gi tr l
false s lm cho hiu ng ng xy ra cng mt lc vi ci trc n.
iu cui bn cn bit v dy hiu ng trn mt tp hp cc phn t n l queuing khng t
ng gn ln nhng phng thc phi hiu ng khc nh .css(). V d chng ta mun thay i
mu nn ca th <div id=switcher> thnh sau khi .slideUp() nhng trc .slideDown().
Chng ta c th lm nh sau:
$switcher
.fadeTo('fast',0.5)
.animate({
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.css('backgroundColor','#f00')
.slideDown('slow');
});
});
Tuy on m thay i mu nn c t ng th t trong m, nhng n li thay i mu
nn ngay khi bn nhp chut.
Xem Demo Online Example 7
C mt cch m bn c th thm phng thc phi hiu ng vo dy l bng cch s dng
phng thc .queue(). y s l on m m bn c c.
$switcher
.fadeTo('fast',0.5)
.animate({
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.queue(function() {
$switcher
.css('backgroundColor', '#f00')
.dequeue();
})
.slideDown('slow');
});
});
on m trn, khi bn cho phng thc .queue() mt hm hi truy, n s thm hm vo
dy hiu ng ca phn t ph hp. trong hm ny, chng ta t cho mu nn l mu v
sau th thm vo phng thc h qu .dequeue(). Khi c s xut hin ca .dequeue(), n
cho php dy hiu ng tip tc ni m n b dng li v hon thnh c chui hiu ng vi
dng .slideDown(). Nu chng ta khng s dng .dequeue(), th hiu ng ng dng li
ri.
Chng ta s tm hiu thm mt cch khc xp hng nhng phng thc phi hiu ng.
Trong phn ti chng ta s tm hiu hiu ng vi a hp phn t.
Lm vic vi a hp phn t
Khng ging nh khi lm vic vi nhm phn t n, khi chng ta s dng hiu ng cho cc
nhm khc nhau, chng gn nh xy ra cng mt lc. thy nhng hiu ng xy ra cng
mt lc din ra nh th no, chng ta s di chuyn mt on vn xung di ng thi ko
on vn khc ln. u tin chng ta s thm vo hai th <p> na.
<div id="wrapper">
<div id="switcher">

<p>
malesuada
ultricies eget,
semper.
</p>
<p>
malesuada
ultricies eget,
semper.
</p>

<a href="#" class="more">Read More</a>
<p>
malesuada
ultricies eget,
semper.
</p>
<p>
malesuada
ultricies eget,
semper.
</p>

</div>
</div>
Tip theo cho d quan st, chng ta s cho on vn th 3 mt ng vin 1 px v on
vn th 4 c mu nn xm. Chng ta cng s n on vn th 4 khi DOM sn sng.
$('p:eq(2)').css('border', '1px solid #333');
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Cui cng chng ta thm phng thc .click() vo on vn th 3 khi nhp chut vo, th
on vn th 3 s chy ln v ra khi tm nhn, trong khi on vn th 4 s chy xung v
vo tm nhn.
$('p:eq(2)')
.css('border', '1px solid #333')
.click(function() {
$(this).slideUp('slow')
.next().slideDown('slow');
});
});

Kt qu bn thy hai hiu ng xy ra gn nh cng mt lc. on vn th 3 chy ln trn
ng thi on vn th 4 ang b n cng l r chy ln trn.
Hm hi truy
c th xp hng cc hiu ng trn nhng phn t khc nhau, jQuery cung cp mt hm
hi truy cho mi phng thc hiu ng. Nh chng ta thy vi cc b x l s kin v
phng thc .queue(), hm hi truy ch n gin l i s ca mt phng thc. Trong
trng hp hiu ng, chng xut hin l i s cui cng ca phng thc.
Nu chng ta s dng hm hi truy xp hng hai hiu ng trt, chng ta c th cho on
vn th 4 trt xung trc khi on vn th 3 trt ln. v d di y chng ta s xem
xt cch thit lp phng thc .slideDown() vi hm hi truy.
$('p:eq(2)')
.click(function() {
$(this).next().slideDown('slow',function() {
// on m ny s chy sau khi oan vn th 3 dng li
});
});
});
Tuy nhin chng ta cng cn phi thn trng y v phi bit chc ci g s thc s trt
ln. Ng cnh cng thay i vi t kho $(this) bi v hm hi truy ang nm trong
phng thc .slideDown(). Khi $(this) c t trong hm hi truy th n khng cn ch on
vn th 3 na nh khi n cn ngoi vi phng thc .click(). Bi v phng thc
.slideDown() c gn cho
$(this).next(), tt c nhng g nm trong phng thc ny s nhn nhn $(this) l anh em h
ca n hoc ni khc i chnh l on vn th 4. Cho nn nu chng ta thm
$(this).slideUp(slow) vo trong hm hi truy, chng ta s kt thc vi vic cho n i on
vn m chng ta va cho hin ln.
Mt cch n gin gi $(this) khng b thay i l lu n ngay vo mt bin trong phng
thc .click() nh sau: var $thirdPara = $(this). By gi bin $thirdPara chnh l on vn th
3, c trong v ngoi hm hi truy. y l on m s dng bin va to ca chng ta.
var $thirdPara = $('p:eq(2)');
$thirdPara
.click(function() {
$(this).next().slideDown('slow',function() {
$thirdPara.slideUp('slow');
});
});
});
S dng bin $thirdPara trong hm hi truy .slideDown() ph thuc vo thuc tnh ca
Closures. Chng ta s bn thm v thuc tnh rt quan trng nhng hi kh hiu ny trong
phn sau.
Khi bn cho chy on m trn bn s thy c hai on vn u xut hin, khi on vn th 4
trt xung ht th on vn th 3 mi bt u trt ln.

By gi bn hiu c hm hi truy, chng ta c th tr li on m trn trong chng
ny. on m chng ta xp hng cho hiu ng i mu nn gn cui ca dy hiu ng.
Thay v chng ta s dng phng thc .queue() nh trc y, chng ta c th s dng hm
hi truy thay th.
$switcher
.fadeTo('slow',0.5)
.animate({
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow', function() {
$switcher
.css('backgroundColor', '#f00');
})
.slideDown('slow');
});
});
Khi cho chy on m bn s thy mu nn ca th <div id=switcher> i thnh mu
sau khi n trt ln v trc khi n trt xung.
Tm lc
Bng cch s dng nhng phng thc hiu ng chng ta va hc chng ny, chng ta c
th tng hoc gim dn c ch bng cch s dng .css() hoc .animate(). Chng ta cng c
th p dng nhiu hiu ng n hoc hin mt phn t bt k bng nhiu cch v to hiu
ng ng cho n xy ra cng mt lc hoc theo th t.
4 chng u ny, tt c nhng v d ca chng ta u l dng sa i nhng phn t
c vit m HTML trc. Trong chng 5, chng ta s hc cch s dng jQuery to ra
cc phn t mi v thm chng vo cy DOM bt c khi no ta mun.
Chng 6 Sa i DOM
Bn tng xem o thut v thy nhng o thut gia c th vi tay ln khng trung v cho
xut hin mt b hoa, jQuery cng c th to ra cc thnh phn, thuc tnh, v c ch trn
mt trang web ging vi cch m o thut gia trnh din vy. Hn na, jQuery cng c th
lm bin mt tt c nhng th n to ra. V chng ta cng c th ly b hoa kia v bin n
thnh <div class=magic id=flowerToDove>Dove</div>
Sa i thuc tnh
Qua 4 chng u ca gio trnh ny, chng ta bit cch s dng phng thc .addClass()
v .removeClass() lm thay i giao din ca cc thnh phn trn trang web. Thc cht th
nhng phng thc ny sa i thuc tnh ca class. Phng thc .addClass() th to ra hoc
thm vo cho thuc tnh, trong khi phng thc .removeClass() th li xo hoc gim thuc
tnh. Cn c mt phng thc na l .toggleClass(), n c th va loi b v va thm vo
mt class. Nh th vi 3 phng thc trn chng ta c nhng cng c mnh lm
vic vi class.
Tuy nhin, thuc tnh class ch l mt trong s nhng thuc tnh m chng ta cn dng ti
hoc thay i. V d, id, rel v href. sa i nhng thuc tnh ny, jQuery cung cp
phng thc .attr() v .removeAttr(). Chng ta thm ch c th s dng .attr() v
.removeAttr() sa i thuc tnh class. Nhng phng thc chuyn dng l .addClass() v
.removeClass() th ph hp hn trong trng hp ny bi v n c th x l chnh xc nhng
trng hp mt phn t c nhiu class nh: <div class=first second>.
Thuc tnh phi class
C nhng thuc tnh khng n gin sa i nu khng c s tr gip ca jQuery. Hn
na, jQuery cho php chng ta sa i nhiu thuc tnh cng mt lc, tng t nh cch m
chng ta lm vic vi nhiu thuc tnh CSS khi s dng phng thc .css() chng 4.
v d ny, chng ta c th d dng thit lp id, rel v thuc tnh title cho ng lin kt
cng mt lc. Di y l m HTML
<h1>jQuery DOM Manipulation</h1>
<h3>An example at izwebz.com</h3>
<div class="chapter">
<p class="first">Qua 4 chng u ca gio trnh ny, chng ta
bit cch s
dng phng thc .addClass() v .removeClass() lm thay i giao
din ca
cc thnh phn trn trang web. <a href="http://www.izwebz.com">Thc
cht</a> th nhng phng thc ny sa i thuc tnh ca class. Phng
thc .addClass() th to ra hoc thm vo cho
thuc tnh, trong khi phng thc .removeClass() th li xo hoc
gim thuc
tnh.
</p>

<p class="second method">Tuy nhin, thuc tnh class ch l mt
trong s
nhng thuc tnh m chng ta cn dng ti hoc thay i. V d, id,
rel v href.
sa i nhng thuc tnh ny, <a
href="http://www.izwebz.com">jQuery</a> cung cp phng thc .attr()
v .removeAttr(). Chng ta thm ch c th s dng .attr() v
.removeAttr()
sa i <a href="http://www.izwebz.com">thuc tnh</a> class.
Nhng phng thc chuyn dng l .addClass()
v .removeClass() th ph hp hn trong trng hp ny bi v n
<a href="http://www.izwebz.com">c th</a> x l
chnh xc nhng trng hp mt phn t c nhiu class nh:
</p>

<p><span class="pull-quote">
C nhng thuc tnh <span class="drop">khng n gin</span> sa
i nu khng c s tr gip ca
jQuery. Hn na, <strong>jQuery</strong> cho php chng ta sa i
nhiu thuc tnh cng mt lc,
tng t nh cch m chng ta lm vic vi nhiu thuc tnh
CSS</span> khi s dng
phng thc .css() chng 4. v d ny, chng ta c th d
dng thit lp
id, rel v thuc tnh title cho ng lin kt cng mt lc. Di
y l m
HTML
</p>

</div>
By gi chng ta c th i qua tng ng lin kt trong th <div class=chapter> v p
dng thuc tnh cho chng tng th mt. Nu bnch mun to ra mt gi tr thuc tnh ging
nhau cho tt c cc ng lin kt, th bn ch cn mt dng m n gin sau:
$('div.chapter a').attr({'rel': 'external'});
});
Cch ny c th dng c bi v chng ta mun gi tr ca thuc tnh rel va to l nh
nhau tt c cc ng lin kt. Tuy nhin, thng th nhng thuc tnh ta thm vo hoc
thay i phi c gi tr khc nhau cho mi mt thnh phn. V d vi bt c ti liu no, mi
mt id u phi l duy nht nu ta mun m javaScript ca mnh lm vic theo mun.
to c mt id duy nht cho mi ng lin kt, chng ta khng s dng phng php
trn na m thay vo s dng phng thc .each().
$('div.chapter a').each(function(index) {
$(this).attr({
'rel': 'external',
'id': 'izwebz-' + index
});
});
});
Phng thc .each() hot ng nh vng lp hin, n c nguyn l hot ng nh vng lp
for nhng thun tin hn. Ngi ta thng s dng phng thc ny khi m on m chng
ta s dng trn mi phn t ca b chn qu phc tp cho vng lp n. Trong trng hp
ny, hm n ca phng thc .each() c gn mt s index chng ta c th gn n cho
mi id. i s index ny hot ng nh mt b m, bt u t s 0 cho ng lin kt u
tin v tng dn 1 n v cho mi ng lin kt k tip. Cho nn khi ta thit lp id thnh
izwebz- + index, th ng lin kt u tin s c id l izwebz-0, ng lin kt th 2 s
lizwebz -1, v.v..
Xem Demo Online Example 1 (dng firebug inspect link)
Chng ta s s dng thuc tnh title cho ngi c bit thm thng tin v ng lin kt
Izwebz. v d di y, tt c cc ng lin kt u hng ti izwebz.com. Tuy nhin,
chng ta nn cho biu thc b chn c c th hn, chng ta ch nn chn nhng ng
lin kt c cha izwebz trong phn href. phng sau ny chng ta li thm nhng ng
lin kt khc khng phi l izwebz.
$('div.chapter a[href*=izwebz]').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'rel': 'external',
'id': 'izwebzLink-' + index,
'title': 'know more about ' + $thisLink.text() + ' at
izwebz'
});
});
});
y c im bn cn ch l chng ta lu li t kho $(this) vo mt bin gi l
$thisLink, bi v chng ta s dng n nhiu hn mt ln.
Vi c 3 gi tr thuc tnh c thit lp nh trn, by gi ng lin kt ca chng ta s c
dng nh sau:
<a href="http://www.izwebz.com" rel="external" id="izwebzLink-0"
title="know more about Thc cht at izwebz">Thc cht</a>
Xem Demo Online Example 2 (dng firebug inspect link)
n li hm $()
T khi bt u lm quen vi jQuery, chng ta bit cch s dng hm $() tip cn cc
thnh phn trn trang. Thc t th hm ny l trng tm ca th vin jQuery, bi v n c
gi mi khi chng ta cn gn mt hiu ng, s kin hoc thuc tnh cho mt phn t.
Nhng hm $() cn mt chc nng khc na nm trong hai du ngoc tnh nng ny rt i
mnh m n ni n khng nhng c th thay i giao din ca mt thnh phn m n cn c
th thay i ni dung ca mt trang web. Ch n gin bng cch chn mt on m HTML
nm gia hai du ngoc, chng ta c th to ra mt cu trc DOM mi t h v.
Ch : Bn cng nn ch khi to ra nhng hiu ng ci thin giao din hoc ni dung
ph thuc vo javaScript. Bi v khng phi ai cng bt javaScript, nn nhng thng tin quan
trng phi c nhn thy bi tt c mi ngi, ch khng phi ch nhm ngi c trnh
duyt hin i hoc bt javaScript.
Mt chc nng thng thy trong nhng trang FAQs l ng lin kt Back to top di
mi cu hi v tr li. Bi v ci ny nu c b i hoc khng c hin th mt s trnh
duyt th cng khng nh hng n ni dung chnh ca trang. Do vy chng ta c th dng
JavaScript thm vo. Chng ta s thm vo ng lin kt Back to top cui mi on
vn, v im dng m ng lin kt Back to top s dn ti. Chng ta to ra cc thnh phn
mi nh sau:
$('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
Khi cho chy th on m trn, bn vn khng thy nhng ng lin kt back to top v cc
im dng xut hin, cho d ta to n on code trn. Vn l dng m trn to ra
cc thnh phn ta mun, nhng n cha c thm vo trang. lm c iu ny, chng
ta c th s dng mt trong rt nhiu phng thc chn ca jQuery.
Chn cc thnh phn mi
jQuery c hai phng thc dng chn phn t ny vo trc phn t kia l: .insertBefore()
v .before(). Hai phng thc ny c cng chc nng, nhng khc nhau im l n s c
kt hp vi cc phng thc khc nh th no. Cn hai phng php na l, .insertAfter() v
.after(), cng c nguyn l hot ng nh nhau nhng n c s dng chn phn t ny
vo sau phn t kia. Vi v d v back to top ca ta, chng ta s s dng phng php
.insertAfter().
$('<a href="#top">back to top</a>')
.insertAfter('div.chapter p');
$('<a id="top"></a>');
});
Phng thc .after() cng c th cho kt qu tng t vi .insertAfter(), nhng vi biu thc
b chn nm trc phng thc thay v theo sau n. Nu s dng .after(), th dng m u
tin trong $(document).ready() s l nh sau:
$('div.chapter').after('<a href='#top'>back to top</a>');
Vi .insertAfter() th bn vn c th thm vo ng sau n nhng phng thc khc tip
tc lm vic vi th <a>. Nhng vi .after(), nhng phng thc bn thm vo sau ny s
ch c tc dng vi nhng phn t ph hp vi b chn trong trng hp ny l
$(div.chapter p). Ni cch khc, th <a> ca bn s khng chu nh hng bi nhng
phng thc thm vo sau n.
By gi chng ta chnh thc chn ng lin kt vo trang web (v vo trong DOM) sau
mi mt on vn nm trong th <div class=chapter>, ng lin kt back to top s xut
hin nh hnh.

Nhng hin ti nhng ng lin kt vn cha hot ng c. Chng ta vn cn phi chn
im dng vi id=top. Chng ta c th s dng mt trong nhng phng thc dng chn
mt phn t vo mt phn t khc.
$('<a href="#top">back to top</a>')
.insertAfter('div.chapter p');
$('<a id="top" name="top"></a>')
.prependTo('body');
});
on m trn chn im dng ngay trn phn bt u ca th <body>, hay ni cch khc l
trn cng ca trang. Vi phng thc .insertAfter() cho ng lin kt v .prependTo() c
s dng cho im dng, nhng ng lin kt back to top ca chng ta hot ng c.
Mt im thng thy na ca nhng ng lin kt back to top l n khng c tc dng g
khi nm trn cng ca trang v phn u ngi c vn nhn thy c. Chng ta cn chnh
sa li m mt cht sao cho nhng ng lin kt ch bt u sau on vn th 4. t
c iu ny, chng ta ch cn thay i biu thc b chn mt cht:
.insertAfter(div.chapter:gt(2)). Ti sao li c gi tr l 2 y? Bi v JavaScript nh s
bt u t 0, cho nn on vn u tin s l s 0, on vn th 2 l s1, th 3 l s 2 v th
t l s 3. Biu thc b chn ca chng ta s chn ng lin kt vo sau mi on vn khi
m gi tr ch mc l 3, bi v n l s u tin ln hn 2.
Hnh di y cho bn thy kt qu ca biu thc b chn trn.

Di chuyn cc phn t
Vi v d v ng lin kt back to top trn, chng ta to ra nhng phn t mi v chn
chng vo trang. Nhng chng ta cng c th di chuyn mt phn t t ni ny qua ni khc.
Mt ng dng thc t ca cch chn ny l dng t ng ho cch chn phn ghi ch cui
trang. Mt phn ch thch c trong on vn mu v chng ta s s dng n trong v d
ny. Chng ta cng to ra mt s phn ghi ch khc cho v d ny.
<p><span class="pull-quote">
C nhng thuc tnh <span class="drop">khng n gin</span> sa
i nu khng c s tr gip ca
jQuery. Hn na, <strong>jQuery</strong> cho php chng ta</span>
sa i nhiu thuc tnh cng mt lc,
tng t nh cch m chng ta lm vic vi nhiu thuc tnh CSS
khi s dng
phng thc .css() chng 4. v d ny, chng ta c th d
dng thit lp
id, rel v thuc tnh title cho ng lin kt cng mt lc. Di
y l m
HTML
</p>

<p>
malesuada fames
ac turpis egestas. <span class="footnote">Vestibulum tortor quam,
feugiat vitae, ultricies eget,
semper.
Aenean ultricies mi vitae est</span>. Mauris placerat eleifend
leo. Quisque
sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,
condimentum sed, commodo vitae, ornare sit amet, wisi.
</p>

<p>
malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget,
tempor sit amet, ante. <span class="footnote">Donec eu libero sit
amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque
sit amet est et sapien ullamcorper pharetra.</span> Vestibulum
erat wisi,
condimentum sed, commodo vitae, ornare sit amet, wisi.
</p>

<p>
malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget,
semper.
Aenean ultricies mi vitae est. <span class="footnote">Mauris
placerat eleifend leo. Quisque
sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,
condimentum sed, commodo vitae, ornare sit amet, wisi.</span>
</p>
Mi mt on vn ny c mt on ghi ch c gi trong th <span
class=footnote></span>. Khi vit m HTML nh th ny, chng ta bo tn c ng
cnh ca ghi ch. Sau trong CSS stylesheet, chng ta cho n in nghing v c hnh di
y.
By gi chng ta c th ly phn ghi ch v chn chng vo gia hai th <div
class=chapter> v <div id=footer>. Bn cng nn bit rng k c trong trng hp ca
vng lp n, th t chn c nh trc, bt u t trn cy DOM i xung di. Bi v
chng ta cng cn bo tn th t ca phn ghi ch v tr mi ca n trn trang, cho nn
chng ta s dng .insertBefore(#footer).
Lm nh vy s chn tng phn ghi ch ngay trn th <div id=footer>. Do ghi ch th
nht s c t nm gia <div class=chapter> v <div id=footer>, ghi ch th 2 s c
nm gia ghi ch th nht v th <div id=footer>, v.v.. Mt khc, nu chng ta s dng
.insertAfter(div.chapter), th th t s b o ln. Cho nn m ca chng ta s nh sau
$('span.footnote').insertBefore('#footer');
});
y chng ta li c thm mt vn na. l cc dng ghi ch c nm trong th
<span>, m bn thn th <span> c display: inline theo mc nh, do vy cc dng ghi ch
ni lin nhau m khng xung dng.
Chng ta s chnh sa CSS gii quyt vn ny, chng ta s lm cho nhng phn t
<span> tr thnh block-level, nhng ch p dng vi nhng th nm trong <div
class=chapter>
span.footnote {
font-style: italic;
font-family: "Times New Roman", Times, serif;
display: block;
margin: 1em 0;
}
.chapter span.footnote {
display: inline;
}
By gi th phn ghi ch ca chng ta xung dng.

t ra th phn ghi ch ca chng ta nhn cng tm c ri, nhng cn nhiu vic chng ta
c th lm ci thin n. Mt s im cn lm nh sau:
1.nh du v tr trong ti liu ni m ghi ch c s dng
2.nh s cho tng v tr v cung cp mt s ph hp vi bn thn tng dng ghi ch.
3.To ng lin kt gia v tr vn bn n im ghi ch, v t im ghi ch ngc li on
vn bn.
Nhng bc ny c th lm c nh phng thc .each(), nhng trc ht chng ta phi to
ra mt ni cha nhng dng ghi ch di cng ca trang.
$('<ol id="notes"></ol>').insertAfter('div.chapter');
});
Chng ta s dng mt danh sch nh s <ol id=notes> </ol> cho phn ghi ch, bi v
mnh mun chng t ng c nh s th t. Chng ta cho danh sch ny mt
id=notes v chn n vo sau th <div class=chapter>.
nh du, nh s v lin kt vn bn
By gi chng ta c th nh du v nh s v tr m phn ghi ch c trch dn.
$('span.footnote').each(function(index) {
$(this)
.before(
['<a href="#foot-note-',
index+1,
'" id="context-',
index+1,
'" class="context">',
'<sup>' + (index+1) + '</sup>',
'</a>'
].join('')
)
});
});
y chng ta s dng b chn ging vi b chn v d trc, nhng khc ci l chng ta
gn phng thc .each() cho n. trong .each() chng ta bt u bng $(this), n l i din
ca tng dng ghi ch lin tip nhau, v chng ta gn phng thc .method() cho n.
Kt qu ca c on m long ngong nm trong du ngoc n ca phng thc .before()
s l mt ng siu lin kt. N s c chn vo trc tng th <span> ca phn ghi ch.
Di y l m HTML ca mt trong nhng dng ghi ch khi n c chn vo DOM.
<a href="#foot-note-1" id="context-1"
class="context"><sup>1</sup></a>
C php nhn c v kh phc tp, nn chng ta dnh vi pht tm hiu xem n nh th
no. Bn trong du ngoc n ca phng thc .before(), chng ta bt u vi mt cp ngoc
vung -[ ] n chnh l i din ca mng trc kin (array literal). Mi phn t nm trong
array s c mt du phy theo sau (tr phn t cui cng, nu khng m s khng chy).
cho d c hn, chng ta vit mi lnh trn mt dng. Sau khi mng lp xong, chng ta
chuyn n li thnh dng chui bng cch s dng phng thc ca JavaScript l .join().
Phng thc ny ly vo mt chui rng lm i s, chui rng c biu th bi mt cp
du nhy ( ), bi v chng ta khng mun bt c th g xut hin gia cc phn t mng khi
n c xut ra dng HTML.
Lu bn n phn index+1 trn on m trn. Bi v JavaScript nh s bt u t 0, do
vy thuc tch href c gi tr l #footnote-1, th chng ta phi cng 1 n v cho n. Thuc
tnh id l #context-1 v tn ca ng link s l 1. Thuc tnh href c bit quan trng, bi v
n phi tuyt i ph hp vi thuc tnh id ca phn ghi ch (tt nhin l khng gm du #).
Cch th 2 chng ta cng c th s dng chui ni thay v dng mng ghp:
.before('<a href="#foot-note-' + (index+1) +
'" id="context-' + (index+1) +
'" class="context"><sup>' +
(index+1) + '</sup></a>');
Nhng trong trng hp ny, cch s dng mng c v d qun l hn.
Lu : c nhiu ti liu ni v s khc nhau v mt hiu nng lm vic gia mng ghp
v chui ni. Nu bn cn phn vn, bn c th c ti liu sau
http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/
Tuy nhin, trong hu ht cc trng hp, nhng khc bit ny l khng ng k. Nu hiu
nng lm vic ca on m l iu cn quan tm th cn nhiu yu t khc c tm nh hng
cn ln hn nh l cch lu b chn m chng ta bn.

Xem Demo Online example 5
Gn phn ghi ch
Bc k tip l di chuyn phn t <span class=footnote> nh chng ta lm. Tuy nhin,
ln ny chng ta s t n vo trong th <ol id=note> va mi c to. Chng ta s s
dng .appendTo(), nhng cng gi ng th t, nhng dng ghi ch k tip s c chn
vo cui ca hng.
$(this)
.before(
index+1,
'" id="context-',
index+1,
'<sup>' + (index+1) + '</sup>',
'</a>'
].join('')
)
.appendTo('#notes')
});
});
Bn cng nn nh rng .appendTo() ang c gn vi $(this), cho nn ni theo ngn ng
ca jQuery th l gn phn ghi ch span vo phn t vi id l notes.
i vi mi dng ghi ch m chng ta va di chuyn, chng ta s gn cho n mt ng lin
kt khc. ng lin kt ny s quay li s th t nm trong vn bn.
$(this)
.before(
index+1,
'" id="context-',
index+1,
'<sup>' + (index+1) + '</sup>',
'</a>'
].join('')
)
.appendTo('#notes')
.append( ' (<a href="#context-' + (index+1) +
'">context</a>)' );
});
});
Ch n thuc tnh href quay ngc li id ph hp vi ch nh du trc. Di y bn s
thy phn ghi ch c gn ng lin kt.

Tuy nhin phn ghi ch vn cha c s th t, mc d chng c t trong th <ol>, l
bi v mi mt dng s phi c t nm gia th <li>.
Gi phn t
Phng thc dng gi mt phn t ny bn trong phn t khc c tn l .wrap(). Bi v
chng ta mun mi mt $(this) s c gi trong cp th <lli><l/li>, chng ta c th hon
thin m cho phn ghi ch nh sau:
$(this)
.before(
index+1,
'" id="context-',
index+1,
'<sup>' + (index+1) + '</sup>',
'</a>'
].join('')
)
.appendTo('#notes')
.append( ' (<a href="#context-' + (index+1) +
'">context</a>)' )
.wrap('<li id="foot-note-' + (index+1) +
'"></li>');
});
});
By gi mi phn t <li> u c mt id bng vi href ca n. Cui cng chng ta c mt
danh sch cc on ghi ch c nh du v lin kt vi nhau.

Tt nhin, s th t c th c chn vo trc tng dng ghi ch nh cch m chng c
chn trong on vn. Tuy nhin bn c th thy rt khoi ch khi chng ta c nhng on
m hp chun c t ng to ra bi JavaScript.
Sao chp phn t
T u chng cho ti gi chng ta chn phn t c to ra, di chuyn n t v tr ny
sang v tr khc ca ti liu, gi phn t c bng mt phn t mi. Nhng cng c khi
chng ta mun sao chp mt phn t no . V d khi bn c mt thanh di chuyn trn
cng ca trang, bn mun copy n v chn n xung phn footer. Thc ra nu bn mun
copy li phn no ca trang tng tnh thm m ca n th bn nn s dng m cho n
lm t ng cho mnh. M suy cho cng th ti sao chng ta phi mt thi gian v cng sc
vit li mt on m y chang lm g? Ti sao khng jQuery lm gip va l m li va
trnh sai st.
sao chp phn t, phng thc .clone() l tt c nhng g chng ta cn. Phng thc ny
s to ra mt bn sao ca phn t m chng ta chn dng sau ny. Cng nh nhng
phng thc to ra cc phn t mi m chng ta hc trn, phng thc ny cng khng
to ra thay i g cho n khi chng ta s dng mt trong nhng phng thc chn. Cng
ging nh khi bn copy mt on vn trong Microsoft Word, khi bn va bi en v chn
copy. Th MS Word s lu on vn trong b nh ca my, nhng trn ti liu cha c g
xut hin. Cho n khi bn chn Paste th on vn copy mi c hin th. Phng thc
.clone() cng hot ng theo nguyn l .
on m di y s to ra mt bn sao ca on vn nm trong th <div class=chapter>.
$('div.chapter p:eq(0)').clone();
Nh ni trn, khi bn cho chy on code trn s khng c g xy ra ht. Bi v jQuery
mi ch copy on vn thi ch n cha lm g vi n c.
cho on vn chng ta va copy xut hin, chng ta s cho n xut hin trn th <div
class=chapter>
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
By gi nu cho chy on m trn, bn s thy on vn u c xut hin 2 ln v bi v
n khng cn nm trong th <div class=chapter> na cho nn nhng style no bn p dng
trong CSS s khng c tc dng vi n. y bn thy r nht l n rng hn nhng on
vn cn li.
Sao chp km s kin
Mc nh ca phng thc .clone() l khng sao chp bt c s kin no hoc h hng ni
ngoi ca i tng c chn. Nhng n cng c th ly vo mt tham s Boolean, m khi
gi tr ny l true, n s sao chp c s kin i km: .clone(true). Nh vy chng ta phi
mt cng gn li s kin cho n trong trng hp chng ta mun n i km.
Sao chp cho phn trch dn
Khi bn c bo giy, i khi bn thy c phn khung in nh, trong c nhng mu trch
dn nhng on quan trng gy s ch . Chng ta c th lm c vic ny bng cch s
dng phng thc .clone(). Hy xem li on m HTML ca on vn th 3 ca chng ta.
<p>
<span class="pull-quote">It is a Law of Nature
<span class="drop">with us</span> that a male child shall
have <strong>one more side</strong> than his father</span>
so that each generation shall rise (as a rule) one step in
the scale of development and nobility. Thus the son of a
Square is a Pentagon; the son of a Pentagon, a Hexagon; and
so on.
</p>
on vn bt u bng mt th <span class=pull-quote>. y s l class chng ta s dng
sao chp. Mt khi on vn nm trong th <span> c copy, chng ta s dn n vo
mt ni khc v chng ta cng cn chnh sa li style cho n bt mt hn.
Chng ta s gn mt class l pulled cho th <span> va c copy v khai bo nhng thuc
tnh sau trong CSS
.pulled {
background: #e5e5e5;
position: absolute;
width: 145px;
top: -20px;
right: -180px;
padding: 12px 5px 12px 10px;
font: italic 1.4em "Times New Roman", Times, serif;
}
on trch dn c mu nn xanh nht, mt t padding v font khc. Chng ta cng s dng
absolute position nh v cho thnh phn mi ny.
By gi chng ta s quay li phn jQuery. Chng ta s bt u vi biu thc b trng cho tt
c cc th <span class=pull-quote>, sau chng ta s gn vo phng thc .each() chy
qua tng phn t mt.
$('span.pull-quote').each(function(index) {
//...
});
});
Tip theo chng ta tm on vn cha m ca tng on trch dn v p dng
thuc tnh CSS
var $parentParagraph = $(this).parent('p');
$parentParagraph.css('position', 'relative');
});
});
Mt ln na, chng ta lu li b chn m chng ta s s dng hn mt ln vo mt bin
gip cho m ca chng ta hot ng hiu qu hn v cng d c hn.
By gi sau khi thit lp xong hai gi tr nh v quan trng ca CSS l relative cho on
vn cha phn trch dn v absolute cho on trch dn. Tip theo chng ta c th copy tng
th <span> v thm class l pulled cho tng bn sao, v cui cng l chn n vo phn bt
u ca on vn bn.
Lu : nu bn cha hiu k khi nim ny, bn c th xem video v Absolute Position trong
CSS
$(this).clone()
.addClass('pulled')
.prependTo($parentParagraph);
});
});
Bi v chng ta s dng absolute position cho on trch dn, cho nn n s nh v theo on
vn bn cha n. Di y l hnh m chng ta c c n bc ny.
V c bn th on trch dn nhn cng tm n ri, nhng thng th phn trch dn khng c
cng nh dng vn bn nh l on vn c copy. y on chch dn ca chng ta c
mt vi ch c t m. iu chng ta mun l on vn sau khi c copy s loi b ht
nhng th <strong>, <em> v <a href> hoc bt c th inline no i. Hn na chng ta cng
mun sau khi copy th cng c th sa i n cht cht nh l xo i vi t v thay th n
bng du ba chm . Quay li on m HTML, bn s thy c mt vi t c t nm
trong cp th <span class=drop> khng n gin </span>.
Chng ta s lm du 3 chm trc sau s loi b ht cc thuc tnh HTML i v ch gi li
phin bn ch khng.
var $clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.find('span.drop')
.html('…')
.end()
.prependTo($parentParagraph);
var clonedText = $clonedCopy.text();
$clonedCopy.html(clonedText);
});
});
Chng ta bt u qu trnh sao chp bng cch lu bn sao vo mt bin. Ln ny bin c
to ra l cn thit bi v chng ta khng th lm vic hon ton vi n trong cng mt dng
lnh. Bn cng thy l sau khi chng ta tm ht nhng th <span class=drop> v thay th
n vi du ba chm, chng ta s dng mt phng thc .end(). Phng thc ny ni cho
jQuery bit, chng ta mun quay li mt trc bc. Trong trng hp ny chng ta mun
quay li n bc .find(span.drop). Nh th chng ta s chn c on copy ch khng phi
ch l du ba chm vo phn u ca on vn.
Cui cng chng ta to thm mt bin na l clonedText, bin ny s cha phin bn ch
khng ca on vn chng ta cn copy. Sau chng ta s dng phin bn ch khng c
nh dng ny thay th cho phin bn HTML. By gi on trch dn s nh hnh

hnh trn ti thm mt on <span class=pull-quote> vo xem m ca chng ta c
th t ng to ra mt on trch dn na khng.
Bo trn gc cho on trch
By gi on trch dn hot ng nh mnh mun l nhng phn t con b loi b, du 3
chm c thm vo thay cho ch. Nu by gi chng ta mun cho on trch dn c
bo trn gc th sao. Chng ta c th to ra mt th <div> bao quanh ly on trch.
var $clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.find('span.drop')
.html('…')
.end()
.prependTo($parentParagraph)
.wrap('<div class="pulled-wrapper"></div>');
var clonedText = $clonedCopy.text();
$clonedCopy.html(clonedText);
});
});
Chng ta cng cn phi chnh sa m CSS c th to ra hiu ng bo trn gc.
.pulled-wrapper {
background: url(top-bg.png) no-repeat left top;
position: absolute;
width: 160px;
right: -180px;
padding-top: 18px;
}
.pulled {
background: url(bottom-bg.png) no-repeat left bottom;
position: relative;
display: block;
width: 140px;
padding: 0 10px 24px 10px;
font: italic 1.4em "Times New Roman", Times, serif;
}

Tm lc cc phng thc sa i DOM
S khc bit gia nhng phng thc sa i DOM m jQuery cung cp cho chng ta ph
thuc vo nhim v v v tr ca n. Phn ny s tm lc cho bn d nh phng thc no
nn c s dng lm g v khi no th nn s dng chng
1. to mt phn t mi t HTML, s dng hm $().
2. chn mt hoc nhiu phn t vo trong mt phn t khc s dng
.append()
.appendTo()
.prepend()
.prependTo()
3. chn mt phn t mi vo bn cnh mt phn t khc s dng
.after()
.insertAfter()
.before()
.insertBefore()
4. chn mt phn t mi xung quanh mt phn t khc, s dung
.wrap()
.wrapAll()
.wrapInner()
5. thay th mt phn t ny vi phn t khc hoc ch s dng
.html()
.text()
.replaceAll()
.replaceWith()
6. loi b mt phn t nm trong mt phn t khc dng
.empty()
7. loi b mt phn t v con ci ca n trong mt ti liu m khng thc s xo n dng
.remove()
Tm tt
Trong chng ny chng ta to, sao chp, ti kt hp v lm p cho phn ni dung s
dng phng php sa i DOM ca jQuery. Chng ta p dng nhng phng thc ny
cho mt trang web bin nhng on vn bnh thng thnh phn ch thch t ng, phn
trch dn, ng lin kt v.v..
Phn tutorial ca cun sch cng sp ht, nhng trc khi chng ta hc thm nhng v d
phc tp hn v m rng hn. Chng ta hy dnh cht thi gian nghin cu phng thc
AJAX ca jQuery. Trong chng k tip, chng ta hy do mt vng ln server nh phi
thuyn AJAX.
Chng 7: AJAX Phn 1
Trong nhng nm gn y, ngi ta hay nh gi mt trang web da vo cng ngh m trang
ang ng dng. Mt trong nhng cng ngh tr nn rt nh m trong thi gian gn y
l ng dng web c gi l AJAX. N l tng hp ca nhiu cng ngh khc nhau.

AJAX l ch vit tt ca Asynchronous JavaScript and XML. Nhng cng ngh c trong mt
gii php AJAX bao gm
JavaScript dng tng tc vi ngi dng hoc cc s kin lin quan n trnh
duyt.
i tng XMLHttpRequest, cho php nhng cu lnh truy vn c gi n server
m khng lm gin on nhng tc v khc ca trnh duyt
XML trn server, hoc nhng nh dng d liu tng t nh HTML v JSON
Thm JavaScript, dng chuyn i d liu t server v hin th n ln trang web.
Cng ngh AJAX c ca tng nh l v cu tinh ca th gii web, n bin nhng trang web
tnh thnh nhng ng dng c tnh tng tc cao. Rt nhiu frameworks c to ra gip
cc lp trnh vin hc cch s dng n, chnh bi s khng nht qun ca trnh duyt trong
vic ng dng i tng XMLHttpRequest, jQuery cng khng phi l ngoi l.
Chng ta s xem xem AJAX c thc s k diu nh ngi ta hay ni khng.
Ti d liu khi c yu cu
ng sau nh hong quang, th AJAX thc s ch l mt cng c dng ti d liu t server
v trnh duyt m khng cn phi refresh li trang web. Nhng d liu ny c nhiu nh
dng v chng ta cng c nhiu la chn lm vic vi n khi n c ti xong.
Chng ta s xy dng mt trang web hin th nhng t mi trong cun t in, cc nhm t
c gom li di mt ch ci nh trong t in. M HTML nh dng vng ni dung ca
trang s nh sau:
<div id="dictionary">
</div>
Yep! Ch c vy thi. Trang web ca chng ta s khng c ni dung no ht. Chng ta s s
dng nhng phng thc AJAX ca jQuery hin th th <div> vi cun t in.
Chng ta s cn mt ni kch hot qu trnh ti d liu, do vy chng ta s thm vo vi
ng lin kt sau ny mnh c ni gn b x l s kin.
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="#">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="#">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="#">D</a></h3>
</div>
</div>
Thm mt cht CSS, chng ta c mt trang nh sau

By gi chng ta tp trung vo phn ly ni dung cho trang.
Gn HTML vo
ng dng AJAX thng ch l nhng truy vn c c nhng on m HTML. K thut
ny i khi cn c gi l AHAH (Asynchronous HTTP and HTML), li qu n gin vi
jQuery. Trc ht chng ta cn mt on m HTML chn, chng ta s to mt file mi t
tn l a.html. File HTML ny s c m nh sau:
<div class="entry">
<h3 class="term">ABDICATION</h3>
<div class="part">n.</div>
<div class="definition">
An act whereby a sovereign attests his sense of the high
temperature of the throne.
<div class="quote">
<div class="quote-line">Poor Isabella's Dead, whose
abdication</div>
<div class="quote-line">Set all tongues wagging in the
Spanish nation.</div>
<div class="quote-line">For that performance 'twere
unfair to scold her:</div>
<div class="quote-line">She wisely left a throne too
hot to hold her.</div>
<div class="quote-line">To History she'll be no royal
riddle —</div>
<div class="quote-line">Merely a plain parched pea that
jumped the griddle.</div>
<div class="quote-author">G.J.</div>
</div>
</div>
</div>
<div class="entry">
<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
Independent, irresponsible. An absolute monarchy is one
in which the sovereign does as he pleases so long as he
pleases the assassins. Not many absolute monarchies are
left, most of them having been replaced by limited
monarchies, where the sovereign's power for evil (and for
good) is greatly curtailed, and by republics, which are
governed by chance.
</div>
</div>
y l hnh m chng ta s c c, tt nhin n nhn hi ci v cha c nh dng g ht.

Bn cng nn ch l file a.html khng phi l mt ti liu HTML thc s, bi v n khng
c th <html>, <head> v <body>. y l nhng th bt buc phi c cho mt ti liu
HTML. Nhng file nh th ny c gi l mnh hoc on m, mc ch tn ti ca n ch
dng chn vo nhng ti liu HTML khc, y chnh l vic chng ta s lm.
$('#letter-a a').click(function() {
$('#dictionary').load('a.html');
return false;
});
});
Phng thc .load() s lm tt c nhng vic cn li cho chng ta. Chng ta ch cho n
ng dn n on m cn chn bng cch s dng nhng b chn jQuery thng thng, v
sau a URL ca tn file m chng ta cn ti di dng tham s ca phng thc. By gi
nu bn nhp chut vo ng lin kt u tin, tp tin s c ti v t vo trong <div
id=dictionary>. Trnh duyt s x l on m HTML mi ngay khi n c chn vo.
Bn nhn thy rng m HTML ca chng ta t ng c nh dng CSS cn trc y th
n khng c nh dng g. Bi v ngay sau khi on m HTML ny c chn vo trang th
n s chu nh hng bi cc lut CSS ca trang n c chn vo.
Khi bn th nhn mt ch th nh ngha ca t s xut hin gn nh ngay lp tc. y
chnh l im nhm ln khi bn lm vic local. Bn s khng thy c thi gian phi i
truyn ti ti liu trn mng. Gi s chng ta thm mt thng bo khi nh ngha ca t ti
xong
alert('Loaded!');
return false;
});
});
Khi bn nhn vo on m jQuery trn bn c th ngh rng hp thng bo ch xut hin sau
khi ti liu c ti xong. Nhng lnh ca JavaScript l ng b, lm xong vi tc v ny
mi n tc v khc theo trt t nghim ngt.
Nhng nu on m ny c chy th trn host tht th bng thng bo xut hin v bin
mt trc khi qu trnh ti hon thnh, chnh l do s chm tr ca mng. iu ny xy ra
l v nhng cuc gi ca AJAX l khng ng b. Nu khng th ta phi gi n l SJAX,
nghe khng thy ph ri.
Ti d liu khng ng b c ngha l mt khi truy vn HTTP gi i ly on m HTML
v c s dng, on m va gi truy vn lp tc quay li hot ng m khng ch thm
g na. Khong mt lc sau, trnh duyt nhn c phn hi t server v x l n. Thng th
y l iu mnh mun bi v bn khng mun kha ca s duyt web ca ngi dng trong
khi ch ti d liu.
Nhng nu bn mun on m phi ch cho n khi qu trnh ti hon thnh, jQuery cung
cp mt hm truy hi cho vn ny. Chng ta hy xem v d di y
Lm vic vi i tng JavaScript
ti c mt trang HTML c nh dng y rt n gin, nhng cng c lc chng
ta mun on m ca mnh c th x l d liu trc khi n c hin th. Trong trng hp
ny, chng ta cn ly d liu ra vi cu trc m chng ta c th dng JavaScript thao tc.
Vi b chn jQuery, chng ta c th di chuyn qua li trong HTML v thao tc vi n, nhng
trc ht n phi c chn vo ti liu . nh dng d liu thun JavaScript hn c ngha
l bn t phi vit t m hn.
Ly ra mt i tng JavaScript
Nh chng ta thng thy, i tng JavaScript ch l tp hp ca nhng cp key-value, v
c th c nh ngha ngn gn vi cp ngoc cong {}. Tri li, mng JavaScript li c
nh ngha bng cp ngoc vung []. Kt hp hai khi nim ny, chng ta c th biu t
c nhng cu trc phc tp v giu d liu.
Khi nim JavaScript Object Notation (JSON) c gii thiu bi Douglas Crockford tn
dng th mnh v c php n gin ny. Bn k php ny cho chng ta mt s thay th hon
ho cho nh XML, m c lc rt cng knh.
{
"key": "value",
"key 2": [
"array",
"of",
"items"
]
}
Lu : Nu bn mun bit thm nhng thng tin v th mnh ca JSON v nhng ng dng
ca n cho nhng ngn ng lp trnh khc, bn c th vo trang web www.json.org
Chng ta c th m ha d liu ca chng ta bng cch s dng nh dng ny bng nhiu
cch. Chng ta s vi mc t trong t in mt file JSON v t tn l b.json. on m
s nh sau
[
{
"term": "BACCHUS",
"part": "n.",
"definition": "A convenient deity invented by the...",
"quote": [
"Is public worship, then, a sin,",
"That for devotions paid to Bacchus",
"The lictors dare to run us in,",
"And resolutely thump and whack us?"
],
"author": "Jorace"
},
{
"term": "BACKBITE",
"part": "v.t.",
"definition": "To speak of a man as you find him when..."
},
{
"term": "BEARD",
"part": "n.",
"definition": "The hair that is commonly cut off by..."
},
ly d liu ny ra, chng ta s s dng phng thc $.getJSON(), phng thc ny s tm
np tp tin v x l n, kt qu ca on m c gi s l i tng JavaScript.
Hm jQuery ton cc
Cho n thi im ny, nhng phng thc m chng ta s dng c gn vo mt i
tng jQuery m chng ta to ra bng cch s dng hm $(). B chn cho php chng ta
chn ra mt im trong DOM cc phng thc ca chng ta lm vic trn chng. Nhng
hm $.getJSON th li khc. N s khng c p dng ln bt c phn t DOM no, i
tng tr v phi c s dng cho on m ch khng phi l chn vo trang. Chnh v l
do ny m hm getJSON() c nh ngha l phng thc i tng jQuery ton cc (mt
i tng c gi bi jQuery hoc c $ xc nh mt ln bi jQuery) ch khng phi mt
phin bn i tng jQuery (i tng c chng ta to vi hm $().
Nu JavaScript c class nh nhng ngn ng lp trnh hng i tng khc, th chng ta s
gi $.getJSON() l mt phng thc class. Do vy chng ta gi phng php dng ny l
hm ton cc, trong thc t, n l nhng hm s dng du cch jQuery trnh b xung t
vi tn ca cc hm khc.
s dng hm ny, chng ta truyn qua tn file nh trc:
$('#letter-b a').click(function() {
$.getJSON('b.json');
return false;
});
});
on m trn khng to ra thay i g r rng khi bn nhp vo ng lin kt. Hm c
gi s ti tp tin, nhng chng ta cha bo JavaScript phi lm g vi d liu c c. Do vy
chng ta phi s dng hm truy hi.
Hm $.getJSON() ly vo mt tham s th 2, tham s ny cng chnh l mt hm c gi
khi qu trnh ti hon thnh. Nh ni trc y, nhng cuc gi ca AJAX l dng khng
ng b, cho nn hm truy hi s i cho d liu c ti ht thay v chy on m ngay lp
tc. Hm truy hi ny cng ly vo mt tham s na dng cha d liu thu v. Nn chng
ta c th vit:
$.getJSON('b.json', function(data) {
});
return false;
});
});
y chng ta s dng mt hm n nh l hm truy hi, nh mt cch vit tt ph bin
trong jQuery. Mt hm c th c s dng lm hm truy hi.
Bn trong hm ny, chng ta c th s dng bin s data di chuyn trong cu trc d liu
nu cn. Chng ta cn phi chy ln mng trn cng, xy dng HTML cho tng phn t.
Chng ta cng c th lm vic ny vi mt vng for, nhng thay vo , chng ta s lm
quen vi mt hm ton cc na ca jQuery l $.each(). Chng ta bit mt hm gn ging
n l phng thc .each() trong chng 5. Thay v ch lm vic vi mt i tng jQuery,
hm ny ly vo mt mng hoc mt biu lm tham s th nht v mt hm truy hi lm
tham s th 2. Mi ln vng lp chy th ch s lp hin ti v phn t hin ti trong mng
hoc biu c chuyn vo nh hai tham s cho hm truy hi.
$('#dictionary').empty();
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
html += '</div>';
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
});
Trc khi vng lp bt u, chng ta lm rng th <div id=dictionary>, do vy chng ta
c th chn vo m HTML va to c. Sau chng ta s dng hm $.each() kim tra
tng phn t mt, xy dng cu trc HTML da vo ni dung ca biu . Cui cng chng
ta bin on m HTML thnh cy DOM bng cch gn n vo th <div>
Lu : cch ny gi s rng d liu ti v l an ton s dng vi HTML, n khng c
c nhng k hiu nh kiu <.
By gi ch cn phn trch dn ca mc t trong t in, bng cch s dng mt vng lp
$.each() na.
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
if (entry['quote']) {
html += '<div class="quote">';
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
});
});
return false;
});
});
By gi bn c th th nhp chut vo ch B xem th kt qu
Lu : nh dng JSON rt ngn gn nhng nghim ngt. Mi du ngoc, du nhy hay du
phi u phi y v chnh xc, nu khng tp tin s khng c ti. Trong phn ln cc
trnh duyt, thm ch n cn khng bo li m c on m hon ton khng chy mt cch
m thm.
Chy mt on m
i khi chng ta khng mun ly v tt c m JavaScript khi trang web c ti ln u tin.
Chng ta khng bit on m no l cn thit cho n khi c nhng tng tc ca ngi
dng. Chng ta cng c th s dng th <script> nu cn nhng c mt cch khc hay hn
chn thm m vo l dng jQuery ti trc tip tp tin .js
chn vo mt on m cng n gin nh khi chn mt on HMTL. Trong trng ny
chng ta s dng hm ton cc $.getScript(), hm ny cng nh nhng hm cng chc nng
ca n, chp nhn mt a ch URL tr n v tr ca tp tin.
$('#letter-c a').click(function() {
$.getScript('c.js');
return false;
});
});
v d cui cng ca chng ta, chng ta cn phi x l d liu tr v mnh c th lm mt
ci g vi tp tin c ti v. Nhng vi nhng tp tin cha m, qu trnh x l l hon
ton t ng, mt khi c ti on m s t chy.
M c ti bng cch ny s chy trong ng cnh ton cc ca trang hin ti. iu c
ngha l chng c th n c tt c nhng hm v cc bin s c khai bo ton cc, k
c bn thn jQuery. Cho nn chng ta c th bt chc v d v JSON chun b v chn
HTML vo trang khi on m c thc thi, v t on m ny vo tp c.js:
var entries = [
{
"term": "CALAMITY",
"part": "n.",
"definition": "A more than commonly plain and..."
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
},
{
"term": "CLARIONET",
"part": "n.",
"definition": "An instrument of torture operated by..." },
{
"term": "COMFORT",
"part": "n.",
"definition": "A state of mind produced by..."
},
{
"term": "CORSAIR",
"part": "n.",
"definition": "A politician of the seas."
}
];
var html = '';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this['term'] + '</h3>';
html += '<div class="part">' + this['part'] + '</div>';
html += '<div class="definition">' + this['definition'] + '</div>';
html += '</div>';
});
$('#dictionary').html(html);
},
{
"term": "COMFORT",
"part": "n.",
"definition": "A state of mind produced by..."
},
{
"term": "CORSAIR",
"part": "n.",
"definition": "A politician of the seas."
}
];
var html = '';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this['term'] + '</h3>';
html += '<div class="part">' + this['part'] + '</div>';
html += '<div class="definition">' + this['definition'] + '</div>';
html += '</div>';
});
$('#dictionary').html(html);
Bn th nhn vo ch ci C xem kt qu.
Ti ti liu XML
XML l mt phn trong nhng ch ci vit tt ca AJAX, nhng chng ta vn cha ti XML
ln no. Cch ti tp XML cng kh n gin v rt ging vi cch m chng ta lm vi
JSON. Trc ht chng ta cn mt tp XML l t tn l d.xml v cha nhng d liu chng
ta cn hin th.
<?xml version="1.0" encoding="UTF-8"?>
<entries>
<entry term="DEFAME" part="v.t.">
<definition>
To lie about another. To tell the truth about another.
</definition>
</entry>
<entry term="DEFENCELESS" part="adj.">
<definition>
Unable to attack.
</definition>
</entry>
<entry term="DELUSION" part="n.">
<definition>
The father of a most respectable family, comprising
Enthusiasm, Affection, Self-denial, Faith, Hope,
Charity and many other goodly sons and daughters.
</definition>
<quote author="Mumfrey Mappel">
<line>All hail, Delusion! Were it not for thee</line>
<line>The world turned topsy-turvy we should see;
</line>
<line>For Vice, respectable with cleanly fancies,
</line>
<line>Would fly abandoned Virtue's gross advances.
</line>
</quote>
</entry>
<entry term="DIE" part="n.">
<definition>
The singular of "dice." We seldom hear the word,
because there is a prohibitory proverb, "Never say
die." At long intervals, however, some one says: "The
die is cast," which is not true, for it is cut. The
word is found in an immortal couplet by that eminent
poet and domestic economist, Senator Depew:
</definition>
<quote>
<line>A cube of cheese no larger than a die</line>
<line>May bait the trap to catch a nibbling mie.</line>
</quote>
</entry>
</entries>
Tt nhin d liu ny c th c biu th bng nhiu cch, v mt s phn rt ging vi cu
trc m chng ta lm vi HTML v JSON trc y. Nhng trong v d ny bn s c
lm quen vi mt vi chc nng ca XML c thit k con ngi cn c th hiu c,
nh l cch s dng thuc tnh cho term v part thay v dng th.
Chng ta cng bt u hm vi cch quen thuc
$('#letter-d a').click(function() {
$.get('d.xml', function(data) {
});
return false;
});
});
Ln ny chng ta s dng hm $.get(). Ni chung, hm ny ch n thun l truy xut tp tin
a ch URL cho trc v cung cp mt on ch trng khng nh dng cho hm truy hi.
Nhng nu phn hi li l nh dng XML da vo MINE type ca server cung cp, hm truy
hi s nhn c cy XML DOM.
Cng may cho chng ta l jQuery c kh nng di chuyn rt tt trong DOM. Chng ta c th
s dng phng thc .find(), .filter() v nhng phng thc di chuyn khc trong ti liu
XML y nh cch m chng ta lm vic vi HTML.
$('#letter-d a').click(function() {
$.get('d.xml', function(data) {
$(data).find('entry').each(function() {
var $entry = $(this);
html += '<h3 class="term">' + $entry.attr('term')
+ '</h3>';
html += '<div class="part">' + $entry.attr('part')
+ '</div>';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
$quote.find('line').each(function() {
html += '<div class="quote-line">'
+ $(this).text() + '</div>';
});
if ($quote.attr('author'))
html += '<div class="quote-author">'
+ $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
return false;
});
});
Bn nhn th ch D xem kt qu

y l mt cch mi trong nhng phng thc di chuyn trong DOM m chng ta bit,
cho ta thy tnh linh ng ca b chn CSS trong jQuery. C php ca CSS thng c s
dng lm p cho trang HTML, cho nn b chn tiu chun trong file .css s dng tn th
HTML nh div v body tm n ni dung. Tuy nhin, jQuery cng c th s dng nhng
th XML thng thng nh l entry v definition, nh cch m chng ta s dng HTML.
Nhng b chn nng cao ca jQuery cn cho php tm n nhng phn ti liu XML trong
nhng trng hp phc tp hn nhiu. V d chng ta mun gii hn hin th nhng mc t
c cha cu trch dn v thuc tnh author. lm c iu ny, chng ta c th gii hn
nhng mc t c cha cc phn t <quotes> bng cch thay i entry thnh entry:has(quote).
Sau chng ta cng c th gii hn thm nhng mc t c cha thuc tnh author trong
phn bng cch vit entry:has(quote[author]). By gi b chn ca chng ta s nh sau:
$(data).find('entry:has(quote[author])').each(function() {
Biu thc b chn by gi gii hn nhng mc t nh hnh

Chng 7 AJAX Phn 2
y l phn th 2 ca chng 6 AJAX
La chn nh dng d liu
Chng ta xem qua 4 nh dng cho d liu bn ngoi, mi mt dng u c x l bi
nhng hm thun AJAX ca jQuery. Chng ta cng xc minh c 4 nh dng u c th
x l c tnh hung l ti thng tin cho trang mi khi ngi dng yu cu ch khng phi
trc . Nh vy th nh dng no ph hp vi ng dng no?
HTML khng mt nhiu cng ti. D liu bn ngoi ngoi c th c ti v chn vo
trang vi mt phng thc m thm ch khng cn c hm truy hi. Chng ta cng khng cn
s dng nhng phng thc di chuyn trong d liu thm mt on HTML vo trang. Tri
li, d liu ny khng c cu trc ph hp c th ti s dng cho nhng ng dng khc.
M n c lin kt cht ch vi thnh phn m n s c chn vo.
JSON th c cu trc cho vic ti s dng n gin. nh dng ny c ng v d c.
Nhng chng ta phi di chuyn trong cu trc d liu ly thng tin hin th ra trang web,
nhng iu ny cng d dng c thc hin bi nhng k thut JavaScript tiu chun. Bi
v tp tin c th c ti ch bng mt cuc gi n phng thc JavaScript eval(), phng
thc ny c tp JSON ht sc mau l. Tuy nhin cch s dung eval() cng cht cha mt
cht ri ro. Nhng li lp trnh trong tp JSON c gy ra li n v to ra hiu ng ph khng
mong mun trn trang, cho nn d liu phi c vit ht sc cn thn.
Tp JavaScript c tnh linh ng nht nhng n li khng thc s l mt c ch lu tr d
liu. Bi v n mang hi hng ca ngn ng lp trnh, n khng th cung cp cng mt loi
thng tin cho nhng h thng khc nhau. Thc t vic ti mt tp JavaScript c ngha l
nhng b x l m t khi c dng ti c th tch ri mt tp bn ngoi, nh th chng
ta c th gim c dung lng ca m v ch ti n khi cn thit.
Ti liu XML cc k c ng. Bi v XML tr thnh ngn ng chung cho th gii mng,
cung cp d liu di dng ny th n rt c th c ti s dng u . V d Flickr,
del.icio.us v Upcoming u xut d liu ca h di dng XML, v c rt nhiu cc trang
khc ti s dng rt sng to. Tuy nhin nh dng XML hi cng knh v mt nhiu thi
gian ti v thao tc hn nhng nh dng khc.
Vi nhng tnh nng nh trn, th bn thy cch d nht cung cp d liu t bn ngoi l
di dng HTML min l d liu khng cn phi c s dng cho nhng ng dng khc.
Trong trng hp d liu s c ti s dng v nhng ng dng khc c th b nh hng,
th JSON thng l la chn tt bi v n c hiu sut lm vic cao v dung lng nh.
Nhng khi ng dng l iu m bn khng chc chn, th XML l la chn an ton nht c
tnh tng kt cao nht.
Trn tt c nhng iu trn, chng ta phi xc nh xem d liu c sn cha. Nu n c
sn ri th rt c th n ri vo mt trong nhng nh dng trn v nh th th bn khi cn
phi mt cng t quyt nh.

Truyn d liu n server
Nhng v d ca chng ta cho n gi ch tp trung vo vic ly d liu tnh t web server.
Tuy nhin, AJAX ch thc s mnh m khi m server c th t ng truyn d liu da vo
thng tin c nhp t trnh duyt web. JQuery c th gip chng ta rt nhiu trong qu trnh
ny, nhng phng thc chng ta hc n nay c th c ci tin mt cht cho qu
trnh truyn ti d liu tr thnh ng 2 chiu.
Lu : nhng v d sp ti i hi phi tng tc vi web server, cho nn y l ln u tin
trong cun sch chng ta s s dng m server-side. Trong nhng phn ti chng ta s s
dng ngn ng lp trnh PHP, y l ngn ng c s dng rng ri v hon ton min
ph. Chng ta s khng cp n cch to web server trong khun kh ca cun sch ny.
Bn c th tm cc ngun hng dn nh trang Apache.org hoc php.net. Trn izwebz cng
c mt vi bi hng dn cch to localhost lm vic vi PHP.
Thc hin lnh truy vn GET
minh ha cho qu trnh giao tip gia ngi dng v server, chng ta s vit mt on m
m n c th ch gi mt mc t trong t in n trnh duyt cho mi mt lnh truy vn.
Mc t c chn s da vo tham s c gi qua trnh duyt. M ca chng ta s ly d
liu t cu trc d liu trong nh sau:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$entries = array(
'EAVESDROP' => array(
'part' => 'v.i.',
'definition' => 'Secretly to overhear a catalogue of the
crimes and vices of another or yourself.',
'quote' => array(
'A lady with one of her ears applied',
'To an open keyhole heard, inside,',
'Two female gossips in converse free —',
'The subject engaging them was she.',
'"I think," said one, "and my husband thinks',
'That she\'s a prying, inquisitive minx!"',
'As soon as no more of it she could hear',
'The lady, indignant, removed her ear.',
'"I will not stay," she said, with a pout,',
'"To hear my character lied about!"',
),
'author' => 'Gopete Sherany',
),
'EDIBLE' => array(
'part' => 'adj.',
'definition' => 'Good to eat, and wholesome to digest, as
a worm to a toad, a toad to a snake, a snake to a pig,
24
25
26
27
28
29
30
31
32
33
34
a pig to a man, and a man to a worm.',
),
'EDUCATION' => array(
'part' => 'n.',
'definition' => 'That which discloses to the wise and
disguises from the foolish their lack of
understanding.',
),
);
?>
trong nhng ng dng tht s th d liu phi c lu tr trong c s d liu v ch c
ti khi hi. Bi v d liu l mt phn ca on m trn cho nn vic vit m ly d liu ra
kh n gin. Chng ta s xem xt d liu c to ra v vit m HTML hin th n:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$term = strtoupper($_REQUEST['term']);
if (isset($entries[$term])) {
$entry = $entries[$term];
$html = '<div class="entry">';
$html .= '<h3 class="term">';
$html .= $term;
$html .= '</h3>';
$html .= '<div class="part">';
$html .= $entry['part'];
$html .= '</div>';
$html .= '<div class="definition">';
$html .= $entry['definition'];
if (isset($entry['quote'])) {
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$html .= '<div class="quote">';
foreach ($entry['quote'] as $line) {
$html .= '<div class="quote-line">'. $line .'</div>';
}
if (isset($entry['author'])) {
$html .= '<div class="quote-author">'. $entry['author']
.'</div>';
}
$html .= '</div>';
}
$html .= '</div>';
$html .= '</div>';
print($html);
}
?>
By gi khi on m c truy vn th tp e.php c gi, v n s tr v mt on HTML
ph hp vi iu kin c gi qua tham s ca GET. V d khi bn truy cp on m vi
e.php?term=eavesdrop, chng ta s c c.

Mt ln na chng ta thy c trang kt qu khng c cht nh dng no bi v CSS cha
c p dng vo trang ny.
Bi v chng ta s nghin cu d liu c truyn ti n server nh th no, chng ta s s
dng mt phng thc khc ly mc t thay v ch s dng mt dng nt n t trc ti
gi. Di y l on m HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="letter" id="letter-e">
<h3>E</h3>
<ul>
<li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>
<li><a href="e.php?term=Edible">Edible</a></li>
<li><a href="e.php?term=Education">Education</a></li>
<li><a href="e.php?term=Eloquence">Eloquence</a></li>
<li><a href="e.php?term=Elysium">Elysium</a></li>
<li><a href="e.php?term=Emancipation">Emancipation</a>
</li>
<li><a href="e.php?term=Emotion">Emotion</a></li>
<li><a href="e.php?term=Envelope">Envelope</a></li>
<li><a href="e.php?term=Envy">Envy</a></li>
<li><a href="e.php?term=Epitaph">Epitaph</a></li>
<li><a href="e.php?term=Evangelist">Evangelist</a></li>
</ul>
</div>
By gi chng ta cn m JavaScript gi n PHP vi tham s ph hp. Chng ta c th lm
c vic ny vi c ch .load(), gn chui truy vn vo URL v sau th truy xut d liu
trc tip vi a ch nh kiu e.php?term=eavesdrop. Tuy nhin, thay v lm nh vy chng
ta s s dng jQuery xy dng chui truy vn da vo biu m ta cung cp cho hm
$.get():
?
1
2
3
$('#letter-e a').click(function() {
$.get('e.php', {'term': $(this).text()}, function(data) {
4
5
6
7
8
$('#dictionary').html(data);
});
return false;
});
});
Ti gi chng ta thy nhng giao tc AJAX m jQuery cung cp, cch lm vic ca hm
ny rt quen thuc. iu khc bit duy nht l tham s th 2, n cho php chng ta cung
cp mt biu key-value v n l mt phn ca chui truy vn. Trong trng hp trn, gi
tr key lun l term nhng value s c ly t ch ca mi ng lin kt. Nn nu by gi
bn nhp chut vo ng lin kt u tin trong danh sch th nh ngha ca t s xut
hin.
Tt c nhng ng lin kt u c a ch d cho chng ta khng s dng n trong m. iu
ny cho php nhng ngi dng khng c hoc khng bt JavaScript vn c th xem c
thng tin trn trang. trnh ng lin kt di chuyn theo mc nh, b x l s kin phi
l return false.
Thc hin lnh truy vn POST
Truy vn HTTP s dng phng thc POST gn nh tng ng vi phng thc GET. Mt
trong nhng khc bit d thy nht l phng thc GET t tham s ca n vo chui truy
vn ca URL. Cn POST th khng. Tuy nhin trong cc cuc gi ca AJAX, im khc bit
ny cng b n i vi ngi dng. Ni chung, l do chnh chn phng thc ny thay v
phng thc khc l ph hp vi chun ca server, hoc truyn ti mt lng d liu
ln. Phng thc GET c gii hn nghim khc hn. Chng ta vit m PHP trong v d
ny sao cho n c th lm vic c vi c 2 phng thc, chng ta c th chuyn t GET
sang POST ch bng cch thay i phng thc jQuery m chng ta gi:
?
1
2
3
4
5
6
7
8
$.post('e.php', {'term': $(this).text()}, function(data) {
});
return false;
});
});
Cc tham s th vn vy nhng lnh truy vn s c gi qua POST. Chng ta cng c th
n gin ha on m hn na bng cch s dng phng thc .load(). Phng thc ny
theo mc nh l s dng POST khi n c cung cp mt biu tham s.
?
1
2
3
4
5
6
$('#dictionary').load('e.php', {'term': $(this).text()});
return false;
});
});
Phin bn m ngn hn ny vn c tc dng tng t khi ch a c nhp chut.
Sp xp th t form
Thng khi bn mun gi d liu n server bn c yu cu phi in vo form. Thay v
phi ph thuc vo nhng c ch gi form bnh thng nh kiu ti ton b cu tr li vo
mt ca s trnh duyt, chng ta c th s dng AJAX ca jQuery gi mt form theo th
t v t cu tr li vo trang hin ti. Di y chng ta s to mt form n gin:
?
1
2
3
4
5
6
7
8
<div class="letter" id="letter-f">
<h3>F</h3>
<form>
<input type="text" name="term" value="" id="term" />
<input type="submit" name="search" value="search"
id="search" />
</form>
</div>
Ln ny chng ta s tr v mt tp hp cc mc t t m PHP bng cch tm kim t kha
c cung cp di dng chui ph ca t trong t in. Cu trc d liu s c nh dng
ging nh trc y, nhng logic th hi khc mt cht.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
foreach ($entries as $term => $entry) {
if (strpos($term, strtoupper($_REQUEST['term']))
!== FALSE) {
$html = '<div class="entry">';
$html .= '<h3 class="term">';
$html .= $term;
$html .= '</h3>';
$html .= '<div class="part">';
$html .= $entry['part'];
$html .= '</div>';
$html .= '<div class="definition">';
$html .= $entry['definition'];
if (isset($entry['quote'])) {
foreach ($entry['quote'] as $line) {
$html .= '<div class="quote-line">'. $line .'</div>';
}
if (isset($entry['author'])) {
$html .= '<div class="quote-author">'.
$entry['author'] .'</div>';
}
}
$html .= '</div>';
$html .= '</div>';
print($html);
}
}
Hm strops() tm t kha ph hp vi chui tm kim ca ngi dng. By gi chng ta c
th phn ng li vi form gi v v to tham s truy vn ph hp bng cch di chuyn trong
cy DOM:
?
1
2
3
4
5
6
7
$('#letter-f form').submit(function() {
$('#dictionary').load('f.php',
{'term': $('input[name="term"]').val()});
return false;
});
});
Tuy on m ca chng ta lm vic nh mong mun, nhng tm tng trng nhp liu
bng tn v sau gn tng ci mt cho biu th phin phc qu. Hn na cch ny kh
x l c khi m form ca chng ta tr nn phc tp hn. Cng may l jQuery c cch gip
chng ta trong trng hp ny. Phng thc .serialize() hot ng trn mt i tng jQuery
v chuyn nhng phn t DOM ph hp thnh chui truy vn v chuyn n cng vi AJAX
truy vn. Chng ta c th vit m cho b x l form nh sau:
?
1
2
3
4
5
6
7
8
$('#letter-f form').submit(function() {
$.get('f.php', $(this).serialize(), function(data) {
});
return false;
});
});
By gi on m c th gi form, cho d s lng cc trng nhp liu c tng. Khi
chng ta mun tm kim, nhng mc t ph hp s c hin th.
Nn ch n lnh truy vn
Cho n gi chng ta c th to cuc gi n phng thc AJAX v kin nhn ch i c
tr li. Nhng cng c lc chng ta mun bit thm mt cht na v lnh truy vn HTTP khi
n c thc hin. jQuery cho bn mt s hm c th c s dng ng k hm truy hi
khi nhiu s kin lin quan n AJAX xy ra.
Hai phng thc .ajaxStart() v .ajaxStop() l nhng v d in hnh v chc nng quan st,
v c th c gn vi bt k i tng jQuery no. Khi lnh gi AJAX bt u m khng c
g ang c ti, hm truy hi .ajaxStart() s khi ng. Ngc li, khi lnh truy vn cui
cng kt thc, hm truy hi c gn vi .ajaxStop() s bt u. Tt c nhng hm quan st
l dng hm ton cc, chng c gi mi khi s giao tip AJAX xy ra, m khng quan tm
n m no gi n.
Chng ta c th s dng nhng phng thc ny thng bo cho ngi dng bit trong
trng hp mng ca h khng c nhanh. on m HTML s c mt on thng bo
ang ti d liu:
?
1 <div id="loading">
2
3
Loading...
</div>
Thng bo ny ch l mt on m HTML bnh thng, nhng bn cng c th thm vo mt
hnh GIF ng kiu xoay xoay cho n chun. Chng ta s chnh sa CSS mt cht khi
thng bo c a ra n c hin th nh hnh di.

Bi v y ch l tnh nng lm cho trang thm p cho nhng ngi dng c trnh duyt hin
i, do vy chng ta s khng chn on m HTML ny trc tip vo trang. Bi v chng ta
ch mun n hin th vi nhng ai c bt JavaScript, cho nn chng ta s chn n bng
jQuery.
?
1
2
3
4
$('<div id="loading">Loading...</div>')
.insertBefore('#dictionary')
});
Chng ta s khai bo trong CSS cho th div ny c display: none; cho khi trang c ti,
th thng bo s b n i. n hin th ng lc mnh cn, chng ta ch cn ng k n vi
chc nng quan st vi .ajaxStart():
?
1
2
3
4
5
6
7
.ajaxStart(function() {
$(this).show();
});
});
Chng ta kt hp phng thc .hide() lun vo y
?
1
2
3
4
5
6
7
8
9
.ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
Nh vy chng ta c bng thng bo.
Mt ln na bn cng nn lu rng nhng phng thc ny khng lin quan g n cch m
giao tip AJAX bt u. Chnh phng thc .load() c gn cho ch A v .getJSON() c
gn cho ch B lm cho giao tip AJAX xy ra.
Trong trng hp ny, tp tnh ton cc l iu chng ta mun. Tuy nhin nu chng ta mun
c th hn na, chng ta c vi la chn s dng. Mt vi chc nng quan st nh,
.ajaxError(), n s gi cho hm truy hi mt tham chiu n i tng XMLHttpRequest. Ci
ny c th dng phn bit gia cc lnh truy vn vi nhau, v cung cp nhng tp tnh
khc nhau. c nhng cch x l c th hn bn c th s dng hm $.ajax() cp thp, m
chng ta s bn ti phn di.
Tuy nhin cch ph bin nht giao tip vi lnh truy vn l hm truy hi thnh cng, m
chng ta ni n trn. Chng ta s dng n trong mt vi nhng v d trn x l
d liu quay li t server v cho hin th kt qu ln trang web. Tt nhin n cng c th
c s dng cho nhng thng tin phn hi khc. Hy xem li v d v .load():
?
1
2
3
4
5
6
return false;
});
});
Chng ta c th ci tin mt cht y bng cch lm cho ni dung t t hin ra thay v m
mt pht. Phng thc .load() c th ly vo mt hm truy hi v kch hot n khi hon
thnh.
?
1
2
3
4
5
6
7
8
$('#dictionary').hide().load('a.html', function() {
$(this).fadeIn();
});
return false;
});
});
Trc tin ta n i phn t ch, v sau th khi ng qu trnh ti. Khi qu trnh ti hon
thnh, chng ta s dng hm truy hi cho phn t va to hin ra t t.
AJAX v s kin
Gi s chng ta mun dng cc mc t trong t in quyt nh n hoc hin nh ngha
ca t , khi ngi dng nhp chut vo t th n s n hoc hin nh ngha i km vi n.
Vi nhng k thut ta hc, th lm c vic ny rt n gin
?
1
2
3
$('.term').click(function() {
$(this).siblings('.definition').slideToggle();
});
4
5
});
Khi mc t b nhp chut, jQuery s tm phn t l anh em h ca n m c
class=definition, v trt n ln trn hoc xung di.
Mi vic nghe c v hp l, nhng khi ta nhp chut vo th s khng xy ra vic g. Vn
l mc t cha c thm vo ti liu khi ta gn b x l s kin. Cho d ta c th gn c
b x l click vo cc phn t ny, mt khi mnh nhp chut vo mt ch ci khc th b x
l s khng cn c gn cho n na.
y l vn thng thy trong phm vi ca trang c a vo bi AJAX. Mt gii php
thng thng l chng ta s gn li b x l mi khi vng ca trang c refresh. Nhng
cch ny cng hi mt thi gian bi v on m gn s kin phi c gi mi khi c mt
thnh phn no lm thay i cu trc DOM ca trang.
Mt cch thay th hay nht cho vn ny c gii thiu chng 3: Chng ta c th p
dng y thc s kin y, bng cch gn s kin cho thnh phn b m v y l nhng
thnh phn s khng bao gi thay i. Trong trng hp ny, chng ta s gn b x l s
kin nhp chut vo ti liu s dng phng thc .live()
?
1
2
3
4
5
$('.term').live('click', function() {
$(this).siblings('.definition').slideToggle();
});
});
Phng thc .live() s hng dn cho trnh duyt quan st tt c nhng c nhp chut trn
ton b trang web, v ch khi mt phn t ph hp vi b chn .term, th b x l s kin
mi thc hin. By gi phng thc .slideToggle() s hot ng di bt k term no, cho d
n c thm vo sau ny bi mt giao tc AJAX
Hn ch v bo mt
i vi tt c cc tin ch ca n trong vic to cc ng dng web ng, XMLHttprequest
(cng ngh trnh duyt c bn ng sau nhng ng dng jQuery AJAX) c qun l rt
nghim ngt. Thng th bn khng th truy vn c mt ti liu ang nm mt server
khc vi server ang cha trang gc ca bn, iu ny trnh nhng v tn cng cross-site.
y thc t li l mt vic tt. V d c ngi cho rng cch thc thi phn tch JSON bng
cch s dng .eval() l khng an ton. Nu c nhng on m c nm trong tp d liu, n
s chy nu hm .eval() gi n. Vy nn nu tp d liu v bn thn trang web cng nm trn
mt server th kh nng chn m c vo tp d liu gn nh tng ng vi vic t chn
m vo trang ca mnh. iu c ngha l, trong trng hp bn ti nhng tp JSON khng
mang m c, th hm .eval() khng cn l mt mi lo cho bo mt.
Nhng cng trong nhiu trng hp li c li hn nu bn c th ti d liu t mt ngun th
3. C vi cch bn c th lm trnh c khu gii hn bo mt v cho php vic ti d
liu ny c th thc hin c.
Cch th nht l da vo server ti d liu t xa v sau th cung cp n khi c yu
cu bi ngi dng. y l cch rt mnh bi v server c th x l trc d liu nu cn. V
d chng ta c th ti file XML cha RSS Feed t nhiu ngun, tp hp chng li thnh mt
feed trn server v pht hnh tp mi ny n ngi dng khi c yu cu.
ti d liu t mt v tr t xa m khng cn s can thip ca server, chng ta phi gian
manh mt t. Mt cch thng dng trong trng hp bn mun ti mt tp JavaScript bn
ngoi l chn cp th <script> khi cn. Bi v jQuery c th gip chng ta chn nhng phn
t DOM mi, nn chng ta d dng c th vit:
?
1
2
3
$(document.createElement('script'))
.attr('src', 'http://example.com/example.js')
.appendTo('head');
Thc t, phng thc $.getScript() cng t ng thch nghi vi k thut ny nu n pht hin
mt host khc trong tham s URL, vy nn k c vic ny cng c gii quyt cho chng
ta.
Trnh duyt s chy on m c ti, nhng khng c c ch no c th ly v kt qu t
on m. Chnh v th k thut ny i hi s cng tc vi host xa. on m c ti v
cng phi lm mt ci g nh l to ra mt bin ton cc v c hiu lc trn mi trng
cc b. Nhng ai to ra m c th chy c bng cch ny cng s cung cp mt API
tng tc vi m t xa ny.
Mt cch na l s dng th HTML <iframe> ti d liu t xa. Phn t ny cho php bt
c URL no cng c s dng lm ngun truy xut d liu ca n, cho d n khng
cng mt server. D liu d dng c ti v hin th ln trang. Nhng thao tc vi d liu
th cng i hi s cng tc nh l cch s dng th <script>. M nm trong <iframe> cn
phi cung cp d liu cho i tng trong ti liu gc mt cch r rng.
S dng JSONP cho d liu t xa
tng s dng th <script> truy xut tp JavaScript t mt ngun xa cng c th s
dng ko mt file JSON t mt server khc. Nhng thc hin c, chng ta cn phi
chnh sa tp JSON mt cht. Cng c vi cch lm vic ny, mt trong s c h tr
trc tip bi jQuery: JSON vi Padding hoc vit tt l JSONP.
nh dng ca tp JSONP bao gm mt tp JSON tiu chun c t trong du ngoc
n v gn vo ng sau mt chui k t bnh thng. Chui ny, hay cn l padding, c
xc nh bi ngi dng ang truy vn d liu. Bi v hai du ngoc ny, ngi dng c th
hoc l lm cho hm c gi hoc mt bin c thit lp ph thuc vo ci g c gi
di dng chui padding.
Mt ng dng PHP ca k thut JSONP kh n gin:
?
1
2
3
<?php
print($_GET['callback'] .'('. $data .')');
?>
y bin $data cha mt chui lm i din cho mt tp JSON. Khi on m ny c gi,
mt tham s chui truy vn callback c gn vo trc tp kt qu v s c tr v cho
ngi dng.
minh ho cho k thut ny, chng ta ch cn sa i mt cht v d v JSON trn gi
ngun d liu t xa. Hm $.getJSON() tn dng k t gi ch c bit, ?, lm c vic
ny.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var url = 'http://examples.learningjquery.com/jsonp/g.php';
$('#letter-g a').click(function() { $.getJSON(url + '?callback=?',
function(data) {
html += '<h3 class="term">' + entry['term']
+ '</h3>';
html += '<div class="part">' + entry['part']
+ '</div>';
if (entry['quote']) {
$.each(entry['quote'], function(lineIndex, line) {
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
html += '<div class="quote-line">' + line
+ '</div>';
});
if (entry['author']) {
html += '<div class="quote-author">'
+ entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
});
});
return false;
});
});
Thng th chng ta khng c php truy xut JSON t mt server xa. Nhng bi v file
ny c to nn cung cp d liu ca n di dng JSONP, chng ta c th ly d liu
ny bng cch gn mt chui truy vn vo URL, s dng du ? lm ni lu gi cho gi tr
ca tham s hm truy hi. Khi truy vn c to, jQuery s thay th du ? cho chng ta,
phn tch kt qu, v chuyn n n hm di dng d liu nh th l mt truy vn JSON
ni b.
Bn cng nn lu v vn bo mt y nh trc, bt c ci g server tr v n trnh
duyt u s c thc hin trong my tnh ca ngi dng. K thut JSONP ch nn c
s dng vi d liu n t cc ngun c ng tin cy.
La chn thm
B cng c AJAX c cung cp bi jQuery rt y . Chng ta xem qua mt s la
chn, nhng mi ch l b ni ca tng bng. C qu nhiu th c th ni n trong
phn ny, do vy chng ta ch khi qut qua mt s nhng cch ph bin ty bin giao tip
AJAX.
Phng php AJAX cp thp
Chng ta thy mt s phng php khi ng giao tc AJAX. Nhng ng sau hu
trng, jQuery gom mi mt phng thc ny vo nhng hm $.ajax() ton cc khc nhau.
Thay v phng on mt dng s kin AJAX, hm ny ly vo mt biu cc s la chn
m c th c s dng ty bin ch ca n.
V d u tin m chng ta s dng $(#dictionary).load(a.html) ti mt on m
HTML. Cch ny c th c thay th bng phng thc $.ajax() nh sau:
?
1
2
3
4
5
6
7
8
$.ajax({
url: 'a.html',
type: 'GET',
dataType: 'html',
success: function(data) {
}
});
Chng ta cn phi ht sc c th vi phng thc truy vn, loi d liu tr v, v s lm g
vi kt qu d liu . Ci ny c v hi tn cng sc nhng b li vi cng sc bn b ra l
thnh qu m mn. Mt vi trong s nhng kh nng c bit khi s dng vi nhng phng
thc $.ajax() cp thp bao gm:
Ngn khng cho trnh duyt lu li s phn hi t server. iu ny c ch khi m
server t ng to ra d liu ca n.
ng k ring bit hm truy hi cho d khi lnh truy vn thc hin thnh cng, b li
hoc trong tt c cc trng hp.
Chn b x l ton cc (nh l b x l ng k vi $.ajaxStart()) m thng c
khi ng bi tt c cc tng tc AJAX.
Cung cp Username v mt khu xc nhn vi host t xa.
Ch : bit thm chi tit v cch s dng nhng la chn khc, xem thm phn jQuery
Reference Guide hoc xem phn API Reference ti (http://docs.jquery.com/Ajax/jQuery.ajax).
Chnh sa ty chn mc nh
Hm $.ajaxSetup() cho php chng ta nh r gi tr mc nh ca mi ty chn c s
dng khi phng thc AJAX c gi. N cng ly vo mt biu ty chn ging y nh
biu c trong bn thn $.ajax(), v lm cho nhng gi tr ny c s dng cho nhng truy
vn AJAX v sau tr khi c ci khc mnh hn.
?
1
2
3
4
5
6
7
8
9
10
11
$.ajaxSetup({
url: 'a.html',
type: 'POST',
dataType: 'html'
});
$.ajax({
type: 'GET',
success: function(data) {
}
});
Dy thao tc ny hot ng ging nh v d trc l $.ajax(). Bn nn ch rng URL ca
lnh truy vn c xc nh lm gi tr mc nh bi cuc gi $.ajaxSetup(), cho nn gi tr
ny c th c b trng khi $.ajax() c gi. Ngc li, tham s type c gi tr mc nh l
POST, nhng n vn b ln bi cuc gi $.ajax() n GET.
Ti cc phn ca mt trang HTML
K thut u tin v cng l n gin nht m chng ta tho lun trn l truy xut mt
on code HTML v chn n vo mt trang. Nhng cng c khi server cung cp cho ta
on HTML mnh cn nhng n li b bao quanh bi mt trang HTML khc m ta khng
mun. Khi m vic yu cu server cung cp nh dng chng ta mun khng thun tin,
jQuery c th gip chng ta pha ngi dng.
Hy tng tng trng hp nh v d u tin, nhng trang cha cc t mc li l mt
trang HTML hon chnh nh sau:
?
1
2
3
4
5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>The Devil's Dictionary: H</title>
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link rel="stylesheet" href="dictionary.css"
type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>The Devil's Dictionary: H</h2>
<div class="author">by Ambrose Bierce</div>
</div>
<div id="dictionary">
<div class="entry">
<h3 class="term">HABEAS CORPUS</h3>
A writ by which a man may be taken out of jail
when confined for the wrong crime.
</div>
</div>
<div class="entry">
<h3 class="term">HABIT</h3>
A shackle for the free.
</div>
</div>
</div>
</div>
</body>
</html>
34
35
Chng ta c th ti ton b ti liu vo trong trang bng cch s dng on m ta vit trc
y:
?
1
2
3
4
5
6
$('#letter-h a').click(function() {
$('#dictionary').load('h.html');
return false;
});
});
Bn thy trang web khng c bnh thng bi v n cha nhng on HTML chng ta
khng mun thm vo.
loi b nhng on d ny, chng ta c th s dng mt tnh nng mi ca phng thc
.load(). Khi bn khai bo URL ca ti liu cn ti, chng ta cng c th cung cp mt biu
thc b chn jQuery. Nu khai bo, biu thc ny s c s dng xc nh mt phn
m ca ti liu. Ch nhng phn no ph hp vi b chn mi c chn vo trang. Trong
trng hp ny, chng ta c th s dng k thut ny ko ch nhng mc t nm trong ti
liu v chn n:
?
1
2
3
4
5
6
$('#letter-h a').click(function() {
$('#dictionary').load('h.html .entry');
return false;
});
});
By gi nhng phn khng lin quan ca ti liu loi b khi trang
Tm tt
Chng ta hc c rng nhng phng thc AJAX cung cp bi jQuery c th gip chng
ta ti d liu di mt s nh dng khc nhau t server m khng cn phi refresh li trang.
Chng ta c th thc hin m t server khi cn v gi d liu quay li server.
Chng ta cng hc c cch x l vi nhng kh khn thng gp ca k thut ti khng
ng b nh l gi b x l nguyn v tr khi qu trnh ti bt u v ti d liu t mt
server th 3.
Chng ny khp li phn tutorial ca cun sch. Chng ta c nhng cng c ch
yu ca jQuery: b chn, s kin, hiu ng, thao tc DOM v truy vn server khng ng b.
y khng phi l tt c jQuery c th h tr ta, chng ta s tm hiu thm v mt vi tnh
nng m cc jQuery Plugin em li trong chng ti. Nhng trc ht, chng ta hy xem xt
nhng kt hp ca cc k thut hc lm cho trang web ca chng ta hp dn hn.

Ti liu tng hp t:
- http://www.izwebz.com/
- Microsoft Vietnam DPE Team

JQuery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery

Uploaded by

Copyright:

Available Formats

Contents

Chng1 - Gii thiu v jQuery...................................................................................................... 1

You might also like