Bài giảng Bài 7: Thư viện jQuery và thư viện jQuery UI - ĐH FPT
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.91 MB, 53 trang )
Bài 7:
Thư việ n jQuery và thư việ n jQuery UI
Hệ thố ng bài cũ
Viế t mã tạ o các hiệ u ứ ng
Hiệ u ứ ng Image Rollover
Hiệ u ứ ng SlideShow
Thao tác vớ i các điề u khiể n
SelectBox
CheckBox
RadioButton
Form
Kiể m tra tính hợ p lệ cho Form
CSS trong JavaScript
Thư việ n jQuery và jQuery UI
2
Mụ c tiêu bài họ c
Thự
Thư
Sử
Sử
việ n và cách tạ o thư việ n
việ n JavaScript
dụ ng thư việ n jQuery
dụ ng jQuery để tạ o hiệ u ứ ng
Hiệ u ứ ng ẩ n hiệ n
Hiệ u ứ ng mờ
Hiệ u ứ ng chuyể n độ ng
Sử dụ ng thư việ n jQuery UI
Tạ o tính năng kéo thả (drag and drop)
Tạ o menu chồ ng nhau
Thư việ n jQuery và jQuery UI
3
THƯ
VI Ệ N
JAVASCRI PT
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM
4
Thư
việ n
Vấ n đề nả y sinh
Lậ p trình viên nhậ n thấ y trong quá trình lậ p trình phả i thự c
hiệ n lặ p lạ i nhiề u chứ c năng thông dụ ng
Giả i pháp
Tạ o mộ t thư việ n các đoạ n mã thự c hiệ n các chứ c năng thông
dụ ng để chia sẻ chung
Lậ p trình viên chia làm 2 hư ớ ng:
Nhữ ng chuyên gia nghiên cứ u sâu về hệ thố ng để viế t các đoạ n mã
tố i ư u cho thư việ n
Các lậ p trình viên viế t các ứ ng dụ ng sử dụ ng đoạ n mã từ thư việ n
Ư u điể m giả i pháp
Lậ p trình trở nên dễ dàng hơ n
Tiế t kiệ m thờ i gian
Thư việ n ngày càng đư ợ c tố i ư u
Thư việ n jQuery và jQuery UI
5
Xây dự ng thư
việ n JavaScript
Có thể tự xây dự ng thư việ n cho cho riêng mình hoặ c dùng
để chia sẻ
Thự c hiệ n viế t mã cho thư việ n
Viế t mã thư việ n trong mộ t file .js
Khi cầ n sử dụ ng thì tham chiế u đế n file này
Thư việ n jQuery và jQuery UI
6
Demo xây dự ng thư
việ n
Viế t mã cho thư việ n trong file myLibrary.js
var MyAlert = {};
MyAlert.sendAlert = function(mesg) {
alert(mesg);
};
Sử dụ ng đố i tư ợ ng MyLibrary trong thư việ n
<html><head>
<script type="text/javascript" src="myLibrary.js" ></script>
</head>
<body>
<script type="text/javascript">
MyAlert.sendAlert("Xin chào, đây là thư việ n củ a tôi");
</script>
</body></html>
(Xem ví dụ My Library)
Thư việ n jQuery và jQuery UI
7
Các thư
việ n củ a JavaScript
Lậ p trình mấ t nhiề u thờ i gian và công sứ c để làm cho trang
web chạ y giố ng nhau trên nhiề u trình duyệ t
Cầ n có nhữ ng ngư ờ i nghiên cứ u sâu về các trình duyệ t, mã
javascript để viế t nên thư việ n các chứ c năng thông dụ ng chạ y
tố t trên nhiề u trình duyệ t
Có rấ t nhiề u thư việ n cho JavaScript, mỗ i thư việ n có mộ t thế
mạ nh riêng
Jquery (Tham khả o: http:/ / jquery.com)
Yahoo! User Interface (YUI, Tham khả o:
http:/ / developer.yahoo.com/ yui)
MooTools (Tham khả o: http:/ / mootools.net)
Và các thư việ n khác (Tham khả o:
http:/ / en.wikipedia.org/ wiki/ comparison_of_JavaScript_framewo
rks)
Thư việ n jQuery và jQuery UI
8
THƯ
VI Ệ N
JQuery
Lậ p trình hư ớ ng đố i tư ợ ng và mô hình DOM
9
jQuery
jQuery là mộ t thư việ n JavaScript đư ợ c ư a chuộ ng và dễ sử
dụ ng
Thư việ n jQuery bao gồ m 1 file JavaScript (Click vào đây để
xem file)
Thư việ n jQuery và jQuery UI
10
Làm quen jQuery qua ví dụ đầ u tiên
Nhấ n vào oạ n
v n bả n thì oạ n
v n bả n biế n mấ t
Xem Vi du jQuery dau tien
Thư việ n jQuery và jQuery UI
11
Làm quen jQuery qua ví dụ đầ u tiên
Tham chiế u ế n
<html>
thư việ n
<head>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
Mã jQuery
});
});
</script>
</head>
<body>
Hay nhan vao toi, toi se bien mat!!!
</body>
</html>
Thư việ n jQuery và jQuery UI
12
Thêm thư
việ n vào trang w eb củ a bạ n
B1. Truy cậ p đị a chỉ http:/ / www.jquery.com
Thư việ n jQuery và jQuery UI
13
Thêm thư
việ n vào trang w eb củ a bạ n
B2. Lự a chọ n phiên bả n để
down. Có hai phiên bả n
Production: Dành cho
ngư ờ i chỉ muố n sử dụ ng thư
việ n để viế t các ứ ng dụ ng
( Bạ n nên dow n phiên bả n
này)
Development: Dành cho
ngư ờ i muố n phát triể n các
plug-in cho jQuery hoặ c
muố n nghiên cứ u sâu hơ n về
jQuery
Thư việ n jQuery và jQuery UI
14
Thêm thư
việ n vào trang w eb
B3. Down thư việ n
Trên Browser, vào File
Save Page As…
Để down thư việ n. Lư u file thư việ n vào cùng
thư mụ c vớ i trang web
B4. Tham chiế u đế n file thư việ n ( jquery-1.6.4.min.js )
<script type="text/javascript" src="jquery-1.6.4.min.js" ></script>
Thư việ n jQuery và jQuery UI
15
jQuery
jQuery thự c hiệ n tìm (query) đế n các element củ a trang web
và thự c hiệ n các “hành độ ng” lên chúng
Cú pháp:
$(selector).action()
$: Chỉ ra sử dụ ng thư việ n jQuery
selector: Chỉ ra các phầ n tử đư ợ c chọ n
action: Chỉ ra các hành độ ng đư ợ c thự c hiệ n lên các phầ n tử
đư ợ c chọ n đó
$("p").hide()
$("div").show()
Thư việ n jQuery và jQuery UI
16
Lự a chọ n các element
Lự
Lự
Lự
Lự
Lự
Lự
a chọ
a chọ
a chọ
a chọ
a chọ
a chọ
n
n
n
n
n
n
element
element
element
element
element
element
Thư việ n jQuery và jQuery UI
theo
theo
theo
theo
theo
theo
ID
lớ p
loạ i
hệ thố ng phân cấ p
vị trí
attribute
17
Lự a chọ n element theo I D
Cú pháp
$("#id_củ a_element")
Mã HTML
< a href="#" id="linkID">Link</a>
Truy cậ p đế n element có id là linkI D
getElementById("linkID")
$("#linkID")
Truy cậ p đế n element < a> có id là linkI D
$("a#linkID")
Thư việ n jQuery và jQuery UI
18
Lự a chọ n element theo lớ p
Cú pháp
$(".tên_lớ p")
Mã HTML
< a class="link">Link</a>
Chọ n tấ t cả các element có tên lớ p là link
$(".link")
Chọ n tấ t cả các element < a> có tên lớ p là link
$(“a.link")
Thư việ n jQuery và jQuery UI
19
Lự a chọ n element theo loạ i
Cú pháp
$("tên_thẻ _HTML")
Chọ n tấ t cả các element div trên trang
$("div")
Thư việ n jQuery và jQuery UI
20
Lự a chọ n element theo hệ phân cấ p
Mã HTML
<body>
<a href=“link1.html"></a>
<div>
<a href="link2.html"></a>
</div>
<div id="divContent>
<a href="link3.html"> Google </a>
<a href="link4.html"> w3schools </a>
</div>
Chọ n tấ t cả các element < a> nằ m trong thẻ div
$("div a")
Chọ n tấ t cả các element < a> nằ m trong thẻ div divContent
$(“#divContent a")
Thư việ n jQuery và jQuery UI
21
Lự a chọ n element theo vị trí
Mã HTML
<body>
Đầ u tiên
Thứ hai
Thứ ba
<body>
Chọ n element < p> đầ u tiên trong tài liệ u
$("p:first")
Chọ n element < p> cuố i cùng trong tài liệ u
$("p:last")
Chọ n element < p> thứ
hai trong tài liệ u
$("p")[1]
Chọ n các element < p> lẻ trong tài liệ u
Phầ n tử đầ u tiên là 0
$("p:odd")
Thư việ n jQuery và jQuery UI
22
Lự a chọ n element theo attribute
Chọ n tấ t cả các element có attribute href
$("[href]")
Chọ n tấ t cả các element < a> có attribute href
$("a[href]")
Chọ n tấ t cả các element vớ i attribute href có giá trị là “# ”
$("a[href = '#']")
Mộ t số ký tự đặ c biệ t
Cú pháp
Giả i thích
attributeName*=value
chọ n các element mà giá trị củ a attribute chứ a value
attributeName~=value
chọ n các element mà giá trị attribute bằ ng value
attributeName!=value
chọ n các element mà giá trị attribute không bằ ng value
hoặ c không có attribute ó
attributeName$=value
chọ n các element mà giá trị attribute kế t thúc bằ ng value
attributeName^=value
chọ n các element mà giá trị attriubte bắ t ầ u bằ ng value
Thư việ n jQuery và jQuery UI
23
Thự c hiệ n hành độ ng
Sau khi tìm đư ợ c các element, điề u quan trọ ng là thự c hiệ n
các hành độ ng lên các element đó
jQuery cung cấ p các phư ơ ng thứ c để thự c hiệ n các hành
độ ng
Các phư ơ ng thứ c xử
Phư ơ ng thứ c làm việ
Các phư ơ ng thứ c để
Các phư ơ ng thứ c để
Thư việ n jQuery và jQuery UI
lý sự kiệ n
c vớ i css
thự c hiệ n duyệ t qua các element
tạ o các hiệ u ứ ng
24
Xử
lý sự
kiệ n cho các element
jQuery hỗ trợ hồ i đáp lạ i các sự kiệ n như nhấ n chuộ t, submit
form, gõ phím…
Sử dụ ng xử lý sự kiệ n vớ i jQuery tố i ư u hơ n so vớ i cách thông
thư ờ ng bở i nó ứ ng xử giố ng nhau đố i vớ i các trình duyệ t
Có hai cách khác nhau để xử lý sự kiệ n
Sử dụ ng hàm bind() để gán xử lý sự kiệ n cho element
Gọ i trự c tiế p xử lý sự kiệ n từ element
Truy cậ p trang web để
hiể u thêm về xử lý sự kiệ n trên jQuery
Thư việ n jQuery và jQuery UI
25
