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><!--end #sidebar--> <div id="primary"> <h3>Lorem ipsum dolor sit amet</h3> <p class="text"> some text here

</p> <div> <h3>Lorem ipsum dolor sit amet</h3> <p> some text here </p> </div> <h3>Lorem ipsum dolor sit amet</h3> <p class="text"> some text here </p> </div><!--end #primary--> </div><!--end #mainContent--> <div id="footer"> <p>&copy;2010 Izwebz - Demon Warlock</p> </div><!--end #footer--> </div><!--end #wrapper--> </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 <li><a <li><a <li><a href="#">Home Page</a></li> href="#">About Me</a></li> href="#">Forum</a></li> 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.
$(document).ready(function() { $('#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:
$(document).ready(function() {

$('#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 { padding-right: 20px; background: url(images/pdf.png) no-repeat right center; } .hyperlink { padding-right: 20px; 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:
$(document).ready(function() { $('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.
$(document).ready(function() { $('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.
$(document).ready(function() { $('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 ( ).
$(document).ready(function() { $('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:
$(document).ready(function() { $('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.
$(document).ready(function() { $('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().

$(document).ready(function() { $('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().
$(document).ready(function() { $('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():
$(document).ready(function() { $('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:
$(document).ready(function() { $('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=myelement, 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"> $(document).ready(function() { $("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:

$(document).ready(function() { //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:

$(document).ready(function() { $('#switcher-green').bind('click', function() { $('body').addClass('green'); }); });

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:
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass('red').removeClass('green'); }); $('#switcher-red').bind('click', function(){ $('body').addClass('red').removeClass('green'); }); $('#switcher-green').bind('click', function() { $('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.
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass('red').removeClass('green');

$('#switcher .button').removeClass('selected'); $(this).addClass('selected') }); $('#switcher-red').bind('click', function(){ $('body').addClass('red').removeClass('green'); $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-green').bind('click', function() { $('body').addClass('green').removeClass('red'); $('#switcher .button').removeClass('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:
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass('red').removeClass('green'); }); $('#switcher-red').bind('click', function(){ $('body').addClass('red').removeClass('green'); }); $('#switcher-green').bind('click', function() { $('body').addClass('green').removeClass('red'); }); $('#switcher .button').bind('click', function() { $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });

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.
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass(); }); $('#switcher-red').bind('click', function(){ $('body').removeClass().addClass('red'); }); $('#switcher-green').bind('click', function() { $('body').removeClass().addClass('green'); }); $('#switcher .button').bind('click', function() { $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });

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:
$(document).ready(function() { $('#switcher .button').bind('click', function() { $('body').removeClass(); $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); $('#switcher-red').bind('click', function(){ $('body').removeClass().addClass('red'); }); $('#switcher-green').bind('click', function() { $('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.
$(document).ready(function() { $('#switcher .button').bind('click', function() { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });

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:
$(document).ready(function() { $('#switcher .button').click(function() { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });

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:
$(document).ready(function() { $('#switcher h3').toggle(function() { $('#switcher .button').addClass('hidden');

}, function() { $('#switcher .button').removeClass('hidden'); }); $('#switcher .button').click(function() { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });

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
$(document).ready(function() { $('#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:
$(document).ready(function() { $('#switcher h3').click(function() { $('#switcher .button').toggleClass('hidden') }); $('#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() { $('#switcher .button').toggleClass('hidden') });

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) { $('#switcher .button').toggleClass('hidden') });

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:
$('#switcher').click(function(event) { if(event.target == this) { $('#switcher .button').toggleClass('hidden') }

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) { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); 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.
$('#switcher .button').click(function(event) { if($(event.target).is('.button')) { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); 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.
$(document).ready(function() { $('#switcher').click(function(event) { if (!$(event.target).is('.button')) { $('#switcher .button').toggleClass('hidden'); } }); $('#switcher .button').click(function(event) { if($(event.target).is('.button')) { $('body').removeClass(); if (this.id == 'switcher-red') { $('body').addClass('red'); } else if (this.id == 'switcher-green') { $('body').addClass('green'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); } }); });

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.
$(document).ready(function() { $('#switcher').click(function(event) { 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><!--End #switcher--> <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><!--End .speech-->

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 $(#switcherlarge).click()
$(document).ready(function() { $('#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.
$(document).ready(function() { var $speech = $('div.speech'); //lu i tng jQuery vo bin $speech $('#switcher-large').click(function() { 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
$(document).ready(function() { var $speech = $('div.speech'); $('#switcher-large').click(function() { 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.

Xem Demo online Example 2 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.
$(document).ready(function() { var $speech = $('div.speech');

$('#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.
$(document).ready(function() { var $speech = $('div.speech'); var defaultSize = $speech.css('fontSize'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); 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. Xem Demo online Example 3
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"> <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><!--End #switcher--> <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> <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> <a href="#" class="more">Read More</a>

Khi DOM sn sng th on vn th hai b n i

$(document).ready(function() { $('p:eq(1)').hide(); });

Xem Demo online Example 4 Khi ng link Read More c click th on vn th 2 s xut hin v ch Read More s b n i
$(document).ready(function() { $('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.
$(document).ready(function() { $('p:eq(1)').hide(); $('a.more').click(function() { $('p:eq(1)').show('slow'); $(this).hide(); return false; }); });

Xem Demo online Example 5

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):
$(document).ready(function() { $('p:eq(1)').hide(); $('a.more').click(function() { $('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:
$(document).ready(function() {

var $firstPara = $('p:eq(1)'); $firstPara.hide(); $('a.more').click(function() { 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().
$(document).ready(function() { var $firstPara = $('p:eq(1)'); $firstPara.hide(); $('a.more').click(function() { $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.
$(document).ready(function() { $('p:eq(1)').hide(); $('a.more').click(function() { $('p:eq(1)').animate({opacity: 'toggle'}, 'slow'); var $link = $(this); if ( $link.text() == "read more" ) { $link.text('read less'); } else { $link.text('read more'); } 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().
$(document).ready(function() { $('p:eq(1)').hide(); $('a.more').click(function() { $('p:eq(1)').animate({ opacity: 'toggle', height: 'toggle' }, 'slow'); var $link = $(this); if ( $link.text() == "read more" ) { $link.text('read less'); } else { $link.text('read more'); } 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().
$(document).ready(function() { var $speech = $('div.speech'); var defaultSize = $speech.css('fontSize'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); 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
$(document).ready(function() { $('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 Blocklevel 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

Xem Demo online Example 6

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
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $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.
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $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().
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('fast',0.5) .animate({ 'left': paraWidth - switcherWidth }, {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:
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth();

var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('fast',0.5) .animate({ 'left': paraWidth - switcherWidth }, '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.
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('fast',0.5) .animate({ 'left': paraWidth - switcherWidth }, 'slow') .fadeTo('slow',1.0) .slideUp('slow') .queue(function() { $switcher .css('backgroundColor', '#f00') .dequeue(); }) .slideDown('slow'); }); });

Xem Demo Online Example 8 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"> <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><!--End #switcher--> <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> <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> <a href="#" class="more">Read More</a> <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> <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> </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.
$(document).ready(function() { $('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.
$(document).ready(function() { $('p:eq(2)') .css('border', '1px solid #333') .click(function() { $(this).slideUp('slow') .next().slideDown('slow'); }); $('p:eq(3)').css('backgroundColor', '#ccc').hide(); });

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.
$(document).ready(function() { $('p:eq(2)') .css('border', '1px solid #333') .click(function() { $(this).next().slideDown('slow',function() { // on m ny s chy sau khi oan vn th 3 dng li });

}); $('p:eq(3)').css('backgroundColor', '#ccc').hide(); });

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.
$(document).ready(function() { var $thirdPara = $('p:eq(2)'); $thirdPara .css('border', '1px solid #333') .click(function() { $(this).next().slideDown('slow',function() { $thirdPara.slideUp('slow'); }); }); $('p:eq(3)').css('backgroundColor', '#ccc').hide(); });

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.
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('slow',0.5) .animate({ 'left': paraWidth - switcherWidth }, '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><!--End .chapter-->

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:
$(document).ready(function() { $('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().
$(document).ready(function() { $('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.
$(document).ready(function() { $('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:
$(document).ready(function() { $('<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().
$(document).ready(function() { $('<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.
$(document).ready(function() { $('<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.

Xem Demo Online Example 3

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> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span class="footnote">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas 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> Pellentesque habitant morbi tristique senectus et netus et 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> 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. <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
$(document).ready(function() { $('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 &lt;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.

Xem Demo Online Example 4

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.
$(document).ready(function() { $('<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.

$(document).ready(function() { $('<ol id="notes"></ol>').insertAfter('div.chapter'); $('span.footnote').each(function(index) { $(this) .before( ['<a href="#foot-note-', index+1, '" id="context-', index+1, '" class="context">', '^{' + (index+1) + '}', '</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">¹</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">^{' + (index+1) + '}</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.

$(document).ready(function() { $('<ol id="notes"></ol>').insertAfter('div.chapter'); $('span.footnote').each(function(index) { $(this) .before( ['<a href="#foot-note-', index+1, '" id="context-', index+1, '" class="context">', '^{' + (index+1) + '}', '</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.
$(document).ready(function() { $('<ol id="notes"></ol>').insertAfter('div.chapter'); $('span.footnote').each(function(index) { $(this) .before( ['<a href="#foot-note-', index+1, '" id="context-', index+1, '" class="context">', '^{' + (index+1) + '}', '</a>' ].join('') ) .appendTo('#notes') .append( '&nbsp;(<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:
$(document).ready(function() { $('<ol id="notes"></ol>').insertAfter('div.chapter'); $('span.footnote').each(function(index) { $(this) .before( ['<a href="#foot-note-', index+1, '" id="context-', index+1, '" class="context">', '^{' + (index+1) + '}', '</a>' ].join('') ) .appendTo('#notes') .append( '&nbsp;(<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.

Xem Demo Online Example 6 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.
$(document).ready(function() { $('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 $(document).ready(function() { $('span.pull-quote').each(function(index) { 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
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); $(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.
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $clonedCopy = $(this).clone(); $clonedCopy .addClass('pulled') .find('span.drop') .html('&hellip;') .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.
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $clonedCopy = $(this).clone(); $clonedCopy .addClass('pulled') .find('span.drop') .html('&hellip;') .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; }

Xem Demo Online Example 7 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 &mdash;</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> <div class="definition"> 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.
$(document).ready(function() { $('#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
$(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').load('a.html'); 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:
$(document).ready(function() { $('#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:

$(document).ready(function() { $('#letter-b a').click(function() { $.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.
$(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('b.json', function(data) { $('#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.
$(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('b.json', function(data) { $('#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']; 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>'; $('#dictionary').append(html); }); }); 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.
$(document).ready(function() { $('#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
$(document).ready(function() { $('#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.
$(document).ready(function() { $('#letter-d a').click(function() { $.get('d.xml', function(data) { $('#dictionary').empty(); $(data).find('entry').each(function() { var $entry = $(this); var html = '<div class="entry">'; html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; html += '<div class="part">' + $entry.attr('part') + '</div>'; html += '<div class="definition">'; html += $entry.find('definition').text();

var $quote = $entry.find('quote'); if ($quote.length) { html += '<div class="quote">'; $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 <?php 2 $entries = array( 3 'EAVESDROP' => array( 4 'part' => 'v.i.', 5 'definition' => 'Secretly to overhear a catalogue of the 6 crimes and vices of another or yourself.', 7 'quote' => array( 8 9
'A lady with one of her ears applied', 'To an open keyhole heard, inside,', 'Two female gossips in converse free &mdash;', 'The subject engaging them was she.',

10 11

'"I think," said one, "and my husband thinks',

12
'That she\'s a prying, inquisitive minx!"',

13
'As soon as no more of it she could hear',

14 15

'The lady, indignant, removed her ear.', '"I will not stay," she said, with a pout,',

16'"To hear my character lied about!"', 17), 18'author' => 'Gopete Sherany', 19), 20'EDIBLE' => array( 21'part' => 'adj.', 22'definition' => 'Good to eat, and wholesome to digest, as 23
a worm to a toad, a toad to a snake, a snake to a pig,

24a pig to a man, and a man to a worm.', 25), 26'EDUCATION' => array( 27 28 29 30
), 'part' => 'n.', 'definition' => 'That which discloses to the wise and disguises from the foolish their lack of understanding.',

31
);

32
?>

33 34

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 <?php 2 $term = strtoupper($_REQUEST['term']); 3 4 5 6
$html .= $term; if (isset($entries[$term])) { $entry = $entries[$term]; $html = '<div class="entry">'; $html .= '<h3 class="term">';

7
$html .= '</h3>';

8
$html .= '<div class="part">';

$html .= $entry['part']; $html .= '</div>';

10

11$html .= '<div class="definition">'; 12$html .= $entry['definition']; 13if (isset($entry['quote'])) {

14$html .= '<div class="quote">'; 15foreach ($entry['quote'] as $line) { 16$html .= '<div class="quote-line">'. $line .'</div>'; 17 18 19 20
} } if (isset($entry['author'])) { $html .= '<div class="quote-author">'. $entry['author'] .'</div>';

21
$html .= '</div>';

22
}

23 24

$html .= '</div>'; $html .= '</div>';

25print($html); 26} 27?> 28 29

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
<div class="letter" id="letter-e">

2
<h3>E</h3>

3 4

<ul> <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>

5 <li><a href="e.php?term=Edible">Edible</a></li> 6 <li><a href="e.php?term=Education">Education</a></li> 7 <li><a href="e.php?term=Eloquence">Eloquence</a></li> 8 <li><a href="e.php?term=Elysium">Elysium</a></li> 9 <li><a href="e.php?term=Emancipation">Emancipation</a> 10</li> 11<li><a href="e.php?term=Emotion">Emotion</a></li> 12 13 14 15
</ul> <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>

16
</div>

17

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$(document).ready(function() { 2$('#letter-e a').click(function() { 3$.get('e.php', {'term': $(this).text()}, function(data) {

4$('#dictionary').html(data); 5}); 6return false; 7 8

}); });

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$(document).ready(function() { 2$('#letter-e a').click(function() { 3$.post('e.php', {'term': $(this).text()}, function(data) { 4$('#dictionary').html(data); 5}); 6return false; 7}); 8
});

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$(document).ready(function() { 2$('#letter-e a').click(function() { 3$('#dictionary').load('e.php', {'term': $(this).text()}); 4return false; 5}); 6});

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<div class="letter" id="letter-f"> 2<h3>F</h3> 3<form> 4<input type="text" name="term" value="" id="term" /> 5<input type="submit" name="search" value="search" 6id="search" /> 7</form> 8
</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
$html .= '<h3 class="term">'; foreach ($entries as $term => $entry) { if (strpos($term, strtoupper($_REQUEST['term'])) !== FALSE) { $html = '<div class="entry">';

6
$html .= $term;

7
$html .= '</h3>';

8 9

$html .= '<div class="part">'; $html .= $entry['part'];

10$html .= '</div>'; 11$html .= '<div class="definition">'; 12$html .= $entry['definition']; 13if (isset($entry['quote'])) { 14foreach ($entry['quote'] as $line) { 15$html .= '<div class="quote-line">'. $line .'</div>'; 16} 17if (isset($entry['author'])) { 18 19 20
} $html .= '<div class="quote-author">'. $entry['author'] .'</div>'; }

21
$html .= '</div>';

22
$html .= '</div>';

23
print($html);

24 25 26

} }

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$(document).ready(function() { 2$('#letter-f form').submit(function() { 3$('#dictionary').load('f.php', 4{'term': $('input[name="term"]').val()}); 5return false; 6}); 7
});

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$(document).ready(function() { 2$('#letter-f form').submit(function() { 3$.get('f.php', $(this).serialize(), function(data) { 4$('#dictionary').html(data); 5}); 6return false; 7}); 8
});

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">

2Loading... 3</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$(document).ready(function() { 2$('<div id="loading">Loading...</div>') 3.insertBefore('#dictionary') 4});

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():
?
$(document).ready(function() {

1
$('<div id="loading">Loading...</div>')

2
.insertBefore('#dictionary')

3.ajaxStart(function() { 4$(this).show(); 5}); 6 7

});

Chng ta kt hp phng thc .hide() lun vo y

? 1$(document).ready(function() { 2$('<div id="loading">Loading...</div>') 3.insertBefore('#dictionary') 4.ajaxStart(function() { 5$(this).show(); 6}).ajaxStop(function() { 7$(this).hide(); 8 9
}); });

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$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').load('a.html'); 4return false; 5}); 6});

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$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').hide().load('a.html', function() { 4$(this).fadeIn(); 5}); 6return false; 7}); 8
});

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
?
$(document).ready(function() {

1
$('.term').click(function() {

2
$(this).siblings('.definition').slideToggle();

3
});

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$(document).ready(function() { 2$('.term').live('click', function() { 3$(this).siblings('.definition').slideToggle(); 4}); 5});

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$(document.createElement('script')) 2.attr('src', 'http://example.com/example.js') 3.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<?php 2print($_GET['callback'] .'('. $data .')'); 3?>

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
$('#letter-g a').click(function() { $.getJSON(url + '?callback=?', $(document).ready(function() { var url = 'http://examples.learningjquery.com/jsonp/g.php';

3 function(data) { 4 $('#dictionary').empty(); 5 $.each(data, function(entryIndex, entry) { 6 var html = '<div class="entry">'; 7 html += '<h3 class="term">' + entry['term'] 8 9
+ '</h3>'; html += '<div class="part">' + entry['part'] + '</div>'; html += '<div class="definition">';

10 11

html += entry['definition'];

12
if (entry['quote']) {

13
html += '<div class="quote">';

14

$.each(entry['quote'], function(lineIndex, line) {

15html += '<div class="quote-line">' + line 16+ '</div>'; 17}); 18 19 20 21

html += '</div>'; if (entry['author']) { html += '<div class="quote-author">' + entry['author'] + '</div>'; }

22
}

23
html += '</div>';

24 25

html += '</div>'; $('#dictionary').append(html);

26}); 27}); 28return false; 29}); 30}); 31 32

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$.ajax({ 2url: 'a.html', 3type: 'GET', 4dataType: 'html', 5success: function(data) { 6$('#dictionary').html(data); 7} 8
});

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
$.ajaxSetup({

2 url: 'a.html', 3 type: 'POST', 4 dataType: 'html' 5 }); 6 $.ajax({ 7 type: 'GET', 8 success: function(data) { 9 $('#dictionary').html(data); 10 11
} });

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
<head> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

3
<meta http-equiv="Content-Type"

4
content="text/html; charset=utf-8"/>

<title>The Devil's Dictionary: H</title>

6 <link rel="stylesheet" href="dictionary.css" 7 type="text/css" media="screen" /> 8 </head> 9

<body> <div id="container"> <div id="header"> <h2>The Devil's Dictionary: H</h2>

10 11 12

<div class="author">by Ambrose Bierce</div>

13
</div>

14
<div id="dictionary">

15 16

<div class="entry"> <h3 class="term">HABEAS CORPUS</h3>

17<div class="part">n.</div> 18<div class="definition"> 19A writ by which a man may be taken out of jail 20when confined for the wrong crime. 21</div> 22</div> 23<div class="entry"> 24 25 26 27
</div> <h3 class="term">HABIT</h3> <div class="part">n.</div> <div class="definition"> A shackle for the free.

28
</div>

29
</div>

30 31

</div> </body>

32</html> 33

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$(document).ready(function() { 2$('#letter-h a').click(function() { 3$('#dictionary').load('h.html'); 4return false; 5}); 6});

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$(document).ready(function() { 2$('#letter-h a').click(function() { 3$('#dictionary').load('h.html .entry'); 4return false; 5}); 6});

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