jquery tieng viet
Post on 10-Feb-2018
244 Views
Preview:
TRANSCRIPT
-
7/22/2019 JQuery Tieng Viet
1/77
Trnh by: Ng B Nam Phng
Khoa CNTT HKHTN
www.khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
5/77
Ci t
Download:http://jquery.com/ Version mi nht:1.3.2
C 2 version:
Production ( trin khai ln host tht ) ,debug, .. )
Vui th vo http://khoahoctunhien.net
http://jquery.com/http://jquery.com/http://jquery.com/http://jquery.com/ -
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
7/77
S dng JQuery (s kinonload)
$(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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
8/77
S dng JQuery (s kinonload)
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
V i th htt //kh h t hi t
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
V i th htt //kh h t hi t
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien net
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
Vui th vo http://khoahoctunhien net
-
7/22/2019 JQuery Tieng Viet
14/77
JQuery Selector
V d:
Vui th vo http://khoahoctunhien.net
Vui th vo http://khoahoctunhien net
-
7/22/2019 JQuery Tieng Viet
15/77
JQuery Selector
V d:
Vui th vo http://khoahoctunhien.net
Vui th vo http://khoahoctunhien net
-
7/22/2019 JQuery Tieng Viet
16/77
JQuery Selector
V d:
Vui th vo http://khoahoctunhien.net
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
18/77
JQuery Selector
V d:
p
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
19/77
JQuery Selector
V d:
p
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
20/77
JQuery Selector
V d:
p
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
21/77
JQuery Selector
V d:
p
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
22/77
JQuery Selector
V d:
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
23/77
JQuery Selector
V d:
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
25/77
Form Selector
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
26/77
Form Selector
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
27/77
Ni dung trnh by
Gii thiu v JQuery JQuery Selector
JQuery Filter
Thay i ni dung document s n
Hiu ng & hot nh
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
30/77
JQuery Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
31/77
JQuery Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
32/77
JQuery Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
33/77
JQuery Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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.
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
35/77
Attribute Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
36/77
Attribute Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
37/77
Attribute Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
38/77
Attribute Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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 )
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
40/77
Content Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
41/77
Content Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
42/77
Content Filter
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
43/77
Content Filter
Child Fil
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
45/77
Child Filter
Ni d t h b
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
46/77
Ni dung trnh by
Gii thiu v JQuery JQuery Selector
JQuery Filter
Thay i ni dung document
s n
Hiu ng & hot nh
D t d h h l t t d t
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Duyt danh sch cc element trong document
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
48/77
Duyt danh sch cc element trong document
alert( $("p").size() ); // 4for(vari=0 ; i < $("p").size() ; ++i ){
varname = $("p").get(i);// DOM elementvarinnerText = $("p").get(i).innerText;}
Duyt danh sch cc element trong document
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
49/77
Duyt danh sch cc element trong document
$(ul").find(li.a").css("border","1px solid red");
vari = 1;
$("p").each(function () {$(this).html("Custom paragraph " +i);i++;
});
To ni dung mi
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
-
7/22/2019 JQuery Tieng Viet
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 )
Truy cp, thay i ni dung trongVui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
52/77
element
Truy cp, thay i ni dung trongVui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
53/77
element
Thay i gi tr thuc tnh
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
57/77
C du g
Chn ni dung
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
58/77
g
Lm vic vi CSS
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
60/77
Lm vic vi CSS
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
63/77
Gii thiu v JQuery JQuery Selector
JQuery Filter
Thay i ni dung document
s n Hiu ng & hot nh
X l s kin
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
68/77
Gii thiu v JQuery JQuery Selector
JQuery Filter
Thay i ni dung document
s n Hiu ng & hot nh
Hiu ng v hot nh
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
69/77
n, hin element Fade-in, fade-out
Sliding
Di chuyn element
us om an ma on e ec
n/hin element
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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
Vui th vo http://khoahoctunhien.net
-
7/22/2019 JQuery Tieng Viet
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" );
});
top related