-
Bây giờ tôi sẽ giới thiệu
cho bạn những điều cơ bản
-
của việc sử dụng jQuery
trong trang web của bạn.
-
Bước đầu tiên là
thêm thư viện jQuery
-
bằng việc sử dụng
thẻ ''
-
Trước đây, chúng tôi đặt JavaScript
bên trong thẻ '',
-
nhưng lần này tôi sẽ
thêm thuộc tính 'src'.
-
Và tôi cần đặt nó thành một URL.
-
URL đó nên là gì?
-
Nếu tôi đang làm việc trên
máy tính của mình
-
và đã tải xuống jQuery
-
xuống cùng thư mục
với trang web của tôi,
-
Tôi chỉ cần viết 'jquery.js' ở đây.
-
Nhưng điều đó sẽ không có
tác dụng trên Khan Academy.
-
Ở đây, tôi cần một URL
tuyệt đối của jQuery
-
trên một máy chủ
trực tuyến ở đâu đó.
-
Và có một danh sách
những URL như thế trong jquery.com,
-
và tôi có một cái
ở đây, tôi sẽ dán vào.
-
Được rồi.
-
Bây giờ tôi muốn
chỉ ra một vài điều
-
về URL này.
-
Điều đầu tiên đó là
nó bắt đầu bằng 'https'.
-
Điều đó có nghĩa
đó là một URL an toàn.
-
Chúng tôi chỉ cho phép bạn
dùng các tài nguyên an toàn
-
trên các trang web
của Khan Academy
-
và đó là điều tốt khi
thực hành lập trình web.
-
Điều thứ hai là
URL này được đặt
-
trên một máy chủ
Google: googleapis.com.
-
Máy chủ này được gọi là CDN,
-
content delivery network
(mạng phân phối nội dung),
-
điều đó có nghĩa là
nó đã được tối ưu hóa
-
cho các tập tin tĩnh
như thư viện JavaScript
-
và phục vụ chúng
rất nhanh chóng.
-
Bây giờ máy chủ Google này
là máy chủ mà tôi tin tưởng
-
và nói chung, bạn nên
luôn tin tưởng vào máy chủ
-
mà bạn lấy tập lệnh
-
vì chúng có thể
làm rối loạn trang của bạn.
-
Điều thứ ba là
có một số phiên bản
-
trong URL này: 2.1.4.
-
Thư viện jQuery đang trong
quá trình phát triển
-
và họ thường phát hành
phiên bản mới.
-
Các số càng nằm về
phía bên trái
-
thì càng thể hiện sự thay đổi
phiên bản quan trọng hơn
-
so với các số nằm phía bên phải,
-
đại diện cho các phiên bản nhỏ.
-
Tôi đang sử dụng jQuery 2 ở đây,
-
hoạt động trong các trình duyệt hiện đại
-
nhưng không hoạt động trong IE8.
-
Trên trang web của riêng bạn,
-
bạn có thể quyết định phiên bản nào
để sử dụng dựa trên những gì bạn cần.
-
Được rồi. Vì vậy, chúng tôi đã bao gồm jQuery.
-
Bây giờ, hãy thực sự sử dụng nó
-
bên trong thẻ '<script>' khác.
-
Mọi thư viện JavaScript đều hiển thị các hàm
-
và họ đặt tên cho các chức năng của mình.
-
Chúng ta phải xem trong tài liệu
-
để tìm ra tên hàm đó là gì
-
và thực tế họ làm gì.
-
Vâng thư viện jQuery
bộc lộ một chức năng chính
-
và nó có một cái tên rất ngắn.
-
Đó chỉ là ký hiệu đô la.
-
Điều đó có nghĩa là điều đầu tiên chúng tôi viết
-
là đô la
-
sau đó là hai dấu ngoặc đơn,
bởi vì nó là một chức năng,
-
và tất nhiên, dấu chấm phẩy.
-
Bây giờ thật tuyệt khi điều này
tên hàm quá ngắn
-
bởi vì chúng tôi sẽ gọi điện
chức năng đó rất nhiều.
-
Có rất nhiều thứ chúng ta
có thể chuyển đến chức năng đó,
-
nhưng với ví dụ giới thiệu này,
-
Tôi sẽ chuyển một chuỗi 'h1'.
-
Bây giờ, khi tôi làm xong việc này,
-
điều này bảo jQuery tìm
-
tất cả các phần tử 'h1' trên trang
-
và trả lại chúng dưới dạng
Đối tượng bộ sưu tập jQuery.
-
Bây giờ tôi đã làm được điều đó,
-
Tôi có thể gọi các phương pháp khác
trên đối tượng jQuery
-
để thao túng tất cả
phần tử 'h1' mà nó tìm thấy.
-
Giống như nếu tôi muốn thay đổi
văn bản bên trong của tất cả chúng,
-
Tôi có thể gọi chức năng 'văn bản'
-
sau đó truyền cho nó một chuỗi.
-
Nó đang diễn ra.
-
Đúng!
-
Và chúng ta đã hoàn tất!
-
Đó là phần đầu tiên của chúng tôi về jQuery.
-
Vì vậy chúng tôi đã đưa jQuery vào
thư viện có thẻ '',
-
đã bảo jQuery tìm tất cả
'h1s' trên trang,
-
và sau đó yêu cầu jQuery
thay đổi văn bản của tất cả chúng.
-
Nếu bạn tiếp tục đi, chúng tôi sẽ
trải qua nhiều hơn nữa
-
chi tiết hơn,
-
nhiều cách hơn để lựa chọn và
thao tác các yếu tố,
-
sử dụng jQuery để phản hồi
sự kiện của người dùng trên trang,
-
cộng với những nội dung thú vị với hình ảnh động và hiệu ứng.