Hướng dẫn lập trình asp.net 3.5 microsoft - bài 9 Jquery doc

MỤC LỤC JQUERY gì? 2 Download jQuery Sử dụng jQuery ASP.NET jQuery hoạt động nào? 4.1 4.2 Chạy mã Document Ready (trang sẵn sàng) Function $() Một số API jQuery 5.1 Selectors 5.1.1 Basic 5.1.2 HIERACHY 5.1.3 Basic Filters (Các yếu tố chọn lọc bản) 5.1.4 Content Filters (Chọn lọc nội dung) 5.1.5 Visibility Filters 5.2 Attributes 5.2.1 Class 5.2.2 HTML, Text 10 5.3 Events 10 Câu hỏi ôn tập 12 Tài liệu tham khảo 13 Bài số JQUERY Bài giới thiệu tổng quan jQuery JQUERY gì? jQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết JavaScript tăng tốc độ xử lý kiện trang web Các thư viện jQuery cung cấp mục đích chung trừu tượng hố lớp phổ biến cho trang web scripting, hữu ích hầu hết tình scripting Các chức jQuery bao gồm:  Chọn tag tập hợp tag trang web  Cung cấp hàm tiện ích thơng dụng  Nhanh chóng tạo tag  Quan trọng phân tách việc thiết kế lập trình web phía client Download jQuery jQuery thư viện script, thêm vào trang web Chúng ta download phiên jQuery từ http://docs.jquery.com/Downloading_jQuery Hình 1: Downdload jQuery Như hình phiên jQuery 1.3.2, sau download file “jquery1.3.2.js”, sau để viết ứng dụng bạn cần nhúng file “jquery-1.3.2.js” vào phần javascript trang Trong Visual Studio 2008 SP1 hỗ trợ đầy đủ chức JavaScript Intellisense Để Visual Studio hỗ trợ Intellisense cho jQuery, cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, download từ: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736 Sau download file “jquery-1.3.2-vsdoc.js” từ: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js Mục đích “jquery-1.3.2-vsdoc.js” giúp đỡ việc viết dòng thích hỗ trợ cho việc phát sinh mã thông minh soạn thảo jQuery Microsoft Vietnam – DPE Team | Bài số 9: jQuery Sử dụng jQuery ASP.NET Chúng ta tạo project (Vi_du_9) sau thêm file “jquery-1.3.2.js” “jquery-1.3.2-vsdoc.js” vào project (hình 2) Hình Trước viết câu lệnh jQuery bạn cần khai báo sử dụng thư viện jQuery sau: Vi_du_9 jQuery hoạt động nào? 4.1 Chạy mã Document Ready (trang sẵn sàng) Có thể thấy hầu hết lập trình với Javascript, kết thúc mã thực thi cách thêm dòng mã vào script, tương tự sau: window.onload = function() { … } Các mã bên thực thi trang tải xong Tuy nhiên, mã Javascript khơng chạy tất hình ảnh trang tải xong (kể banner quảng cáo) Lý cho việc sử dụng window.onload để chắn HTML 'document' phải tải xuống hết, sau chạy mã Để giải quyết, jQuery có câu lệnh đơn giản, biết như: $(document).ready(function() { //Mã }); Mã kiểm tra document đợi sẵn sàng để sử dụng - theo ý muốn Microsoft Vietnam – DPE Team | Bài số 9: jQuery 4.2 Function $() Khi làm việc với CSS, Xpath custom, jQuery sử dụng function $() (dấu $ cặp dấu ngoặc) Dưới dây số thành phần $(): $("p"): p tên thẻ (tag) $("#id"): id tên id $(".class"): class tên lớp Một số API jQuery 5.1 Selectors 5.1.1 Basic id # Trả phần tử mảng: Array Nó tương ứng với phần tử gán thuộc tính id Nếu id chứa ký tự dấu chấm (.) dấu [] chúng phải thêm dấu ngạch chéo (\\) vào trước ký tự Nếu $("#some.id") phải viết thành $("#some\\.id") Nếu $("#some[id]") phải viết thành $("#some\\[id]\\") element Kiểu trả về: Array Tương ứng với tất phần tử với tên gán .class Kiểu trả về: Array Tương ứng với tất phần tử với tên lớp * Kiểu trả về: Array Tương ứng với tất phần tử selector1, selector2, selectorN Kiểu trả về: Array Phù hợp với kết hợp tất kết xác định selectors, số lượng selectors bất kỳ, trật tự phần tử DOM đối tượng jQuery không thiết phải thứ tự Ví dụ: Vi_du_9_1.aspx Vi_du_9_1 $(document).ready(function() { $("#div1").css("color", "red"); $("#div3\\.1\\.\\[0\\]").css("color", "red"); $("div").css("width", "200px"); $("div").css("height", "100px"); $(".Class1").css("color", "red"); $("*").css("border", "1px solid blue"); Microsoft Vietnam – DPE Team | Bài số 9: jQuery $("div,span").css("background-color", "#EEEEEE"); }); div { float:left;padding: 5px;margin: 5px; } Class1{ } Visual Studio 2008 ASP.NET 3.5 Download jQuery Chào mừng bạn đến với jQuery 5.1.2 HIERACHY ancestor descendant Kiểu trả về: Array Tương ứng với tất phần tử với danh nghĩa descendant phần tử xác định danh nghĩa “ancestor” Ví dụ: $("form input").css("border", "2px dotted blue"); parent > child Kiểu trả về: Array Tương ứng với phần tử danh nghĩa “child” phần tử xác định với danh nghĩa “parent” Ví dụ: $("#main > *").css("border", "3px double red"); prev + next Kiểu trả về: Array Phù hợp với tất yếu tố sau xác định "kế tiếp" bên cạnh yếu tố xác định "prev" Ví dụ: $("label + input").css("color", "blue").val("Labeled!"); prev ~ siblings Kiểu trả về: Array Phù hợp với tất yếu tố sau "prev" với yếu tố lọc "siblings" (liên quan) selector Ví dụ: $("#prev ~ div").css("border", "3px groove blue"); Ví dụ: Vi_du_9_2.aspx Vi_du_9_1 $(document).ready(function() { $("form input").css("border", "1px solid blue"); $("#submit > *").css("border", "1px solid red"); $("label + input").css("background-color", "#EEEEEE"); }); body { font-size:14px; } form { border:2px green solid; padding:2px; margin:0; background:#efe; } div { color:red; } fieldset { margin:1px; padding:3px; } Microsoft Vietnam – DPE Team | Bài số 9: jQuery Nhập thông tin cá nhân Họ tên: Nơi công tác Tên công ty: Địa chỉ: Hộ thường trú: Cập nhật   Hủy bỏ 5.1.3 Basic Filters (Các yếu tố chọn lọc bản) :first Kiểu trả về: Array Tương ứng với phần tử chọn Ví dụ: $("tr:first").css("font-style", "italic"); :last Kiểu trả về: Array Tương ứng với phần tử cuối chọn Ví dụ: $("tr:last").css("background-color", "yellow"); :not(selector) Kiểu trả về: Array Bỏ tất phần tử tương ứng cho selector Ví dụ: $("input:not(:checked)+span").css("background-color", "yellow"); :even Kiểu trả về: Array Tương ứng với phần tử chẵn, số 0, 2, 4, … Ví dụ: $("tr:even").css("background-color", "#bbbbff"); :odd Kiểu trả về: Array Tương ứng với phần tử lẻ, số 1, 3, 5, … Ví dụ: $("tr:odd").css("background-color", "#bbbbff"); :eq(index) Kiểu trả về: Array Tương ứng với phần tử riêng lẻ số Ví dụ: $("td:eq(2)").css("color", "red"); :gt(index) Kiểu trả về: Array Tương ứng với tất phần số gán Ví dụ: $("td:gt(2)").css("color", "red"); :lt(index) Kiểu trả về: Array Tương ứng với tất phần số gán Ví dụ: $("td:lt(2)").css("color", "blue"); :header Kiểu trả về: Array Tương ứng với tất phần tử tiêu đề, giống h1, h2, h3… Microsoft Vietnam – DPE Team | Bài số 9: jQuery Ví dụ: $(":header").css({ background: '#CCC', color: 'blue' }); Ví dụ: Vi_du_9_3.aspx Vi_du_9_3 $(document).ready(function() { $("tr:first").css("font-style", "italic"); $("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' }); $("tr:even").css("color", "red"); $("tr:odd").css("color", "blue"); $("tr:eq(4)").css("text-decoration", "line-through"); $("tr:gt(6)").css("font-size", "30px"); $("tr:lt(3)").css("font-size", "25px"); $(":header").css({ background: '#CCC', color: 'blue' }); }); Dòng thứ 1 Dòng thứ 2 Dòng thứ 3 Dòng thứ 4 Dòng thứ 5 Dòng thứ 6 Dòng thứ 7 Dòng thứ 8 Dòng thứ 9 Tiêu đề 1

Nội dung 1

Tiêu đề 2

Nội dung 2

5.1.4 Content Filters (Chọn lọc nội dung) :contains(text) Kiểu trả về: Array Tương ứng với phần tử chứa nội dung văn Ví dụ: Gạch chân tất thẻ “div” có chứa từ “John” $("div:contains('John')").css("text-decoration", "underline"); :empty Kiểu trả về: Array Tương ứng với tất phần tử khơng có phần tử Ví dụ: Chèn xâu “Khơng có nội dung” màu đỏ vào thẻ “td” khơng có phần tử $("td:empty").text("Khơng có nội dung!").css('color','red'); :has(selector) Kiểu trả về: Array Tương ứng với phần tử bao gồm phần tử phù hợp với định danh selector Ví dụ: Đặt cỡ chữ 30px cho đoạn văn có nằm thẻ “div” có chứa thẻ “p” $("div:has(p)").css("font-size", "30px"); :parent Kiểu trả về: Array Tương ứng với tất phần tử cha (chứa phần tử con, gồm phần tử văn bản) Microsoft Vietnam – DPE Team | Bài số 9: jQuery Ví dụ: Đặt cỡ chữ 30px cho thẻ “td” cha có phần tử $("td:parent)").css("font-size", "30px"); Ví dụ: Vi_du_9_4.aspx Vi_du_9_4 $(document).ready(function() { $("div:contains('Thị')").css("text-decoration", "underline"); $("td:empty").css("background-color", "#EEEEEE"); $("div:has(p)").css("font-size", "30px"); $("td:parent").css("color", "yellow"); }); td {width:200px;background:green; } Danh sách lớp 12A3 Đỗ Thị Thu Hằng Lê Văn Bình Trần Thị Hương Nguyễn Hải Nam Hồng Thu Bình TD #0 TD #2

Chào bạn đến với jQuery

Chào bạn đến với jQuery 5.1.5 Visibility Filters :hidden Kiểu trả về: Array Tương ứng với tất phần tử ẩn phần tử vào có dạng ẩn “hidden” Ví dụ: Ẩn thẻ “div” $("div:hidden").show(3000); :visble Kiểu trả về: Array Tương ứng với phần tử nhìn thấy Ví dụ: Click chuột vào thẻ div nhìn thấy $("div:visible").click(function() {$(this).css("background", "yellow");}); Ví dụ: Vi_du_9_5.aspx Vi_du_9_5 Microsoft Vietnam – DPE Team | Bài số 9: jQuery $(document).ready(function() { $("span:first").text("Tìm thấy " + $(":hidden", document.body).length + " phần tử ẩn."); $("div:hidden").show(3000); $("span:last").text("Tìm thấy " + $("input:hidden").length + " inputs ẩn."); $("div:visible").click(function() { $(this).css("background", "yellow"); }); }); div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; } span { display:block; clear:left; color:red; } starthidden { display:none; } Ẩn Ẩn 5.2 Attributes 5.2.1 Class addClass( class ) Kiểu trả về: jQuery Thêm class xác định vào tập phần tử phù hợp Nếu có thêm nhiều class class khoảng trắng Ví dụ: Thêm class “Maudo” vào thẻ p $("p").addClass("Maudo"); removeClass( class ) Kiểu trả về: jQuery Loại bỏ tất class xác định khỏi tập phần tử phù hợp Ví dụ: Loại bỏ lass “Maudo” khỏi thẻ p $("p").removeClass("Maudo"); toggleClass( class ) Kiểu trả về: jQuery Thêm class class chưa tồn loại bỏ class tồn Ví dụ: Thêm class “Maudo” vào thẻ p class “Maudo” chưa tồn thẻ p loại bỏ class “Maudo” khỏi thẻ p tồn $("p").toggleClass("Maudo"); Ví dụ: Vi_du_9_6.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery Vi_du_9_6 $(document).ready(function() { $("p").addClass("under"); $("p:last").removeClass("highlight"); $("p").click(function() { $("p").removeClass("highlight"); $(this).toggleClass("highlight"); }); }); p { margin: 4px; font-size:16px; font-weight:bolder; } blue { color:blue; } under { text-decoration:underline; } highlight { background:yellow; }

Visual Studio 2000

ASP.NET 3.5

Chào mừng bạn đến với jQuery

5.2.2 html() HTML, Text Kiểu trả về: String Lấy nội dung html (innerHTML) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung html thẻ p thơng báo nội dung lấy $("p").click(function() {alert($(this).html())}); html( val ) Kiểu trả về: jQuery Thiết lậ nội dung html (innerHTML) cho phần tử Ví dụ: Thiết lập nội dung html cho thẻ div $("div").html("Chào bạn! Chúc buổi học hôm thú vị."); text() Kiểu trả về: String Lấy nội dung text (innerText) phần tử Ví dụ: Mỗi click vào thẻ p lấy nội dung text thẻ p thơng báo nội dung lấy $("p").click(function() {alert($(this).html())}); text( val ) Kiểu trả về: jQuery Thiết lập nội dung text (innerText) cho phần tử Ví dụ: Thiết lập nội dung text cho thẻ div $("div").text("Chào bạn! Chúc buổi học hôm thú vị"); 5.3 Events Bind( type, [data], fn ) Bind hander vào kiện cho phần tử phù hợp, “type” kiện, “[data]” (tùy chọn) thêm liệu thông qua kiện, “fn” hàm xử lý kiện xảy Microsoft Vietnam – DPE Team | Bài số 9: jQuery 10 one( type, [data], fn ) Bind hander vào kiện thực thi lần cho phần tử phù hợp trigger( type, [data] ) Kích kiện phần tử phù hợp unbind( [type], [data] ) Loại bỏ kiện khỏi phần tử hover( over, out ) over, out hàm xử lý kiện Hàm over xử lý chuột di chuyển phần tử hàm out xử lý chuột rời khỏi phần tử toogle( fn, fn ) Chuyển đổi gọi hàm lần click Ví dụ: Vi_du_9_7.aspx Vi_du_9_7 $(document).ready(function() { $("p:first").bind("click", function(e) { var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span:first").text("Sự kiện click vừa xảy vị trí " + str); }); $("p:first").bind("dblclick", function() { $("span:first").text("Sự kiện click đúp vừa xảy thẻ " + this.tagName); }); var n = 0; $("div:lt(2)").one("click", function() { var index = $("div").index(this) + 1; $(this).css({ borderStyle: "inset", cursor: "auto" }); $("p:last").text("Hình chữ nhật thứ " + index + " vừa click." + " Tổng cộng có " + ++n + " click."); }); $("button:eq(0)").click(function() { update($("span:eq(1)")); }); $("button:eq(1)").click(function() { $("button:first").trigger('click'); update($("span:eq(2)")); }); function update(j) { var n = parseInt(j.text(), 0); j.text(n + 1); } function aClick() { $("div:last").show().fadeOut("slow"); } Microsoft Vietnam – DPE Team | Bài số 9: jQuery 11 $("#bind").click(function() { // could use bind('click', aClick) instead but for variety $("#theone").click(aClick).text("Có thể click"); }); $("#unbind").click(function() { $("#theone").unbind('click', aClick) text("Khơng làm "); }); $("li").hover( function() { $(this).css("color", "red"); }, function() { $(this).css("color", "black"); } ); }); p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; } span { color:red; } div1 { width:60px; height:60px; margin:5px; float:left; background:green; border:5px outset; cursor:pointer; }

Click click đúp vào đây.

Hãy click vào hình chữ nhật màu xanh

Button thứ 1 Button thứ 2 0 lần button thứ click. 0 lần button thứ clicks. Khơng làm Bind Click Unbind Click Click!

Hãy di chuyển chuột lên Máy bay, Ơtơ, Xe máy, Xe đạp

• Máy bay
• Ơtơ
• Xe máy
• Xe đạp

Câu hỏi ơn tập jQuery gì? Trả lời: jQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết JavaScript tăng tốc độ xử lý kiện trang web Các thư viện jQuery cung cấp mục đích chung trừu tượng hoá lớp phổ biến cho trang web scripting, hữu ích hầu hết tình scripting Các chức jQuery bao gồm:  Chọn tag tập hợp tag trang web  Cung cấp hàm tiện ích thơng dụng Microsoft Vietnam – DPE Team | Bài số 9: jQuery 12  Nhanh chóng tạo tag  Quan trọng phân tách việc thiết kế lập trình web phía client Trong Visual Studio 2008 có hỗ trợ Intellisense cho jQuery khơng? Trả lời: Có Nếu downdload cài đặt file sau: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736 Sau download file “jquery-1.3.2-vsdoc.js” từ: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js Tài liệu tham khảo jQuery, URL: http://docs.jquery.com ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-aspnet-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery 13 ... http://weblogs .asp.net/ scottgu/archive/2008/12/02/dec-2nd-links-asp-net-aspnet-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx Microsoft Vietnam – DPE Team | Bài số 9: jQuery. .. thông minh soạn thảo jQuery Microsoft Vietnam – DPE Team | Bài số 9: jQuery Sử dụng jQuery ASP.NET Chúng ta tạo project (Vi_du _9) sau thêm file ? ?jquery- 1.3.2.js” ? ?jquery- 1.3.2-vsdoc.js” vào project... "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Vi_du _9_ 5 Microsoft Vietnam – DPE Team | Bài số 9: jQuery