Tải bản đầy đủ

Bài giảng Bài 7: Thư viện jQuery và thư viện jQuery UI - ĐH FPT

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






(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

thư việ n





Hay nhan vao toi, toi se bien mat!!!




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 )


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

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







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


Đầ u tiên


Thứ hai


Thứ ba




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 http://api.jquery.com/category/events/ để
hiể u thêm về xử lý sự kiệ n trên jQuery

Thư việ n jQuery và jQuery UI

25


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×