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ử
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ừ:

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

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
Microsoft Vietnam – DPE Team | Bài số 9: jQuery
3 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).


$(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
Microsoft Vietnam – DPE Team | Bài số 9: jQuery
4 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
Kiểu trả về: Array<Element(s)>

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