Có hai cách phổ biến để liên kết thư viện jQuery vào trang web là:
Cách thứ nhất là tải thư viện từ trang http://jquery.com/download. Hiện tại có 3 phiên bản 1.x, 2.x (2013) và 3.x (2014). Lựa chọn phiên bản nào tuỳ thuộc vào hai yếu tố: trình duyệt web mà bạn sử dụng và nơi bạn dùng jQuery. Trình duyệt web và các phiên bản jQuery được thống kê như sau:
Trình duyệt | jQuery 1 | jQuery 2 | jQuery Compact 3 | jQuery 3 |
---|---|---|---|---|
Internet Explorer | Từ IE 6 trở lên | Từ IE 9 trở lên | Từ IE 8 trở lên | Từ IE 9 trở lên |
Chrome | Mọi phiên bản | Mọi phiên bản | Mọi phiên bản | Mọi phiên bản |
Firefox | Mọi phiên bản | Mọi phiên bản | Mọi phiên bản | Mọi phiên bản |
Safari | Từ Safari 5.1 trở lên | Từ Safari 5.1 trở lên | Từ Safari 7 trở lên | Từ Safari 7 trở lên |
Opera | Mọi phiên bản (từ 12.1x) | Mọi phiên bản (từ 12.1x) | Mọi phiên bản | Mọi phiên bản |
Hệ điều hành di động:
Trình duyệt | jQuery 1 | jQuery 2 | jQuery Compact 3 | jQuery 3 |
---|---|---|---|---|
iOS | Từ 6.1 trở lên | Từ 6.1 trở lên | Từ 7.0 trở lên | Từ 7.0 trở lên |
Android | 2.3
Từ 4.0 trở lên |
2.3
Từ 4.0 trở lên |
2.3
Từ 4.0 trở lên |
2.3
Từ 4.0 trở lên |
Tuỳ theo nơi bạn dùng jQuery mà sử dụng phiên bản cho phù hợp, cụ thể:
- Các website không cần hỗ trợ các trình duyệt cũ của IE, Opera,…thì có thể dùng jQuery 3.x. Đây là trường hợp các website chạy trong môi trường được kiểm soát, như chạy trên mạng cục bộ.
- Các website có đối tượng xem rộng như tin tức, chính quyền,..thì dùng jQuery 1.x.
- Nếu cần phát triển website với đối tượng rộng và không cần hỗ trợ IE 6, IE 7 hay các phiên bản cũ của Opera, Safari, chúng ta dùng jQuery Compat 3.x.
- Dùng jQuery 2.x nếu không cần hỗ trợ IE 8 hay cũ hơn nhưng cần hỗ trợ các phiên bản cũ của Opera hay Safari.
- Phát triển các ứng dụng di động trên nền tảng PhoneGap hay các nền tảng tương tự thì dùng jQuery 3.x.
- FireFox OS hay Chrome OS có thể dùng jQuery 3.x.
- Dùng các plugins cũ và mã nguồn của các plugins thì dùng jQuery 1.x.
Khi tải thư viện jQuery, một vấn đề khác (bên cạnh lựa chọn phiên bản) cần cân nhắc là nên tải dạng nén (the compressed version) hay dạng không nén (the uncompressed version). Dùng dạng nén sẽ có kích thước thư viện nhỏ hơn do đó tiết kiệm băng thông người dùng, tuy nhiên, dạng nén khó đọc, kiểm tra, hay sửa lỗi. Mã của hai dạng có thể như hình dưới:
Khi tải xong thư viện jQuery, là một tập tin có phần mở rộng là .min.js (ví dụ jquery-3.1.1.min.js), bước tiếp theo là liên kết thư viện này đến trang web thông qua phần tử script, đoạn mã như sau (giả sử tập tin js và tập tin trang web (ví dụ html) ở trong cùng một thư mục):
<script src="jquery-3.1.1.min.js"></script>
Cách thứ hai để liên kết thư viện jQuery đến trang web là dùng CDN (Content Delivery Network), tức là thay vì tải thư viện jQuery về máy, chúng ta sẽ liên kết đến thư viện jQuery của một số nhà cung cấp như cộng đồng jQuery, Google hay Microsoft. Các CDN phổ biến và tin cậy nhất hiện nay là:
- jQuery CDN (https://code.jquery.com )
- Google CDN (https://developers.google.com/speed/libraries/devguide )
- Microsoft CDN ((http://www.asp.net/ajaxlibrary/cdn.ashx )
Giả sử chúng ta dùng thư viện jquery-3.1.1.min.js và jQuery CDN thì đoạn mã với script như sau:
script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Dùng CDN phải duy trì kết nối thường xuyên đến server của các nhà cung cấp, nếu vì một lý do nào đó mà server của các nhà cung cấp ngừng kết nối, thì các chức năng jQuery trên trang web chúng ta sẽ không thực thi. Một giải pháp là dùng CDN và nếu liên kết CDN bị ngắt thì dùng tập tin thư viện cục bộ (giả sử lưu trong thư mục tên jQuery), theo đoạn mã sau:
<script src="//code.jquery.com/ jquery-3.1.1.min.js "></script> <script>window.jQuery || document.write('<script src="jQuery/ jquery-3.1.1.min.js "><\/script>');</script>
Hiện nay, có hai quan điểm về vị trí đặt phần tử script. Quan điểm truyền thống là đặt trong head và quan điểm hiện nay – ưu tiên tốc độ tải trang – là đặt trong ngay trên thẻ kết thúc </body>. Nếu bạn thích sự sáng sủa, rõ ràng thì theo quan điểm thứ nhất, ngược lại, nếu ưu tiên tốc độ tải trang, thì theo quan điểm thứ hai.
Ý kiến bài viết