Chng 1: Gi i thi u v jQuery

V i s pht tri n r t mau l c a Internet, ng i dng ngy cng quan tm hn n hnh th c c a m t trang web. Tr c y m t trang web ch c n c banner, n i dung v t footer h i h t l c cho l m t trang web hon ch nh. Nhng by gi trang web ph i c banner b t m t, n i dung hay v cn nhi u hi u ng l m t khc n a th m i c th thu ht c ng i c. Chnh v th nh ng web designer b t u ch n cc th vi n JavaScript m nh jQuery t o ra cc hi u ng c th tng tc tr c ti p v i ng i c m t cch nhanh chng v d dng hn r t nhi u l s d ng thu n JavaScript.

Nhng n u b n l ng i m i lm quen v i jQuery b n s th y khng bi t ph i b t u t u v jQuery cng gi ng nh b t c th vi n no khc cng c r t nhi u functions. Cho d b n c c ph n ti li u h ng d n s d ng c a jQuery th b n v n th y r t ph c t p v kh hi u. Nhng b n yn tm m t i u l jQuery c c u trc r t m ch l c v theo h th ng. Cch vi t code c a jQuery c vay m n t cc ngu n m cc web designer a ph n bi t nh HTML v CSS. N u t tr c n nay b n ch l Designer ch khng ph i coder, b n cng c th d dng h c jQuery v ki n th c v CSS gip b n r t nhi u khi b t u v i jQuery.

Nh n th y jQuery cn kh m i m v i nhi u b n v n cng l th vi n c ng o ng i s d ng. Izwebz gi i thi u n cc b n lo t bi v jQuery. Trong lo t bi ny chng ta s tm hi u v jQuery v cc tnh nng c a n. Tr c h t b n nn bi t jQuery c th lm c nh ng g.

Jquery izwebz.com

Demon Warlock

Nh ng g Jquery c th lm
H ng t i cc thnh ph n trong ti li u HTML. N u khng s d ng th vi n JavaScript ny, b n ph i vi t r t nhi u dng code m i c th t c m c tiu l di chuy n trong c u trc cy (hay cn g i l DOM = Document Object Model) c a m t ti li u HTML v ch n ra cc thnh ph n lin quan. Jquery cho php b n ch n b t c thnh ph n no c a ti li u v c m t cch d dng nh s d ng CSS.

Thay i giao di n c a m t trang web. CSS l cng c r t m nh nh d ng m t trang web nhng n c m t nh c i m l khng ph i t t c cc trnh duy t u hi n th gi ng nhau. Cho nn jQuery ra i l p ch tr ng ny, v v y cc b n c th s d ng n gip trang web c th hi n th t t trn h u h t cc trnh duy t. Hn n a jQuery cng c th thay i class ho c nh ng nh d ng CSS c p d ng ln b t c thnh ph n no c a ti li u HTML ngay c khi trang web c trnh duy t load thnh cng.

Thay i n i dung c a ti li u. Jquery khng ph i ch c th thay i b ngoi c a trang web, n cng c th thay i n i dung c a chnh ti li u ch v i vi dng code. N c th thm ho c b t n i dung trn trang, hnh nh c th c thm vo ho c i sang hnh khc, danh sch c th c s p x p l i ho c th m ch c c u trc HTML c a m t trang web cng c th c vi t l i v m r ng. T t c nh ng i u ny b n hon ton c th lm c nh s gip c a API (Application Programming Interface = Giao di n l p trnh ng d ng).

Tng tc v i ng i dng. Cho d cng c b n dng c m nh m n m y, nhng n u b n khng c quy n quy t nh khi no n c s d ng th cng c cng coi nh b . V i th vi n javaScript nh jQuery, n cho b n nhi u cch tng tc v i ng i dng v d nh khi ng i dng nh p chu t vo ng link th s c g x y ra. Nhng ci hay c a n l khng lm cho code HTML c a b n

Jquery izwebz.com

Demon Warlock

r i tung ln chnh l nh cc Event Handlers. Hn n a Event Handler API s b o m r ng trang web c a b n tng thch h u h t v i cc trnh duy t, i u ny v ang lm au u r t nhi u cc web designer.

T o hi u

ng ng cho nh ng thay i c a ti li u. tng tc t t v i ng i dng, cc web

designer ph i cho ng i dng th y c hi u ng g s x y ra khi h lm m t tc v no . Jquery cho php b n s d ng r t nhi u hi u ng ng nh m d n, ch y d c ch y ngang v.v.. v n u v n cha , n cn cho php b n t t o ra cc hi u ng c a ring mnh.

L y thng tin t server m khng c n t i l i trang web. y chnh l cng ngh ngy cng tr nn ph bi n Asynchronous JavaScript And XML (AJAX), n gip ng i thi t k web t o ra nh ng trang web tng tc c c t t v nhi u tnh nng. Th vi n jQuery lo i b s ph c t p c a trnh duy t trong qu trnh ny v cho php ng i pht tri n web c th t p trung vo cc tnh nng u cu i.

n gi n ho cc tc v javaScript. Ngoi nh ng tnh nng nh nu

trn, jQuery cn cho

php b n vi t code javaScript n gi n hn nhi u so v i cch truy n th ng nh l cc vng l p v i u khi n m ng.

Jquery izwebz.com

Demon Warlock

T i sao jQuery lm vi c t t
Ng i dng ngy cng quan tm hn n Dynamic HTML, cng l n n mng cho s ra i c a nh ng javaScript Frameworks. C frameworks th ch t p trung vo m t vi tnh nng v a nn trn,

c ci th rng bao g m t t c nh ng hi u ng, t p tnh v nh i nht vo m t package. m b o l m t th vi n nhanh g n nh nhng v n ngon b r v i cc tnh nng nu d ng nh ng chi n l c sau: trn, jQuery s

T n d ng ki n th c v CSS. Cc jQuery Selector ho t ng y chang nh CSS Selector v i cng c u trc v c php. Chnh v th th vi n jQuery l c a ng cho cc web designer mu n thm nhi u tnh nng hn n a cho trang web c a mnh. B i v i u ki n tin quy t tr thnh m t web designer chuyn nghi p l kh nng s d ng CSS thu n th c. V i ki n th c c s n v CSS, b n s c s kh i u thu n l i v i jQuery.

H tr Plugin. trnh b ri vo tr ng thi qu t i tnh nng, jQuery cho php ng i dng t o v s d ng Plugin n u c n. Cch t o m t plugin m i cng kh n gi n v c h ng d n c th , chnh v th c ng ng s d ng jQuery t o ra m t lo t nh ng plugin y tnh sng t o v h u d ng. Xo nho s khc bi t gi a trnh duy t. M t th c t t n t i l m i m t h th ng trnh duy t l i c m t ki u ring c trang web. D n n m t i u lm au u cc web designer l lm th no cho trang web c th hi n th t t trn m i trnh duy t. Cho nn i khi ng i ta ph i lm h n m t ph n code ph c t p m b o r ng trang web c a h c hi n th g n nh tng ng cc trnh

duy t ph bi n. Jquery gip b n thm m t l p b o v cho s khc bi t c a trnh duy t v gip qu trnh ny di n ra d dng hn r t nhi u.

Jquery izwebz.com

Demon Warlock

Lun lm vi c v i Set. V d khi chng ta yu c u jQuery tm t t c cc thnh ph n c class l delete v n chng i. Chng ta khng c n ph i loop qua t ng thnh ph n c tr v . Thay vo , nh ng phng php nh l hide() c thi t k ra lm vi c v i set thay v t ng thnh ph n n l . K thu t ny c g i l vng l p n, i u c ngha l chng ta khng ph i t vi t code loop n a m n v n c th c thi, chnh v th code c a chng ta s ng n hn r t nhi u.

Cho php nhi u tc v di n ra trn cng m t dng. trnh ph i s d ng nh ng bi n t m ho c cc tc v l p t n th i gian, jQuery cho php b n s d ng ki u l p trnh c g i l Chaining cho h u h t cc method c a n. i u c ngha l k t qu c a cc tc v c ti n hnh trn m t thnh ph n chnh l thnh ph n , n s n sng cho tc v ti p theo c p d ng ln n.

Nh ng chi n l c c nu

trn gip kch th c c a jQuery r t nh b ch kho ng trn d i 20Kb

d ng nn. Nhng v n m b o cung c p cho chng ta nh ng k thu t gip code trn trang nh g n v m ch l c.

Jquery s d tr nn ph bi n l do cch s d ng n gi n v bn c nh cn c m t c ng ng s d ng m nh m v n ngy ngy pht tri n thm Plugin v hon thi n nh ng tnh nng tr ng tm c a jQuery. Cho d th c t l v y, nhng jQuery l i l th vi n javaScript hon ton mi n ph cho m i ng i s d ng. T t nhin n c b o v b i lu t GNU Public License v MIT License, nhng b n c yn tm l b n c th s d ng n trong h u h t cc tr ng h p k c thng m i l n c nhn.

Jquery izwebz.com

Demon Warlock

T o trang web u tin v i s

h tr c a jQuery

B i v jQuery l m t th vi n JavaScript do v y s d ng n b n phi chn n vo trang web th m i c th s d ng c. C hai cch chn jQuery vo m t trang web.

1. T host jQuery Vo trang ch c a jQuery (www.jquery.com) v download phin b n m i nh t. Th ng th c 2 phin b n c a jQuery cho b n download. Phin b n cha nn dnh cho nh ng ng i pht tri n v ang h c nh b n. Cn phin b n nn kia dnh cho ph n s d ng tr c ti p trn trang v n c dung l ng nh hn r t nhi u so v i phin b n cha nn. B n khng c n ph i ci t jQuery, b n ch c n t ng link t i th vi n l c. B t c khi no b n c n s d ng jQuery, b n ch c n g i n trong ti li u HTML n ni lu tr n trn host c a b n.

2. Dng phin b n c s n trn server c a Google Ngoi cch trn ra b n cng c th s d ng phin b n nn c a jQuery c s n trn server c a Google. S d ng cch ny c 2 i u l i l a) ti t ki m bng thng cho trang web c a b n v b) jQuery s c load nhanh hn n u my c a ng i dng cache jQuery. Tuy nhin trong ph n s p t i chng ta s s d ng phin b n c s n trn server c a Google m khng c n ph i download v my.

Chu n b ti li u HTML Trong h u h t cc v d c s d ng trong lo t bi ny th c 3 thnh ph n c s d ng nhi u nh t chnh l ti li u HTML, Stylesheet CSS v m t ti li u JavaScript th c hi n l nh trn . Trong v d u tin chng ta s s d ng m t ti li u HTML n gi n v i m t header, sidebar, content v footer. Trong ph n content s c 3 o n vn b n v m t s class c s n. T t nhin b n ph i s d ng CSS nh d ng cho ti li u HTML ny. B i v y l tutorial v jQuery cho nn ti s khng

Jquery izwebz.com

Demon Warlock

gi i thch v cc thu c tnh cng nh ch c nng c a CSS. N u c i m no khng r b n c th tham kh o ph n 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>

Jquery izwebz.com

Demon Warlock

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

o n code trn b n d dng nh n th y r ng th vi n jQuery c t

d i Stylesheet. y l

m t i m r t quan tr ng m b n c n lu l th t c a cc file khi g i. Ban u ph i l CSS load tr c, khi trang web load xong ph n CSS th chng ta m i thm vo ph n th vi n jQuery cu i cng m i l code jQuery chng ta t vi t ra. N u khng khi code jQuery c a b n s khng lm vi c ng nh mong i n u th vi n jQuery cha c load.

Jquery izwebz.com

Demon Warlock

B t u code jQuery
By gi b n m trnh so n th o code ln v t o m t 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 v a t o 3 dng code nh sau: $(document).ready(function() { $('.text').addClass('important'); }); Thao tc c b n nh t c a jQuery l ch n m t ph n no c a ti li u HTML. B n ti n hnh n b ng cch s d ng hm $(). Th ng th n m gi a d u ngo c () l m t chu i d i d ng tham s , n c th l nh ng CSS Selectors. Trong v d ny chng ta mu n tm t t c nh ng thnh ph n no c class=text, c php gi ng nh khi b n vi t code CSS v y. T t nhin nh ng bi sau chng ta s

tham kh o thm nhi u nh ng l a ch n khc hay hn n a. Trong chng 2 chng ta s nghin c u m t vi cch khc l a ch n cc thnh ph n trong ti li u HTML.

Hm $() chnh l m t jQuery Object, y l nn mng cho t t c nh ng g chng ta s h c t by gi . Jquery Object bao g m khng ho c nhi u thnh ph n DOM v cho php chng ta tng tc v i chng b ng nhi u cch. Trong tr ng h p ny chng ta mu n thay i cch hi n th c a nh ng ph n ny trong trang, chng ta th c hi n n b ng cch thay i class c a n.

Thm vo m t class m i Phng php .addClass(), cng gi ng nhau h u h t cc phng php jQuery khc, c t tn theo ch c nng c a n. Khi c g i, n s thm m t class vo thnh ph n chng ta ch n. Tham s duy nh t c a n l tn class s c thm vo. Phng php ny v i ng c v i n l
.removeClass(), s cho php chng ta quan st jQuery ho t ng nh th no khi chng ta khm
Jquery izwebz.com Demon Warlock

ph nh ng phng php l a ch n c s n c a jQuery. Cn by gi , code jQuery c a chng ta ch n gi n thm m t class=important, v class ny c khai bo trong stylesheet v i cc thu c tnh nh vi n v n n h ng nh t. (border: 1px solid red; background: pink;)

B n cng nh n th y r ng chng ta khng ph i ch y m t vng l p no thm class vo cc o n vn b n c cng chung class. y chnh l vng l p n c a cc phng php jQuery, nh trong v d ny l .addClass(), cho nn b n ch ph i g i ng m t l n v ch c v y thay i nh ng thnh ph n b n mu n trong ti li u. By gi n u b n ch y th trang web v a t o trn trnh duy t b n s th y 2 o n vn c cng class l .text s b t h ng v c vi n mu .

n y chng ta k t thc ph n m t c a lo t bi v jQuery. Trong bi ny b n bi t c jQuery c th lm nh ng g? B n cng h c c cch s d ng jQuery trn m t ti li HTML v cu i cng l dng th m t phng php c a jQuery l .addClass().

Jquery izwebz.com

Demon Warlock