JQuery

1. JQuery GV : NgôBá Nam Phương Khoa CNTT – ĐHKHTN

2. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector, Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng, hoạtảnh • Ajax • UI controls & Themes • Mộtsốthưviệnmởrộng

3. JQuery • Thưviệnjavascriptmãnguồnmở, miễnphí • Cho phéptạocáctrang web hiệuứngđẹp, khảnăngtươngtáccao • Tươngthíchnhiềutrìnhduyệt. • Cộngđồnglớn, nhiều plug-in mởrộng.

4. LợiíchsửdụngJQuery • Truyxuấtcácthànhphầnnội dung trang web vớicúpháptươngtựcss (thông qua cácbộchọn selector). • Đơngiảnhóacáchviếtmãnguồnjavascript ( write less, do more ). Táchbiệtmãxửlýjavascriptvàthànhphầnthểhiện HTML. • Hỗtrợnhiềuthaotácxửlýtrêntậpcác element chỉbằngmộtdònglệnh (statement chaining). $(“selector”).func1().func2().func3()…;

5. Càiđặt • Download: http://jquery.com/ • Version mớinhất: 1.5.2 • Có 2 version: • Production (triểnkhailên host thật) • Development (dùngtrongquátrìnhpháttriển, hỗtrợ debug ...)

6. SửdụngJQuery (sựkiệnonload)

7. Các thànhphầntrongJQuery • Core functionality: cácphươngthức core củaJQueryvàcáchàmtiệních. • Selector & Traveral: chọn, tìmkiếm element, duyệt qua các element trong document. • Manipulation & CSS: thayđổinội dung các element trong document, làmviệcvớicss.

8. Các thànhphầntrongJQuery • Event: đơngiảnhóaviệcxửlý event. Cungcấp event helper function đăngkýnhanhcác event. • Effect & Animation: cungcấpcáchàmhỗtrợtạo animation & effect. • Ajax • User interface: tập widget vớicác control: accordion, datepicker, dialog, progressbar, slider, tab • Extensibility: hỗtrợtạopluginbổ sung thêmcácchứcnăngmớivào core library.

9. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector • JQuery Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng & hoạtảnh

10. JQuery Selector • Truyxuấtcácthànhphầnnội dung (element) trong document dựatrênbiểuthức selector vớicúpháptươngtự CSS. • Tậpkếtquả do Selector và Filter trảvề: JQuery objects (khôngphải DOM objects).

11. JQuery Selector • Cúphápvàcáchchọntươngtự CSS

12. JQuery Selector Vídụ:

13. JQuery Selector Vídụ:

14. JQuery Selector Vídụ:

15. JQuery Selector • Chọn element dựatrênmốiquanhệphâncấpgiữa các element

16. JQuery Selector Vídụ:

17. JQuery Selector Vídụ:

18. JQuery Selector Vídụ:

19. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector • JQuery Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng & hoạtảnh

20. JQuery Filter • JQuery Selector thườngtrảvề 1 tậpđốitượng. JQuery Filter đượcdùngđểlọctrênkếtquảchọncủaJQuery Selector. • Có 6 loại Filter: • Basic: lọcphầntửdựatrênvịtrí (đầutiên, cuốicùng, chẵn, lẻ …) • Content: lọcdựatrênnội dung • Visibility: lọcdựatrêntrạngtháihiểnthịcủa element • Attribute: lọcdựatrênthuộctínhcủa element • Child: lọcdựatrênmốiquanhệvới element cha • Form: lọctrêncácthànhphầnkhaibáotrên Form

21. Basic JQuery Filter

22. JQuery Filter

23. JQuery Filter

24. JQuery Filter

25. JQuery Filter

26. Attribute Filter

27. Attribute Filter

28. Attribute Filter

29. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector • JQuery Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng & hoạtảnh

30. Duyệtdanhsách các element trong document

31. Duyệtdanhsách các element trong document alert( $("p").size() );// 4 for(var i=0 ; i < $("p").size() ; ++i ) { varname = $("p").get(i); // DOM element varinnerText = $("p").get(i).innerText; }

32. Duyệtdanhsách các element trong document vari = 1; $("p").each(function () { $(this).html("Custom paragraph " + i); i++; });

33. Truycập, thayđổinội dung element

34. Tạonội dung mới • Phươngthức$(“html content”), kếtquảtrảvềlà 1 JQuery object. Vídụ: var h1 = $(“<h1>heading 1</h1>”); // tạothẻ h1 vớinội dung var temp = “<h1>heading 1</h1>”; varnewH1 = $(temp); // tạothẻ h1 từbiến $(“p:eq(0)”).html(newH1);

35. Truycập, thayđổinội dung trong element

36. Thayđổigiátrịthuộctính

37. Thayđổigiátrịthuộctính – vídụ <a href="trang1.html">Trang 1</a> $("a").attr("href","trang2.html"); $("a").text("trang 2"); <a href="book1.jpg"> <imgsrc="book1.jpg" /> </a> $("a").attr("target","_blank"); $("a img").attr("src","book2.jpg"); $("a").removeAttr("href"); $("img").attr( {src:"book2.jpg",alt:"hello world"} );

38. Làmviệcvới CSS

39. Làmviệcvới CSS

40. Làmviệcvới CSS

41. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector • JQuery Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng & hoạtảnh

42. Xửlýsựkiện $("selector").bind(event,[data],[handler]); $("selector").unbind(event,data,handler);

43. Nội dung trìnhbày • GiớithiệuvềJQuery • JQuery Selector • JQuery Filter • Thayđổinội dung document • Xửlýsựkiện • Hiệuứng & hoạtảnh

44. Hiệuứngvàhoạtảnh • Ẩn, hiện element • Fade-in, fade-out • Sliding • Di chuyển element • Custom animation effect

45. Ẩn/hiện element • Tốcđộhiệuứngquyđịnhbởi các giátrị: “slow”, “normal”, “fast” hoặc millisecond

46. Ẩn/hiện element $("#div1").show("normal"); $("#div1").hide("slow"); $("#div1").hide(4000); // ẩntrong 4 giây // thayđổiluânphiêntrạngtháiẩn/hiện $("#div1").toggle("fast");

47. Fade in/fade out

48. Fade in/fade out $("#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); });

49. Sliding

50. Sliding $("#button_slideup").bind("click",function () { $("#div1").slideUp("normal"); }); $("#button_slidedown").bind("click",function () { $("#div1").slideDown("slow"); }); $("#button_toggleslide").bind("click",function () { $("#div1").slideToggle(3000); });