tiểu luận tìm hiểu các chức năng và thành phần ứng dụng của jquery

Trang 8 Tiểu luận JQuery Trình Web Môn L ập 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: ́ ́  Demo Jquery - form submit Trang 9 Tiểu luận JQuery Trình Web Môn L ập p { margin:0; color:blue; font-size:20px;} div,p { margin-left:10px; } span { color:red; } t{color:red;} Giá trị đ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 1 0 Tiểu luận JQuery 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: Môn L ập 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: Trang 1 1 Tiểu luận JQuery Trình Web Môn L ập 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}Year: ${Year}MSSV: $ {MSSV} Click for details: var movies = [ Trang 1 2 Tiểu luận JQuery Trình Web Môn L ập { Name: "Nguyên Binh Nam", Year: "1989", MSSV: "DTH082050" }, { Name: "Lê Thị 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 1 3 Tiểu luận JQuery Trình Web /* Refresh rendering */ selectedItem.update(); selectedItem = null; }); Môn L ập