Tài Liệu JQuery Tiếng Việt

7/23/2019 Ti Liu JQuery Ting Vit

1/93

http://vietjack.com/jquery/index.jsp Copyright vietjack.com

http://vietjack.com/Trang chia scc bi hc online min ph Trang 1

Mc lc

Gii thiu v jQuery.............................................................................................................. 5

i vi c gi...................................................................................................................... 5

iu kin tin................................................................................................................... 5

Thc hnh trc tuyn........................................................................................................... 5

Tng quan vjQuery............................................................................................................ 5

jQuery l g?...................................................................................................................... 5

Cch sdng jQuery?...................................................................................................... 6

Ci t jQuery ni b........................................................................................................ 6

V d............................................................................................................................ 7Sdng CDN................................................................................................................... 7

V d............................................................................................................................ 7

Cch gi mt hm th vin jQuery?............................................................................. 8

Cch sdng Custom Script trong jQuery?...................................................................... 9

Sdng nhiu th vin trong jQuery.............................................................................. 10

Nhng g c trong Trang sau?........................................................................................ 10

C bn vjQuery............................................................................................................... 11i tng String............................................................................................................. 11

i tng Number trong jQuery..................................................................................... 11

i tng Boolean trong jQuery..................................................................................... 11

i tng Object trong jQuery........................................................................................ 12

i tng Array trong jQuery.......................................................................................... 12

Hm (Function) trong jQuery........................................................................................... 12

Cc tham strong jQuery............................................................................................... 13

Context trong jQuery....................................................................................................... 14

Phm vi (Scope) trong jQuery......................................................................................... 14

Callback trong jQuery...................................................................................................... 15

Cc Closure trong jQuery................................................................................................ 15


2/93



Proxy Pattern trong jQuery.............................................................................................. 16

Cc hm c sn trong jQuery......................................................................................... 17

Document Object Model (DOM)..................................................................................... 18

Selector trong jQuery.......................................................................................................... 19Hm c s$() trong jQuery............................................................................................ 20

V d.......................................................................................................................... 20

Cch sdng cc Selector trong jQuery?...................................................................... 21

V dvSelector trong jQuery........................................................................................ 22

Thuc tnh trong jQuery...................................................................................................... 28

Nhn gi trthuc tnh trong jQuery................................................................................. 28

V d.......................................................................................................................... 28Thit lp gi trthuc tnh trong jQuery............................................................................. 29

V d.......................................................................................................................... 29

p dng Style trong jQuery............................................................................................. 30

V d.......................................................................................................................... 30

Cc phng thc Atribute trong jQuery.......................................................................... 31

V d............................................................................................................................... 33

Truy cp DOM trong jQuery................................................................................................ 35Tm kim cc phn tbi chmc (index) trong jQuery.................................................. 35

V d.......................................................................................................................... 36

Lc cc phn ttrong jQuery.......................................................................................... 37

V d.......................................................................................................................... 38

Xc nh vtr cc phn tcon trong jQuery.................................................................... 39

V d.......................................................................................................................... 39

Cc phng thc DOM Filter trong jQuery..................................................................... 40

Cc phng thc DOM Traversing trong jQuery............................................................ 41

CSS Selector trong jQuery.................................................................................................. 43

p dng cc thuc tnh CSS trong jQuery....................................................................... 43

V d.......................................................................................................................... 43


3/93



p dng nhiu thuc tnh CSS trong jQuery.................................................................... 45

V d.......................................................................................................................... 45

Thit lp rng v chiu cao phn ttrong jQuery....................................................... 46

V d.......................................................................................................................... 46Cc phng thc CSS trong jQuery............................................................................... 47

Thao tc DOM trong jQuery................................................................................................ 49

Thao tc ni dung trong jQuery....................................................................................... 50

V d.......................................................................................................................... 50

Thay thphn tDOM trong jQuery............................................................................... 51

V d.......................................................................................................................... 51

Gbcc phn tDOM trong jQuery............................................................................ 52V d.......................................................................................................................... 53

Chn cc phn tDOM trong jQuery............................................................................. 54

V d.......................................................................................................................... 54

Cc phng thc thao tc DOM trong jQuery................................................................ 55

Xl skin trong jQuery.................................................................................................. 58

Bind cc Event Handler trong jQuery.............................................................................. 59

GbEvent Handler trong jQuery.................................................................................. 60Cc loi skin trong jQuery.......................................................................................... 61

i tng Event trong jQuery......................................................................................... 63

Cc thuc tnh ca i tng Event trong jQuery............................................................ 63

V d............................................................................................................................... 65

Cc phng thc ca i tng Event trong jQuery...................................................... 67

Cc phng thc thao tc i tng Event trong jQuery............................................... 67

Cc phng thc Event Helper trong jQuery.................................................................. 69

Cc phng thc Trigger trong jQuery........................................................................... 69

Phng thc Binding trong jQuery................................................................................. 69

jQuery Ajax......................................................................................................................... 73

Ti dliu mt cch n gin vi jQuery........................................................................ 73


4/93



C php.................................................................................................................... 73

V d.......................................................................................................................... 74

Nhn dliu JSON trong jQuery.................................................................................... 75

C php.................................................................................................................... 75V d.......................................................................................................................... 75

Truyn dliu ti Server trong jQuery............................................................................ 77

V d.......................................................................................................................... 77

Cc phng thc jQuery AJAX...................................................................................... 78

Cc skin jQuery AJAX............................................................................................... 80

Hiu ng trong jQuery........................................................................................................ 80

Hin thv n cc phn ttrong jQuery.......................................................................... 81C php.................................................................................................................... 81

V d.......................................................................................................................... 81

Toggle cc phn ttrong jQuery..................................................................................... 83

C php.................................................................................................................... 83

V d.......................................................................................................................... 83

Cc phng thc jQuery Effect...................................................................................... 84

Cc hiu ng trn c sUI Library trong jQuery............................................................. 87Plugins trong jQuery............................................................................................................ 88

Cch sdng Plugins trong jQuery................................................................................ 89

Cch pht trin mt Plug-in trong jQuery.................................................................... 90

V d............................................................................................................................... 90

Ti liu tham kho vjQuery............................................................................................... 92

Cc ng link hu ch vjQuery.................................................................................. 92

Cc JavaScript Framework khc.................................................................................... 92


5/93



Gii thiu v jQueryjQuery l mt th vin kiu mi ca JavaScript, c to bi John Resig vo nm 2006. jQuery

lm n gin ha vic truyn ti HTML, x l s kin, to hiu ng ng v tng tc Ajax. Vi

jQuery, khi nim Rapid Web Development khng cn qu xa l.

Lot bi hng dn ca chng ti da trn ngun ti liu ca:Tutorialspoint

i vi c giLot bi hng dn ny c thit k cho nhng nh lp trnh mun hc nhng kin thc c bn

v jQuery v cc khi nim v chng trnh theo cc bc n gin v d dng. Bi hng dn s

cung cp cho bn s hiu bit y v jQuery vi nhng v d ph hp.

iu kin tin Trc khi tin hnh hc tp vi lot bi ny, bn nn c kin thc v HTML, CSS, JavaScript,

Document Object Model (DOM) v bt k b son tho (Text Editor) no khc. Khi chng ta pht

trin cc ng dng trn web s dng jQuery, n s tt nu bn hiu cch cc ng dng trn web

v internet lm vic.

Thc hnh trc tuynVi mi ch trong bi hc, chng ti s cung cp cho cc bn cc v d minh ha, t gip

bn hiu su hn cng nh cm gic thch th vi bi hng dn ca chng ti. Hy chn ty

chnTry it gc trn cng bn phi mi v d thc hnh ngay.

Tng quan v jQueryjQuery l g?jQuery l mt th vin kiu mi ca JavaScript, c to bi John Resig vo nm 2006 vi mt

phng chm tuyt vi:Write less, do more.

jQuery lm n gin ha vic truyn ti HTML, x l s kin, to hiu ng ng v tng tc Ajax.

Vi jQuery, khi nim Rapid Web Development khng cn qu xa l.

jQuery l mt b cng c tin ch JavaScript lm n gin ha cc tc v a dng vi vic vit t

code hn. Di y lit k mt s tnh nng ti quan trng c h tr bi jQuery:
http://www.tutorialspoint.com/index.htmhttp://www.tutorialspoint.com/index.htmhttp://www.tutorialspoint.com/index.htmhttp://www.tutorialspoint.com/index.htm


6/93



Thao tc DOM jQuery gip d dng la chn cc phn t DOM traversemt cch d

dng nh s dng CSS, v chnh sa ni dung ca chng bi s dng phng tin

Selector m ngun m, m c gi lSizzle.

X l s kin jQuery gip tng tc vi ngi dng tt hn bng vic x l cc s kina dng m khng lm cho HTML code ri tung ln vi cc Event Handler.

H tr AJAX jQuery gip bn rt nhiu pht trin mt site giu tnh nng v phn hi

tt bi s dng cng ngh AJAX.

Hiu ng jQuery i km vi rt nhiu cc hiu ng a dng v p mt m bn c th s

dng trong cc Website ca mnh.

Gn nh jQuery l th vin gn nh - n ch c kch c khong 19KB (gzipped).

c h tr hu ht bi cc trnh duyt hin i jQuery c h tr hu ht bi cc

trnh duyt hin i, v lm vic tt trn IE 6.0+, FF 2.0+, Safari 3.0+, Chrome v Opera

9.0+

Cp nht v h tr cc cng ngh mi nht jQuery h tr CSS3 Selector v c php

XPath c bn.

Cch sdng jQuery?C hai cch s dng jQuery:

Ci t ni b Bn c th ti jQuery Library trn thit b ni b ca bn v include n

trong HTML code.

S dng t CDN (CDN Based Version) Bn c th include th vin jQuery vo trong

HTML code mt cch trc tip t Content Delivery Network (CDN).

Ci t jQuery ni b Truy cp tranghttps://jquery.com/download/ ti phin bn jQuery mi nht.

By gi t filejquery-2.1.3.min.jsvo trong mt th mc trong Website ca bn, v d

/jquery.
https://jquery.com/download/https://jquery.com/download/https://jquery.com/download/https://jquery.com/download/


7/93



V dBy gi bn c th include th vinjqueryvo trong HTML file ca bn nh sau:

The jQuery Example

$(document).ready(function(){

document.write("Hello, World!");

});

Hello

N s cho kt qu:

Sdng CDNBn c th include th vin jQuery vo trong HTML code mt cch trc tip t Content Delivery

Network (CDN). Google v Microsoft cung cp phin bn mi nht.

Trong lot bi ny, chng ti sdng Google CDN.

V dBy gi chng ta vit li v d trn bi s dng th vin jQuery t Google CDN.


8/93



The jQuery Example


document.write("Hello, World!");

});

Hello

N s cho kt qu:

Cch gi mt hm th vin jQuery?Cng tng t nh JavaScript, trc khi chng ta s dng cc on code ca jQuery c hay

chnh sa cc i tng DOM, chng ta cn m bo rng chng ta bt u thm cc s kin

ngay sau khi DOM sn sng.

Nu bn mun mt s kin lm vic trn trang ca bn, bn nn gi n bn trong hm

$(document).ready(). Mi th bn trong s ti ngay sau khi DOM c ti v trc khi ni dung

trang c ti.

lm iu ny, chng ta ng k mt s kin sn sng cho ti liu nh sau:


// do stuff when DOM is ready

});


9/93



gi bt k hm th vin jQuery no, s dng cc th HTML script nh di y:

The jQuery Example


$("div").click(function(){alert("Hello, world!");});

});

Click on this to see a dialogue box.

N s cho kt qu sau:

Cch sdng Custom Script trong jQuery?N thc s l tt hn khi vit ring cho bn Custom Code trong mt Custom JavaScript

file:custom.js, nh sau:

/* Filename: custom.js */


$("div").click(function(){

alert("Hello, world!");


10/93



});

});

By gi chng ta baocustom.jsny vo trong HTML file nh sau:

The jQuery Example

Click on this to see a dialogue box.

N s cho kt qu sau:

Sdng nhiu th vin trong jQueryBn c th s dng nhiu th vin cng nhau m khng xy ra xung t gia chng. V d, bn c

th s dng cc th vin jQuery v th vin MooTool JavaScript cng vi nhau.

Bn c th kim tra phng thc:jQuery - Phng thc noConflict bit thm chi tit.

Nhng g c trong Trang sau?ng bn tm qu nhiu nu bn khng hiu cc v d trn. Bn s sm hiu chng trong cc

chng tip theo.

Trong chng ti, chng ti s cp mt s khi nim c bn m n t qui c ca JavaScript.
http://vietjack.com/jquery/jquery-noconflict.jsphttp://vietjack.com/jquery/jquery-noconflict.jsphttp://vietjack.com/jquery/jquery-noconflict.jsphttp://vietjack.com/jquery/jquery-noconflict.jsphttp://vietjack.com/jquery/jquery-noconflict.jsp


11/93



C bn v jQueryjQuery l mt Framework c xy dng da trn cc tnh nng ca JavaScript. V th trong khi

pht trin cc ng dng s dng jQuery, bn c th s dng tt c cc hm v cc tnh nng khc

c b tr trong JavaScript.

Chng ny s gii thch hu ht khi nim c bn thng c s dng trong cc ng dng xy

dng trn jQuery.

i tng StringMt chui trong JavaScript l mt i tng khng i cha 0, 1 hoc nhiu k t.

Sau y l mt v d hp l v mt String trong JavaScript.

"This is JavaScript String"

'This is JavaScript String'

'This is "really" a JavaScript String'

"This is 'really' a JavaScript String"

i tng Number trong jQueryi tng Number trong JavaScript l nh dng chnh xc kp (64 bit) theo chun IEEE 754.

Chng l khng i, nh i tng String.

Sau y l v d hp l v mt s trong JavaScript.

5350

120.27

0.26

i tng Boolean trong jQueryMt Boolean trong JavaScript c th nhn hoctruehocfalse. Nu mt s l 0, th mc nh ca

n l false. Nu mt chui l trng, th mc nh l false.

Sau y l cc v d hp l v i tng Boolean trong JavaScript.

true // true

false // false

0 // false


12/93



1 // true

"" // false

"hello" // true

i tng Object trong jQueryJavaScript h tr tt khi nim Object. Bn c th to mt Object bi s dng Object Literal nhsau:

var emp = {

name: "Zara",

age: 10

};

Bn c th vit v c cc thuc tnh ca mt Object bi s dng k hiu du chm (.) nh sau:

// Getting object properties

emp.name // ==> Zara

emp.age // ==> 10

// Setting object properties

emp.name = "Daisy" //


13/93



functionnamed(){

// do some stuff here

}

Mt hm n danh c th c nh ngha theo cch tng t nh mt hm thng thng nhngn s khng c bt k tn no.

Mt hm n danh c th c gn ti mt bin hoc c truyn ti mt phng thc nh sau:

varhandler =function(){


}

jQuery s dng rt nhiu hm n danh nh sau:



});

Cc tham strong jQueryCc tham s trong JavaScript l mt loi ca Array m c thuc tnhlength. V d sau gii thch v

iu ny:

functionfunc(x){

console.log(typeofx,arguments.length);

}

func(); //==> "undefined", 0

func(1); //==> "number", 1

func("1","2","3"); //==> "string", 3

i tng Argument cng c mt thuc tnhcallee, m tham chiu n hm bn ang trong .

V d:

functionfunc(){

returnarguments.callee;

}

func(); // ==> func


14/93



Context trong jQueryT kha ni ting trong JavaScript lthistham chiu ti Context hin ti. Trong mt hm,thisc

th thay i, ph thuc cch hm c gi.


// this refers to window.document

});


// this refers to a div DOM element

});

Bn c th xc nh Context cho mt ln hm bi s dng cc phng thc call()vapply().

S khc nhau gia chng l cch chng truyn cc tham s. call()truyn tt c cc tham s thng

qua cc tham s ti hm, trong khi apply()chp nhn mt mng nh l cc tham s.

functionscope(){

console.log(this,arguments.length);

}

scope()// window, 0

scope.call("foobar",[1,2]); //==> "foobar", 1

scope.apply("foobar",[1,2]);//==> "foobar", 2

Phm vi (Scope) trong jQueryPhm vi ca mt bin l khu vc trong chng trnh ca bn m bin c nh ngha. Bin

trong JavaScript s ch c hai phm vi:

Cc bin Global Mt bin Global c phm vi chung, ngha l n c nh ngha mi

ni trong JavaScript code ca bn.

Cc bin Local Mt bin Local s ch nhn thy bn trong mt hm ni n c nh

ngha. Cc tham s hm lun lun l Local cho hm .

Trong thn ca mt hm, mt bin Local c quyn u tin cao hn bin Global m c cng tn.


15/93



varmyVar ="global"; // ==> Declare a global variable

function(){

varmyVar ="local"; // ==> Declare a local variable

document.write(myVar);// ==> local

}

Callback trong jQueryMt callback l mt hm thun JavaScript c truyn mt s phng thc nh l mt tham s

hoc ty chn. Mt s callback l cc s kin, c gi cung cp cho ngi s dng c hi

phn ng li khi mt trng thi no c kch hot.

H thng s kin trong jQuery s dng cc callback ny khp mi ni, v d:

$("body").click(function(event){

console.log("clicked: "+event.target);

});

Hu ht callback cung cp cc tham s v mt context. Trong v d event-handler, callback c

gi vi mt tham s, mt Event.

Mt s callback c yu cu tr v ci g , ci khc tr v gi tr ty . ngn cn s

trnh form, mt x l s kin Submit c th tr v false nh sau:

$("#myform").submit(function(){

returnfalse;

});

Cc Closure trong jQueryCc Closure c to bt c khi no mt bin c nh ngha bn ngoi phm vi hin ti c

truy cp t bn trong phm vi ni b.

V d sau ch cch bincounterl nhn thy trong cc hm create, increment, v print, nhng

khng nhn thy bn ngoi chng.

functioncreate(){

varcounter =0;


16/93



return{

increment:function(){

counter++;

},

print:function(){

console.log(counter);

}

}

}

varc =create();

c.increment();

c.print(); // ==> 1

Pattern ny cho php bn to cc i tng vi cc phng thc, m hot ng trn d liu, m

khng thy c bn ngoi. Bn ghi nh rng,data hidingl khi nim rt c bn ca cc

chng trnh hng i tng.

Proxy Pattern trong jQueryMt Proxy l mt i tng m c th c s dng iu khin s truy cp ti phn t khc.

N thi hnh cng giao din cho i tng khc ny v truyn trn bt k phng thc no ti n.i tng khc ny thng c gi l Real Subject.

Mt Proxy c th c thuyt minh ti v tr ca Real Subject ny v cho php n c truy cp

ch t xa. Chng ta c th lu gi phng thc setArrayca jQuery trong mt Closure v

vit ln (overwrite) n nh sau:

(function(){

// log all calls to setArray

varproxied =jQuery.fn.setArray;

jQuery.fn.setArray =function(){

console.log(this,arguments);

returnproxied.apply(this,arguments);

};


17/93



})();

V d trn bao code ca n trong mt hm n binproxied. Sau , Proxy ny log tt c cc li

gi phng thc v y thc li gi cho phng thc ban u. S dngapply(this,

arguments)bo m cho vic ngi gi khng th ch v s khc nhau gia phng thc banu v phng thc c y nhim.

Cc hm c sn trong jQueryJavaScript i km mt tp hp cc hm hu ch gn lin vi n. Nhng phng thc ny c th

c s dng thao tc String, Number, v Date.

Bng di lit k cc hm JavaScript quan trng:

STT Phng thc & Miu t

1 charAt()

Tr v k t ti ch mc (index) cho.

2 concat()

Kt ni hai chui vn bn v tr v mt chui mi.

3 forEach()

Gi mt hm cho mi phn t ca mt mng.

4 indexOf()

Tr v ch mc v s xut hin u tin bn trong vic gi i tng String vi gi tr

cho, hoc -1 nu khng tm thy.

5 length()

Tr v di ca chui.

6 pop()


18/93



G b phn t cui ca mt mng v tr v phn t .

7 push()

Thm mt hoc nhiu phn t ti phn cui ca mt mng v tr v di mi camng .

8 reverse()

o ngc th tcc phn t trong mt mng phn t u tin thnh cui cng v

cui cng thnh u tin.

9 sort()

Sp xp phn loi cc phn t ca mt mng.

10 substr()

Tr v cc k t trong mt mng bt u t v tr cho t s cc k t xc nh.

11 toLowerCase()

Tr v gi tr chui ang gi c bin i thnh kiu ch thng.

12 toString()

Tr v s biu din chui ca gi tr s.

13 toUpperCase()

Tr v gi tr chui ang gi c bin i thnh ch hoa.

Bn truy cp trang sau c danh sch y Cc hm c sn trong JavaScript.

Document Object Model (DOM)DOM l mt cu trc cy ca cc phn t HTML a dng, nh sau:
http://vietjack.com/javascript/javascript_builtin_functions.jsphttp://vietjack.com/javascript/javascript_builtin_functions.jsphttp://vietjack.com/javascript/javascript_builtin_functions.jsphttp://vietjack.com/javascript/javascript_builtin_functions.jsp


19/93



The jQuery Example

This is a paragraph.

This is second paragraph.

This is third paragraph.

N s cho kt qu sau:

Sau y l mt sim quan trng v cu trc cy trn:

Th l ancestor (gc hay l t tin) ca tt c cc phn t khc; ni cch khc, tt

c phn t khc l con chu ca phn t .

Th v khng l hu du (descendant), nhng cng l con ca .

Phn t

l con ca phn t , con ca phn t v , v l anh em

ca cc phn t

khc.

Trong khi hc cc khi nim jQuery, n thc s hu ch khi bn hiu v DOM, nu bn cha c

khi nim g v DOM, ti ngh bn truy cp trang sau:DOM Tutorial.

Selector trong jQueryTh vin jQuery khai thc sc mnh ca cc CSS (Cascading Style Sheets) Selector gip

chng ta truy cp nhanh v d dng hn ti cc phn t hoc nhm cc phn t trong DOM.

Mt jQuery Selector l mt hm m s dng cc Expression tm ra s kt ni ca cc phn t

t mt DOM trn c s tiu chun cho. Theo cch n gin, bn c th ni rng, Selector c
http://www.tutorialspoint.com/dom/index.htmhttp://www.tutorialspoint.com/dom/index.htmhttp://www.tutorialspoint.com/dom/index.htmhttp://www.tutorialspoint.com/dom/index.htm


20/93



s dng chn mt hoc nhiu phn t HTML bi s dng jQuery. Khi mt phn t c chn,

th chng ta c th thc hin cc hot ng a dng trn phn t chn .

Hm c s$() trong jQueryFactory Function c th dch l hm c s bi v i vi ti, n l ni mi th c to ra. jQuery

Selector bt u vi k hiu la v cp du ngoc n $(). Hm c s$()s dng ba khi trong

khi chn cc phn t trong mt ti liu cho.

STT Selector & Miu t

1 Tag Name

Biu din mt tn th c sn trong DOM. V d:$(p)chn ttc on vn trong phn

t.

2 Tag ID

Biu din mt tn th c sn vi ID cho trong DOM. V d $('#some-id')chn tt c

phn t n trong ti liu m c mt ID l some-id

3 Tag Class

Biu din mt th c sn vi lp cho trong DOM. V d$('.some-class')chn tt

c cc phn t trong ti liu m c mt lp l some-class.

Tt c cc mc trn c th c s dng hoc trn chnh n hoc trong s kt hp vi Selector

khc. Tt c jQuery Selector xy dng trn cng qui tc ngoi tr mt s mo (Tweaking).

Ghi ch Hm c s$()l ng ngha vi mt hmjQuery(). V th trong trng hp bn ang

s dng bt k th vin JavaScirpt no khc th c th xut hin xung t y, khi bn c th

i k hiu$thnhjQueryv bn c th s dng hmjQuery()thay cho hm$().

V dSau y l v d n gin s dng Tag Selecor. N s chn tt c phn t vi tn th pv s thit

lp mu nn thnh yellow.


21/93



The jQuery Example


$("p").css("background-color","yellow");

});

This is a paragraph.


This is third paragraph.

N s cho kt qu sau:

Cch sdng cc Selector trong jQuery?Selector l rt hu ch v s cn yu cu mi bc trong khi s dng jQuery. Chng nhn phn

t chnh xc khi bn mun t ti liu HTML ca bn.

Bng sau lit k cc Selector c bn v gii thch v chng bi cc v d khi bn click v link tng

ng:



22/93



1 Name

Chn tt c phn t m kt ni vi phn t cName cho.

2 #ID

Chn mt phn t n m kt ni viID cho.

3 .Class

Chn tt c phn t m kt ni viClass cho.

4 Universal (*)

Chn tt c phn t c sn trong mt DOM.

5 Multiple Elements E, F, G

Chn cc kt qu c t hp t tt c cc b chnE, FhocG cho..

V dvSelector trong jQueryTng t vi cc c php v v d trn, cc v d sau s gip bn hiu thm v cc loi khc nhau

ca cc Selector hu ch khc.


1 $('*')

Selector ny chn tt c phn t trong ti liu

2 $("p > *")

Selector ny chn tt c phn t m l con ca mt phn t on vn

3 $("#specialID")
http://vietjack.com/jquery/selector-element-name.jsphttp://vietjack.com/jquery/selector-element-name.jsphttp://vietjack.com/jquery/selector-element-id.jsphttp://vietjack.com/jquery/selector-element-id.jsphttp://vietjack.com/jquery/selector-element-class.jsphttp://vietjack.com/jquery/selector-element-class.jsphttp://vietjack.com/jquery/selector-universal.jsphttp://vietjack.com/jquery/selector-universal.jsphttp://vietjack.com/jquery/selector-multiple-elements.jsphttp://vietjack.com/jquery/selector-multiple-elements.jsphttp://vietjack.com/jquery/selector-multiple-elements.jsphttp://vietjack.com/jquery/selector-universal.jsphttp://vietjack.com/jquery/selector-element-class.jsphttp://vietjack.com/jquery/selector-element-id.jsphttp://vietjack.com/jquery/selector-element-name.jsp


23/93



Hm Selector ny nhn phn t vi id= "specialID"

4 $(".specialClass")

Selector ny nhn tt c cc phn t m c class l specialClass.

5 $("li:not(.myclass)")

Chn tt c phn t c kt ni bi th m khng c class="myclass".

6 $("a#specialID.specialClass")

Selector ny kt ni lin kt vi mt id lspecialIDv mt class lspecialClass.

7 $("p a.specialClass")

Selector ny kt ni lin kt vi mt class lspecialClassc khai bo trong phn t

.

8 $("ul li:first")

Selector ny ch nhn phn t u tin ca phn t .

9 $("#container p")

Chn tt c phn t c kt ni bi

m l con ca mt phn t c mt id

lcontainer.

10 $("li > ul")

Chn tt c phn t c kt ni bi m l con ca mt phn t c kt

ni.

11 $("strong + em")

Chn tt c phn t c kt ni bi m theo ngay sau mt phn t anh c

kt ni bi .


24/93



12 $("p ~ ul")

Chn tt c phn t c kt ni bi m theo sau mt phn t anh c kt ni

bi

.

13 $("code, em, strong")

Chn tt c phn t c kt ni bi or hoc .

14 $("p strong, .myclass")

Chn tt c phn t c kt ni bi m l con ca mt phn t c kt

ni bi

cng nh tt c cc phn t m c mt class l myclass.

15 $(":empty")

Chn tt c cc phn t m khng c phn t con.

16 $("p:empty")


m khng c phn t con

17 $("div[p]")

Chn tt c phn t c kt ni bi m cha mt phn t c kt ni bi

.

18 $("p[.myclass]")


m cha mt phn t vi mt class

lmyclass.

19 $("a[@rel]")

Chn tt c phnt c kt ni bi m c mt thuc tnhrel.

20 $("input[@name=myname]")

Chn tt c phn t c kt ni bi m c mt gi tr name chnh xc tng


25/93



ng vimyname.

21 $("input[@name^=myname]")

Chn tt c phn t c kt ni bi m c mt gi tr tn bt uvimyname.

22 $("a[@rel$=self]")

Chn tt c phn t c kt ni bi m c gi tr thuc tnh relkt thc lself.

23 $("a[@href*=domain.com]")

Chn tt c phn t c kt ni bi m c mt gi tr href cha domain.com.

24 $("li:even")

Chn tt c phn t c kt ni bi m c mt gi tr ch mc even.

25 $("tr:odd")

Chn tt c phn t c kt ni bi m c mt gi tr ch mc odd

26 $("li:first")

Chn phn t u tin.

27 $("li:last")

Chn phn t cui cng.

28 $("li:visible")

Chn tt c phn t c kt ni bi m l visible (nhn thy).

29 $("li:hidden")

Chn tt c phn t c kt ni bi m l hidden (n).


26/93



30 $(":radio")

Chn tt c nt radio trong Form

31 $(":checked")

Chn tt c hp thoi checked trong Form

32 $(":input")

Ch chn cc phn t form (input, select, textarea, button).

33 $(":text")

Ch chn cc phn t text (input[type=text]).

34 $("li:eq(2)")

Chn phn t th ba.

35 $("li:eq(4)")

Chn phn t th nm.

36 $("li:lt(2)")

Chn tt c phn t c kt ni bi trc phn t th hai; ni cch khc, chn

hai phn t u tin.

37 $("p:lt(3)")


trc phn t th t; ni cch khc, chn

ba phn t

u tin.

38 $("li:gt(1)")

Chn tt c phn t c kt ni bi sau phn t th hai.


27/93



39 $("p:gt(2)")


sau phn t th ba.

40 $("div/p")


m l con ca mt phn t c kt ni bi

.

41 $("div//code")

Chn tt c phn t c kt ni bi m l con ca mt phn t c kt ni

bi .

42 $("//p//a")

Chn tt c phn t c kt ni bi m l con ca mt phn t c kt ni bi

43 $("li:first-child")

Chn tt c phn t c kt ni bi m l con u tin ca phn t cha.

44 $("li:last-child")

Chn tt c phn t c kt ni bi m l con cui cng ca phn t cha.

45 $(":parent")

Chn tt c phn t m l cha ca phn t khc, bao gm text.

46 $("li:contains(second)")

Chn tt c phn t c kt ni bi m cha vn bn l second.

Bn c th s dng tt c cc Selector trn vi bt k phn t HTML/XML no theo cch chung. V

d, nu Selector$("li:first")lm vic cho phn t th khi ,$("p:first")s cng lm vic cho

phn t

.


28/93



Thuc tnh trong jQueryMt s thnh phn c bn nht, chng ta c th thao tc vi cc phn t DOM, l cc c tnh v

cc thuc tnh c gn cho cc phn t .

Hu htnhng thuc tnh ny l c sn thng qua JavaScript nh l cc thuc tnh DOM node.

Mt s thuc tnh ph bin hn l:

className

tagName

id

href

title rel

src

Xem xt on HTML code sau nh du cho mt phn t image:

Trong vic nh du phn t ny,tag namel img, v vic nh du choid, src, alt, class, v

titlebiu din cc thuc tnh ca phn t, mi thuc tnh gm mt tn v mt gi tr.

jQuery cung cp cho chng ta cc phng thc thao tc cc thuc tnh ca phn t mt cch

d dng v gip chng ta truy cp ti cc phn t ny m chng ta c th thay i cc tnh cht

ca chng.

Nhn gi trthuc tnh trong jQueryPhng thcattr()c th c s dng nhn gi tr ca mt thuc tnh t phn t u tin

trong tp hp kt ni hoc thit lp cc gi tr thuc tnh trn cc phn t c kt ni.

V dSau y l mt v d n gin m nhn thuc tnh title ca th v thit lp gi tr vi cng gi tr.


29/93



The jQuery Example


vartitle =$("em").attr("title");

$("#divid").text(title);

});

This is first paragraph.


N s cho kt qu sau:

Thit lp gi trthuc tnh trong jQueryPhng thcattr(name, value)c th c s dng thit lp thuc tnh t tn trn tt c

phn t trong tp hp c bao bi s dng value truyn.

V dV d n gin sau thit lp thuc tnhsrcca mt th image ti mt v tr chnh xc.

The jQuery Example


30/93




$("#myimg").attr("src","../images/jquery.jpg");

});

N s cho kt qu sau:

p dng Style trong jQueryPhng thcaddClass( classes )c th c s dng p dng cc Style Sheet c nh

ngha trn tt c phn t c kt ni. Bn c th nh r nhiu class phn bit nhau bi khong

trng.

V dV d n gin sau thit lp thuc tnhclassca mt th

:

The jQuery Example


31/93


32/93



2 attr( key, fn )

Thit lp mt thuc tnh n ti mt gi tr c tnh ton, trn tt c phn t c kt

ni.

3 removeAttr( name )

G b mt thuc tnh t mi phn t c kt ni.

4 hasClass( class )

Tr v true nu class cho l c mt t nht mt phn t trong tp hp cc phn t

c kt ni.

5 removeClass( class )

G b tt c hoc cc class cho t tp hp cc phn t c kt ni

6 toggleClass( class )

Thm class cho nu n khng c mt, g b class cho nu n c mt

7 html( )

Nhn cc ni dung HTML ca phn t u tin c kt ni.

8 html( val )

Thit lp cc ni dung HTML ca mi phn t c kt ni.

9 text( )

Nhn ni dung text t hp ca tt c cc phn t c kt ni

10 text( val )

Thit lp ni dung text ca tt c phn t c kt ni
http://vietjack.com/jquery/attr-key-function.jsphttp://vietjack.com/jquery/attr-key-function.jsphttp://vietjack.com/jquery/attr-remove-attribute.jsphttp://vietjack.com/jquery/attr-remove-attribute.jsphttp://vietjack.com/jquery/attr-has-class.jsphttp://vietjack.com/jquery/attr-has-class.jsphttp://vietjack.com/jquery/attr-remove-class.jsphttp://vietjack.com/jquery/attr-remove-class.jsphttp://vietjack.com/jquery/attr-toggle-class.jsphttp://vietjack.com/jquery/attr-toggle-class.jsphttp://vietjack.com/jquery/attr-html.jsphttp://vietjack.com/jquery/attr-html.jsphttp://vietjack.com/jquery/attr-html-val.jsphttp://vietjack.com/jquery/attr-html-val.jsphttp://vietjack.com/jquery/attr-text.jsphttp://vietjack.com/jquery/attr-text.jsphttp://vietjack.com/jquery/attr-text-val.jsphttp://vietjack.com/jquery/attr-text-val.jsphttp://vietjack.com/jquery/attr-text-val.jsphttp://vietjack.com/jquery/attr-text.jsphttp://vietjack.com/jquery/attr-html-val.jsphttp://vietjack.com/jquery/attr-html.jsphttp://vietjack.com/jquery/attr-toggle-class.jsphttp://vietjack.com/jquery/attr-remove-class.jsphttp://vietjack.com/jquery/attr-has-class.jsphttp://vietjack.com/jquery/attr-remove-attribute.jsphttp://vietjack.com/jquery/attr-key-function.jsp


33/93



11 val( )

Nhn gi tr u vo ca phn t u tin c kt ni

12 val( val )

Thit lp gi tr thuc tnh ti mi phn t c kt ni nu n c gi trn

nhng nu c gi trn vi gi tr c truyn th khi option

c truyn s c chn, nu n c gi trn checkbox hoc radiobox th khi

tt c checkbox v radiobox kt ni s c kim tra.

V dTng t nh c php v cc v d trn, v d sau s gip bn hiu hn v s s dng cc

phng thc Attribute a dng trong cctnh hung khc nhau:


1 $("#myID").attr("custom")

Phng thc ny s tr v gi tr ca thuc tnhcustomcho phn t u tin kt ni

vi id l myID.

2 $("img").attr("alt", "Sample Image")

Phng thc ny thit lp thuc tnhaltca tt c cc Image ti mt gi tr "Sample

Image" mi.

3 $("input").attr({ value: "", title: "Please enter a value" });

Thit lp gi tr ca tt c phn t thnh chui trng, cng nh thit lp The

jQuery Example thnh Please enter a value.

4 $("a[href^=http://]").attr("target","_blank")

Chn tt c link vi mt thuc tnh href bt u vihttp://v thit lp thuc tnh target

ca n l_blank.
http://vietjack.com/jquery/attr-val.jsphttp://vietjack.com/jquery/attr-val.jsphttp://vietjack.com/jquery/attr-val-val.jsphttp://vietjack.com/jquery/attr-val-val.jsphttp://vietjack.com/jquery/attr-val-val.jsphttp://vietjack.com/jquery/attr-val.jsp


34/93



5 $("a").removeAttr("target")

Phng thc ny g b thuc tnhtargetca tt c cc link

6 $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

Phng thc ny sa i thuc tnh "disabled" ti gi tr "disabled" trong khi click vo

nt Submit.

7 $("p:last").hasClass("selected")

Tr v true nu th

cui cng c class l selected.

8 $("p").text()

Tr v chui cha ni dung text t hp ca tt c phn t

c kt ni.

9 $("p").text("Hello World")

Phng thc ny s thit lp "Hello World" nh l ni dung text ca cc phn

t

kt ni.

10 $("p").html()

Phng thc ny tr v ni dung HTML ca tt c on vn kt ni

11 $("div").html("Hello World")

Phng thc ny s thit lp ni dung HTML ca tt c th kt ni thnhHello

World.

12 $("input:checkbox:checked").val()

Nhn gi tr utin t mt checkbox checked

13 $("input:radio[name=bar]:checked").val()

Nhn gi tr u tin t mt tp hp cc nt radio.


35/93



14 $("button").val("Hello")

Thit lp thuc tnh gi tr ca mi phn t c kt ni.

15 $("input").val("on")

Phng thc ny s kim tra tt c cc nt radiobox hoc checkbox m gi tr ca n

l "on".

16 $("select").val("Orange")

Phng thc ny s chn ty chn Orange trong hp dropdown cc ty chn Orange,

Mango v Banana.

17 $("select").val("Orange", "Mango")

Phng thc ny s chn cc ty chn Orange v Mango trong mt hp dropdown

vi cc ty chn Orange, Mango v Banana.

Truy cp DOM trong jQueryjQuery l mt cng c v cng mnh m. N cung cp cc phng thc a dng truy cp DOM

(DOM Traversal Method), gip chng ta chn cc phn t trong mt ti liu mt cch ngu nhinhoc theo phng thc lin tc.

Hu ht DOM Traversal Method khng sa i i tng jQuery v chng c s dng lc

cc phn t ca chng t mt ti liu trn c s cc iu kin cho.

Tm kim cc phn tbi chmc (index) trong jQueryBn xem xt v d sau v mt ti liu n gin vi ni dung HTML sau:

The JQuery Example


36/93



list item 1

list item 2

list item 3

list item 4

list item 5

list item 6

N sto kt qu sau:

trn, mi list c mt index ring ca n, v c th c xc nh v tr bi s dng

phng thceq(index)nh v d di.

Mi phn t con bt u index ca n t 0, v th, list item 2 s c truy cp bi s

dng$("li").eq(1)v tiptc nh th.

V dV d n gin sau thm mu cholist itemth ba.

The JQuery Example



37/93



$("li").eq(2).addClass("selected");

});

.selected {color:red;}

list item 1

list item 2

list item 3

list item 4

list item 5

list item 6

N s cho kt qu sau:

Lc cc phn ttrong jQueryPhng thcfilter( selector )c th c s dng lc ra tt c cc phn t t tp hp cc

phn t c kt ni m khng kt ni vi Selector cho.selectorc thc vit bi s dng

bt k c php Selector no.


38/93



V dV d n gin sau p dng mu ti cc list m lin kt vi class lmiddle:

The JQuery Example


$("li").filter(".middle").addClass("selected");

});


list item 1

list item 2

list item 3

list item 4

list item 5

list item 6


39/93



N s cho kt qu sau:

Xc nh vtr cc phn tcon trong jQueryPhng thcfind( selector )c th c s dng xc nh v tr tt c phn t con ca mt

loi phn t c th.selectorc th c vit bi s dng bt k c php selector no.

V dV d n gin sau chn tt c phn t c sn bn trong cc phn t

khc nhau.

The JQuery Example


$("p").find("span").addClass("selected");

});


This is 1st paragraph and THIS IS RED

This is 2nd paragraph and THIS IS ALSO RED


40/93



N s cho kt qu sau:

Cc phng thc DOM Filter trong jQueryBng di lit k cc phng thchu ch gip bn c th s dng lc ra cc phn t a dng

t mt danh sch cc phn t DOM:


1 eq( index )

Rt gn tp hp phn t c kt ni thnh mt phn t n

2 filter( selector )

G b tt c phn t t tp hp cc phn t c kt ni m khng kt ni vi

selector c th cho.

3 filter( fn )

G b tt c phn t t tp hp cc phn t c kt ni m khng kt ni vi hm

c th cho

4 is( selector )

Kimtra s chn lc hin ti vi mt Expression v tr v true, nu t nht mt phn

t ca s chn lc ph hp vi selector cho

5 map( callback )

Tnh tin mt tp hp cc phn t trong i tng jQuery vo trong tp hp cc gi tr

khc trong mt mng jQuery (nu c th hoc khng cha cc phn t)
http://vietjack.com/jquery/traversal-eq.jsphttp://vietjack.com/jquery/traversal-eq.jsphttp://vietjack.com/jquery/traversal-filter.jsphttp://vietjack.com/jquery/traversal-filter.jsphttp://vietjack.com/jquery/traversal-filter-fn.jsphttp://vietjack.com/jquery/traversal-filter-fn.jsphttp://vietjack.com/jquery/traversal-is.jsphttp://vietjack.com/jquery/traversal-is.jsphttp://vietjack.com/jquery/traversal-map.jsphttp://vietjack.com/jquery/traversal-map.jsphttp://vietjack.com/jquery/traversal-map.jsphttp://vietjack.com/jquery/traversal-is.jsphttp://vietjack.com/jquery/traversal-filter-fn.jsphttp://vietjack.com/jquery/traversal-filter.jsphttp://vietjack.com/jquery/traversal-eq.jsp


41/93



6 not( selector )

G b tt c cc phn t kt ni vi selector cho t tp hp cc phn t c kt

ni.

7 slice( start, [end] )

Chn mt tp hp con ca cc phn t c kt ni

Cc phng thc DOM Traversing trong jQueryBng di lit k tt c phng thc hu ch bnc th s dng xc nh v tr cc phn t a

dng trong mt DOM:


1 add( selector )

Thm nhiu phn t, kt ni bi selector cho, ti tp hp cc phn t ckt

ni.

2 andSelf( )

Thm s chn lc trc ti s chn lc hin ti

3 children( [selector])

Nhn mt tp hp cc phn tcha tt c cc phn t con trc tip duy nht ca mi

mt trong tp hp cc phn t c kt ni.

4 closest( selector )

Nhn mt tp hp cc phn t cha phn t cha gn nht m kt ni selector cho,

bao gm phn t bt u

5 contents( )

Tm tt cnodecon bn trong cc phn t c kt ni (bao gm c cc text node),
http://vietjack.com/jquery/traversal-not.jsphttp://vietjack.com/jquery/traversal-not.jsphttp://vietjack.com/jquery/traversal-slice.jsphttp://vietjack.com/jquery/traversal-slice.jsphttp://vietjack.com/jquery/traversal-add.jsphttp://vietjack.com/jquery/traversal-add.jsphttp://vietjack.com/jquery/traversal-andself.jsphttp://vietjack.com/jquery/traversal-andself.jsphttp://vietjack.com/jquery/traversal-children.jsphttp://vietjack.com/jquery/traversal-children.jsphttp://vietjack.com/jquery/traversal-closest.jsphttp://vietjack.com/jquery/traversal-closest.jsphttp://vietjack.com/jquery/traversal-contents.jsphttp://vietjack.com/jquery/traversal-contents.jsphttp://vietjack.com/jquery/traversal-contents.jsphttp://vietjack.com/jquery/traversal-closest.jsphttp://vietjack.com/jquery/traversal-children.jsphttp://vietjack.com/jquery/traversal-andself.jsphttp://vietjack.com/jquery/traversal-add.jsphttp://vietjack.com/jquery/traversal-slice.jsphttp://vietjack.com/jquery/traversal-not.jsp


42/93



hoc ni dung ti liu, nu phn t l mt Iframe.

6 end( )

Bin i hot ng ph hy (destructive) gn y nht, thay i tp hp cc phn tv trng thi trc .

7 find( selector )

Tm kim cc phn t con m kt ni vi selector cho.

8 next( [selector] )

Nhn mt tp hp cc phn t cha anh (em) k tip duy nht ca mi phn t trongtp hp phn t cho.

9 nextAll( [selector] )

Tm tt c cc phn t anh em k sau phn t hin ti

10 offsetParent( )

Tr v mt tp hp jQuery vi phn t cha xc nh v tr ca phn t c kt ni

u tin

11 parent( [selector] )

Nhn cha trc tip ca mt phn t. Nu c gi trn mt tp hp cc phn t,

phng thc parent tr v mt tp hp cc phn t cha trc tip duy nht

12 parents( [selector] )

Nhn mt tp hp cc phn t cha t tin (ancestor) ca tp hp cc phn t kt

ni (ngoi tr cc phn t root)

13 prev( [selector] )

Nhn mt tp hp cc phn t cha phn t anh em trc duy nht ca mi phn
http://vietjack.com/jquery/traversal-end.jsphttp://vietjack.com/jquery/traversal-end.jsphttp://vietjack.com/jquery/traversal-find.jsphttp://vietjack.com/jquery/traversal-find.jsphttp://vietjack.com/jquery/traversal-next.jsphttp://vietjack.com/jquery/traversal-next.jsphttp://vietjack.com/jquery/traversal-nextall.jsphttp://vietjack.com/jquery/traversal-nextall.jsphttp://vietjack.com/jquery/traversal-offsetparent.jsphttp://vietjack.com/jquery/traversal-offsetparent.jsphttp://vietjack.com/jquery/traversal-parent.jsphttp://vietjack.com/jquery/traversal-parent.jsphttp://vietjack.com/jquery/traversal-parents.jsphttp://vietjack.com/jquery/traversal-parents.jsphttp://vietjack.com/jquery/traversal-prev.jsphttp://vietjack.com/jquery/traversal-prev.jsphttp://vietjack.com/jquery/traversal-prev.jsphttp://vietjack.com/jquery/traversal-parents.jsphttp://vietjack.com/jquery/traversal-parent.jsphttp://vietjack.com/jquery/traversal-offsetparent.jsphttp://vietjack.com/jquery/traversal-nextall.jsphttp://vietjack.com/jquery/traversal-next.jsphttp://vietjack.com/jquery/traversal-find.jsphttp://vietjack.com/jquery/traversal-end.jsp


43/93


44/93



The jQuery Example


$("li").eq(2).css("color","red");

});

list item 1

list item 2

list item 3

list item 4

list item 5

list item 6

N s cho kt qu sau:


45/93



p dng nhiu thuc tnh CSS trong jQueryBn c th p dng nhiu thuc tnh CSS bi s dng phng thc CSS( {key1:val1,

key2:val2....)ca jQuery. Bn c th p dng bao nhiu thuc tnh nh bn mun ch trong mt ln

gi phng thc n.

Sau y l c php cho phng thc ny:

selector.css( {key1:val1, key2:val2....keyN:valN})

Ti y bn c th truynkeynh l thuc tnh vvalnh l gi tr ca n c miu t trn.

V dSau y l v d n gin m thm mu Font cng nh mu nn tilist itemth 3:

The jQuery Example


$("li").eq(2).css({"color":"red","background-color":"green"});

});

list item 1

list item 2

list item 3

list item 4


46/93



list item 5

list item 6

N s cho kt qu sau:

Thit lp rng v chiu cao phn ttrong jQueryPhng thcwidth( val )v height( val )c th c s dng thit lp rng v chiu caotng ng ca bt k phn t.

V dV d n gin sau thit lp rng ca phn t div u tin, trong khi phn cn li ca cc phn

t c rng c thit lp bi Style Sheet.

The jQuery Example


$("div:first").width(100);

$("div:first").css("background-color","blue");

});

div{width:70px;height:50px;float:left;margin:5px;background:red;cursor:pointer;

}


47/93



d

d

d

d

N s cho kt qu sau:

Cc phng thc CSS trong jQueryBng di lit k tt c phng thc m bn c th s dng x l cc thuc tnh CSS:


1 css( name )

Tr v thuc tnh style trn phn t kt ni u tin

2 css( name, value )

Thit lp thuc tnh style n ti mt gi tr trn tt c phn t kt ni

3 css( properties )

Thit lp mt i tng key/value nh l cc thuc tnh style ti tt c cc phn t

kt ni

4 height( val )
http://vietjack.com/jquery/css-name.jsphttp://vietjack.com/jquery/css-name.jsphttp://vietjack.com/jquery/css-name-value.jsphttp://vietjack.com/jquery/css-name-value.jsphttp://vietjack.com/jquery/css-properties.jsphttp://vietjack.com/jquery/css-properties.jsphttp://vietjack.com/jquery/css-height-val.jsphttp://vietjack.com/jquery/css-height-val.jsphttp://vietjack.com/jquery/css-height-val.jsphttp://vietjack.com/jquery/css-properties.jsphttp://vietjack.com/jquery/css-name-value.jsphttp://vietjack.com/jquery/css-name.jsp


48/93



Thit lp chiu cao CSS ca mi phn t kt ni

5 height( )

Nhn chiu cao, gi tr pixel, c tnh ton hin tica phn t kt ni u tin

6 innerHeight( )

Nhn chiu cao bn trong (tr Border v bao gm padding) cho phn t kt ni u

tin

7 innerWidth( )

Nhn rng bn trong (tr Border v bao gm padding) cho phn t kt ni utin.

8 offset( )

Nhn offset hin ti ca phn t kt ni u tin, bng gi tr pixel, lin quan ti ti liu

9 offsetParent( )

Tr v mt tp hp jQuery vi phn t cha xc nh v tr ca phn t kt ni u

tin

10 outerHeight( [margin] )

Nhn chiu cao bn ngoi (bao gm Border v padding theo mc nh) cho phn t

kt ni u tin

11 outerWidth( [margin] )

Nhn rng bn ngoi (bao gm Border v padding theo mc nh) cho phn t

kt ni u tin

12 position( )

Nhn v tr trn cng v bn tri ca mt phn t lin quan ti phn t cha offset ca
http://vietjack.com/jquery/css-height.jsphttp://vietjack.com/jquery/css-height.jsphttp://vietjack.com/jquery/css-innerheight.jsphttp://vietjack.com/jquery/css-innerheight.jsphttp://vietjack.com/jquery/css-innerwidth.jsphttp://vietjack.com/jquery/css-innerwidth.jsphttp://vietjack.com/jquery/css-offset.jsphttp://vietjack.com/jquery/css-offset.jsphttp://vietjack.com/jquery/css-offsetparent.jsphttp://vietjack.com/jquery/css-offsetparent.jsphttp://vietjack.com/jquery/css-outerheight.jsphttp://vietjack.com/jquery/css-outerheight.jsphttp://vietjack.com/jquery/css-outerwidth.jsphttp://vietjack.com/jquery/css-outerwidth.jsphttp://vietjack.com/jquery/css-position.jsphttp://vietjack.com/jquery/css-position.jsphttp://vietjack.com/jquery/css-position.jsphttp://vietjack.com/jquery/css-outerwidth.jsphttp://vietjack.com/jquery/css-outerheight.jsphttp://vietjack.com/jquery/css-offsetparent.jsphttp://vietjack.com/jquery/css-offset.jsphttp://vietjack.com/jquery/css-innerwidth.jsphttp://vietjack.com/jquery/css-innerheight.jsphttp://vietjack.com/jquery/css-height.jsp


49/93



n

13 scrollLeft( val )

Khi mt gi tr c truyn vo trong, scrollLeft offset c thit lp ti gi tr trncc phn t kt ni.

14 scrollLeft( )

Nhn ScrollLeft offset ca phn t kt ni u tin

15 scrollTop( val )

Khi mt gi tr c truyn vo, scrollTop offset c thit lp ti gi tr trn tt cphn t kt ni

16 scrollTop( )

Nhn scrollTop offset ca phn t kt ni u tin.

17 width( val )

Thit lp rng CSS ca mi phn t kt ni

18 width( )

Nhn rng, gi tr pixel, c tnh ton hin ti ca phn t kt ni u tin

Thao tc DOM trong jQueryjQuery cung cp cc phng thc thao tc vi DOM mt cch cc k hiu qu. Bn khng cn

vit nhng on code qu di sa i gi tr thuc tnh ca bt k phn t no hoc trch(extract) cc on HTML code t mt th p hoc div.

jQuery cung cp cc phng thc nh.attr(), .html(), .val() thu nhn thng tin t cc phn t

DOM s dng cho ln sau.
http://vietjack.com/jquery/css-scrollleft-val.jsphttp://vietjack.com/jquery/css-scrollleft-val.jsphttp://vietjack.com/jquery/css-scrollleft.jsphttp://vietjack.com/jquery/css-scrollleft.jsphttp://vietjack.com/jquery/css-scrolltop-val.jsphttp://vietjack.com/jquery/css-scrolltop-val.jsphttp://vietjack.com/jquery/css-scrolltop.jsphttp://vietjack.com/jquery/css-scrolltop.jsphttp://vietjack.com/jquery/css-width-val.jsphttp://vietjack.com/jquery/css-width-val.jsphttp://vietjack.com/jquery/css-width.jsphttp://vietjack.com/jquery/css-width.jsphttp://vietjack.com/jquery/css-width.jsphttp://vietjack.com/jquery/css-width-val.jsphttp://vietjack.com/jquery/css-scrolltop.jsphttp://vietjack.com/jquery/css-scrolltop-val.jsphttp://vietjack.com/jquery/css-scrollleft.jsphttp://vietjack.com/jquery/css-scrollleft-val.jsp


50/93



Thao tc ni dung trong jQueryPhng thchtml( )nhn ni dung html (bn trong HTML) ca phn t kt ni u tin.

Di y l c php ca phng thc .html():

selector.html( )

V dV d n gin sau s dng cc phng thc.html()v .text(val). Trong , .html() thu nhn ni

dung HTML t i tng v sau phng thc .text(val) thit lp gi tr ca i tng bi s

dng tham s truyn.

The jQuery Example



varcontent =$(this).html();

$("#result").text(content );

});

});

#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}


51/93



Click on the square below:

This is Blue Square!!

N s cho kt qu:

Thay thphn tDOM trong jQueryBn c th thay th hon ton mt phn t DOM vi cc phn t HTML hoc DOM xc nh.

Phng thcreplaceWith( content )thc hin mc ch ny rt hiu qu.

Sau y l c php:

selector.replaceWith( content )

y,contentl nhng g bn mun thay th cho phn t ban u. N c th l HTML hoc vn

bn.

V dV d n gin sau s thay th phn t div vi "JQuery is Great"

The jQuery Example



$(this).replaceWith("JQuery is Great");


52/93



});

});

#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}

Click on the square below:

This is Blue Square!!

N s cho kt qu sau:

Gbcc phn tDOM trong jQueryC th c mt tnh hung khi bn mun g b mt hoc nhiu phn t DOM t ti liu. jQuery

cung cp hai phng thc x l tnh hung ny:

Phng thcempty( )g b tt c node con t tp hp cc phn t kt ni, trong khi phngthcremove( expr )g b tt c cc phn t kt ni t DOM.

Di y l c php:

selector.remove( [ expr ])


53/93



or

selector.empty( )

Bn c th truyn tham sexprty lc tp hp cc phn t cn g b.

V dTrong v d n gin, cc phn t c g b ngay sau khi chng c click:

The jQuery Example



$(this).remove();

});

});

.div{margin:10px;padding:12px;border:2pxsolid #666; width:60px;}

Click on any square below:


54/93



N s cho kt qu sau:

Chn cc phn tDOM trong jQueryC th c tnh hung khi bn mun chn mt hoc nhiu phn t DOM mi vo trong ti liu ang

tn ti ca bn. jQuery cung cpnhiu phng thc a dng chn cc phn t vo cc v tr

khc nhau.

Phng thcafter( content )chn content sau mi phn t kt ni, trong khi phng

thcbefore( content )chn content trc mi phn t kt ni.

Di y l c php ca cc phng thc:

selector.after( content )

or

selector.before( content )

y,contentl nhng g bn mun chn. N c th l HTML hoc vn bn.

V dTrong v d sau, cc phn tdivc chn ngay trc phn t c click:

The jQuery Example



55/93




$(this).before('');

});

});


Click on any square below:

N s cho kt qu sau:

Cc phng thc thao tc DOM trong jQueryDi y lit k tt c phng thc m bn c th s dng thao tc cc phn t DOM:


1 after( content )
http://vietjack.com/jquery/dom-after.jsphttp://vietjack.com/jquery/dom-after.jsphttp://vietjack.com/jquery/dom-after.jsp


56/93



Chn content sau mi phn t kt ni

2 append( content )

Ph thm content ti bn trong mi phn t kt ni

3 appendTo( selector )

Ph thm tt c phn t kt ni ti tp hp phn t cho khc

4 before( content )

Chn content trc mi phn t kt ni

5 clone( bool )

M phng cc phn t DOM kt ni, v tt c cc Event Handler ca chng, v

chn cc m phng

6 clone( )

M phng cc phn t DOM kt ni v chn cc m phng

7 empty( )

G b tt c ccnodecon t tp hp cc phn t kt ni

8 html( val )

Thit lp cc ni dung HTML ca mi phn t kt ni

9 html( )

Nhn cc ni dung HTML (HTML bn trong) ca phn t kt ni u tin

10 insertAfter( selector )

Chn tt c phn t kt ni vo sau tp hp cc phn t xc nh khc
http://vietjack.com/jquery/dom-append.jsphttp://vietjack.com/jquery/dom-append.jsphttp://vietjack.com/jquery/dom-appendto.jsphttp://vietjack.com/jquery/dom-appendto.jsphttp://vietjack.com/jquery/dom-before.jsphttp://vietjack.com/jquery/dom-before.jsphttp://vietjack.com/jquery/dom-clone-bool.jsphttp://vietjack.com/jquery/dom-clone-bool.jsphttp://vietjack.com/jquery/dom-clone.jsphttp://vietjack.com/jquery/dom-clone.jsphttp://vietjack.com/jquery/dom-empty.jsphttp://vietjack.com/jquery/dom-empty.jsphttp://vietjack.com/jquery/dom-html-val.jsphttp://vietjack.com/jquery/dom-html-val.jsphttp://vietjack.com/jquery/dom-html.jsphttp://vietjack.com/jquery/dom-html.jsphttp://vietjack.com/jquery/dom-insertafter.jsphttp://vietjack.com/jquery/dom-insertafter.jsphttp://vietjack.com/jquery/dom-insertafter.jsphttp://vietjack.com/jquery/dom-html.jsphttp://vietjack.com/jquery/dom-html-val.jsphttp://vietjack.com/jquery/dom-empty.jsphttp://vietjack.com/jquery/dom-clone.jsphttp://vietjack.com/jquery/dom-clone-bool.jsphttp://vietjack.com/jquery/dom-before.jsphttp://vietjack.com/jquery/dom-appendto.jsphttp://vietjack.com/jquery/dom-append.jsp


57/93



11 insertBefore( selector )

Chn tt c phn t kt ni vo trc tp hp cc phn t xc nh khc

12 prepend( content )

Thm vo trc content ti bn trong mi phn t kt ni

13 prependTo( selector )

Thm vo trc tt c phn t kt ni ti tp hp cc phn t xc nh khc

14 remove( expr )

G b tt c phn t kt ni t DOM

15 replaceAll( selector )

Thay th cc phn t kt ni bi Selector cho vi cc phn t c kt ni

16 replaceWith( content )

Thay th tt c phn t kt ni vi cc phn t HTML hoc DOM xc nh

17 text( val )

Thit lp cc ni dung text ca tt c phn t kt ni

18 text( )

Nhn cc ni dung text t hp ca tt c phn t kt ni

19 wrap( elem )

Bao bc (wrap) mi phn t kt ni vi phn t xc nh

20 wrap( html )
http://vietjack.com/jquery/dom-insertbefore.jsphttp://vietjack.com/jquery/dom-insertbefore.jsphttp://vietjack.com/jquery/dom-prepend.jsphttp://vietjack.com/jquery/dom-prepend.jsphttp://vietjack.com/jquery/dom-prependto.jsphttp://vietjack.com/jquery/dom-prependto.jsphttp://vietjack.com/jquery/dom-remove-expr.jsphttp://vietjack.com/jquery/dom-remove-expr.jsphttp://vietjack.com/jquery/dom-replaceall.jsphttp://vietjack.com/jquery/dom-replaceall.jsphttp://vietjack.com/jquery/dom-replacewith.jsphttp://vietjack.com/jquery/dom-replacewith.jsphttp://vietjack.com/jquery/dom-text-val.jsphttp://vietjack.com/jquery/dom-text-val.jsphttp://vietjack.com/jquery/dom-text.jsphttp://vietjack.com/jquery/dom-text.jsphttp://vietjack.com/jquery/dom-wrap-elem.jsphttp://vietjack.com/jquery/dom-wrap-elem.jsphttp://vietjack.com/jquery/dom-wrap-html.jsphttp://vietjack.com/jquery/dom-wrap-html.jsphttp://vietjack.com/jquery/dom-wrap-html.jsphttp://vietjack.com/jquery/dom-wrap-elem.jsphttp://vietjack.com/jquery/dom-text.jsphttp://vietjack.com/jquery/dom-text-val.jsphttp://vietjack.com/jquery/dom-replacewith.jsphttp://vietjack.com/jquery/dom-replaceall.jsphttp://vietjack.com/jquery/dom-remove-expr.jsphttp://vietjack.com/jquery/dom-prependto.jsphttp://vietjack.com/jquery/dom-prepend.jsphttp://vietjack.com/jquery/dom-insertbefore.jsp


58/93



Wrap mi phn t kt ni vi ni dung HTML xc nh

21 wrapAll( elem )

Wrap tt c phn t trong tp hp kt ni vo trong mt phn t bao bc n (elem y l phn t DOM)

22 wrapAll( html )

Wrap tt c phn t trong tp hp kt ni vo trong mt phn t bao bc n (html

l phn t HTML)

23 wrapInner( elem )

Wrap cc ni dung con bn trong mi phn t kt ni (bao gm cc node vn bn)

vi mt phn t DOM

24 wrapInner( html )

Wrap cc ni dung con bn trong mi phn t kt ni (bao gm cc node vn bn)

vi mt cu trc HTML

X l s kin trong jQueryChng ta c kh nng to cc trang web ng bi s dng cc S kin (Event). Cc s kin l cc

hnh ng m c th c pht hin bi ng dng web ca bn.

Sau y v d mt s s kin:

Nhp chut

Ti trang web

Di chuyn chut qua mt phn t

trnh mt HTML Form

Thao tc nhn phm trn bn phm

etc.
http://vietjack.com/jquery/dom-wrapall-elem.jsphttp://vietjack.com/jquery/dom-wrapall-elem.jsphttp://vietjack.com/jquery/dom-wrapall-html.jsphttp://vietjack.com/jquery/dom-wrapall-html.jsphttp://vietjack.com/jquery/dom-wrapinner-elem.jsphttp://vietjack.com/jquery/dom-wrapinner-elem.jsphttp://vietjack.com/jquery/dom-wrapinner-html.jsphttp://vietjack.com/jquery/dom-wrapinner-html.jsphttp://vietjack.com/jquery/dom-wrapinner-html.jsphttp://vietjack.com/jquery/dom-wrapinner-elem.jsphttp://vietjack.com/jquery/dom-wrapall-html.jsphttp://vietjack.com/jquery/dom-wrapall-elem.jsp


59/93



Khi cc s kin ny c kch hot, bn c th s dng cc hm custom phn hi bt k nhng

g bn mun vi s kin . Nhng hm custom ny gi l Event Handler.

Bind cc Event Handler trong jQueryS dng Event Model trong jQuery, chng ta c th thit lp cc Event Handler trn cc phn t

DOM vi phng thcbind()nh sau:

The jQuery Example


$('div').bind('click',function(event ){

alert('Hi there!');

});

});


Click on any square below to see the result:

ONE

TWO

THREE


60/93



Code trn s lm cho phn t div phn hi li s kin click; khi ngi s dng nhp chut bn

trong phn t div ny, ngay sau , thng bo s c hin th.

N s cho kt qu sau:

C php y ca lnhbind()trong jQuery nh sau:

selector.bind( eventType[, eventData], handler)

Tip theo, chng ti din t chi tit cc tham s:

eventType Mt chui cha mt loi JavaScript event, nh click hoc trnh. Bn theo

di phn di thy danh sch y cc loi s kin.

eventData tham s ty l mtmapca d liu m s c truyn ti Event Handler.

handler Mt hm thc thi mi khi s kin c kch hot.

GbEvent Handler trong jQueryMt nt c trng l, mi khi mt Event Handler c thnh lp, n vn cn hiu qu trong phn

sng cn li ca trang web. C mt s cn thit khi bn mun g b Event Handler ny.

jQuery cung cp lnhunbind() g b mt Event Handler ang tn ti. C php ca unbind()

trong jQuery nh sau:

selector.unbind(eventType, handler)

or

selector.unbind(eventType)

Chi tit v tham s:

eventType Mt chui cha mt loi JavaScript Event, nh click hoc trnh. Bn theo

di phn di thy danh sch y cc loi s kin.


61/93



handler Nu c cung cp, n nhn din Event Handler c th cn g b.

Cc loi skin trong jQueryBn c th kt ni (bind) cc s kin sau bi s dng jQuery:

STT Loi Event & Miu t

1 blur

Xut hin khi phn t mt trng tm

2 change

Xut hin khi phn t thay i

3 click

Xut hin khi click chut

4 dblclick

Kch hot khi nhp p chut

5 error

Xut hin khi c mt li trong qu trnh ti

6 focus

Xut hin khi phn t nhn trng tm

7 keydown

Xut hin khi phm c nhn

8 keypress


62/93



Kch hot khi phm c nhn v th ra

9 keyup

Kch hot khi phm c th ra

10 load

Xut hin khi ti liu c ti

11 mousedown

Xut hin khi nt chut c nhn

12 mouseenter

Xut hin khi chut di chuyn vo trong khu vc mt phn t

13 mouseleave

Xut hin khi chut di chuyn ra khi khu vc mt phn t

14 mousemove

Kch hot khi con tr chut di chuyn

15 mouseout

Kch hot khi con tr chut di chuyn ra khi mt phn t

16 mouseover

Kch hot khi con tr chut di chuyn qua mt phn t

17 mouseup

Xut hin khi mt nt chut c nh ra


63/93



18 resize

Kch hot khi kch c ca s thay i

19 scroll

Kch hot khi ca s c cun

20 select

Kch hot khi mt text c chn

21 submit

Kch hot khi mt form c trnh

22 unload

Kch hot khi ti liu khng c ti

i tng Event trong jQueryHm callback nhn mt tham s n; khi mt Handler c gi, i tng JavaScript Event s

c truyn qua n.

i tng Event thngkhng cn thit v tham s c b qua, khi context l thng c sn khi

Handler c kt ni bit chnh xc nhng g cn c thc hin khi Handler c kch hot;

tuy nhin c mt s thuc tnh no m bn cn truy xut.

Cc thuc tnh ca i tng Event trong jQueryCc thuc tnh ca Event l c sn v an ton truy cp theo mt phng thc c lp:

STT Thuc tnh & Miu t

1 altKey

Thit lp l true nu phm Alt c nhn khi s kin c kch hot, nu khng l


64/93



false. Phm Alt c gn nhn l Option trn hu ht bn phm Mac

2 ctrlKey

Thit lp l true nu phm Ctrl c nhn khi s kin c kch hot, nu khng lfalse

3 data

Gi tr, nu bt k, c truyn nh l tham s th hai ti lnh bind() khi Handler

c thnh lp.

4 keyCode

Cho s kin cc phm di chuyn ln, xung, iu ny tr v phm m c nhn

5 metaKey

Thit lp l true nu phm Meta c nhn khi s kin c kch hot, nu khng l

false. Phm Meta l phm Ctrl trn cc PC v phm Command trn Macs

6 pageX

Cho cc s kin lin quan ti chut, xc nh ta ngang ca s kin trong mi

quan h vi trang ban u.

7 pageY

Cho cc s kin lin quan ti chut, xc nh ta dc ca s kin trong mi quan

h vi trang ban u

8 relatedTarget

Vi mt s s kin lin quan n chut, nhn din phn t m con tr chut ri khi

hoc i vo khi s kin c kch hot.

9 screenX


65/93



Vi mt s s kin lin quan n chut, xc nh ta ngang ca s kin trong mi

quan h vi mn hnh ban u

10 screenY

Vi mt s s kin lin quan n chut, xc nh ta dc ca s kin trong mi

quan h vi mn hnh ban u

11 shiftKey

Thit lp l true nu phm Shift c nhn khi s kin c kch hot, nu khng l

false

12 target

Nhn din phn t m vi n s kin c kch hot

13 timeStamp

timestamp (gi tr mili giy) khi s kin c to ra

14 type

Vi tt c s kin, xc nh loi s kin m c kch hot

15 which

Vi cc s kin lin quan ti bn phm, xc nh code gi tr s cho phm m gy ra s

kin, v vi cc s kin lin quan ti chut, xc nh nt no c nhn (1 cho nt

tri, 2 cho gia v 3 cho nt phi)

V d

The jQuery Example


66/93




$('div').bind('click',function(event ){

alert('Event type is '+event.type);

alert('pageX : '+event.pageX);

alert('pageY : '+event.pageY);

alert('Target : '+event.target.innerHTML);

});

});


Click on any square below to see the result:

ONE

TWO

THREE

N s cho kt qu sau:


67/93


68/93




1 bind( type, [data], fn )

Bind mt Handler ti mt hoc nhiu s kin cho mi phnt kt ni. C th cng

bind cc s kin Custom

2 off( events [, selector ] [, handler(eventObject) ] )

N g b mt s kin sng c bind

3 hover( over, out )

Bt chc vic hover cho s di chuyn v d ca chut trn v ri khi mt i tng

4 on( events [, selector ] [, data ], handler )

Bind mt Handler ti mt s kin cho tt c phn t hin ti, tng lai, v kt ni.

C th cng bind cc s kin custom.

5 one( type, [data], fn )

Bind mt Handler ti mt hoc nhiu s kin c thc thi mt ln cho mi phnt kt ni

6 ready( fn )

Bind mt hm c thc thi bt c khi no DOM sn sng c thao tc

7 trigger( event, [data] )

Kch hot mt s kin trn mi phn t kt ni

8 triggerHandler( event, [data] )

Kch hot tt c Event Handler c bind trn mt phn t
http://vietjack.com/jquery/events-bind.jsphttp://vietjack.com/jquery/events-bind.jsphttp://vietjack.com/jquery/events-off.jsphttp://vietjack.com/jquery/events-off.jsphttp://vietjack.com/jquery/events-hover.jsphttp://vietjack.com/jquery/events-hover.jsphttp://vietjack.com/jquery/events-on.jsphttp://vietjack.com/jquery/events-on.jsphttp://vietjack.com/jquery/events-one.jsphttp://vietjack.com/jquery/events-one.jsphttp://vietjack.com/jquery/events-ready.jsphttp://vietjack.com/jquery/events-ready.jsphttp://vietjack.com/jquery/events-trigger.jsphttp://vietjack.com/jquery/events-trigger.jsphttp://vietjack.com/jquery/events-triggerhandler.jsphttp://vietjack.com/jquery/events-triggerhandler.jsphttp://vietjack.com/jquery/events-triggerhandler.jsphttp://vietjack.com/jquery/events-trigger.jsphttp://vietjack.com/jquery/events-ready.jsphttp://vietjack.com/jquery/events-one.jsphttp://vietjack.com/jquery/events-on.jsphttp://vietjack.com/jquery/events-hover.jsphttp://vietjack.com/jquery/events-off.jsphttp://vietjack.com/jquery/events-bind.jsp


69/93



9 unbind( [type], [fn] )

Thc hin ngc li vi bind, n g b cc i tng c bind t mi phn t kt

ni

Cc phng thc Event Helper trong jQueryjQuery cng cung cp mt tp hp cc hm Event Helper m c th c s dng hoc kch

hot mt s kin hoc bind bt k loi s kin no c cp phn trn.

Cc phng thc Trigger trong jQueryDi y l v d s kch hot s kin blur trn tt c on vn:

$("p").blur();

Phng thc Binding trong jQueryV d sau s bind mt s kinclicktrn tt c phn t

$("div").click( function () {

// do something here

});

Bng di lit k y tt c phng thc c h tr bi jQuery:


1 blur( )

Kch hot s kin blur ca mi phn t kt ni

2 blur( fn )

Bind mt hm ti s kin blur ca mi phn t kt ni

3 change( )

Kch hot s kin change ca mi phn t kt ni
http://vietjack.com/jquery/events-unbind.jsphttp://vietjack.com/jquery/events-unbind.jsphttp://vietjack.com/jquery/events-unbind.jsp


70/93



4 change( fn )

Bind mt hm ti s kin change ca mi phn t kt ni

5 click( )

Kch hot s kin click ca mi phn t kt ni

6 click( fn )

Bind mt hm ti s kin click ca mi phn t kt ni

7 dblclick( )

Kch hot s kin dblclick ca mi phn t kt ni

8 dblclick( fn )

Bind mt hm ti skin dblclick ca mi phn t kt ni

9 error( )

Kch hot s kin error ca mi phn t kt ni

10 error( fn )

Bind mt hm ti s kin error ca mi phn t kt ni

11 focus( )

Kch hot s kin focus ca mi phn t kt ni

12 focus( fn )

Bind mt hm ti s kin focus ca mi phn t kt ni

13 keydown( )


71/93



Kch hot s kin keydown ca mi phn t kt ni

14 keydown( fn )

Bind mt hm ti s kin keydown ca mi phn t kt ni

15 keypress( )

Kch hot s kin keypress ca mi phn t kt ni

16 keypress( fn )

Bind mt hm ti s kin keypress ca mi phn t kt ni

17 keyup( )

Kch hot s kin keyup ca mi phn t kt ni

18 keyup( fn )

Bind mt hm ti s kin keyup ca mi phn t kt ni

20 load( fn )

Bind mt hm ti s kin load ca mi phn t kt ni

21 mousedown( fn )

Bind mt hm ti s kin mousedown ca mi phn t kt ni

22 mouseenter( fn )

Bind mt hm ti s kin mouseenter ca mi phn t kt ni

23 mouseleave( fn )

Bind mt hmti s kin mouseleave ca mi phn t kt ni


72/93



24 mousemove( fn )

Bind mt hm ti s kin mouseover ca mi phn t kt ni

25 mouseout( fn )

Bind mt hm ti s kin mouseout ca mi phn t kt ni

26 mouseover( fn )

Bind mt hm ti s kin mouseover ca mi phn t kt ni

27 mouseup( fn )

Bind mt hm ti s kin mouseup ca mi phn t kt ni

28 resize( fn )

Bind mt hm ti s kin resize ca mi phn t kt ni

29 scroll( fn )

Bind mt hm ti s kin scroll ca mi phn t kt ni

30 select( )

Kch hot s kin select ca mi phn t kt ni

31 select( fn )

Bind mt hm ti s kin select ca mi phn t kt ni

32 submit( )

Kch hot s kin submit ca mi phn t kt ni

33 submit( fn )


73/93



Bind mt hmti s kin submit ca mi phn t kt ni

34 unload( fn )

Bind mt hm ti s kin unload ca mi phn t kt ni

jQuery AjaxAJAX l t vit tt caAsynchronous JavaScript and XMLv cng ngh ny gip chng ta ti d

liu t Server m khng cn Refresh trnh duyt.

Nu bn cm thy mi m vi AJAX, mnh ngh bn nn truy cp trang: Ajax Tutorialtrc khi

theo di nhng g c cp trong chng ny.

jQuery l mt cng c tuyt vi cung cp mt tp hp cc phng thc AJAX di do pht trin

ng dng web.

Ti dliu mt cch n gin vi jQueryN l

Documents

Tài Liệu JQuery Tiếng Việt