Đọc tiếp để hiểu rõ cách xây dựng trang web bằng jQuery, và bạn cũng có thể tham khảo thêm những bài giảng jQuery khác trên Mytour để tạo trang web bằng Bootstrap.
Khám phá bí quyết tạo ra trang web bằng jQuery
1. Tải jQuery về
Khám phá cách bắt đầu với việc tải xuống và tích hợp jQuery vào tài liệu của bạn. Được cung cấp trong 2 phiên bản, phiên bản nén là lựa chọn phù hợp cho phát triển và gỡ lỗi, tuy nhiên, Mytour khuyến khích bạn sử dụng phiên bản nén để tối ưu hóa băng thông và tăng cường hiệu suất tải xuống với kích thước nhỏ hơn.
Bước này đặc biệt hữu ích khi bạn muốn phát triển hoặc sửa lỗi trang web của mình. Lưu ý để tải về và sử dụng jQuery, truy cập trang web tại đây.
Khám phá cách tải xuống và tích hợp jQuery vào tài liệu của bạn tại đây.
Liên kết:
Nếu bạn chú ý, bạn sẽ thấy file jQuery tải về có đuôi mở rộng là .js. Đơn giản như việc thêm thư viện JavaScript thông thường, chúng ta có thể dễ dàng tích hợp file jQuery vào tài liệu HTML bằng phần tử script
Ví dụ: Dưới đây là một minh họa cụ thể về cách thêm file jQuery vào tài liệu HTML:
Kết quả trả về sẽ có dạng như dưới đây:
Lưu ý: Để đảm bảo các API jQuery sẵn sàng khi mã của bạn cần truy cập, hãy thêm file jQuery trước khi thêm script tùy chỉnh.
Mẹo: Bạn có thể bỏ qua thuộc tính type='text/javascript' trong thẻ script. Tuy nhiên, để làm cho đoạn mã trở nên dễ hiểu hơn, bạn vẫn có thể sử dụng thuộc tính này.
2. Thêm jQuery vào tài liệu thông qua CDN
Nếu không muốn tải xuống và lưu trữ jQuery, bạn cũng có thể thêm jQuery vào tài liệu thông qua các liên kết CDN miễn phí.
Sử dụng CDN giúp tăng hiệu suất bằng cách giảm thời gian tải, vì jQuery được lưu trữ trên nhiều máy chủ toàn cầu. Khi người dùng yêu cầu, file sẽ được tải từ máy chủ gần họ nhất.
Nếu khách truy cập trang web của bạn đã tải xuống bản sao jQuery từ cùng một CDN khi truy cập các trang web khác, họ không cần phải tải lại vì trang web đã được lưu trong bộ nhớ cache trình duyệt.
CDN của jQuery được cung cấp bởi MaxCDN:
Bạn cũng có thể thêm jQuery qua CDN của Google và Microsoft.
Hướng dẫn tạo trang web bằng jQuery
Cuối cùng, sử dụng jQuery để điều chỉnh giao diện tài liệu. Dưới đây là ví dụ về cách Mytour thực hiện thao tác đơn giản bằng cách thay đổi màu văn bản từ màu đen mặc định sang màu đỏ:
Kết quả trả về sẽ giống như sau:
Trong ví dụ này, Mytour điều chỉnh màu của tiêu đề (h1) bằng cách sử dụng phương thức css() trong jQuery khi sự kiện đã sẵn sàng.
Mytour đã hướng dẫn chi tiết cách tạo trang web bằng jQuery trong bài học trước đó. Bài học tiếp theo sẽ giới thiệu về cú pháp jQuery cơ bản nhất.
Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.