Tài Liệu Tìm Hiểu Jquery

PLIB
TH VIN JAVASCRIPT
TI LIU TM HIU JQUERY

DNH CHO NGI MI BT U
Bin son ng Vn Lel
Email dangvanlel@gmail.com
Facebook https://facebook.com/dangvanlel
Ngy 03.12.2012
Th Vin Lp Trnh TI LIU TM HIU JQUERY DNH CHO NGI MI BT U
TM TT NI DUNG
CHNG 1: GII THIU TNG QUT .................................................................................... 3
1. jQuery l g?............................................................................................................................................................... 3
2. s dng jQuery bn cn nhng hiu bit g? .................................................................................. 3
3. Ti sao nn s dng jQuery? ........................................................................................................................... 3
4. Lm sao s dng jQuery? ........................................................................................................................... 3
CHNG 2: JQUERY HOT NG NH TH NO? ................................................................... 5
1. C php chn i tng. .............................................................................................................................. 5
2. iu khin CSS ca i tng ......................................................................................................................... 5
2.1. Ly gi tr ca mt thuc tnh CSS .............................................................................................................. 5
2.2. t gi tr mi cho CSS .................................................................................................................................... 6
3. iu khin thuc tnh ca i tng ........................................................................................................... 7
3.1. Ly gi tr thuc tnh ca i tng ............................................................................................................. 7
3.2. Gn gi tr mi cho thuc tnh ....................................................................................................................... 7
4. Gn s kin v x l s kin ............................................................................................................................ 8
4.1. Gn s kin vo i tng. ............................................................................................................................. 8
4.2. Hy s kin gn vo i tng ............................................................................................................. 10
4.3. Vi v d v s kin tham kho ............................................................................................................. 10
5. Chuyn ng, thay i hnh dng ca i tng. .............................................................................. 13
6. Mt vi hm API ph bin hay dng. ........................................................................................................ 15
CHNG 3: DANH SCH TRA CU JQUERY API ...............................................................18
2 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

CHNG 1: GII THIU TNG QUT
1. jQuery l g?
jQuery l mt th vin javascript min ph dng h tr cho ngi lp trnh c th vit

javascript nhanh hn, d dng hn, ngn gn hn nhng kt qu thc thi li tt hn. jQuery s
lm n gin ha vic qun l HTML/DOM, iu khin s kin, chuyn ng, CSS v vic s
dng cng ngh AJAX.
jQuery to ra mt hng i mi v thay i cch m bn vit javascript. jQuery t chc li

nhng mc ch m bn phi dng rt nhiu cu lnh javascript thc hin thnh mt cu
lnh n gin duy nht.
2. s dng jQuery bn cn nhng hiu bit g?
jQuery khng phi l mt ngn ng mi m ch l th vin hm javascript. jQuery hng ti

mc ch lm n gin ha nhng cng vic phc tp trc y khi dng javascript iu
khin DOM, CSS, Do vy, hc jQuery bn cn ti thiu nm bt c nhng kin thc sau:
HTML
JAVASCRIPT
CSS
3. Ti sao nn s dng jQuery?
Mc d c rt nhiu nhng th vin javascript trn th gii nhng jQuery c s dng rng
ri v ph bin nht. c bit vi cc hng ln Google, Microsoft, IBM, cng s dng jQuery
trn nhng webiste v cng ngh ca h.
4. Lm sao s dng jQuery?
jQuery n thun l mt tp tin javascript, s dng cc hm jQuery, bn cn ti v tp tin

ny ri dng th <script> chn vo trang web m bn mun dng cng ging nh chn
nhng tp tin javascript do bn vit vy.
C th ti v tp tin jQuery phin bn mi nht ti trang web chnh thc ca jQuery ti y:

http://jquery.com/
Truy cp vo website ri n nt Download (jQuery); ti v.

(Thng thng khi n vo nt ny th trnh duyt s m ln ni dung ca tp tin ch khng ti

v. Bn ch vic bm Ctrl+S lu li ni dung thnh mt tp tin *.js)

CHNG 2: JQUERY HOT NG NH TH NO?
Phn ny tp trung m t nhng c php c bn ca jQuery cng vi vi mc ch s dng ph

bin. Sau , da vo nhng gii thiu trong phn ny m bn c th t mnh ngh ra nhng mc
ch dng khc trong vic khai thc trit cc hm API s c lit k y v chi tit trong
phn sau.
1. C php chn i tng.
jQuery s dng cng mt cch nh CSS la chn nhng phn t HTML (th HTML) v thc
hin vi vic g ln nh ng i tng c chn. Vic chn i tng c th thc hin theo
kiu chn mt i tng duy nht (n l) hoc mt tp hp cc i tng c cng c im
(nhiu thnh phn). Nguyn tc chn c th nh sau:
C php | Chn i tng thao tc

$(doi_tuong)
---------------------------------------------------------------------------------------
$ : k t bt u ca jQuery trong vic xc nh i tng.
doi_tuong : tiu ch xc nh i tng. Lit k c th nhng trng hp nh bn di.
Sau y l bng lit k cc tiu chun mu chn i tng:
$(this) Chn i tng hin ti (i tng c bit) | n l
$(document) Chn i tng ton b ti liu (i tng c bit) | n l
$(window) Chn i tng v ca s hin hnh (i tng c bit) | n l
$('p') Chn tt c th <p> | nhiu thnh phn
$('.ClassName') Chn tt c th HTML c class=ClassName | nhiu thnh phn
$('#IdValue') Chn th HTML c id=IdValue | n l
2. iu khin CSS ca i tng

2.1. Ly gi tr ca mt thuc tnh CSS
Khi dng jQuery, vic tc ng trc tip v ly gi tr mt thuc tnh CSS ca i tng ang
c chn v cng n gin v bn s s dng tn thuc tnh v gi tr ly c s c nh
dng y nh khi nh ngha CSS thun.

C php | Ly gi tr ca mt thuc tnh CSS

$(doi_tuong).css('ten_css');
---------------------------------------------------------------------------------------
doi_tuong : l tiu chun xc nh i tng nh m t trn.
ten_css : l tn ca thuc tnh css nh font-size, color, background-color,
V d, ly gi tr thuc tnh CSS font-family ca tt c th <p> ta c cu lnh jQuery sau:
Code
var value = $('p').css('font-family');
Gi tr tr v ca cu lnh trn l chui tn ca font ang dng nh Verdana hay Arial
Ch : gi tr ca thuc tnh css tr v s l ca ci u tin c tm thy trong

trng hp bn dng tiu ch chn i tng theo s nhiu. Trong v d trn, nu cc
th <p> trong ton trang c nhiu font-family khc nhau th gi tr tr v l ca th
<p> xut hin u tin.
2.2. t gi tr mi cho CSS
Tng t nh ly gi tr ca thuc tnh CSS, vic gn gi tr cho n cng kh l n gin.
C php | Gn gi tr cho mt thuc tnh CSS

$(doi_tuong).css('ten_css','gia_tri');
---------------------------------------------------------------------------------------
doi_tuong : l tiu chun xc nh i tng nh m t trn.
ten_css : l tn ca thuc tnh css nh font-size, color, background-color,
gia_tri : l gi tr bn mun gn cho thuc tnh css
V d, ta mun gn gi tr thuc tnh font-family thnh Verdana cho ton b th <p>. Cu

lnh jQuery s nh th ny:
Code
$('p').css('font-family','Verdana);
Cu lnh trn s thay th ton b thuc tnh font-family ca tt c th <p> thnh Verdana.
Ch : Khng ging nh ly gi tr, trong trng hp bn dng tiu ch chn i tng

s nhiu th vic thay th s lm thay th ton b cc gi tr ca cc i tng ch
khng ch thay th ci u tin tm thy. Nh v d trn, c th cc th <p> trong ton
trang c nhiu thuc tnh font-family khc nhau, nhng tt c s b i thnh Verdana
sau cu lnh .

3. iu khin thuc tnh ca i tng

3.1. Ly gi tr thuc tnh ca i tng
C php | Ly gi tr mt thuc tnh HTML ca i tng

$(doi_tuong).attr('thuoc_tinh');
---------------------------------------------------------------------------------------
doi_tuong : tiu chun xc nh i tng nh m t trn.
thuoc_tinh : tn ca thuc tnh ca th html.
V d 1, ta c th <img id='vidu_image' src='simple.jpg' /> Nu mun ly thuc tnh src ca

th ny, ta dng:
Code
var value = $('#vidu_image').attr('src');
V d 2, ta c th <input type='txtUID' id='vidu' /> , nu mun ly gi tr thuc tnh value

ca th ny. Ta c th dng cu lnh jQuery tng t.
Code
var value = $('#txtUID').attr('value');
Tuy nhin, i vi v d 2, bn cng c th dng cu lnh jQuery nh sau ly gi tr ca

thuc tnh value.
Code
var value = $('#txtUID').val();
Ch : i vi cc th nhp d liu liu ca FORM, ngi ta thng dng hm val()

ly gi tr ca thuc tnh value ca chng. Khng c s khc bit no v kt qu gia
cch dng attr() v val().
Ty vo i tng l th no m thuc tnh ch nh s c tn ti hay khng. Nu khng tn ti

th cu lnh tr v undefined. V d, nu bn c gng ly thuc tnh color ca th <img> th
kt qu tr v l undefined v th <img> khng c thuc tnh color.
3.2. Gn gi tr mi cho thuc tnh
Vic gn li gi tr ca thuc tnh cng n gin v tng t nh ly gi tr thuc tnh. Ch khc

bit l ta s c 2 tham s bn trong attr(). Nu bn c gng gn mt thuc tnh cho mt i
tng HTML khng h tr thuc tnh th cu lnh s khng c thc thi.

C php | Gn li gi tr ca mt thuc tnh HTML cho i tng

$(doi_tuong).attr('thuoc_tinh','gia_tri');
---------------------------------------------------------------------------------------
doi_tuong : tiu chun xc nh i tng nh m t trn.
thuoc_tinh : tn ca thuc tnh ca th html.
gia_tri : gi tr mun gn cho thuc tnh.
V d, ta c th html <img id='vidu_image' src='simple.jpg' />. Ta mun i thuc tnh src

thnh new_image.jpg ta vit:
Code
$('#vidu_image').attr('src','new_image.jpg');
4. Gn s kin v x l s kin
Phn ny s trnh by vic dng jQuery gn s kin ln i tng v iu khin x l s

kin khi n x
y ra. Ni dung y cp n ch bao gm nhng cch dng ph thng
nht gip bn nm bt v lm quen. Nhng ni dung chi tit hn v cc s kin s c
cp y trong nhng phn tip theo trong ti liu ny.
4.1. Gn s kin vo i tng.
C php ph bin cho vic gn v x l s kin nh sau:
C php | Gn s kin v hm iu khin cho s kin vo i tng

$(doi_tuong).ten_su_kien(ham_dieu_khien);
----------------------------------------------------------------------------------------------------
doi_tuong : Tiu ch xc nh i tng nh ni trong phn gii thiu.
ten_su_kien : Tn ca s kin (c lit k y 4.4)
ham_dieu_khien : Hm iu khin ca s kin khi s kin pht sinh.
Hm iu khin c th nh ngha m i ngay bn trong cu lnh gn s kin hoc c th
khai bo hm c nh ngha ring bn ngoi.
V d, bn mun khi website load ln s hin th hp thoi thng bo dng ch Xin Cho.
Code | Theo cch dng Javascript thng thng

<body onload="alert('Xin Cho')">
Code | Theo cch dng jQuery

$(document).ready(function () { alert('Xin Cho');});

V d trn bt s kin onload (khi html c load xong v sng sng trnh duyt hin th)
v thc thi hm c nh ngha ngay bn trong cu lnh gn s kin, hm ny ch c mt cu
lnh alert() hin th hp thoi c cu Xin cho.
hiu r hn v c php ny, ta s ln lt xt cc v d v s dng hm x l s kin c

nh ngha ring bn ngoi cu lnh gn s kin:
V d v s dng hm iu khin nh ngha ring (khng c tham s)
Code
// nh ngha hm hin th cu Xin Cho
function Display_Message() {
alert('Xin Cho');
}
// Gn s kin ready (onload) cho document v gi hm nh ngha trn khi s kin xy ra

$(document).ready(Display_Message);
V d v s dng hm iu khin nh ngha ring (c tham s)
Code
// nh ngha hm hin th ni dung c cung cp qua tham s thong_diep
function Display_Message(thong_diep) {
alert(thong_diep);
}
/*
Gn s kin v gi hm Display_Message (km theo gi tr tham s l cu Xin Cho, ng Vn
Lel) khi s kin xy ra
*/
$(document).ready(Display_Message('Xin Cho, ng Vn Lel'));

4.2. Hy s kin gn vo i tng
Khi gn s kin cho mt i tng ri, nhng trong mt s trng hp hoc v vi l do no

m bn mun hy s kin th jQuery gip bn lm vic ny kh n gin.
C php | hy x l s kin theo tn s kin

$(doi_tuong).unbind('ten_su_kien');
-----------------------------------------------------------------------------------------------------
doi_tuong : Tiu ch xc nh i tng nh ni trong phn gii thiu.
ten_su_kien : Tn s kin theo chun javascript nh click, focus,load,
Cn mun hy b x l ton b s kin ca mt i tng, ta dng c php ny:
C php | hy x l ton b s kin

$(doi_tuong).unbind();
Kt hp nhng kin thc trn v s kin, ta s ln lt i qua vi v d trong phn 4.3 c

th hiu r hn v bit cch dng thnh tho hn i vi tng trng hp v vn pht sinh.
Ch yu l vn gn v hy s kin.
4.3. Vi v d v s kin tham kho
V d 1 :
Gn s kin click ln mt button, khi ngi ta click vo button th bt hp thoi c dng ch

Xin Cho ln.

Code
<html>
<head>

<script language="javascript" src="jquery.js"></script>
<script language="javascript">

$(document).ready(function(){

$('#btb_1').click(function(){
alert('Xin Cho');
});
});
</script>
</head>
<body>
<input type="button" id="btb_1" value="Hin th hp thoi" />
</body>
</html>
C l cc bn s t cu hi v d trn l Ti sao li t lnh gn s kin cho nt btb_1 nm

trong s kin ready() ca document?. Cu tr li l v khi trang web c ti xong th i
tng btb_1 mi tn ti. Nu bn khng t cu lnh gn s kin cho btb_1 bn trong s kin
ready ca document th s khng c tc dng g ht khi on script xut hin trc on nh
ngha btb_1 nh v d trn.
Trong trng hp bn mun nh ngha s kin cho btb_1 m khng mun t bn trong s
kin ready ca document, bn cn chn script nh ngha s kin xut hin sau on HTML
nh ngha i tng btb_1 nh sau:
Code
<html>
<head>
<script language="javascript" src="jquery.js"></script>
</head>
<body>


$('#btb_1').click(function () {
alert('Xin Cho');
});
</script>
</body>
</html>
Kt qu ca c 2 code trn l nh nhau:

V d 2: S dng v d 1, b sung thm mt button na. iu kin l khi ngi dng click
ln button 1 th vn hin th hp thoi Xin Cho. Nhng khi ngi dng click ln button th 2
th hy b s kin click ca button th nht. Lc ny, nu ngi dng click ln button 1 th s
khng nhn thy hp thoi Xin Cho na.
Code
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="button" id="btb_2" value="Hy b s kin ca button 1" />
alert('Xin Cho');
});
$('#btb_1').unbind('click');
});
</script>
</body>
</html>

5. Chuyn ng, thay i hnh dng ca i tng.
Chuyn ng (animation) l mt trong nhng API th v nht trong jQuery. Bn s d dng

iu hng, thay i hnh dng, v tr ca i tng v cng d dng v thun tin.
C php
$(doi_tuong).stop(true).animate(
{
danh_sach_thuoc_tinh
}, thoi_gian_chuyen [,dieu_khien]);
----------------------------------------------------------------------------------------------------
stop(true) m bo dng x l mi hiu ng chuyn ng ang chy ca i tng.

danh_sach_thuoc_tinh l danh sch nhng thuc tnh v gi tr mun thay i n,
danh sch ny khai bo theo nh dng ten:gia_tri v nu c nhiu cp nh th th s
cch nhau bi du phy , nh l ten1:gia_tri1, ten2:gia_tri2
thoi_gian_chuyen l thi gian m bn mun qu trnh chuyn hon thnh tnh bng
1/1000 giy
dieu_khien l hm iu khin s c thc thi sau khi qu trnh chuyn kt thc. Hm
ny c th b trng.
c th nm r hn v animate(). Chng ta s ln lt i qua mt vi v d trong nhiu

trng hp s dng nh sau:
V d 1:
on code sau y s thay i chiu cao ca i tng c id=vidu t chiu cao hin ti
thnh 500pixel trong vng 5 giy. Sau khi thay i xong th hin th thng bo xong
bng mt hp thoi.

Code
$('#vidu').stop(true).animate(
{
height:'500px'
},5000, function(){ alert(' xong');});
V d 2:
on code sau y s thay i cng lc chiu cao v chiu rng ca i tng c id=vidu t
chiu cao v chiu rng hin ti thnh 500px(cao) v 700px(rng) trong vng 3 giy. Sau
khi chuyn i xong th khng lm g c.
Code
$('#vidu').stop(true).animate(
{
height :'500px',
width :'700px'
},3000);
V d 3: Thc hin cng vic nh nh m t sau:
Thay i cng lc chiu cao v chiu rng ca i tng c id=vidu1 t chiu cao v chiu
rng hin ti thnh 300px(cao) v 400px(rng) trong vng 7 giy. Sau khi chuyn i xong
th thc hin mt chuyn i khc lm thay i chiu cao ca mt i tng c id=vidu2 t
chiu cao hin ti thnh 300px trong vng 2 giy. Sau khi chuyn i xong li thc hin
chuyn i khc lm thay i chiu rng ca mt i tng c id=vidu3 t chiu rng hin
ti thnh 250px trong vng 3.5 giy.Sau khi qu trnh chuyn i ny kt thc th thng bo
cu xong bng mt hp thoi. on code cho cng vic trn s nh th ny:
Code
$('#vidu1').stop(true).animate(
{
Height : '300px',
width : '400px'
}, 7000 , function () {
{
height : '300px'
}, 2000 , function(){
$('#vidu3').stop(true).animate()
{
width : '250px'
}, 3500, function(){ alert(' xong');});
});
});

on code trn kh phc tp khi lng dieu_khien vo nhau. cho n gin v d qun l,
bn c th chia nh ra bng nh ngha hm nh code sau:
Code
// Hm thay i chiu rng cho i tng c id="vidu3"
function Animate_Vidu3(){
{
width : '250px'
}, 3500, function(){ alert(' xong');});
}
// Hm thay i chiu cao cho i tng c id="vidu2"

function Animate_Vidu2() {
{
height : '300px'
}, 2000 , Animate_Vidu3 );
}
// Chy thc thi thay i chiu rng v chiu cao ca i tng c id="vidu1"
{
height: '300px',
width: '400px'
}, 7000 , Animate_Vidu2 );
M t chu trnh chy ca code trn:
Khi vidu1 b i xong, n s gi Animate_Vidu2
Khi Animate_Vidu2 b gi th vidu2 b i, khi vidu2 b i xong, n s gi Animate_Vidu3
Khi Animate_Vidu3 b gi th vidu3 b i, khi vidu3 b i xong, n gi hm alert hin th

mt thng bo xong.
6. Mt vi hm API ph bin hay dng.
y l danh sch nhng hm API jQuery hay dng nht bn c th tham kho nhanh v phc
v vi mc ch n gin tng qu trnh lm quen vi jQuery cng nh lm ci bi t p. Cng nh
nhng ni dung bn trn, nhng cch dng lit k trong phn ny cng ch l nhng trng hp
ph thng nht. bit thm chi tit v cc API vui lng tham kho chng 3.
6.1. Hm .fadeIn()
Hiu ng hin th dn dn mt i tng t trng thi trong sut. Ngha l trng thi ban u
ca i tng phi l trong sut (opacity = 0).

C php
$(doi_tuong).fadeIn(thoi_gian, dieu_khien);
----------------------------------------------------------------------------------------------------
thoi_gian : thi gian chuyn, c th dng s (1/1000 giy) hoc chui slow v fast
dieu_khien : l hm c thc thi sau khi qu trnh i kt thc. Hm ny c th b trng.
Sau y l danh sch v d v cch dng hiu ng ny.
Hin th n i tng c id=vidu1 trong khong thi gian 5 giy.
Code
$('#vidu1').fadeIn(5000);
Hin th dn i tng c id=vidu2 trong khong thi gian 200 mili giy (tng ng fast)
Code
$('#vidu2').fadeIn('fast');
Hin th dn i tng c id=vidu3 trong khong thi gian 600 mili giy(tng ng slow).
Sau khi xong th hin th hp thoi xong.
Code
$('#vidu3').fadeIn('slow', function(){alert(' Xong');});
6.2. Hm .fadeOut()
Hm ny c tc dng gy hiu ng ngc li vi hm .fadeIn(), ngha l n s lm cho mt

i tng tr nn trong sut t t. Cc tham s v cch s dng nh .fadeIn().
6.3. Hm .fadeTo()
Hm ny c th s dng cho c hai trng hp .fadeIn() v .fadeOut() khi n hng ti mc

ch chuyn i t trng thi hin ti n mt trng thi c ch nh. Ty vo gi tr hin ti
v gi tr n m s c hiu ng fadeIn() hay .fadeOut().
C php
$(doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien);
----------------------------------------------------------------------------------------------------
dich_den : c gi tr t 0-1 (tng ng 0% 100%) l fade mun chuyn n.

V d: Gi s ta c mt th <div id=vidu></div> ang c opacity l 0.5 , ta s xt hiu

ng ca nhng lnh di y ln i tng vidu ny:
Code | Gy hiu ng .fadeIn() do s chuyn n ln hn hin ti (0.5)

$('#vidu').fadeTo('slow', 0.7, function(){alert(' Xong');});
Code | Gy hiu ng .fadeOut() do s chuyn n ln hn hin ti (0.5)

$('#vidu').fadeTo('slow', 0.2, function(){alert(' Xong');});
6.4. Hm .show()
V bn cht nu khng c tham s th hm ny s gi .css('display', 'block'). Cn nu c tham

s nh c php di y th n hot ng tng t nh .fadeIn().
C php
$(doi_tuong).show(thoi_gian, dieu_khien);
----------------------------------------------------------------------------------------------------
6.5. Hm .hide()
Tri ngc vi .show(), nu khng c tham s th hm ny s gi .css('display', 'none'). Cn

nu c tham s nh c php di y th n hot ng tng t nh .fadeOut().
C php
$(doi_tuong).hide(thoi_gian, dieu_khien);
----------------------------------------------------------------------------------------------------

CHNG 3: DANH SCH TRA CU JQUERY API

L danh sch tp hp ton b hm API trong jQuery dng cho vic tra cu. Danh sch ny t ti a ch
http://api.jquery.com/ v hin ti chng ti ang n lc dch n li bng Ting Vit v s sm a vo hot
ng bn dch khi khai trng Th Vin Lp Trnh.
Nhng kin thc trnh by tnh n y trong ti liu ny l bn hiu v c th s dng jQuery, ng thi
c kh nng t m rng kin thc cho bn thn v jQuery nh plusin hay nhng hm API khc
Cm n s quan tm ca bn n ti liu ny v chng ti s sm tr li vi phin bn ti liu y v chi tit

hn khi khai trng Th Vin Lp Trnh.
Trn trng.
HT

Tài Liệu Tìm Hiểu Jquery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tài Liệu Tìm Hiểu Jquery

Uploaded by

Copyright:

Available Formats

PLIB

TI LIU TM HIU JQUERY

Bin son ng Vn Lel

2. s dng jQuery bn cn nhng hiu bit g? .................................................................................. 3

3. Ti sao nn s dng jQuery? ........................................................................................................................... 3

4. Lm sao s dng jQuery? ........................................................................................................................... 3

CHNG 2: JQUERY HOT NG NH TH NO? ................................................................... 5

1. C php chn i tng. .............................................................................................................................. 5

2. iu khin CSS ca i tng ......................................................................................................................... 5

2.1. Ly gi tr ca mt thuc tnh CSS .............................................................................................................. 5

2.2. t gi tr mi cho CSS .................................................................................................................................... 6

3. iu khin thuc tnh ca i tng ........................................................................................................... 7

3.1. Ly gi tr thuc tnh ca i tng ............................................................................................................. 7

3.2. Gn gi tr mi cho thuc tnh ....................................................................................................................... 7

4. Gn s kin v x l s kin ............................................................................................................................ 8

4.1. Gn s kin vo i tng. ............................................................................................................................. 8

4.2. Hy s kin gn vo i tng ............................................................................................................. 10

4.3. Vi v d v s kin tham kho ............................................................................................................. 10

5. Chuyn ng, thay i hnh dng ca i tng. .............................................................................. 13

6. Mt vi hm API ph bin hay dng. ........................................................................................................ 15

CHNG 3: DANH SCH TRA CU JQUERY API ...............................................................18

2 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

CHNG 1: GII THIU TNG QUT

jQuery l mt th vin javascript min ph dng h tr cho ngi lp trnh c th vit

jQuery to ra mt hng i mi v thay i cch m bn vit javascript. jQuery t chc li

2. s dng jQuery bn cn nhng hiu bit g?

jQuery khng phi l mt ngn ng mi m ch l th vin hm javascript. jQuery hng ti

4. Lm sao s dng jQuery?

jQuery n thun l mt tp tin javascript, s dng cc hm jQuery, bn cn ti v tp tin

C th ti v tp tin jQuery phin bn mi nht ti trang web chnh thc ca jQuery ti y:

Truy cp vo website ri n nt Download (jQuery); ti v.

3 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

(Thng thng khi n vo nt ny th trnh duyt s m ln ni dung ca tp tin ch khng ti

4 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

CHNG 2: JQUERY HOT NG NH TH NO?

Phn ny tp trung m t nhng c php c bn ca jQuery cng vi vi mc ch s dng ph

1. C php chn i tng.

C php | Chn i tng thao tc

Sau y l bng lit k cc tiu chun mu chn i tng:

$(this) Chn i tng hin ti (i tng c bit) | n l

$(document) Chn i tng ton b ti liu (i tng c bit) | n l

$(window) Chn i tng v ca s hin hnh (i tng c bit) | n l

$('p') Chn tt c th <p> | nhiu thnh phn

$('.ClassName') Chn tt c th HTML c class=ClassName | nhiu thnh phn

$('#IdValue') Chn th HTML c id=IdValue | n l

2. iu khin CSS ca i tng

5 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

C php | Ly gi tr ca mt thuc tnh CSS

V d, ly gi tr thuc tnh CSS font-family ca tt c th <p> ta c cu lnh jQuery sau:

Gi tr tr v ca cu lnh trn l chui tn ca font ang dng nh Verdana hay Arial

Ch : gi tr ca thuc tnh css tr v s l ca ci u tin c tm thy trong

2.2. t gi tr mi cho CSS

Tng t nh ly gi tr ca thuc tnh CSS, vic gn gi tr cho n cng kh l n gin.

C php | Gn gi tr cho mt thuc tnh CSS

V d, ta mun gn gi tr thuc tnh font-family thnh Verdana cho ton b th <p>. Cu

Ch : Khng ging nh ly gi tr, trong trng hp bn dng tiu ch chn i tng

6 Bin son ng Vn Lel | thuvienlaptrinh.edu.vn

3. iu khin thuc tnh ca i tng

C php | Ly gi tr mt thuc tnh HTML ca i tng

V d 1, ta c th <img id='vidu_image' src='simple.jpg' /> Nu mun ly thuc tnh src ca

V d 2, ta c th <input type='txtUID' id='vidu' /> , nu mun ly gi tr thuc tnh value

Tuy nhin, i vi v d 2, bn cng c th dng cu lnh jQuery nh sau ly gi tr ca

Ch : i vi cc th nhp d liu liu ca FORM, ngi ta thng dng hm val()

Ty vo i tng l th no m thuc tnh ch nh s c tn ti hay khng. Nu khng tn ti