WEBVTT

00:00:00.770 --> 00:00:02.612
Bây giờ tôi sẽ giới thiệu
cho bạn những điều cơ bản

00:00:02.612 --> 00:00:05.722
của việc sử dụng jQuery
trong trang web của bạn.

00:00:05.722 --> 00:00:09.005
Bước đầu tiên là
thêm thư viện jQuery

00:00:09.005 --> 00:00:11.542
bằng việc sử dụng
thẻ ''

00:00:12.232 --> 00:00:16.122
Trước đây, chúng tôi đặt JavaScript
bên trong thẻ '',

00:00:16.122 --> 00:00:20.276
nhưng lần này tôi sẽ
thêm thuộc tính 'src'.

00:00:20.276 --> 00:00:24.391
Và tôi cần đặt nó thành một URL.

00:00:24.391 --> 00:00:26.566
URL đó nên là gì?

00:00:26.566 --> 00:00:28.628
Nếu tôi đang làm việc trên
máy tính của mình

00:00:28.628 --> 00:00:30.093
và đã tải xuống jQuery

00:00:30.093 --> 00:00:32.525
xuống cùng thư mục
với trang web của tôi,

00:00:32.525 --> 00:00:36.473
Tôi chỉ cần viết 'jquery.js' ở đây.

00:00:36.473 --> 00:00:39.408
Nhưng điều đó sẽ không có
tác dụng trên Khan Academy.

00:00:39.408 --> 00:00:43.096
Ở đây, tôi cần một URL
tuyệt đối của jQuery

00:00:43.096 --> 00:00:45.885
trên một máy chủ
trực tuyến ở đâu đó.

00:00:45.885 --> 00:00:50.082
Và có một danh sách
những URL như thế trong jquery.com,

00:00:50.622 --> 00:00:52.738
và tôi có một cái
ở đây, tôi sẽ dán vào.

00:00:52.738 --> 00:00:54.430
Được rồi.

00:00:54.430 --> 00:00:56.119
Bây giờ tôi muốn
chỉ ra một vài điều

00:00:56.119 --> 00:00:58.031
về URL này.

00:00:58.031 --> 00:01:01.820
Điều đầu tiên đó là
nó bắt đầu bằng 'https'.

00:01:01.820 --> 00:01:05.231
Điều đó có nghĩa
đó là một URL an toàn.

00:01:05.231 --> 00:01:09.231
Chúng tôi chỉ cho phép bạn
dùng các tài nguyên an toàn

00:01:09.231 --> 00:01:11.207
trên các trang web
của Khan Academy

00:01:11.207 --> 00:01:15.343
và đó là điều tốt khi
thực hành lập trình web.

00:01:15.663 --> 00:01:18.862
Điều thứ hai là
URL này được đặt

00:01:18.862 --> 00:01:22.751
trên một máy chủ
Google: googleapis.com.

00:01:22.751 --> 00:01:25.385
Máy chủ này được gọi là CDN,

00:01:25.385 --> 00:01:27.921
content delivery network
(mạng phân phối nội dung),

00:01:27.921 --> 00:01:29.406
điều đó có nghĩa là
nó đã được tối ưu hóa

00:01:29.406 --> 00:01:32.625
cho các tập tin tĩnh
như thư viện JavaScript

00:01:32.625 --> 00:01:35.388
và phục vụ chúng
rất nhanh chóng.

00:01:35.388 --> 00:01:38.164
Bây giờ máy chủ Google này
là máy chủ mà tôi tin tưởng

00:01:38.164 --> 00:01:41.301
và nói chung, bạn nên
luôn tin tưởng vào máy chủ

00:01:41.301 --> 00:01:43.002
mà bạn lấy tập lệnh

00:01:43.002 --> 00:01:47.240
vì chúng có thể
làm rối loạn trang của bạn.

00:01:47.400 --> 00:01:50.013
Điều thứ ba là
có một số phiên bản

00:01:50.013 --> 00:01:53.807
trong URL này: 2.1.4.

00:01:53.807 --> 00:01:56.402
Thư viện jQuery đang trong
quá trình phát triển

00:01:56.402 --> 00:01:59.015
và họ thường phát hành
phiên bản mới.

00:01:59.015 --> 00:02:00.987
Các số càng nằm về
phía bên trái

00:02:00.987 --> 00:02:03.279
thì càng thể hiện sự thay đổi
phiên bản quan trọng hơn

00:02:03.279 --> 00:02:05.755
so với các số nằm phía bên phải,

00:02:05.755 --> 00:02:08.134
đại diện cho các phiên bản nhỏ.

00:02:08.134 --> 00:02:10.353
Tôi đang sử dụng jQuery 2 ở đây,

00:02:10.353 --> 00:02:12.295
hoạt động trong các trình duyệt hiện đại

00:02:12.295 --> 00:02:14.484
nhưng không hoạt động trong IE8.

00:02:14.484 --> 00:02:15.635
Trên trang web của riêng bạn,

00:02:15.635 --> 00:02:19.627
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.

00:02:19.627 --> 00:02:22.809
Được rồi. Vì vậy, chúng tôi đã bao gồm jQuery.

00:02:22.809 --> 00:02:24.973
Bây giờ, hãy thực sự sử dụng nó

00:02:24.973 --> 00:02:28.266
bên trong thẻ '<script>' khác.

00:02:30.226 --> 00:02:33.309
Mọi thư viện JavaScript đều hiển thị các hàm

00:02:33.309 --> 00:02:35.358
và họ đặt tên cho các chức năng của mình.

00:02:35.358 --> 00:02:37.010
Chúng ta phải xem trong tài liệu

00:02:37.010 --> 00:02:39.262
để tìm ra tên hàm đó là gì

00:02:39.262 --> 00:02:41.761
và thực tế họ làm gì.

00:02:41.761 --> 00:02:45.444
Vâng thư viện jQuery
bộc lộ một chức năng chính

00:02:45.444 --> 00:02:47.524
và nó có một cái tên rất ngắn.

00:02:47.524 --> 00:02:50.637
Đó chỉ là ký hiệu đô la.

00:02:50.637 --> 00:02:52.259
Điều đó có nghĩa là điều đầu tiên chúng tôi viết

00:02:52.259 --> 00:02:53.556
là đô la

00:02:53.556 --> 00:02:56.526
sau đó là hai dấu ngoặc đơn,
bởi vì nó là một chức năng,

00:02:56.526 --> 00:02:59.412
và tất nhiên, dấu chấm phẩy.

00:02:59.412 --> 00:03:01.928
Bây giờ thật tuyệt khi điều này
tên hàm quá ngắn

00:03:01.928 --> 00:03:05.756
bởi vì chúng tôi sẽ gọi điện
chức năng đó rất nhiều.

00:03:06.226 --> 00:03:08.928
Có rất nhiều thứ chúng ta
có thể chuyển đến chức năng đó,

00:03:08.928 --> 00:03:10.300
nhưng với ví dụ giới thiệu này,

00:03:10.300 --> 00:03:15.254
Tôi sẽ chuyển một chuỗi 'h1'.

00:03:16.319 --> 00:03:17.697
Bây giờ, khi tôi làm xong việc này,

00:03:17.697 --> 00:03:19.724
điều này bảo jQuery tìm

00:03:19.724 --> 00:03:23.095
tất cả các phần tử 'h1' trên trang

00:03:23.095 --> 00:03:28.050
và trả lại chúng dưới dạng
Đối tượng bộ sưu tập jQuery.

00:03:28.150 --> 00:03:29.311
Bây giờ tôi đã làm được điều đó,

00:03:29.311 --> 00:03:33.233
Tôi có thể gọi các phương pháp khác
trên đối tượng jQuery

00:03:33.233 --> 00:03:37.200
để thao túng tất cả
phần tử 'h1' mà nó tìm thấy.

00:03:37.200 --> 00:03:39.939
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,

00:03:39.939 --> 00:03:43.356
Tôi có thể gọi chức năng 'văn bản'

00:03:43.356 --> 00:03:46.044
sau đó truyền cho nó một chuỗi.

00:03:47.244 --> 00:03:48.492
Nó đang diễn ra.

00:03:48.492 --> 00:03:49.792
Đúng!

00:03:49.792 --> 00:03:50.804
Và chúng ta đã hoàn tất!

00:03:50.804 --> 00:03:53.029
Đó là phần đầu tiên của chúng tôi về jQuery.

00:03:53.029 --> 00:03:56.910
Vì vậy chúng tôi đã đưa jQuery vào
thư viện có thẻ '',

00:03:56.910 --> 00:03:59.819
đã bảo jQuery tìm tất cả
'h1s' trên trang,

00:03:59.819 --> 00:04:03.643
và sau đó yêu cầu jQuery
thay đổi văn bản của tất cả chúng.

00:04:03.643 --> 00:04:06.332
Nếu bạn tiếp tục đi, chúng tôi sẽ
trải qua nhiều hơn nữa

00:04:06.332 --> 00:04:07.653
chi tiết hơn,

00:04:07.653 --> 00:04:11.117
nhiều cách hơn để lựa chọn và
thao tác các yếu tố,

00:04:11.117 --> 00:04:14.353
sử dụng jQuery để phản hồi
sự kiện của người dùng trên trang,

00:04:14.353 --> 00:04:18.558
cộng với những nội dung thú vị với hình ảnh động và hiệu ứng.