asp.net 3.5_9

MỤC LỤC

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

Microsoft Vietnam – DPE Team | Bài số 9: jQuery 2

Bài số 9

JQUERY

Bài này giới thiệu tổng quan jQuery.

1. JQUERY là gì?

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.

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. Download jQuery

jQuery là một thư viện script, do đó chúng ta có thể thêm vào trang web. Chúng ta có thể download phiên

bản mới nhất của jQuery từ http://docs.jquery.com/Downloading_jQuery.

Như hình 1 ở trên phiên bản mới nhất của jQuery là 1.3.2, sau khi download về chúng ta được file “jquery-

1.3.2.js”, sau đó để viết ứng dụng bạn chỉ cần nhúng file “jquery-1.3.2.js” vào phần javascript của trang.

Trong Visual Studio 2008 SP1 đã hỗ trợ đầy đủ các chức năng của JavaScript Intellisense. Để Visual Studio

hỗ trợ Intellisense cho jQuery, chúng ta cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, và download

từ:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.

Sau đó chúng ta 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 chính của “jquery-1.3.2-vsdoc.js” là giúp đỡ chúng ta trong việc viết các dòng chú thích và hỗ trợ

cho việc phát sinh mã thông minh trong khi soạn thảo jQuery.

Hình 1: Downdload jQuery

http://docs.jquery.com/Downloading_jQuery

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736



3. Sử dụng jQuery trong ASP.NET

Chúng ta tạo một project (Vi_du_9) sau đó thêm 2 file “jquery-1.3.2.js” và “jquery-1.3.2-vsdoc.js” vào

trong project (hình 2).

Trước khi viết các câu lệnh jQuery là bạn chỉ cần khai báo sử dụng thư viện jQuery như sau:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Vi_du_9</title>

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

</div>

</form>

</body>

</html>

4. jQuery hoạt động như thế nào?

4.1. Chạy mã khi Document Ready (trang đã sẵn sàng)

Có thể thấy rằng hầu hết khi lập trình với Javascript, kết thúc mã thực thi bằng cách thêm các dòng mã vào

script, tương tự như sau:

window.onload = function() { … }

Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Tuy nhiên, mã Javascript không chạy cho đến

khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng

window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống hết, sau đó mới chạy mã kia.

Để giải quyết, jQuery có câu lệnh đơn giản, được biết như:

$(document).ready(function() {

//Mã của chúng ta

});

Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý chúng ta muốn.

Hình 2


4.2. Function $()

Khi chúng ta làm việc với CSS, Xpath hoặc custom, jQuery sử dụng function $() (dấu $ và cặp dấu

ngoặc). Dưới dây là một số thành phần trong $():

$("p"): p là tên của một thẻ (tag).

$("#id"): id là tên của một id.

$(".class"): class là tên của một lớp.

5. Một số API trong jQuery

5.1. Selectors

5.1.1. Basic

id #

Trả về một phần tử của mảng: Array <Element>

Nó tương ứng với một phần tử duy nhất được gán bởi thuộc tính id.

Nếu id chứa các ký tự như dấu chấm (.) hoặc 2 dấu [] thì chúng phải thêm 2 dấu ngạch chéo (\\)

vào trước các ký tự đó.

Nếu là $("#some.id") thì phải viết thành $("#some\\.id")

Nếu là $("#some[id]") thì phải viết thành $("#some\\[id]\\")

element

Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử với tên được gán.

.class


Tương ứng với tất cả các phần tử với tên lớp.

*


Tương ứng với tất cả các phần tử.

selector1, selector2, selectorN


Phù hợp với sự kết hợp của tất cả các kết quả xác định selectors, số lượng selectors là bất kỳ, trật tự

của các phần tử DOM trong đối tượng jQuery không nhất thiết phải đúng thứ tự.

Ví dụ: Vi_du_9_1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vi_du_9_1.aspx.cs"

Inherits="Vi_du_9_1" %>




<head id="Head1" runat="server">

<title>Vi_du_9_1</title>



<script type="text/javascript" language="javascript">


$("#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");

http://docs.jquery.com/Types#Array

http://docs.jquery.com/Types#Element






$("div,span").css("background-color", "#EEEEEE");

});

</script>

<style type="text/css" >

div {

float:left;padding: 5px;margin: 5px;

}

.Class1{

}

</style>

</head>

<body >

<div id="div1" align="center" >Visual Studio 2008</div>

<div id="div2" align="center">ASP.NET 3.5</div>

<div id="div3.1.[0]" align="center"> <a

href="http://docs.jquery.com/Downloading_jQuery"> Download jQuery </a></div>

<br />

<span class="Class1">Chào mừng bạn đến với jQuery</span>

</body>

</html>

5.1.2. HIERACHY

ancestor descendant Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử với danh nghĩa descendant của các phần tử xác định bởi danh nghĩa

“ancestor”.

Ví dụ: $("form input").css("border", "2px dotted blue");

parent > child Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử con dưới danh nghĩa “child” của phần tử được xác định với danh nghĩa

“parent”.

Ví dụ: $("#main > *").css("border", "3px double red");

prev + next Kiểu trả về: Array<Element(s)>

Phù hợp với tất cả các yếu tố sau được xác định bởi "kế tiếp" bên cạnh đó là yếu tố xác định bởi

"prev".

Ví dụ: $("label + input").css("color", "blue").val("Labeled!");

prev ~ siblings Kiểu trả về: Array<Element(s)>

Phù hợp với tất cả các yếu tố sau "prev" và với các yếu tố lọc "siblings" (liên quan) của selector.

Ví dụ: $("#prev ~ div").css("border", "3px groove blue");













$("form input").css("border", "1px solid blue");

$("#submit > *").css("border", "1px solid red");

$("label + input").css("background-color", "#EEEEEE");

});

</script>


body { font-size:14px; }

form { border:2px green solid; padding:2px; margin:0; background:#efe; }

div { color:red; }

fieldset { margin:1px; padding:3px; }

http://docs.jquery.com/Selectors/descendant#ancestordescendant



http://docs.jquery.com/Selectors/child#parentchild



http://docs.jquery.com/Selectors/next#prevnext



http://docs.jquery.com/Selectors/siblings#prevsiblings




</style>

</head>

<body>

<form id="form1" runat ="server" >

<div id="main">Nhập thông tin cá nhân </div>

<br />

Họ và tên:<input type="text" size="50" />

<fieldset>

<legend>Nơi công tác</legend>

<label>Tên công ty:</label>

<input type="text" size="50" /><br />

<label>Địa chỉ:</label>

<input type="text" size="100" /><br />

</fieldset>

<br />

Hộ khẩu thường trú: <input type="text" size="100" /><br /><br />

<div id="submit">

<button>Cập nhật</button>

<button>Hủy bỏ</button>

</div>

</form>

</body>

</html>

5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản)

:first Kiểu trả về: Array<Element(s)>

Tương ứng với phần tử đầu tiên được chọn. Ví dụ: $("tr:first").css("font-style", "italic");

:last Kiểu trả về: Array<Element(s)>

Tương ứng với phần tử cuối cùng được chọn. Ví dụ: $("tr:last").css("background-color", "yellow");

:not(selector) Kiểu trả về: Array<Element(s)>

Bỏ ra tất cả các phần tử tương ứng cho selector. Ví dụ: $("input:not(:checked)+span").css("background-color", "yellow");

:even Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử chẵn, chỉ số 0, 2, 4, …

Ví dụ: $("tr:even").css("background-color", "#bbbbff");

:odd Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử lẻ, chỉ số 1, 3, 5, …

Ví dụ: $("tr:odd").css("background-color", "#bbbbff");

:eq(index) Kiểu trả về: Array<Element(s)>

Tương ứng với một phần tử riêng lẻ bởi chỉ số của nó.

Ví dụ: $("td:eq(2)").css("color", "red");

:gt(index) Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần ở trên chỉ số được gán.

Ví dụ: $("td:gt(2)").css("color", "red");

:lt(index) Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần ở dưới chỉ số được gán.

Ví dụ: $("td:lt(2)").css("color", "blue");

:header Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử tiêu đề, giống như h1, h2, h3…

http://docs.jquery.com/Selectors/first



http://docs.jquery.com/Selectors/last



http://docs.jquery.com/Selectors/not#selector



http://docs.jquery.com/Selectors/even














Ví dụ: $(":header").css({ background: '#CCC', color: 'blue' });













$("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' });

});

</script>

</head>

<body>

<table border="1">

<tr><td>Dòng thứ 1</td></tr>









</table>

<h1>Tiêu đề 1</h1>

<p>Nội dung 1</p>

<h2>Tiêu đề 2</h2>

<p>Nội dung 2</p>

</body>

</html>

5.1.4. Content Filters (Chọn lọc nội dung)

:contains(text) Kiểu trả về: Array<Element(s)>

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<Element(s)>

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<Element(s)>

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<Element(s)>

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).










Ví dụ: Đặt cỡ chữ là 30px cho các thẻ “td” cha có phần tử con.

$("td:parent)").css("font-size", "30px");













$("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");

});

</script>


td {width:200px;background:green; }

</style>

</head>

<body>

<div><h2>Danh sách lớp 12A3</h2></div>

<div>Đỗ Thị Thu Hằng</div>

<div>Lê Văn Bình</div>

<div>Trần Thị Hương</div>

<div>Nguyễn Hải Nam</div>

<div>Hoàng Thu Bình</div>

<br />

<table border="1">

<tr><td>TD #0</td><td></td></tr>

<tr><td>TD #2</td><td></td></tr>

</table>

<div><p>Chào bạn đến với jQuery</p></div>

<div>Chào bạn đến với jQuery</div>

</body>

</html>

5.1.5. Visibility Filters

:hidden Kiểu trả về: Array<Element(s)>

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<Element(s)>

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");});


















$("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");

});

});

</script>

<style type ="text/css" >

div { width:70px; height:40px; background:#ee77ff; margin:5px;

float:left; }

span { display:block; clear:left; color:red; }

.starthidden { display:none; }

</style>

</head>

<body>

<span></span>

<div></div>

<div style="display:none;">Ẩn</div>

<div></div>

<div class="starthidden">Ẩn</div>

<div></div>

<input type="hidden" />



<span></span>

</body>

</html>

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");














$("p").addClass("under");

$("p:last").removeClass("highlight");

$("p").click(function() {

$("p").removeClass("highlight");

$(this).toggleClass("highlight");

});

});

</script>


p { margin: 4px; font-size:16px; font-weight:bolder; }

.blue { color:blue; }

.under { text-decoration:underline; }

.highlight { background:yellow; }

</style>

</head>

<body>

<p class="blue">Visual Studio 2000</p>

<p class="blue">ASP.NET 3.5</p>

<p class="blue highlight">Chào mừng bạn đến với jQuery</p>

</body>

</html>

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("<b>Chào các bạn!<i> Chúc buổi học hôm nay thú vị.</i></b>");

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.


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.













$("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");

}


$("#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");

}

);

});

</script>


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; }

</style>

</head>

<body>

<p>Click hoặc click đúp vào đây.</p>

<span></span>

<p>Hãy click vào các hình chữ nhật màu xanh</p>

<div class="div1" ></div>

<div class="div1"></div>

<br /><br /><br /><br /><br />

<button>Button thứ 1</button>

<button>Button thứ 2</button>

<div><span>0</span> lần button thứ 1 được click.</div>

<div><span>0</span> lần button thứ 2 được clicks.</div>

<button id="theone">Không làm gì cả....</button>

<button id="bind">Bind Click</button>

<button id="unbind">Unbind Click</button>

<div style="display:none;">Click!</div>

<br />

<p>Hãy di chuyển chuột lên Máy bay, Ôtô, Xe máy, Xe đạp</p>

<ul>

<li>Máy bay</li>

<li>Ôtô</li>

<li>Xe máy</li>

<li>Xe đạp</li>

</ul>

</body>

</html>

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.


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:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.

Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ:


7. Tài liệu tham khảo

1. jQuery, URL: http://docs.jquery.com

2. ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-asp-

net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736


http://docs.jquery.com/

http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-asp-net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx

http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-asp-net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx

asp.net 3.5_9

Documents