JQuery Tieng Viet

7/22/2019 JQuery Tieng Viet

1/77

Trnh by: Ng B Nam Phng

Khoa CNTT HKHTN

www.khoahoctunhien.net


2/77

Ni dung trnh by

Gii thiu v JQuery

JQuery Selector

JQuery Filter

Thay i ni dung document

X l s kin

Hiu ng & hot nh

Vui th vo http://khoahoctunhien.net


3/77

JQuery

Th vin javascript m ngun m, min ph

To cc trang web c kh nng tng tc cao

v tng thch trn nhiu trnh duyt.



4/77

Li ch s dng JQuery

Truy xut cc thnh phn ni dung trang webvi c php tng tcss(thng qua cc bchn selector).

H tr nhiu thao tc x l trn tp cc elementch bn m t dn l nhstatement chain in .

$(selector).func1().func2().func3(); n gin ha cch vit m ngun javascript (

wri te less, do more). Tch bit m x ljavascript v thnh phn th hin HTML.



5/77

Ci t

Download:http://jquery.com/ Version mi nht:1.3.2

C 2 version:

Production ( trin khai ln host tht ) ,debug, .. )

http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/


6/77

S dng JQuery (s kinonload)

X l s kinonloadkhi to cc thnh phntrong trang.

Cch tip cn Javascript truyn thng:functiononloadHandler()

alert(run after all page contents have beendownloaded, including image);

}

window.onload= onloadHandler;

Vi JQuery, hm x l s kin onload s gingay sau khi DOM ca document np xong.



7/77


$(document).ready(function(){

alert(hello world);

}

;

$(document).readyc th c gi nhiu ln,cc hm XL s kin s c gi theo th t n

c ng k.



8/77




9/77

Cc thnh phn trong JQuery

Core functionality: cc phng thc core caJQuery v cc hm tin ch c s dngthng xuyn.

Selector & Traveral: chn, tm kim element,du t ua cc element tron document.

Manipulation & CSS: thay i ni dung ccelement trong document, lm vic vi css.



10/77

Cc thnh phn trong JQuery

Event: n gin ha vic x l event. Cung cpevent helper function ng k nhanh cc event.

Effect & Animation: cung cp cc hm h tr toanimation & effect.

User interface: tp widget vi cc control:accordion, datepicker, dialog, progressbar,

slider, tab Extensibility: h tr to plugin b sung thm cc

chc nng mi vo core library.


V i th htt //kh h t hi t


11/77

Ni dung trnh by

Gii thiu v JQuery JQuery Selector

JQuery Filter

Thay i ni dung document s n

Hiu ng & hot nh


V i th htt //kh h t hi t


12/77

JQuery Selector

Truy xut ni dung (element) trong documentda trn biu thc selector cung cp. Selectors dng c php tng t CSS.

T kt u do Selector v Filter tr v: JQuerobjects ( khng phi DOM objects ).


Vui th vo http://khoahoctunhien net


13/77

JQuery Selector

C php v cch chn tng t CSS

SELECTOR NGHA

TAGNAME Chn tt c cc element c tn l TAGNAME

#IDENTIFIER Chn tt c cc element c ID l IDENTIFIER

.className Chn tt c cc element vi thuc tnh class c gi tr l

className

Tag.className Chn tt c cc element thuc loi Tag, vi thuc tnh class c

gi tr l className

* Chn tt c cc element trn document.




14/77

JQuery Selector

V d:




15/77

JQuery Selector

V d:




16/77

JQuery Selector

V d:




17/77

JQuery Selector

Chn element da trn mi quan h phn cpgia cc element

SELECTOR NGHA

Selector1, .., Chn tt c cc element c xc nh bi tt c cc

.class1,.class2 Chn tt c cc element c khai bo class1 hoc class2

Parent > Child Chn tt c ccChild elementl con trc tip ca Parent

Ancestor Descendant Chn tt c ccDescendant elementl con chu caAncestor ( cha bn trong Ancestor )

Prev + Next Chn tt c ccNext elementnm k tip Prev element

Prev ~ Siblings Chn tt c cc element anh em khai bo sau Prev v tha

Sibling selector




18/77

JQuery Selector

V d:

p



19/77

JQuery Selector

V d:

p



20/77

JQuery Selector

V d:

p



21/77

JQuery Selector

V d:

p



22/77

JQuery Selector

V d:



23/77

JQuery Selector

V d:



24/77

Form Selector

B LC NGHA

:input Chn tt c th input, textarea trn Form

:text Chn tt c text field trn Form

:password Chn tt c password field

:radio Chn tt c radio button

:checkbox Chn tt c checkbox

:submit Chn tt c button submit

:reset Chn tt c button reset

:image Chn tt c image

:button Chn tt c generalized button

:file Chn tt c control upload file



25/77

Form Selector



26/77

Form Selector



27/77

Ni dung trnh by


JQuery Filter

Thay i ni dung document s n

Hiu ng & hot nh



28/77

JQuery Filter

JQuery Selector thng tr v 1 tp i tng.JQuery Fi l ter c dng l c trn kt quchn ca JQuery Selecto r.

C 6 loi Filter:

Basic: lc phn t v tr u tin, cui cng, chn, l,

Content: lc da trn ni dung

Visibility: lc da trn trng thi hin th ca element Attribute: lc da trn thuc tnh ca element

Child: lc da trn mi quan h vi element cha

Form: lc trn cc thnh phn khai bo trn Form



29/77

Basic JQuery Filter

B lc ngha

:first Chn phn t u t introng tp kt qu do Selector tr v

:last Chn phn tcu i cngtrong tp kt qu do Selector tr v

:even Chn phn t chn

:odd Chn phn t l

:eq ( index ) Chn phn t ti v tr index

:gt ( index ) Chn phn t c v tr > index

:lt ( index ) Chn phn t c v tr < index

:header Chn tt c header element (H1, H2, .. H6)

:not ( selector ) Chn phn t khng tha selector



30/77

JQuery Filter



31/77

JQuery Filter



32/77

JQuery Filter



33/77

JQuery Filter



34/77

Attribute Filter

B LC NGHA

[attribute] Lc cc phn t c khai bo attribute

[attribute=value] Lc cc phn t c attribute vi gi tr = value

[attribute!=value] Lc cc ph n t c attribute vi gi tr != value

[attribute^=value] Lc cc phn t c attribute vi gi trbt ul value

[attribute$=value] Lc cc phn t c attribute vi gi trkt thcl value

[attribute*=value] Lc cc phn t c attributec h agi tr value

[attributeFilter1][attributeFilter2]

Lc cc phn t tha tt c cc attribute filter.



35/77

Attribute Filter



36/77

Attribute Filter



37/77

Attribute Filter



38/77

Attribute Filter



39/77

Content & Visibility Filter

B LC THEONI DUNG

NGHA

:contains(text) Lc cc phn t c cha chui text

:empty Lc cc phn t rng

:parent Lc cc phn t l cha ( cha t nht 1 element khc

hoc text )

B LC THEO TRNG

THI HiN TH NGHA

:visible Lc cc phn t c trng thi l visible ( ang hin

th )

:hidden Lc cc phn t c trng thi hidden ( ang n )



40/77

Content Filter



41/77

Content Filter



42/77

Content Filter



43/77

Content Filter

Child Fil



44/77

Child Filter

B LC NGHA

:nth-child(index):nth-child(even):nth-child(odd)

Lc cc phn t theo v tr so vi cha ca n

:nth-child(equation)

Lc phn t theo v tr ( v tr tha phng trnh

tham s so vi cha ca n:first-child Ly phn t u tin so vi cha ca n

:last-child Ly phn t cui cng so vi cha ca n

:only-child Ly phn t nu phn t ny l con duy nht so

vi cha ca n

Child Filt



45/77

Child Filter

Ni d t h b



46/77

Ni dung trnh by


JQuery Filter


s n

Hiu ng & hot nh

D t d h h l t t d t



47/77

Duyt danh sch cc element trong document

B LC NGHA

size(), length Ly s phn t trong tp kt qu ca Selector

get() Ly tp DOM elements trong tp kt qu ca

Selector

get(index) Ly DOM element v tr indexfind(expression) Ly cc element con chu tha expression

each() Gi thc thi phng thc vi tng element trong

tp kt qu ca Selector




48/77


alert( $("p").size() ); // 4for(vari=0 ; i < $("p").size() ; ++i ){

varname = $("p").get(i);// DOM elementvarinnerText = $("p").get(i).innerText;}




49/77


$(ul").find(li.a").css("border","1px solid red");

vari = 1;

$("p").each(function () {$(this).html("Custom paragraph " +i);i++;

});

To ni dung mi



50/77

To ni dung mi

Phng thc$(html content), kt qu tr vl 1 JQuery object.

V d:

var h1 = headin 1 // t o th h1 vi

ni dung

var temp =heading 1;

varnewH1=$(temp);// to th h1 t bin temp

$(p:eq(0)).h tml(newH1);

Truy cp, thay i ni dung trongVui th vo http://khoahoctunhien.net


51/77

element

Phng thc ngha

html() Ly ni dung html bn trong element u tintha selector

html( newContent ) Thay i ni dung html bn trong mi elementtha selector ( tng t innerHTML trong DOM )

text() Ly ni dung text bn trong element u tin

text( newTextContent ) Thay i ni dung text bn trong mi elementtha selector ( tng t innerText )



52/77

element



53/77

element

Thay i gi tr thuc tnh



54/77

Thay i gi tr thuc tnh

Phng thc ngha

attr( name ) Ly attribute value ca element u tin thaselector

attr( properties ) Thit lp tp attribute cho mi element thase ec or. roper es c ng o ec -no a on

syntax.

attr( key, value ) Thit lp attribute cho mi element tha selector

attr( key, function ) Thit lp gi tr attribute da trn 1 function vimi element tha selector.

removeAttr( name ) Xa attribute vi mi element

Thay i gi tr thuc tnh v d



55/77

Thay i gi tr thuc tnh v d

Trang 1$("a").attr("href","trang2.html");$("a").text("trang 2");

$("a").attr("target","_blank");

$("a img").attr("src","book2.jpg");$("a").removeAttr("href");$("img").attr( {src:"book2.jpg",alt:"hello world"} );

Chn ni dung



56/77

Chn ni dung

Phng thc ngha

append( content ) Chn content vo sau ni dung c sn ca ccelement tha selector

appendTo( selector ) Chn element tha selector vo sau ni dung csn ca cc element tha selector tham s

prepen con en n con en v o r c n ung c s n c a c celement tha selector

prependTo( selector ) Chn element tha selector vo trc ni dungc sn ca cc element tha selector tham s

after( content ) Chn content vo sau cc element tha selector

before ( content ) Chn content vo trc cc element thaselector

Chn ni dung



57/77

C du g

Chn ni dung



58/77

g

Lm vic vi CSS



59/77

Phng thc ngha

css ( name ) Ly gi tr thuc tnh name ca element u tintha selector

css ( properties ) Thit lp tp thuc tnh css i vi mi elementt a se ector

css ( property, value ) Thit lp gi tr 1 thuc tnh i vi mi elementtha selector

Lm vic vi CSS



60/77

Lm vic vi CSS



61/77

Phng thc ngha

addClass ( class ) Thm class vo cc element tha selector

hasClass ( class ) Kim tra class c tn ti trong cc element thaselector

removeClass ( class ) Xa class khi cc element tha selector

toggleClass ( class ) Thm class vo cc element tha selector nuclass cha khai bo, ngc li nu tn ti ri,class s b xa

Thay i kch thc



62/77

Phng thc ngha

height () Ly chiu cao ca element u tin tha selector

width () Ly chiu rng ca element u tin tha selector

height ( val ) Thi t lp chi u cao ca mi element tha selector

width ( val ) Thit lp chiu rng ca mi element thaselector

Ni dung trnh by



63/77


JQuery Filter


s n Hiu ng & hot nh

X l s kin



64/77

$("selector").bind(event,[data],[handler]);

Tham s ngha

event S kin selector x l, bao gm: load, blur, click, dbclick,

mousedown, mouseup, mousemove, mouseover, mouseout,

$("selector").unb ind(event,data,handler);

submit, keydown, keypress, keyup, ..

data Ty chn, d liu truyn vo handler khi event xy ra

handler Tn hm x l s kin

X l s kin v d



65/77

$("div").bind("mouseover",highLight);$("div").bind("mouseleave",highLight);$("div").bind("click",function () {

$("div").unbind("mouseover",highLight);$("div").unbind("mouseleave",highLight);

" " " =

.off
");})
functionhighLight(evt){

$("div").toggleClass("highlight");}

X l s kin Helper function



66/77

X l nhanh mt s s kin thng gp

Phng thc ngha

click( func ) X l s kin click ca 1 selector. Mt s hm khc: blur,mousedown, mouseover, mouseout, submit, ..

$("div").hover( highLight , highLight );functionhighLight(evt){

$("div").toggleClass("highlight");}

over unc ,func2)

unc : m x c g mouse c uy n r n se ec or Func2: hm x l c gi khi mouse di chuyn ra khiselector

i tng Event



67/77

Cung cp cc thng tin v event x l.Thuc tnh /Phng thc

ngha

type Loi event xy ra, v d: click

target Element m event xy ra

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

$(this).html("pageX:" +evt.pageX +", pageY:" +evt.pageY +",type:" + evt.type +", target:" +evt.target);

});

data D liu c truyn vo handler bi phng thc bind

pageX, pageY Ta chut khi event xy ra

preventDefault ( ) Ngn trnh duyt khng thc thi x l mc nh, v d khiclick vo lin kt

Ni dung trnh by



68/77


JQuery Filter


s n Hiu ng & hot nh

Hiu ng v hot nh



69/77

n, hin element Fade-in, fade-out

Sliding

Di chuyn element

us om an ma on e ec

n/hin element



70/77

Phng thc nghashow ( ) Hin th cc element tha selector nu trc b n

show( speed, callback ) Hin th cc element tha selector nu trc b n,speed xc nh tc hin th. Sau khi hin th xong,phng thc callback s c thc thi.

hide ( ) n element nu trc ang hin th.

speed: tc hiu ng quy nh bi cc gi tr:slow, normal, fasthocmillisecond

hide ( speed, callback ) n element nu trc ang hin th, tham s c ngha tng t phng thc show.

toggle ( ) Chuyn qua li trng thi n/hin cc element.

toggle ( speed,callback)

Chuyn qua li trng thi n/hin cc element,tham s c ngha tng t phng thc show.

n/hin element



71/77

$("#div1").show("normal");$("#div1").hide("slow");

$("#div1").hide(4000);// n trong 4 giy

// thay i lun phin trng thi n/hin

$("#div1").toggle("fast");

Fade in/fade out



72/77

Phng thc ngha

fadeIn(speed, callback) Hin th element bng cch tng dn trong sut.

fadeOut(speed,callback)

n element bng cch gim dn trong sut v 0,sau thit lp style display l none.

fadeTo(speed, opacity,callback )

Thay i trong sut ca element.

Fade in/fade out



73/77

$("#button_fadein").bind("click",function () {$("#div1").fadeIn("normal");

});

$("#button_fadeout").bind("click",function () {$("#div1").fadeOut("slow");

});

$("#button_fadeto3").bind("click",function () {$("#div1").fadeTo("slow",0.3,function () {

alert("finished");

});});

$("#button_fadeup").bind("click",function () {$("#div1").fadeTo("slow",1.0);

});

Sliding



74/77

Phng thc ngha

slideDown(speed,callback)

Hin th element bng cch tng chiu cao.

slideUp(speed, callback) n element bng cch gim chiu cao.

slideToggle( speed,callback)

Chuyn i trng thi n/hin element.

Sliding



75/77

$("#button_slideup").bind("click",function () {$("#div1").slideUp("normal");

});

$("#button_slidedown").bind("click",function () {

$("#div1").slideDown("slow");});

$("#button_toggleslide").bind("click",function (){$("#div1").slideToggle(3000);

});

Custom Animation



76/77

$(selector").animate(properties,[duration],[easing],[callback]);

Tham s ngha

$(selector").stop();

animate.

duration Animate ko di trong bao lu ( slow, normal,fast, milisecond )

easing Hiu ng xa : swing, linear

Callback Hm c gi sau khi animate xong

Custom Animation



77/77

$("#button_growright").click(function () {$("#div1").animate({width:"800"},"normal");

});

$("#button_growleft").click(function () {$("#div1").animate({width:"100"},"fast");

});

$("#button_bigtext").click(function () {$("#div1").animate({fontSize:"40"},2000);

});

$("#button_movediv").click(function () {$("#div1").animate( { left :"500",fontSize:"50" } , 1000

,"linear" );

});

JQuery Tieng Viet

Documents

Transcript of JQuery Tieng Viet