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.