Tìm hiểu các chức năng thành phần Jquery

Tiêu luân Tìm hi u các ch c năng và̉ ̣ ể ứ thành ph n c a JQueryầ ủ M c l c:ụ ụ I) Nôi dung̣ ....................................................................................................................1 1) Gi i thiêuớ ̣ ..............................................................................................................1 2) Selectors – B ch n l c (n u có), nêu ví d (demo r i ch p hình).ộ ọ ọ ế ụ ồ ụ ..................2 3) Events – S ki n (n u có), nêu ví d (demo r i ch p hình).ự ệ ế ụ ồ ụ .............................4 4) Effects – Hi u ng (n u có), nêu ví d (demo r i ch p hình).ệ ứ ế ụ ồ ụ ..........................5 5) Ajax (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ ..................................................7 6) Form Validation (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ ...............................9 7) Plugin/Add-ons (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ ..............................11 8) Các thành ph n c b n khác ( ng v i m i Framework).ầ ơ ả ứ ớ ỗ .................................14 II) Tai liêu tham khaò ̣ ̉ ..................................................................................................15 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web I) Nôi dung̣ 1) Gi i thiêuớ ̣  Th vi n jQueryư ệ đ c nghiên c u và phát tri n b i John Resigượ ứ ể ở , ông là m t chuyên gia l p trình công c JavaScript (JavaScript Toolộ ậ ụ Developer) cho Mozilla Corporation và tác gi c a cu n sách Proả ủ ố JavaScript Techniques, Secrets of the JavaScript Ninja. Hi n t i, Johnệ ạ sinh s ng Boston.ố ở  M t s ng i dùng nói r ng th vi n jQuery giúp t o d án phátộ ố ườ ằ ư ệ ạ ự tri n AJAX (XML và JavaScript không đ ng b ) g n h n nh vi c sể ồ ộ ọ ơ ờ ệ ử d ng JavaScript d dàng h n m c dù JavaScript n i ti ng là khó làmụ ễ ơ ặ ổ ế vi c cùng. Th vi n jQuery là ki u th vi n JavaScript m i c n thi tệ ư ệ ể ư ệ ớ ầ ế cho phép các nhà phát tri n làm vi c “khiêm t n” v i JavaScript. Thể ệ ố ớ ư vi n jQuery không ph i là m t framework c l n t t nh t trong AJAXệ ả ộ ỡ ớ ố ấ và cũng không ph i là các c i ti n ph c t p vô ích. Th vi n jQueryả ả ế ứ ạ ư ệ đ c thi t k đ thay đ i cách vi t JavaScript.ượ ế ế ể ổ ế  Th vi n jQuery có phiên b n 1.0 ra đ i ngày 26/08/2006, phiênư ệ ả ờ b n gân đây là 1.4.2 (19/02/2010), là d án mã ngu n m tuân theoả ̀ ự ồ ở gi y phép c a MIT và GPL.ấ ủ  Th vi n jQuery t ng thích v i nhi u trình duy t (Internetư ệ ươ ớ ề ệ Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ và Chrome). C ng đ ngộ ồ phát tri n m nh m và đ c s d ng r ng rãi nh Dell, ESPN, BBC,ể ạ ẽ ượ ử ụ ộ ư Reuters, WordPress, Digg,  Nh ng gì Jquery có th làmữ ể :  H ng t i các thành ph n trong tài li u HTMLướ ớ ầ ệ . N u khôngế s d ng th vi n JavaScript này, chúng ta ph i vi t r t nhi uử ụ ư ệ ả ế ấ ề dòng code m i có th đ t đ c m c tiêu là di chuy n trong c uớ ể ạ ượ ụ ể ấ trúc cây (hay còn g i là DOM = Document Object Model) c aọ ủ m t tài li u HTML và ch n ra các thành ph n liên quan. Jqueryộ ệ ọ ầ cho phép chúng ta ch n b t c thành ph n nào c a tài li u đọ ấ ứ ầ ủ ệ ể “v c” m t cách d dàng nh s d ng CSS.ọ ộ ễ ư ử ụ  Thay đ i giao di n c a m t trang web.ổ ệ ủ ộ CSS là công c r tụ ấ m nh đ đ nh d ng m t trang web nh ng nó có m t nh cạ ể ị ạ ộ ư ộ ượ đi m là không ph i t t c các trình duy t đ u hi n th gi ngể ả ấ ả ệ ề ể ị ố nhau. Cho nên jQuery ra đ i đ l p ch tr ng này,vì v y chúngờ ể ấ ỗ ố ậ ta có th s d ng Jquery đ giúp trang web có th hi n th t tể ử ụ ể ể ể ị ố Trang 1 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web trên h u h t các trình duy t. H n n a jQuery cũng có th thayầ ế ệ ơ ữ ể đ i class ho c nh ng đ nh d ng CSS đã đ c áp d ng lên b t cổ ặ ữ ị ạ ượ ụ ấ ứ thành ph n nào c a tài li u HTML ngay c khi trang web đó đãầ ủ ệ ả đ c trình duy t load thành công. Thay đ i n i dung c a tàiượ ệ ổ ộ ủ li u. Jquery không ph i ch có th thay đ i b ngoài c a trangệ ả ỉ ể ổ ề ủ web, nó cũng có th thay đ i n i dung c a chính tài li u đó chể ổ ộ ủ ệ ỉ v i vài dòng code. Nó có th thêm ho c b t n i dung trên trang,ớ ể ặ ớ ộ hình nh có th đ c thêm vào ho c đ i sang hình khác, danhả ể ượ ặ ổ sách có th đ c s p x p l i ho c th m chí c c u trúc HTMLể ượ ắ ế ạ ặ ậ ả ấ c a m t trang web cũng có th đ c vi t l i và m r ng. T t củ ộ ể ượ ế ạ ở ộ ấ ả nh ng đi u này b n hoàn toàn có th làm đ c nh s giúp đữ ề ạ ể ượ ờ ự ỡ c a API (Application Programming Interface = Giao di n l pủ ệ ậ trình ng d ng). ứ ụ 2) Selectors – B ch n l c (n u có), nêu ví d (demo r i ch pộ ọ ọ ế ụ ồ ụ hình). VD: animated selector Description: Select all elements that are in the progress of an animation at the time the selector is run. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> Demo Jquery - animated selector div {background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; } div.colored { background:green; } Trang 2 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web Run Nam Mover slow Tr.An Mover fast $("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); function animateIt1() { $("#mover1").slideToggle("fast", animateIt1); } animateIt1(); Tr c khi chon Runướ ̣ Sau khi chon Ruṇ Trang 3 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web 3) Events – S ki n (n u có), nêu ví d (demo r i ch p hình).ự ệ ế ụ ồ ụ JQuery cho chúng ta nhi u cách đ t ng tác v i ng i dùng ví dề ể ươ ớ ườ ụ nh khi ng i dùng nh p chu t vào đ ng link thì s có gì x yư ườ ấ ộ ườ ẽ ả ra,nh ng cái hay ch nh vào các Event Handlers mà code HTMLư ở ỗ ờ không b r i tung lên.ị ố VD: .click( handler(eventObject) ) Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> Demo Jquery - events click p { color:red; margin:5px; cursor:pointer; font-size:20px;} p.hilite { background:yellow; } Nh ng tup lêu tranh gi a canh đôngữ ́ ̀ ữ ́ ̀ Quanh he m p đâu trô say bông̀ ướ ̣ ̉ Bao la bat ngat h ng tinh đ ḿ ́ ươ ̀ ượ Trăng ngâp men say gi a canh đông...́ ̣ ữ ́ ̀ Trang 4 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web $("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); }); Tr c khi clickướ Sau khi click vao se ân đoan văn đò ̃ ̉ ̣ ́ 4) Effects – Hi u ng (n u có), nêu ví d (demo r i ch p hình).ệ ứ ế ụ ồ ụ VD: animate() Description: Perform a custom animation of a set of CSS properties. Code: Trang 5 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> Demo Jquery - effects animate div { background-color:#bca; width:200px; height:1.1em; text-align:center; border:2px solid green; margin:3px; font-size:14px; } button { font-size:14px; } » Run » Reset Chao m ng ban đên v i Jquery!̀ ừ ̣ ́ ớ $( "#go" ).click(function(){ Trang 6 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web $( "#block" ).animate( { width: "90%" }, { queue: false, duration: 3000 }) .animate({ fontSize: "24px" }, 1500 ) .animate({ borderRightWidth: "15px" }, 1500 ); }); //ham reset̀ $( "#go1" ).click(function(){ $( "div" ).css({ width: "",fontSize: "", borderWidth: ""}); }); Tr c khi click Run:ướ Sau khi click Run: Khi click Reset: 5) Ajax (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ VD: Create a simple XMLHttpRequest, and retrieve data from a TXT file Trang 7 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web (Chay băng vertrigo)̣ ̀ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF- 8" /> Demo Jquery - ajax function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.response Text; } } xmlhttp.open("GET","ajax/info.txt",true); xmlhttp.send(); } Trang 8 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web Chao m ng ban đên v i Ajax̀ ừ ̣ ́ ớ Change Tr c khi click Change:ướ Sau khi click Change: 6) Form Validation (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ VD: .submit( handler(eventObject) ) Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <meta http-equiv="Content-type" content="text/html; charset=UTF- 8" /> Demo Jquery - form submit Trang 9 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web p { margin:0; color:blue; font-size:20px;} div,p { margin-left:10px; } span { color:red; } t{color:red;} Gia tri đung: Nam hoăc An.́ ̣ ́ ̣ $("form").submit(function() { if ($("input:first").val() == "Nam" || $("input:first").val() == "An") { $("span").text("Validated...").show(); return true; } $("span").text("Not valid!").show().fadeOut(1000); return false; }); Trang 10 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web Tr c khi ch n:ướ ọ Nh p vào giá tr khác Nam, An:ậ ị Nh p vào giá tr đúng:ậ ị 7) Plugin/Add-ons (n u có), nêu ví d (demo r i ch p hình).ế ụ ồ ụ VD: .template( [ name ] ) Description: Compile the contents of the matched element as a reusable compiled template. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Trang 11 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> Demo Jquery - plusin template table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; } table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; } .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; } ${Name} ${Name}<tr class='movieDetail row2'>Year: ${Year}MSSV: $ {MSSV} Click for details: var movies = [ Trang 12 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web { Name: "Nguyên Binh Nam", Year: "1989", MSSV:̃ ̀ "DTH082050" }, { Name: "Lê Thi Tr ng An", Year: "1990", MSSV:̣ ườ "DTH082034" }, ]; var selectedItem = null; /* Render the summaryTemplate with the "movies" data */ $( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" ); $("#movieList") .delegate( ".movieSummary", "click", function () { if (selectedItem) { /* Switch previously selected item back to the summaryTemplate */ selectedItem.tmpl = $( "#summaryTemplate" ).template(); /* Update rendering of previous selected item */ selectedItem.update(); } /* Make this the selected item */ selectedItem = $.tmplItem(this); /* Switch this template item to the detailTemplate */ selectedItem.tmpl = $( "#detailTemplate" ).template(); /* Refresh rendering */ selectedItem.update(); }) .delegate( ".movieDetail", "click", function () { /* Unselect - switch to the summaryTemplate */ selectedItem.tmpl = $( "#summaryTemplate" ).template(); Trang 13 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web /* Refresh rendering */ selectedItem.update(); selectedItem = null; }); Tr c khi ch n:ướ ọ Sau khi ch n:ọ 8) Các thành ph n c b n khác ( ng v i m i Framework).ầ ơ ả ứ ớ ỗ Selectors o Attribute Contains Prefix Selector [name|="value"] Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). o Attribute Equals Selector [name="value"] Selects elements that have the specified attribute with a value exactly equal to a certain value. Events Trang 14 Ti u lu n JQuery Môn L p Trìnhể ậ ậ Web o .bind() Attach a handler to an event for the elements. o .change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element. Effects o .fadeIn() Display the matched elements by fading them to opaque. o .show() Display the matched elements. Ajax o .ajaxError() Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. o .ajaxSuccess() Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. Form validition o .focus() Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. o .change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element. Plug-ins o .tmpl() Take the first element in the matched set and render its content as a template, using the specified data. o .link() Link changes to the matched elements to an object. II) Tai liêu tham khaò ̣ ̉ 1) 2) 3) 4) tao-form-validation-voi-jquery-t2401.html 5) 6) Trang 15