Tuan 10 - Chuyen de JQuery

www.hoasen.edu.
vn
CHUYÊN ĐỀ: JQUERY

GV điều phối: ThS. PHẠM THỊ THANH TÂM
Email: tam.phamthithanh@hoasen.edu.vn
uu
www.hoasen.edu.vn
NỘI DUNG TRÌNH BÀY
• GIỚI THIỆU JQUERY

1
• CÁC BƯỚC TÌM KIẾM JQUERY

2
• CÁC BƯỚC SỬ DỤNG JQUERY

3
10/29/2023
uu 2
Chuyên đề: JQuery
www.hoasen.edu.vn
1. GIỚI THIỆU JQUERY

 JQuery là một thư viện mã nguồn mở dựa trên ngôn ngữ
Javascript, được tạo bởi John Resig vào năm 2006.
 JQuery giúp làm đơn giản hóa việc truyền tải HTML, xử
lý sự kiện và tạo hiệu ứng động,…
 Đúng với phương châm đề ra “write less, do more”,
JQuery được thiết kế nhằm đơn giản hóa các nhiệm vụ
khác nhau bằng cách viết ít mã hơn.
10/29/2023
uu 3
www.hoasen.edu.vn
1. GIỚI THIỆU JQUERY (tt)

 Các lợi ích khi sử dụng JQuery
 Hướng tới các thành phần trong tài liệu HTML
 Thay đổi giao diện của một trang web
 Tương tác với người dùng
 Tạo hiệu ứng động cho những thay đổi của tài liệu
…
10/29/2023
uu 4
www.hoasen.edu.vn
2. CÁC BƯỚC TÌM KIẾM JQUERY
 Bước 1: Tìm kiếm Jquery từ Internet

 Ví dụ:
10/29/2023
uu 5
www.hoasen.edu.vn

(tt)
 Bước 2: Xem thử kết quả tìm kiếm
10/29/2023
Click vào để truy cập Click vào để xem
vào website chứa JQuery kết quả
của Jquery chạy
uu 6
Chuyên đề: JQuery trên trình duyệt
www.hoasen.edu.vn

(tt)
 Bước 3: Download source của JQuery
10/29/2023
Click vào để
download source
uu 7
www.hoasen.edu.vn

(tt)
 Sau khi download source, một JQuery thường bao gồm
các file hoặc/và các thư mục sau:
Chứa các file .css
(để định dạng cho các đối tượng có trong Jquery)
Chứa các file hình ảnh có trong Jquery
File .html
chứa source của trang web
10/29/2023
File .js
dùng để tạo hành động cho các đối tượng có trong Jquery
uu 8
www.hoasen.edu.vn
3. CÁC BƯỚC SỬ DỤNG JQUERY
 Bước 1: Chọn và copy đoạn code HTML cần thiết từ trang

web mẫu của Jquery và paste vào trang web hiện tại của mình
Chọn và copy đoạn code HTML

từ trang web mẫu của Jquery
10/29/2023
uu 9
www.hoasen.edu.vn

(tt)
Paste vào đây
10/29/2023
uu 10
www.hoasen.edu.vn

(tt)
10/29/2023
Kết quả sau khi paste code HTML
uu 11
www.hoasen.edu.vn

(tt)
 Bước 2: Chọn và copy đoạn code CSS cần thiết từ trang web
mẫu của Jquery và paste vào giữa <head>…</head>
Chọn và copy đoạn code CSS

10/29/2023
uu 12
www.hoasen.edu.vn
3. CÁC BƯỚC TÌM KIẾM & SỬ DỤNG

JQUERY (tt)
Thay đổi đường dẫn của

file .css của Jquery (nếu cần)
10/29/2023
Kết quả sau khi paste code CSS
uu 13
www.hoasen.edu.vn

(tt)
 Bước 3: Chọn và copy đoạn code Javasript cần thiết từ trang
web mẫu của Jquery và paste vào giữa <head>…</head>
hoặc giữa <body>…</body>
Chọn và copy đoạn code javascript

10/29/2023
uu 14
www.hoasen.edu.vn

(tt)
Sau khi paste, thay đổi đường dẫn

của file .js của Jquery (nếu cần)
10/29/2023
uu 15
www.hoasen.edu.vn
3. CÁC BƯỚC SỬ DỤNG JQUERY (tt)
Kết quả sau khi hoàn thành Bước 3
10/29/2023
uu 16
www.hoasen.edu.vn

(tt)
 Bước 4: Thay đổi nội dung (nội dung text, hình ảnh,…)
10/29/2023
(thay đổi nội dung text và hình ảnh)
uu 17
www.hoasen.edu.vn
3. CÁC BƯỚC TÌM KIẾM & SỬ DỤNG

JQUERY (tt)
 Bước 5: Thay đổi style (nếu cần)
10/29/2023
(thay đổi style cho menu
uu 18
www.hoasen.edu.vn
4. THAM KHẢO
 Tham khảo một số website sử dụng Jquery:
 http://
users16.jabry.com/phamthithanhtam/doanweb/nguyent
hanhdanh
/
 http://
users16.jabry.com/phamthithanhtam/doanweb/nguyen
an/
 http://
10/29/2023
users16.jabry.com/phamthithanhtam/doanweb/phamle
minhkiet/
uu 19
www.hoasen.edu.vn
HỎI - ĐÁP
10/29/2023
Chúc các bạn snh viên đạt kết quả tốt
uu 20

Tuan 10 - Chuyen de JQuery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tuan 10 - Chuyen de JQuery

Uploaded by

Copyright:

Available Formats

www.hoasen.edu.

CHUYÊN ĐỀ: JQUERY

NỘI DUNG TRÌNH BÀY

• GIỚI THIỆU JQUERY

• CÁC BƯỚC TÌM KIẾM JQUERY

• CÁC BƯỚC SỬ DỤNG JQUERY

1. GIỚI THIỆU JQUERY

1. GIỚI THIỆU JQUERY (tt)

2. CÁC BƯỚC TÌM KIẾM JQUERY

 Bước 1: Tìm kiếm Jquery từ Internet

2. CÁC BƯỚC TÌM KIẾM JQUERY

2. CÁC BƯỚC TÌM KIẾM JQUERY

2. CÁC BƯỚC TÌM KIẾM JQUERY

Chứa các file hình ảnh có trong Jquery

3. CÁC BƯỚC SỬ DỤNG JQUERY

 Bước 1: Chọn và copy đoạn code HTML cần thiết từ trang

Chọn và copy đoạn code HTML

3. CÁC BƯỚC SỬ DỤNG JQUERY

Paste vào đây

3. CÁC BƯỚC SỬ DỤNG JQUERY

3. CÁC BƯỚC SỬ DỤNG JQUERY

Chọn và copy đoạn code CSS

3. CÁC BƯỚC TÌM KIẾM & SỬ DỤNG

Thay đổi đường dẫn của

3. CÁC BƯỚC SỬ DỤNG JQUERY

Chọn và copy đoạn code javascript

3. CÁC BƯỚC SỬ DỤNG JQUERY

Sau khi paste, thay đổi đường dẫn

3. CÁC BƯỚC SỬ DỤNG JQUERY (tt)

Kết quả sau khi hoàn thành Bước 3

3. CÁC BƯỚC SỬ DỤNG JQUERY

Kết quả sau khi hoàn thành Bước 4

3. CÁC BƯỚC TÌM KIẾM & SỬ DỤNG

You might also like