Conceive Design Implement Operate

http://www.poly.edu.vn
 MỤC TIÊU

Giải thích được jQuery là gì?

Cài đặt thư viện jQuery.
Giải thích và sử dụng được các Selector trong jQuery.
Sử dụng các api sự kiện trong jQuery
Sử dụng được các api attributes trong jQuery
 NỘI DUNG

Khái niệm jQuery

Hiểu được các điểm mạnh của jQuery
Cài đặt và sử dụng jQuery
jQuery selector
jQuery Events API
jQuery Attributes API
 NHẮC LẠI BÀI CŨ

Giải thích được khái niệm JSON Object

Giải thích được khái niệm Asynchronous JavaScript and XML
(Ajax)
Thực hiện được việc gửi request tới server bằng
javascript ajax (sử dung fetch)
Sử dụng được thư viện bên thứ 3 (axios)
 KHÁI NIỆM JQUERY

❑jQuery là một thư viện được xây dựng dựa trên các tính năng của
JavaScript.
❑jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo
hiệu ứng động và tương tác Ajax. Với jQuery, khái niệm Rapid
Web Development đã không còn quá xa lạ.
❑jQuery là một bộ công cụ tiện ích JavaScript
làm đơn giản hóa các tác vụ đa dạng
với việc viết ít code hơn
❑jQuery được phát hành vào tháng 1 năm 2006
tại BarCamp NYC bởi John Resig
 KHÁI NIỆM JQUERY – CÁC ƯU ĐIỂM

❑Dễ sử dụng: Đây là lợi thế chính khi sử dụng jquery, nó dễ dàng
hơn so với nhiều thư viện javascript chuẩn khác bởi cú pháp đơn
giản
❑Là một thư viện lớn của javascript: jQuery có thể thực thi được
nhiều chức năng hơn so với các thư viện jascript khác phải viết ít
dòng lệnh để tạo ra các chức năng tương tự.
❑Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có
sẵn)
❑Có nhiều tài liệu và hướng dẫn chi tiết
❑Hỗ trợ ajax: JQuery cho phép bạn phát triển các template Ajax
một cách dễ dàng.
❑Là cơ sở để cài đặt nhiều thư viện khác: jQuery được rất nhiều
 KHÁI NIỆM JQUERY – CÁC ƯU ĐIỂM

❑Thao tác DOM mạnh mẽ − jQuery giúp dễ dàng lựa chọn các
phần tử DOM để traverse (duyệt) một cách dễ dàng như sử dụng
CSS và chỉnh sửa nội dung của chúng.
❑Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn
bằng việc xử lý các sự kiện đa dạng với các Event Handler.
❑Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng
19KB (gzipped).
❑Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery
được hỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt
trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
 KHÁI NIỆM JQUERY – CÁC NHƯỢC ĐIỂM

❑Làm chậm trình duyệt phía client: nếu lạm dụng quá nhiều
jQuery sẽ làm cho client trở nên chậm chạp, đặc biệt những client
yếu
❑Chức năng có thể không có: jQuery đã có rất nhiều chức năng
đã được phát triển tuy nhiên cũng có nhiều chức năng vẫn chưa
được phát triển, do đó cần tự phát triển bằng javascript thuần
hoặc cài đặt thêm thư viện của bên thứ 3.
 KHÁI NIỆM JQUERY – CÁC MODULE PHỔ BIẾN

❑Ajax – xử lý Ajax
❑Atributes – Xử lý các thuộc tính của đối tượng HTML
❑Effect – xử lý hiệu ứng
❑Event – xử lý sự kiện
❑Form – xử lý sự kiện liên quan tới form
❑DOM – xử lý Data Object Model
❑Selector – xử lý xác định các thẻ HTML để xử lý
❑Traversing – xử lý quan hệ của các thẻ
 KHÁI NIỆM JQUERY – CÀI ĐẶT

❑Trang chủ jQuery: https://jquery.com/

❑Đường dẫn để tải jQuery: https://jquery.com/download/ - lưu ý
khi tải jQuery có nhiều lựa chọn bạn có thể chọn tải file
❖jquery.js – file mã nguồn code, có thể dễ dàng đọc hiểu
❖jquery.min.js – file mã nguồn đã minify nhằm giảm tải dung lượng của file
❑Có nhiều cách để sử dụng jQuery cho website:
❖Nhúng mã <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></s
cript> thẳng vào website
❖Tải file jquery.min.js/jquery.js sau đó nhúng vào website
 KHÁI NIỆM JQUERY – CÀI ĐẶT
Nhúng file

Sử dụng CDN

output
 JQUERY SELECTORS – CÚ PHÁP

❑$(selector).api()
❑$: ký tự bắt đầu sử dụng jQuery
❑selector: sử dụng hệ thống selector của css để xác định thẻ/các
thẻ sẽ được tương tác
❑api(): các phương thức xử lý được viết sẵn trong jQuery để thực
hiện logic
 JQUERY SELECTORS – KHÁI NIỆM

❑jQuery Selectors được sử dụng để chọn và thao tác các phần tử

HTML. Đây là phần rất quan trọng trong thư viện jQuery.
Với jQuery Selectors, chúng ta có thể tìm hoặc chọn các phần tử
HTML dựa trên Tên thẻ, ID, classes, attributes, types và nhiều thứ
khác từ DOM. Mỗi jQuery Selector bắt đầu bằng ký tự $ (). Kí tự
này được gọi là factory function.
JQUERY SELECTORS – CÁC SELECTOR THƯỜNG GẶP
JQUERY SELECTORS
JQUERY SELECTORS
JQUERY SELECTORS
JQUERY SELECTORS
JQUERY SELECTORS
 JQUERY SELECTORS

❑Các selector trong jQuery giúp lập trình viên xác định chính xác
các thẻ cần xử lý/tương tác một cách nhanh chóng, việc này giúp
ích rất nhiều trong quá trình thực hiện công việc xử lý phía giao
diện.
❑Để xác định thẻ có thể có nhiều phương án sử dụng selector,
chúng ta cần chú ý đến cấu trúc thẻ/các thuộc tính thường gặp
như id, class, các attributes là đặc trưng của thẻ sẽ giúp xác định
nhanh chóng hơn.
❑Trong trường hợp khó xác định thành phần do cấu trúc html phức
tạp, lập trình viên hoàn toàn có thể tự thêm các thuộc tính do
chính mình định nghĩa ra cho thẻ để giúp việc xác định dễ dàng
hơn.
 CÁC API SỰ KIỆN TRONG JQUERY

❑jQuery cung cấp các api (Application Programming Interface) để

xử lý sự kiện rất phong phú, bao gồm tất cả các sự kiện cơ bản
của html cũng như có bổ sung thêm các api mới để giúp cho việc
lập trình sự kiện trong code dễ dàng hơn.
❑Cú pháp thực hiện api sự kiện của jQuery:
❖$(selector).event(callback(){});
➢ Event: tên sự kiện, bỏ từ on – ví dụ: $(‘p’).click(), $(‘#avatar’).mouseover(),…
➢ Callback(): hàm callback để quy định logic xử lý khi sự kiện xảy ra
❖Sử dụng các api sự kiện cũng giống như gọi phương thức
addEventListener() trong javascript thuần
CÁC API SỰ KIỆN TRONG JQUERY – DANH SÁCH API
CÁC API SỰ KIỆN TRONG JQUERY – DANH SÁCH API
 CÁC API SỰ KIỆN TRONG JQUERY – DANH SÁCH API

❑Ví dụ: Tại màn hình đăng nhập, kiểm tra username/password có
dữ lieu khi click vào nút Login hay không?
 CÁC API SỰ KIỆN TRONG JQUERY – DANH SÁCH API

❑Ví dụ: Kiểm tra sự kiện click chuột vào thẻ div.test, hiển thị kết
quả là click hay dblclick?
 JQUERY ATTRIBUTES API

❑Javascript là ngôn ngữ mạnh khi tương tác với DOM, nó có thể xác
định và tương tác sâu cả đến các thuộc tính/giá trị thuộc tính của
thẻ. Tuy nhiên để thực hiện được công việc này bằng javascript
thuần thì code sẽ khá dài và khó đọc. jQuery đã xây dựng các API
để giúp ta làm việc này ngắn gọn hơn.
JQUERY ATTRIBUTES API
 JQUERY ATTRIBUTES API

❑Ví dụ 1: Thực hiện viết nội dung cho thẻ input, thẻ h2 thay đổi
ngay lập tức nội dung theo.
 JQUERY ATTRIBUTES API

❑Ví dụ 2: cho 3 class .bgGreen, .bgYellow, .bgRed thực hiện áp dung

luân phiên 3 class này cho thẻ div.target để thay đổi màu của thẻ
div sau mỗi 2 giây.
 JQUERY ATTRIBUTES API

❑Lời giải:
 TỔNG KẾT

Giải thích được jQuery là gì?

Cài đặt thư viện jQuery.
Giải thích và sử dụng được các Selector trong jQuery.
Sử dụng các api sự kiện trong jQuery
Sử dụng được các api attributes trong jQuery