JQUERY cho ngi mi bt uLm th no chn mt mc bng cch s dng lp hoc ID?M ny la chn mt phn t vi mt ID ca "myDivId". K t khi ID l duy nht, biu hin ny lun lun la chn mt trong hai s khng hoc mt yu t ph thuc vo c hay khng mt phn t vi ID quy nh tn ti.$ ('# MyDivId')

M ny la chn mt phn t vi mt lp hc ca "myCssClass". K t khi bt k s lng cc yu t c th c cng mt lp, biu hin ny s la chn bt k s lng cc yu t.$ ('. MyCssClass')

Mt i tng jQuery c cha thnh phn c chn c th c gn cho mt bin JavaScript nh bnh thng:var myDivElement = $ ('# myDivId');

Thng thng, cc yu t trong mt i tng jQuery c tc ng bi cc chc nng jQuery khc:var myValue = $ ('# myDivId') val (); / / nhn c gi tr ca mt hnh thc u vo $ ('# MyDivId') val ("hello th gii"); / / thit lp cc gi tr ca mt hnh thc u vo

Bt u mt v d c bn nh:VD1: jQuery Introduction /*-> src trn chnh l ng dn cha th vin JQUERY do chng ta ti v ri t trong folder js nh. */ $(document).ready(function(){

alert("Cm n gh thm!"); }); /*Trong $(document).ready(function() l hm x l s kin onload s c gi sau khi DOM(Document Object Model) c np xong*/ Chng ta cng c th s dng phng php ny nhng hm ny c x l khi v ch khi chng ta bit chc chn rng DOM c np xong cng vi tt c qung b, hnh nh, flash c load xong.(tm thi c hiu n s chm v lu hn thng trn . K t v d tip theo chng ta s s dng hm trn cha nhiu cu lnh cn x l nha.) function onloadHandler() { alert("Hello" ); } window.onload=onloadHandler; Gii thch r hn vn trn di y: Chng ta bit rng $(document).ready() l cch ca jQuery thc hin cc tc v tng ng vi cch m JavaScript thc hin tc v vi onload event c lp sn. Thc t th hai cch ny u c tc dng ging nhau, nhng chng li kch hot tc v nhng thi im hi khc nhau. S kin window.onload(l phng thc ca JavaScrip) c kch hot khi m trnh duyt hon ton load xong ti liu. iu ny c ngha rng mi phn t trn trang sn sng c thao tc bi JavaScript. y chnh l mt im thun li chng ta vit code m khng phi lo lng v trt t load. Mt khc, b qun l ng k s dng $(document).ready()(l phng thc ca ring JQUERY) c kch hot khi DOM hon ton sn sng s dng. iu ny cng c ngha rng mi thnh phn c th c truy cp bi code ca chng ta, nhng khng nht thit l ti liu lin quan c download. Ngay sau khi HTML c download v chuyn qua cy DOM, code c th c thc thi. Lu : m bo rng trang web vn c nh dng trc khi code JavaScript c thc hin, ngi ta thng t ng trc th trong phn ca ti liu. V d chng ta c mt trang th vin hnh nh, trang bao gm nhiu hnh c dung lng ln m chng ta c th n, hin, di chuyn hoc thao tc vi jQuery. Nu by gi chng ta

thit lp giao din s dng s kin onload, th ngi dng s phi i cho n khi mi tm hnh c download trc khi h c th s dng trang web. Hoc t hn, nu nhng cch x l cha c gn cho cc phn t c cch x l mc nh ring nh l cc ng lin kt, th vic tng tc vi ngi dng s to ra nhng iu khng mong i. Tuy nhin khi chng ta s dng $(document).ready(), th giao din s sn sng s dng sm hn rt nhiu vi nhng cch x l mong mun.

+ Phng phng truy xut cc thnh phn trong JQUERY nh:

=>Ch : Vi JQUERY th chng ta c th s dng ngoc hoc u nh nhau c nh. V cng tng t nh CSS th chn nhiu thnh phn th ngn cch nhau bi du phy (,) nh. VD1:

V cn rt nhiu cch chn trc tip cc thnh phn 1 cch chnh xc th chng ta tham kho gio trnh JQUERY ca trng HXHNV nh.

Bi 1: Vit hm trong jQueryng bi Neo trong mc Hng dn vo 04 thng 11, 2009 | 22 Comments Xem Demo Nh mootools, jQuery l mt th vin (framework) javascript gip bn vit code javascript nhanh hn.

Ti v v thm vo website bt u hc jQuery, bn cn ti v th vin jQuery v thm vo trang web ca bn:

Vit hm u tinVit hm trong jQuery kh n gin. Gi s chng ta c 1 trang html n gin vi cu trc nh sau:Click n

Dng CSS style cho th div c id="box"#box {width: 500px; height: 300px; background: #FF0000}

V ta s dng jQuery n box khi click vo th $(function() { $('a#hidebox').click(function() { //Thm thuc tnh click vo th $('#box').fadeOut(); // n element c id l box

});

});

Vi hm trn, khi bn click vo th a c id l hidebox th box s t t mt i. Ti s gii thiu vi cc bn cc hiu ng c bn ny trong bi ti.

Bi 2: Cc phng thc Fade, slide v showng bi Neo trong mc Hng dn vo 05 thng 11, 2009 | 9 Comments Xem Demo Bi ny bn s hc cch gn thm thuc tnh css cho mt element, cc phng thc Fade, slide v show ca jQuery.

Thm thuc tnh CSSS dng v d ca bi 1, nhng khi click vo th ta s i mu ca #box. Thay i hm jQuery nh sau:$(function() { $('a#hidebox').click(function() { $('#box').css('background','#CCCCCC') }); });

thm nhiu hn mt thuc tnh, ta s dng:$(function() { $('a#hidebox').click(function() { $('#box').css({ 'background':'#00FF00',

'width':'500px', 'height':'300px' }); }); });

Phng thc hide/show n/hin mt element, ta c th dng cch n gin nht: hide/show$(function() { $('a#hide').click(function() { $('#box').hide(); //n #box khi click vo th a c id l hide }); $('a#show').click(function() { $('#box').show(); // Hin #box khi click vo th a c id l show }); });

Bn c th t thi gian cho vic n/ hin box: hide('4000') (#box s n t t trong vng 4000ms ~ 4 giy)

Phng thc Fade v slideTng t nh hide/show, ta c fadeOut/fadeIn (n/hin box vi hiu ng m dn), slideUp/slideDown (n/hin box vi hiu ng ko ca).$(function() { $('a#fadeout').click(function() { $('#box').fadeOut(); }); $('a#fadein').click(function() { $('#box').fadeIn(); }); $('a#slidedown').click(function() { $('#box').slideDown(); }); $('a#slideup').click(function() { $('#box').slideUp(); }); });

Bn cng c th t thi gian cho fade v slide tng t nh hide/show. Nu bn cha r, hy xem qua v d

Bi 3: Hiu ng chuyn ngng bi Neo trong mc Hng dn vo 30 thng 11, 2009 | 8 Comments Xem Demo Bi 3 s l cch s dng hiu ng chuyn ng (animate). Bn s hc c cch a mt element bt k chuyn ng theo mnh.

u tin, chng ta to mt box HTML:1 2 3

Trong v d, ti s cho #box chuyn ng bn trong #bound, chng ta thm style nh sau01 02 03 04 05 06 07 08 09 10 11 12 13 14 #bound { width: 900px; height: 600px; border: 1px solid #666; position: relative; } #box { width: 300px; height: 200px; background: #0CF; position: absolute; left: 20px; top: 20px; }

t thuc tnh khi click vo #box, #box s chuyn ng v bn tri 560px trong vng 3s:

1 $('#box').click(function() { 2 $(this).animate({ 3 "left" : "580px" 4 }, 3000) 5 });

Bn c th thay i hoc thm cc chuyn ng nh trong v d ca bi. Ch thuc tnh CSS ca #bound phi l position: relative set li ta cho #box (absolute) Bi 4: Chn element nng cao Chnh l phn u tin chng ta hc ri y. nhiu phng php chn qu. Tham kho gio trnh JQUERY ca HXHNV l oke.

Bi 7: Phng thc hover()ng bi Neo trong mc Hng dn vo 20 thng 4, 2010 | 1 Comment Xem Demo Bi 7 s gii thiu vi cc bn phng thc hover() ca jQuery, vi phng thc ny bn c th t trng thi hover cho mi th HTML trn mi trnh duyt

Bn c th xem trc v d thy thay i khi di chut qua cc bc nh Cu trc ca hover() nh sau:1 $('div').hover(function() { 2 // m javascript 3 }, function() { 4 // m javascript 5 });

Trong v d, trc tin ti dng jQuery a tt c cc nh v opacity 50%, sau khi di chut vo nh bn s thy opacity ln 100% v tr v 50% khi bn di chut ra ngoi M HTML nh sau:1 2 3 4 5 6 7

V m javascript vi jQuery1 $(function() { 2 $('#demohover img').animate({"opacity": .5 }); 3 $('#demohover img').hover(function() { 4 $(this).animate({ "opacity": 1 }); 5 }, function() { 6 $(this).animate({ "opacity": .5 }); 7 }); 8 });

Sau bc ny, bn c th di chut lin tc qua 2 bc nh, sau di chut ra ngoi s thy hiu ng vn tip tc, g li ny bn c th dng stop() nh sau:1 $(function() { 2 $('#demohover img').animate({"opacity": .5 }); 3 $('#demohover img').hover(function() { 4 $(this).stop().animate({ "opacity": 1 }); 5 }, function() { 6 $(this).stop().animate({ "opacity": .5 }); 7 }); 8 });