Chương 1: Gii thiu v jQuery
Vi s phát trin rt mau l! c#a Internet, ngư&i dùng ngày càng quan tâm hơn ñ-n hình th/c c#a m0t
trang web. Trưc ñây m0t trang web ch5 c6n có banner, n0i dung và ít footer h&i h;t là ñã ñư;c cho là
m0t trang web hoàn ch5nh. Nhưng bây gi& trang web ñó ph>i có banner b?t m?t, n0i dung hay và còn
nhiu hiu /ng lA m?t khác nCa thì mi có th thu hút ñư;c ngư&i ñEc. Chính vì th- nhCng web
designer b?t ñ6u chú ý ñ-n các thư vin JavaScript mI như jQuery ñ tAo ra các hiu /ng có th
tương tác trc ti-p vi ngư&i ñEc m0t cách nhanh chóng và dJ dàng hơn rt nhiu là sK dLng thu6n
JavaScript.
Nhưng n-u bAn là ngư&i mi làm quen vi jQuery bAn sM thy không bi-t ph>i b?t ñ6u tO ñâu vì
jQuery cũng giQng như bt c/ thư vin nào khác cũng có rt nhiu functions. Cho dù bAn có ñEc ph6n
tài liu hưng dRn sK dLng c#a jQuery thì bAn vRn thy rt ph/c tAp và khó hiu. Nhưng bAn yên tâm
m0t ñiu là jQuery có cu trúc rt mAch lAc và theo h thQng. Cách vi-t code c#a jQuery ñư;c vay
mư;n tO các nguTn mà các web designer ña ph6n ñã bi-t như HTML và CSS. N-u tO trưc ñ-n nay
bAn ch5 là Designer ch/ không ph>i coder, bAn cũng có th dJ dàng hEc jQuery vì ki-n th/c v CSS
giúp bAn rt nhiu khi b?t ñ6u vi jQuery.
NhYn thy jQuery còn khá mi mZ vi nhiu bAn và nó cũng là thư vin ñư;c ñông ñ>o ngư&i sK
dLng. Izwebz gii thiu ñ-n các bAn loAt bài v jQuery. Trong loAt bài này chúng ta sM tìm hiu v
jQuery và các tính năng c#a nó. Trưc h-t bAn nên bi-t jQuery có th làm ñư;c nhCng gì.
   
Nhng gì Jquery có th làm
Hưng ti các thành phn trong tài liu HTML. N-u không sK dLng thư vin JavaScript này, bAn
ph>i vi-t rt nhiu dòng code mi có th ñAt ñư;c mLc tiêu là di chuyn trong cu trúc cây (hay còn
gEi là DOM = Document Object Model) c#a m0t tài liu HTML và chEn ra các thành ph6n liên quan.
Jquery cho phép bAn chEn bt c/ thành ph6n nào c#a tài liu ñ “vEc” m0t cách dJ dàng như sK dLng
CSS.
Thay ñ#i giao din c%a m&t trang web. CSS là công cL rt mAnh ñ ñdnh dAng m0t trang web
nhưng nó có m0t như;c ñim là không ph>i tt c> các trình duyt ñu hin thd giQng nhau. Cho nên
jQuery ra ñ&i ñ lp che trQng này, vì vYy các bAn có th sK dLng nó ñ giúp trang web có th hin thd
tQt trên h6u h-t các trình duyt. Hơn nCa jQuery cũng có th thay ñfi class hogc nhCng ñdnh dAng
CSS ñã ñư;c áp dLng lên bt c/ thành ph6n nào c#a tài liu HTML ngay c> khi trang web ñó ñã
ñư;c trình duyt load thành công.
Thay ñ#i n&i dung c%a tài liu. Jquery không ph>i ch5 có th thay ñfi b ngoài c#a trang web, nó
cũng có th thay ñfi n0i dung c#a chính tài liu ñó ch5 vi vài dòng code. Nó có th thêm hogc bt n0i
dung trên trang, hình >nh có th ñư;c thêm vào hogc ñfi sang hình khác, danh sách có th ñư;c s?p
x-p lAi hogc thYm chí c> cu trúc HTML c#a m0t trang web cũng có th ñư;c vi-t lAi và mI r0ng. Tt
c> nhCng ñiu này bAn hoàn toàn có th làm ñư;c nh& s giúp ñi c#a API (Application Programming
Interface = Giao din lYp trình /ng dLng).
Tương tác vi ngư+i dùng. Cho dù công cL bAn dùng có mAnh mM ñ-n my, nhưng n-u bAn không
có quyn quy-t ñdnh khi nào nó ñư;c sK dLng thì công cL ñó cũng coi như bl. Vi thư vin javaScript
như jQuery, nó cho bAn nhiu cách ñ tương tác vi ngư&i dùng ví dL như khi ngư&i dùng nhp
chu0t vào ñư&ng link thì sM có gì x>y ra. Nhưng cái hay c#a nó là không làm cho code HTML c#a bAn
   
rQi tung lên chính là nh& các Event Handlers. Hơn nCa Event Handler API sM b>o ñ>m rnng trang web
c#a bAn tương thích h6u h-t vi các trình duyt, ñiu này ñã và ñang làm ñau ñ6u rt nhiu các web
designer.
T.o hiu /ng ñ&ng cho nhng thay ñ#i c%a tài liu. ð tương tác tQt vi ngư&i dùng, các web
designer ph>i cho ngư&i dùng thy ñư;c hiu /ng gì sM x>y ra khi hE làm m0t tác vL nào ñó. Jquery
cho phép bAn sK dLng rt nhiu hiu /ng ñ0ng như m& d6n, chAy dEc chAy ngang v.v.. và n-u vRn
chưa ñ#, nó còn cho phép bAn t tAo ra các hiu /ng c#a riêng mình.
L0y thông tin t2 server mà không cn t5i l.i trang web. ðây chính là công ngh ngày càng trI nên
phf bi-n Asynchronous JavaScript And XML (AJAX), nó giúp ngư&i thi-t k- web tAo ra nhCng trang
web tương tác cc tQt và nhiu tính năng. Thư vin jQuery loAi bl s ph/c tAp c#a trình duyt trong
quá trình này và cho phép ngư&i phát trin web có th tYp trung vào các tính năng ñ6u cuQi.
ðơn gi5n hoá các tác v7 javaScript. Ngoài nhCng tính năng như ñã nêu I trên, jQuery còn cho
phép bAn vi-t code javaScript ñơn gi>n hơn nhiu so vi cách truyn thQng như là các vòng lgp và
ñiu khin m>ng.
   
T.i sao jQuery làm vic t;t
Ngư&i dùng ngày càng quan tâm hơn ñ-n Dynamic HTML, ñó cũng là nn móng cho s ra ñ&i c#a
nhCng javaScript Frameworks. Có frameworks thì ch5 tYp trung vào m0t vài tính năng vOa nên I trên,
có cái thì ráng bao gTm tt c> nhCng hiu /ng, tYp tính và nhTi nhét vào m0t package. ð ñ>m b>o là
m0t thư vin “nhanh gEn nh!” nhưng vRn “ngon bf rZ” vi các tính năng ñã nêu I trên, jQuery sK
dLng nhCng chi-n lư;c sau:
T<n d7ng ki=n th/c v> CSS. Các jQuery Selector hoAt ñ0ng y chang như CSS Selector vi cùng
cu trúc và cú pháp. Chính vì th- thư vin jQuery là cKa ngõ cho các web designer muQn thêm nhiu
tính năng hơn nCa cho trang web c#a mình. BIi vì ñiu kin tiên quy-t ñ trI thành m0t web designer
chuyên nghip là kh> năng sK dLng CSS thu6n thLc. Vi ki-n th/c có stn v CSS, bAn sM có s khIi
ñ6u thuYn l;i vi jQuery.
H@ trA Plugin. ð tránh bd rơi vào trAng thái quá t>i tính năng, jQuery cho phép ngư&i dùng tAo và sK
dLng Plugin n-u c6n. Cách tAo m0t plugin mi cũng khá ñơn gi>n và ñư;c hưng dRn cL th, chính
vì th- c0ng ñTng sK dLng jQuery ñã tAo ra m0t loAt nhCng plugin ñ6y tính sáng tAo và hCu dLng.
Xoá nhoà s khác bit giCa trình duyt. M0t th/c t- tTn tAi là mei m0t h thQng trình duyt lAi có m0t
kiu riêng ñ ñEc trang web. DRn ñ-n m0t ñiu làm ñau ñ6u các web designer là làm th- nào ñ cho
trang web có th hin thd tQt trên mEi trình duyt. Cho nên ñôi khi ngư&i ta ph>i làm hun m0t ph6n
code ph/c tAp ñ ñ>m b>o rnng trang web c#a hE ñư;c hin thd g6n như tương ñTng I các trình
duyt phf bi-n. Jquery giúp bAn thêm m0t lp b>o v cho s khác bit c#a trình duyt và giúp quá
trình này diJn ra dJ dàng hơn rt nhiu.
   
Luôn làm vic vi Set. Ví dL khi chúng ta yêu c6u jQuery tìm tt c> các thành ph6n có class là
delete và vn chúng ñi. Chúng ta không c6n ph>i loop qua tOng thành ph6n ñư;c tr> v. Thay vào ñó,
nhCng phương pháp như là hide() ñư;c thi-t k- ra ñ làm vic vi set thay vì tOng thành ph6n ñơn
lZ. Kx thuYt này ñư;c gEi là vòng lgp vn, ñiu ñó có nghĩa là chúng ta không ph>i t vi-t code ñ loop
nCa mà nó vRn ñư;c thc thi, chính vì th- code c#a chúng ta sM ng?n hơn rt nhiu.
Cho phép nhi>u tác v7 diDn ra trên cùng m&t dòng. ð tránh ph>i sK dLng nhCng bi-n tAm hogc
các tác vL lgp tQn th&i gian, jQuery cho phép bAn sK dLng kiu lYp trình ñư;c gEi là Chaining cho h6u
h-t các method c#a nó. ðiu ñó có nghĩa là k-t qu> c#a các tác vL ñư;c ti-n hành trên m0t thành
ph6n chính là thành ph6n ñó, nó stn sàng cho tác vL ti-p theo ñư;c áp dLng lên nó.
NhCng chi-n lư;c ñư;c nêu I trên giúp kích thưc c#a jQuery rt nhl bé ch5 kho>ng trên dưi 20Kb
dAng nén. Nhưng vRn ñ>m b>o cung cp cho chúng ta nhCng kx thuYt ñ giúp code trên trang nhl
gEn và mAch lAc.
Jquery sI dĩ trI nên phf bi-n là do cách sK dLng ñơn gi>n và bên cAnh ñó còn có m0t c0ng ñTng sK
dLng mAnh mM vRn ngày ngày phát trin thêm Plugin và hoàn thin nhCng tính năng trEng tâm c#a
jQuery. Cho dù thc t- là vYy, nhưng jQuery lAi là thư vin javaScript hoàn toàn miJn phí cho mEi
ngư&i sK dLng. Tt nhiên nó ñư;c b>o v bIi luYt GNU Public License và MIT License, nhưng bAn
c/ yên tâm là bAn có th sK dLng nó trong h6u h-t các trư&ng h;p k c> thương mAi lRn cá nhân.
   