ASP.NET 3.5 - Bài 9: JQUERY
1. JQUERY là gì? . 2
2. Download jQuery . 2
3. Sử dụng jQuery trong ASP.NET . 3
4. jQuery hoạt động như thế nào? . 3
4.1. Chạy mã khi Document Ready (trang đã sẵn sàng) . 3
4.2. Function $() . 4
5. Một số API trong jQuery . 4
5.1. Selectors . 4
5.1.1. Basic . 4
5.1.2. HIERACHY . 5
5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản) . 6
5.1.4. Content Filters (Chọn lọc nội dung) . 7
5.1.5. Visibility Filters . 8
5.2 Attributes . 9
5.2.1 Class . 9
5.2.2 HTML, Text . 10
5.3 Events . 10
6. Câu hỏi ôn tập . 12
7. Tài liệu tham khảo . 13
Tóm tắt nội dung ASP.NET 3.5 - Bài 9: JQUERY, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
e' });
Ví dụ: Vi_du_9_3.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_3.aspx.cs"
Inherits="Vi_du_9_3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
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 các phần tử chứa nội dung văn bản.
Ví dụ: Gạch chân tất cả các 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 cả các phần tử không có phần tử con
Ví dụ: Chèn xâu “Không có nội dung” màu đỏ vào các thẻ “td” không có phần tử con.
$("td:empty").text("Không có nội dung!").css('color','red');
:has(selector) Kiểu trả về: Array
Tương ứng với các phần tử bao gồm ít nhất một phần tử phù hợp với định danh selector.
Ví dụ: Đặt cỡ chữ là 30px cho đoạn văn có nằm trong các 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 cả các phần tử là cha (chứa các phần tử con, gồm cả phần tử văn bản).
Microsoft Vietnam – DPE Team | Bài số 9: jQuery 8
Ví dụ: Đặt cỡ chữ là 30px cho các thẻ “td” cha có phần tử con.
$("td:parent)").css("font-size", "30px");
Ví dụ: Vi_du_9_4.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_4.aspx.cs"
Inherits="Vi_du_9_4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
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
Hoà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 cả các phần tử được ẩn đi hoặc phần tử vào có dạng ẩn “hidden”.
Ví dụ: Ẩn các thẻ “div”.
$("div:hidden").show(3000);
:visble Kiểu trả về: Array
Tương ứng với các phần tử nhìn thấy được
Ví dụ: Click chuột vào các thẻ div nhìn thấy được.
$("div:visible").click(function() {$(this).css("background", "yellow");});
Ví dụ: Vi_du_9_5.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_5.aspx.cs"
Inherits="Vi_du_9_5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
Vi_du_9_5
Microsoft Vietnam – DPE Team | Bài số 9: jQuery 9
$(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 các class đã xác định vào mỗi tập phần tử phù hợp. Nếu có thêm nhiều class thì các class được
các nhau bởi khoảng trắng.
Ví dụ: Thêm class “Maudo” vào các thẻ p.
$("p").addClass("Maudo");
removeClass( class ) Kiểu trả về: jQuery
Loại bỏ tất cả hoặc các class đã xác định khỏi tập phần tử phù hợp.
Ví dụ: Loại bỏ lass “Maudo” khỏi các thẻ p.
$("p").removeClass("Maudo");
toggleClass( class ) Kiểu trả về: jQuery
Thêm class nếu class chưa tồn tại hoặc loại bỏ nếu class đã tồn tại.
Ví dụ: Thêm class “Maudo” vào thẻ p nếu class “Maudo” chưa tồn tại trong thẻ p hoặc loại bỏ
class “Maudo” khỏi thẻ p nếu nó tồn tại.
$("p").toggleClass("Maudo");
Ví dụ: Vi_du_9_6.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_6.aspx.cs"
Inherits="Vi_du_9_6" %>
Microsoft Vietnam – DPE Team | Bài số 9: jQuery 10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
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, Text
html() Kiểu trả về: String
Lấy nội dung html (innerHTML) của phần tử.
Ví dụ: Mỗi khi click vào thẻ p lấy nội dung html của thẻ p đó và thông báo nội dung lấy được.
$("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 các bạn! Chúc buổi học hôm nay thú vị.");
text() Kiểu trả về: String
Lấy nội dung text (innerText) của phần tử.
Ví dụ: Mỗi khi click vào thẻ p lấy nội dung text của thẻ p đó và thông báo nội dung lấy được.
$("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 các bạn! Chúc buổi học hôm nay thú vị");
5.3 Events
Bind( type, [data], fn )
Bind một hander vào một sự kiện cho mỗi phần tử phù hợp, “type” là sự kiện, “[data]” (tùy chọn)
thêm dữ liệu thông qua sự kiện, “fn” là hàm xử lý khi sự kiện đó xảy ra.
Microsoft Vietnam – DPE Team | Bài số 9: jQuery 11
one( type, [data], fn )
Bind một hander vào một sự kiện và nó được thực thi 1 lần cho mỗi phần tử phù hợp.
trigger( type, [data] )
Kích một sự kiện trên mọi phần tử phù hợp.
unbind( [type], [data] )
Loại bỏ sự kiện khỏi phần tử
hover( over, out )
over, out là 2 hàm xử lý sự kiện. Hàm over xử lý khi chuột di chuyển trên phần tử hàm out xử lý khi
chuột rời khỏi phần tử
toogle( fn, fn )
Chuyển đổi gọi hàm giữa 2 lần click.
Ví dụ: Vi_du_9_7.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_7.aspx.cs"
Inherits="Vi_du_9_7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
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 ra tại vị trí " + str);
});
$("p:first").bind("dblclick", function() {
$("span:first").text("Sự kiện click đúp vừa xảy ra tại 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 được 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 12
$("#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 gì cả....");
});
$("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 hoặc click đúp vào đây.
Hãy click vào các hình chữ nhật màu xanh
Button thứ 1
Button thứ 2
0 lần button thứ 1 được click.
0 lần button thứ 2 được clicks.
Không làm gì cả....
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
6. Câu hỏi ôn tập
1. jQuery là gì?
Trả lời:
jQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử
lý các sự kiện trên trang web. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp
phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting.
Các chức năng jQuery bao gồm:
Chọn một tag hoặc một tập hợp các tag trên trang web.
Cung cấp các hàm tiện ích thông dụng.
Microsoft Vietnam – DPE Team | Bài số 9: jQuery 13
Nhanh chóng tạo ra các tag mới.
Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client.
2. Trong Visual Studio 2008 có hỗ trợ Intellisense cho jQuery không?
Trả lời:
Có. Nếu chúng ta downdload và cài đặt file sau:
Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ:
7. Tài liệu tham khảo
1. jQuery, URL:
2. ScottGu's Blog, URL:
net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx
File đính kèm:
ASP.NET 3.5 - Bài 9_JQUERY.pdf
