JQuery tiếng việt - Lê Hùng

Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Mục lục JQUERY jQuery - Căn jQuery - Event jQuery - Mouse Event jQuery - hàm xử lý style jQuery - Selector 13 jQuery - mouse hover 14 jQuery - effect 16 jQuery - append prepend 19 jQuery - appendTo prependTo 20 jQuery hàm each 21 jQuery - html text 24 jQuery - contains selector 26 jQuery - XML 27 jQuery - empty remove 29 jQuery - ajax 33 Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Tổng quan hàm jquery Tài liệu tham khảo http://w3schools.com/jquery/jquery_ref_selectors.asp http://www.visualjquery.net/ http://api.jquery.com/ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ JQUERY jQuery - Căn Do jQuery thực chất thư viện javascript Do đó, jQuery file js thông thường file javascript khác Việc phải làm bắt đầu sử dụng jQuery phải khai báo, hay nói cách khác load file jQuery javascript lên website Có hai cách để thực việc Link trực tiếp tới file jQuery Tải file jQuery.js máy sử dụng file js cá nhân Sử dụng jQuery nào? Dùng từ khóa định nghĩa jQuery Có hai từ khóa: jQuery $ VD: jQuery("#test") $("#test") Sử dụng jQuery để truy xuất tới Element HTML nào? Trước tiên, element(là thẻ html div, table, ) có hai thuộc tính id name Để truy xuất tới element có cách sau: Với ID: jQuery("#element_id") $("#element_id") Với name: jQuery("[name='element_name']") $("[name='element_name']") Với element name bạn trả mảng element có name Ví dụ element id: Click vào button hiển thị alert $(document).ready(function(){ $("#butAlert").click(function(){ alert("Bạn click vào button này."); }); }); Ví dụ element name: Check vào radio hiển thị alert $(document).ready(function(){ $("[name='cks']").change(function(){ alert("Bạn chọn "+$(this).val()+" này."); }); }); radio radio radio radio Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ jQuery - Event Như ta biết thẻ HTML thường hỗ trợ kiện như: onclick, onkeydown, onmousedown thường dạng attribute phải định nghĩa hàm cho theo dạng sau: Vậy câu hỏi đặt là: jQuery có hỗ trợ cho gọi kiện hay không? Câu trả lời có jQuery hỗ trợ cho đầy đủ kiện Một số kiện thường dùng jQuery hỗ trợ là: Mouse event(sự kiện chuột) click: kiện gọi có click chuột có nghĩa bao gồm nhấn trái chuột xuống nhả ra(mouse down and mouse up) mousedown: kiện gọi vừa nhấn trái chuột mouseup: kiện gọi nhả chuột trái mouseenter: kiện gọi trỏ chuột di chuyển vào vùng quy định mouseleave: kiện gọi trỏ chuột rời khỏi vùng quy định mousemove: kiện gọi trỏ chuột di chuyển bên vùng quy định Keyboard event(sự kiện bàn phím) keypress: kiện gọi phím bàn phím nhấn nhả keydown: kiện gọi phím bàn phím nhấn xuống(chưa nhả) keyup: kiện gọi phím bàn phím nhả Other event(sự kiện khác) focus: kiện xảy ta focus vào element(con nháy textbox, viền button, radio, checkbox ) blur: ngược lại focus change: kiện gọi giá trị radio checkbox thay đổi(check - uncheck) live bind: dùng để gán hàm xử lý element scroll: bắt kiện scrollbar Cú pháp chung $("#element_id").event_name(function(ObjectEventHandle){ code here }); $("[name='element_name']").event_name(function(ObjectEventHandle){ code here }); Có thể có ObjectEventHandle Tình Khi ta click vào button hiển thị thêm chữ ô màu xám bên cạnh Code #show{ float:left; background-color:#EAEAEA; border:1px solid black; color:red; width:200px; height:200px; margin-left:200px; Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ overflow:auto; } $(document).ready(function(){ $("#butShow").click(function(){ $("#show").html($("#show").html()+" Click"); }); }); jQuery - Mouse Event Bài viết giới thiệu số ví dụ đơn giản kiện chuột(mouse event) jQuery: click Tình huống: Click vào button hiển thị alert Code jQuery(document).ready(function(){ jQuery("#butClick").click(function(){ alert("Click"); }); }); mousedown mouseup Tình huống: Nhấn trái chuột vào ô vuông xám bên trái ô vuông trắng bên phải hiển thị dòng chữ tương ứng với kiện(mouse down mouse up) Code #rect_left_1{ background-color:gray; border:1px solid black; float:left; width:200px; height:200px; } #rect_right_1{ border:1px solid black; float:left; margin-left:50px; width:200px; Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ height:200px; color:red; overflow:auto; } $(document).ready(function(){ $("#rect_left_1").mousedown(function(){ $("#rect_right_1").html($("#rect_right_1").html()+" mousedown"); }); $("#rect_left_1").mouseup(function(){ $("#rect_right_1").html($("#rect_right_1").html()+" mouseup"); }); }); mouseenter, mouseleave mousemove Tình huống: Di chuyển chuột vào ô vuông xám bên trái ô vuông trắng bên phải hiển thị số lần kiện xảy (mouse enter mouse leave), riêng kiện mouse move hiển thị tọa độ trỏ chuột ô xám Code #rect_left_2{ background-color:gray; border:1px solid black; float:left; width:200px; height:200px; } #rect_right_2{ border:1px solid black; float:left; margin-left:50px; width:200px; height:200px; } Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ $(document).ready(function(){ $("#rect_left_2").mouseenter(function(){ var enter = $("#enter").html(); enter++; Tình huống: Di chuyển chuột ô vuông xám bên trái ô vuông trắng bên phải hiển thị thông số pageX, pageY, screenX, Code #event_obj_left{ background-color:gray; border:1px solid black; float:left; width:200px; height:200px; } #event_obj_right{ border:1px solid black; float:left; margin-left:50px; width:200px; height:200px; } $(document).ready(function(){ $("#event_obj_left").mousemove(function(e){ $("#page_x").html(e.pageX); $("#page_y").html(e.pageY); $("#client_x").html(e.clientX); $("#client_y").html(e.clientY); $("#screen_x").html(e.screenX); $("#screen_y").html(e.screenY); }); }); pageX: 0, pageY: 0 clientX: 0, clientY: 0 screenX: 0, screenY: 0 Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ jQuery - hàm xử lý style Bài viết nói số hàm dùng để can thiệp vào style element css: Dùng để lấy giá trị property element website thiết lập giá trị cho css cho property o o o css (css property name): trả giá trị property .css (css property, value): thiết lập giá trị cho css property element .css ( {list of properties} ): dùng để thiết lập nhóm thuộc tính css Tình huống: Thay đổi CSS cho ô vuông màu xám :  Nút Get: lấy giá trị thuộc tính background-color  Nút Set: thay đổi giá trị background-color  Nút Group gán lại nhóm giá trị background-color, width, height Code #css_left { border:1px solid black; background-color:gray; width:200px; height:200px; float:left; } #css_right { float:left; margin-left:50px; width:200px; height:200px; } jQuery(document).ready(function(){ jQuery("#butGet").click(function(){ alert("background-color: " + jQuery("#css_left").css("backgroundcolor")); }); jQuery("#butSet").click(function(){ jQuery("#css_left").css("background-color","red"); }); jQuery("#butGroup").click(function(){ jQuery("#css_left").css({"backgroundcolor":"green","width":"100px","height":"100px"}); }); }); Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Các hàm thao tác với Attribute element o attr: Dùng để lấy giá trị attribute element gán giá trị cho attribute    o  attr (attribute name): trả giá trị attribute element .attr (attribute name, value): thiết lập giá trị cho attribute element .attr ( {list of properties} ): dùng để thiết lập nhóm attribute cho element removeAttr: Dùng để gở bỏ attribute element .removeAttr (attribute name): gỡ bỏ attribute khỏi element Tình huống: Thay đổi attribute cho ảnh (thẻ img) o Nút Get: lấy giá trị attribute src thẻ img bên trái o Nút Set One Attribute: Gán lại giá trị cho attribute src thẻ img(đổi hình hiển thị) o Nút Set Group Attribute: Gán lại giá cho attribute src, title, alt ảnh Để kiểm tra bạn rê chuột vào ảnh thấy lên dòng tooltip sesshomaru image o Nút Remove Attribute: Gỡ bỏ thuộc tính title ảnh( rê chuột vào ảnh để kiểm tra ảnh dòng tooltip) Code #attr_left { background-color:gray; width:122px; height:122px; float:left; } #attr_right { float:left; margin-left:50px; width:122px; height:122px; } jQuery(document).ready( function(){jQuery("#butGetAttr").click(function(){ alert("image src: " + jQuery("#myImage").attr("src")); }); jQuery("#butOneAttr").click(function(){ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ jQuery("#myImage").attr("src","http://3.bp.blogspot.com/_wOkFJyJxw44/TD noOg0ZO4I/AAAAAAAAABI/5AbUI47SOEU/s320/sesshomaru.jpeg"); }); jQuery("#butGroupAttr").click(function(){ jQuery("#myImage").attr({src:"http://1.bp.blogspot.com/_wOkFJyJxw44/TDn oO_M2u0I/AAAAAAAAABQ/nb9K3zfolxg/s320/thSesshomaruChibi.jpg",title:"Ses shomaru image",alt:"jquery attr image"}); }); jQuery("#butRemoveAttr").click(function(){ jQuery("#myImage").removeAttr("title"); }); }); Các hàm thao tác class o o addClass (class name): Dùng để gán class cho element .removeClass (class name): gỡ bỏ class khỏi attribute class element Tình huống: Thay đổi class cho table o Nút Odd: dòng lẻ table xuất màu vàng nhạt cho dòng o o Nút Even: dòng chẵn table xuất màu xanh nhạt cho dòng Nút Reverse: đảo ngược hai class dòng chẵn lẻ Code Demo #table_left{ float:left; } #button_right{ float:left;padding-left:50px; Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Demo jQuery - appendTo prependTo Hàm appendTo prependTo dùng để chèn đối tượng HTML DOM truy xuất vào đối tượng HTML DOM ta chọn tham số hàm Có nghĩa cắt toàn đoạn HTML đối tượng ta truy xuất để chèn vào đối tượng mà ta chọn tham số hàm  appendTo(jQuery selector): Chèn đối tượng HTML DOM truy xuất vào cuối danh sách đối tượng tham số selector chọn o VD: jQuery("#a").appendTo("#b"); có nghĩa toàn nội dung thẻ có id a chèn vào cuối thẻ có id b  prependTo(jQuery selector): Chèn đối tượng HTML DOM truy xuất vào đầu danh sách đối tượng tham số selector chọn o VD: jQuery("#a").prependTo("#b"); có nghĩa toàn nội dung thẻ có id a chèn vào đầu thẻ có id b  Ví dụ ta có hai thẻ ul sau: chèn 1 chèn 2 chèn 3 Con 1 Con 2 Khi ta nhấn nút:  appendTo toàn thẻ input_ul chèn vào sau thẻ li  prependTo toàn thẻ input_ul chèn vào trước thẻ li Code jQuery(document).ready(function(){ jQuery("#butAppendTo").click(function(){ jQuery("#input_ul").appendTo("#choose_ul"); }); jQuery("#butPrependTo").click(function(){ jQuery("#input_ul").prependTo("#choose_ul"); }); }); chèn 1 chèn 2 chèn 3 Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Con 1 Con 2 Lưu ý:  Chỉ nên sử dụng hàm biết rõ đối tượng bạn cần chèn  Tốt nên dùng với cách select id, tránh dùng hàm với selector trả mảng đối tượng selector name tag name Ví dụ minh họa: Bạn click nhiều lần vào button bạn thấy hàm không chạy xác với selector trả mảng đối tượng Demo jQuery hàm each each vòng lặp mà jQuery cung cấp sẵn cho ta, cách thức hàm each hoạt động tương tự vòng lặp foreach C# Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/  each( function() ) vòng lặp chạy từ object đầu mảng tới object cuối mảng  each( function(index) ) vòng lặp chạy từ object đầu mảng tới object cuối mảng, có kèm theo biến thứ tự (index) Lưu ý:  each lả vòng lặp foreach viết jQuery  Để truy xuất đối tượng hàm each truy xuất tới ta dùng từ khóa this, cách dùng sau jQuery(this) Cú pháp: Ví dụ với hàm each( function() ) ta có thẻ ul có ba thẻ li, dùng hàm each alert có nội dung nội dung thẻ li truy xuất tới jQuery(document).ready(function(){ jQuery("#butEach1").click(function(){ jQuery("#ul_1 li").each(function(){ alert("Đang truy xuất tới phần tử có nội dung: " + jQuery(this).html()); }); }); }); Dòng 1 Dòng 2 Dòng 3 Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Ví dụ với hàm each(function(index)) ta có thẻ ul với ba thẻ li nhấn vào button Each ta dùng hàm each để gắn giá trị index vào thẻ ul jQuery(document).ready(function(){ jQuery("#butEach2").click(function(){ jQuery("#ul_2 li").each(function(index){ jQuery(this).html(jQuery(this).html()+" "+index); }); }); }); Dòng Dòng Dòng Mình xin đính lại each không hoạt động với mảng jQuery object mà hoạt động với mảng thông thường javascript Cách thức sử dụng: jQuery.each(array, callback function(index, value)) Giả sử ta có mảng gồm 10 phần tử bất kỳ, ta dùng hàm each duyệt qua phần tử Code jQuery(document).ready(function(){ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ var arr = [1,2,3,40,1,20,3,50]; jQuery("#arr_each_1").click(function(){ jQuery.each(arr, function(index,value){ alert("STT " + index + ": Gia tri "+value); }); }); }); jQuery - html text html text hai hàm thường dùng để thao tác với nội dung jQuery object  html: Lấy toàn nội dung đồi tượng truy xuất dạng HTML (bao gồm thẻ div, table )  html(html text): Thiết lập nội dung đối tượng truy xuất chuỗi HTML truyền vào  text: Lấy toàn nội dung thẻ HTML bỏ qua thẻ (không lấy thẻ HTML div, table,br )  text (text): thay đổi chuỗi nội dung đối tượng(cho dù bạn truyền chuỗi HTML vào mặc định hàm hiểu text mã HTML hiển bạn truyền vào) Ví dụ: ta có thẻ div có chứa thẻ p thẻ a(nội dung lorem text) Như sau: Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce semper sapien nec urna feugiat convallis sed sit amet velit. Curabitur vehicula, dui eu rutrum sollicitudin. vehicula Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/  Nút getHTML: Lấy nội dung HTML thẻ div(dùng hàm html)  Nút setHTML: dùng hàm html để set chuỗi HTML sau Xin chao jQuery cho thẻ div  Nút getText: Dùng hàm text lấy nội dung thẻ div  div Nút setText: Dùng hàm text thiết lập thử đoạn mã HTML sau Xin chao jQuery cho thẻ  Nút Restore: Khôi phục lại nội dung ban đầu thẻ div Code jQuery(document).ready(function(){ jQuery("#gettext").click(function(){ alert(jQuery("#content_div").text()); }); jQuery("#settext").click(function(){ jQuery("#content_div").text("Xin chao jQuery"); }); jQuery("#gethtml").click(function(){ alert(jQuery("#content_div").html()); }); jQuery("#sethtml").click(function(){ jQuery("#content_div").html("Xin chao jQuery"); }); }); Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce semper sapien nec urna feugiat convallis sed sit amet velit. Curabitur vehicula, dui eu rutrum sollicitudin. vehicula Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ jQuery - contains selector contains selector thường dùng để tìm kiếm HTML DOM có chứa chuỗi cần tìm(có phân biệt chữ hoa, chữ thường) Cách thức sử dụng sau:  jQuery(":contains('text')"): trả danh sách tất object có chứa chuỗi text  jQuery("div:contains('text')" ): trả danh sách object thẻ div có chứa chuỗi text Ví dụ ta có thẻ ul có thẻ sau Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Fusce semper sapien nec urna. Curabitur vehicula, dui eu rutrum sollicitudin. Feugiat convallis sed sit amet velit. Điền từ cần tìm kiếm vào ô textbox, click button contains Nếu chuỗi cần tìm kiếm nằm nội dung dòng chữ dòng chuyển sang màu đỏ Code jQuery(document).ready(function(){ jQuery("#contains").click(function(){ jQuery("#contains_ul li").each(function(){ jQuery(this).css("color","black"); }); jQuery("#contains_ul li:contains('"+jQuery("#contains_text").val()+"')").css("color","red"); }); }); Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Fusce semper sapien nec urna. Curabitur vehicula, dui eu rutrum sollicitudin. Feugiat convallis sed sit amet velit. jQuery - XML Khởi tạo XML Để khởi tạo XML jQuery ta làm sau: var xml = $(''); xml.append(""); Biến xml hiểu XML object Ta việc append node vào object Thêm node Hàm find dùng để tìm kiếm thẻ xml Ví dụ ta muốn tạo danh sách employee Ta làm sau: //Đầu tiên ta tạo thẻ employees chứa thẻ employee xml.append(""); //Tạo thẻ employee var employee = ""; employee += ""; employee += "Tran Van A"; Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ employee employee employee employee += += += += "202020"; "abc@yahoo.com"; "00000000"; ""; // Sau ta tạo thẻ employee // Ta dùng hàm find để tìm thẻ employees vừa tạo xml.find("employees").each(function(){ // Thêm thẻ employee vào thẻ employees jQuery(this).append(employee); }); Cập nhật thông tin node Sau thực lệnh ta có nội dung xml sau: Tran Van A 202020 abc@yahoo.com 00000000 Ta cần cập nhật thông tin tên employee thành Nguyễn Văn B Ta làm sau: // Lấy danh sách tất thẻ name file xml //Cách xml.find("name").each(function(){ if (jQuery(this).text()=="Tran Van A"){ jQuery(this).text("Nguyen Van B"); } }); //Cách hai xml.find("employees").each(function(){ jQuery(this).find("employee").each(function(){ jQuery(this).find("name").each(function(){ if(jQuery(this).text()=="Tran Van A"){ jQuery(this).text("Nguyen Van B"); } }); }); }); Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Xóa node Sau thực lệnh cập nhật, ta có nội dung xml sau Nguyen Van B 202020 abc@yahoo.com 00000000 Bây ta xóa node name employee có tên Nguyen Van B khỏi nội dung XML(Dùng hàmremove) xml.find("employees").each(function(){ jQuery(this).find("employee").each(function(){ jQuery(this).find("name").each(function(){ if(jQuery(this).text()=="Nguyen Van B"){ // Dùng hàm remove để xóa node jQuery(this).remove(); } }); }); }); Nội dung file XML cuối sau 202020 abc@yahoo.com 00000000 jQuery - empty remove empty remove thường dùng để xóa phần tử jQuery Tuy hai hàm có chung hành động chúng có chút khác biệt sau:  empty xóa phần tử phần tử truy xuất  remove giống hàm empty bao gồm phần tử truy xuất phần tử Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ Ví dụ ta có thẻ ul sau: lorem isum1 lorem isum2 lorem isum3 lorem isum4 Khi ta sử dụng:  jQuery("#test_ul").empty() jQuery xóa toàn nội dung thẻ ul có id test_ul giữ lại thân thẻ  jQuery("#test_ul").remove() jQuery xóa toàn nội dung thẻ ul có id test_ul xóa thẻ ul test_ul Tuy nhiên hàm remove trả đối tượng mà vừa remove để có khả lưu trữ khôi phục lại cần Demo ta có ô vuông bên trái chứa thẻ ul ô bên phải chứa giá trị trả câu lệnh phía Code fly { float:left; display:inline; } clean{ clear:both; } current{ color:red; } jQuery(document).ready(function(){ jQuery("#butEmpty").click(function(){ var rmvObj = jQuery("#test_ul").empty(); jQuery("#showReturn").html(rmvObj); }); jQuery("#butRemove").click(function(){ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ var rmvObj = jQuery("#test_ul").remove(); jQuery("#showReturn").html(rmvObj); }); }); lorem isum1 lorem isum2 lorem isum3 lorem isum4 jQuery - ajax jQuery ajax giúp đơn giản hóa trình thực thi Sau vài minh họa tính tiện dụng JQuery ajax Cú pháp jQuery.ajax({ type:"POST", //Phương thức gửi request POST GET data:"id=12&name=abc", //tham số gửi kèm dataType:"xml", //kiểu liệu trả về, mặc định text url:"/login/servletLogin", //Đường dẫn tới nơi xử lý request ajax success: function (){ //hàm gọi thực thành công // mã lệnh } }); Ví dụ 1: Sử dụng HTML tạo ví dụ đơn giản với jQuery ajax  Tạo thư mục(ở tạm gọi thư mục VD)  Vào thư mục VD tạo file index.html có nội dung sau jQuery("#responseDiv").html(html); } Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ }); }); });  Tiếp tục tạo file ajax.html có nội dung sau border-collapse:collapse; } #sampleTable td{ border: 1px solid black; width:100px; } Name Year Van A 1982  Mở file index.html trình duyệt click vào button ajax bạn thấy toàn nội dung file ajax.html lấy trang index.html Ví dụ 2: Dùng PHP tạo ví dụ đơn giản với jQuery ajax  Cài đặt ứng dụng chạy apache Xampp Wamp Start ứng dụng  Tạo thư mục với tên sample trong(thư mục htdocs Xampp www Wamp)  Trong thư mục sample tạo file index.php có nội dung sau: jQuery(document).ready(function(){ jQuery("#ajaxButton").click(function(){ jQuery.ajax({ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/  type:"POST", url:"ajax.php", //goi toi file ajax.php data:"name="+jQuery("#name").val()+"&year="+jQuery("#year").val(), //du lieu gui di success:function(html){ jQuery("#responseDiv").html(html); } }); }); }); Name: Year: Tạo tiếp file ajax.php thư mục sampe với nội dung sau  Bây bạn mở trình duyệt web lên(IE firefox) lên gõ vào địa sau: localhost/sample/  Bạn điền vào hai field Name Year nhấn button ajax bạn thấy câu chào giống hình Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/ [...]... jQuery( document).ready(function(){ var show = false; jQuery( "#show").click(function(){ if (show){ jQuery( "#show-hide").show(); show=!show; jQuery( "#hide").removeAttr("disabled"); jQuery( "#show").attr("disabled","true"); } }); jQuery( "#hide").click(function(){ if (!show){ jQuery( "#show-hide").hide(); show=!show; jQuery( "#show").removeAttr("disabled"); jQuery( "#hide").attr("disabled","true"); } }); jQuery( "#toggle").click(function(){... if (!fade){ jQuery( "#effect_div").fadeOut(); fade=!fade; jQuery( "#fadein").removeAttr("disabled"); jQuery( "#fadeout").attr("disabled","true"); } }); jQuery( "#slideup").click(function(){ if(!slide){ jQuery( "#effect_div").slideUp(); slide=!slide; jQuery( "#slidedown").removeAttr("disabled"); jQuery( "#slideup").attr("disabled","true"); } }); jQuery( "#slidedown").click(function(){ if(slide){ jQuery( "#effect_div").slideDown();... jQuery( "#butReverse").attr("disabled","true"); jQuery( "#butOdd").removeAttr("disabled","true"); jQuery( "#butEven").removeAttr("disabled","true"); jQuery( "#butOdd").click(function(){ if (!odd){ odd = !odd; jQuery( "#my_table").find("tr:odd").addClass("odd"); if (even){ jQuery( "#butReverse").removeAttr("disabled"); jQuery( "#butOdd").attr("disabled","true"); jQuery( "#butEven").attr("disabled","true"); } } }); jQuery( "#butEven").click(function(){... type="text/javascript"> jQuery( document).ready(function(){ jQuery( "[name='hover_image']").css("top", (jQuery( "#hover_div").position ().top + 20)+"px"); var left = 40; jQuery( "[name='hover_image']").each(function(i,val){ jQuery( this).css("left", (jQuery( "#hover_div").position().left + left)+"px"); left+=100; }); jQuery( "[name='hover_image']").hover(function(){//ham callback hoverIn jQuery( this).animate({... src="http://code .jquery. com /jquery- 1.4.2.js"> jQuery( document).ready(function(){ jQuery( "#ajaxButton").click(function(){ jQuery. ajax({ Le Hung – Lập Trình Viên NET – Đại Học Đà Lạt Groups ASP.NET : https://www.facebook.com/groups/asp.net.dlu/  type:"POST", url:"ajax.php", //goi toi file ajax.php data:"name=" +jQuery( "#name").val()+"&year=" +jQuery( "#year").val(),... jQuery( "#gettext").click(function(){ alert (jQuery( "#content_div").text()); }); jQuery( "#settext").click(function(){ jQuery( "#content_div").text("Xin chao jQuery"); }); jQuery( "#gethtml").click(function(){ alert (jQuery( "#content_div").html()); }); jQuery( "#sethtml").click(function(){ jQuery( "#content_div").html("Xin chao jQuery"); }); }); jQuery( document).ready(function(){ jQuery( "#butEach2").click(function(){ jQuery( "#ul_2 li").each(function(index){ jQuery( this).html (jQuery( this).html()+" "+index); }); }); }); Dòng Dòng Dòng ... jQuery( "#hide").attr("disabled","true"); } }); jQuery( "#toggle").click(function(){ jQuery( "#show-hide").toggle(); }); jQuery( "#slidetoggle").click(function(){ jQuery( "#show-hide").slideToggle(); }); }); ... class="class1 class2" jQuery - Selector jQuery selector gì? jQuery selector cách gọi đến nhiều đối tượng có số đặc tính định Ví dụ: gọi theo name, loại element, theo class, Các selector bản: #element_id:... checked true - :disabled :Trả thẻ có thuộc tính disabled VD: jQuery( ":disabled") trả toàn thẻ có thuộc tính disabled jQuery( "input:disabled") trả toàn thẻ input có thuộc tính disabled jQuery( "form