Gắn thẻ cho thư viện jquery mới. Giới thiệu về jQuery

jQuery là một thư viện JavaScript tập trung vào Tương tác JavaScript, HTML và CSS.

jQuery có thể làm gì

Truy cập bất kỳ phần tử DOM nào ( mô hình đối tượng document) và không chỉ xử lý mà còn thao tác chúng.
Làm việc với các sự kiện.
Thật dễ dàng để thực hiện các hiệu ứng hình ảnh khác nhau.
Làm việc với AJAX (rất công nghệ hữu ích, cho phép bạn liên lạc với máy chủ mà không cần tải lại trang, nhưng hiện tại chúng tôi sẽ không chạm vào nó).
Nó có số lượng lớn các plugin được thiết kế để tạo các thành phần giao diện người dùng.

Làm thế nào nó hoạt động

Trước tiên, bạn cần tải xuống thư viện từ trang web của nhà phát triển hoặc, nếu cần, giải nén nó và di chuyển nó (thư viện) vào cùng thư mục chứa các trang html của chúng tôi (đây là tùy chọn, nhưng địa chỉ cho tất cả các ví dụ tiếp theo sẽ được viết dựa trên cấu trúc này).

Bây giờ chúng ta cần kết nối jQuery với trang html. Đối với điều này, như bạn nhớ, có một thẻ trong html , chịu trách nhiệm kết nối các tệp tập lệnh bên ngoài (). Hãy thêm thẻ này vào trang html (chúng tôi cũng đã kết nối trang script.js với các hàm js): * Hãy chú ý đến tên tệp. Thư viện jquery-1.2.6 được sử dụng ở đây, nhưng bạn có thể tải xuống phiên bản mới hơn, do đó, số liệu của bạn có thể khác.*

Vì vậy, trong thư mục của chúng tôi, chúng tôi có một trang html, một trang có kiểu (style.css), một trang có các hàm js (script.js) và (jquery-1.2.6.js). Hãy làm ví dụ này (nhấp vào nút):

jQuery Effects Show() Effect SlideDown() Effect Animate() Effect Hãy xem cách thực hiện điều này. Trên trang html chúng ta nên có ba hình chữ nhật (div) và ba nút: Hiệu ứng jQuery Hiệu ứng Show() Hiệu ứng SlideDown() Hiệu ứng Animate()

Chúng tôi sẽ phát hành vẻ bề ngoài và làm cho hình chữ nhật trở nên vô hình bằng cách sử dụng . mã style.css:

#kv1, #kv2, #kv3( chiều rộng: 80px; chiều cao: 100px; float: trái; nền: đỏ; lề: 5px; màu: trắng; hiển thị: không có; )

Bây giờ điều thú vị nhất là trên trang script.js, chúng tôi viết mã của các hàm sẽ được kích hoạt khi các nút được nhấp vào:

hàm addEffect1())( $("#kv1:hidden").show(); ) hàm addEffect2())( $("#kv2:hidden").slideDown("slow"); ) hàm addEffect3()) ( $( "#kv3:hidden").show().animate(( fontSize:"36px" ) , 3000); )

Những chức năng này làm gì?

Chức năng addEffect1() nhìn $ ("#kv1:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv1" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .trình diễn() và hiểu rằng phần tử được tìm thấy phải được hiển thị.

Chức năng addEffect2() nhìn $ (ký hiệu đô la) và nhận ra đó là jQuery, sau đó cô ấy nhìn thấy ("#kv2:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv2" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .slideDown("chậm") và hiểu rằng phần tử tìm thấy phải được hiển thị chậm ("slow") từ trên xuống dưới (slideDown).

Chức năng addEffect3() nhìn $ (ký hiệu đô la) và nhận ra đó là jQuery, sau đó cô ấy nhìn thấy ("#kv3:ẩn") và hiểu rằng cô ấy cần tìm một phần tử có id="kv3" có thuộc tính ẩn. Tiếp theo cô nhìn thấy .trình diễn() và hiểu rằng phần tử được tìm thấy phải được hiển thị. Sau đó cô ấy nhìn thấy .animate((fontSize:"36px") , 3000) và hiểu rằng kích thước phông chữ cần phải tăng lên 36 pixel trong 3 giây (3000) (fontSize:"36px")

Đây là cách jQuery thực sự hoạt động. Hãy xem các hàm của chúng ta ngắn đến mức nào và tưởng tượng chúng sẽ như thế nào nếu chúng ta quyết định viết chúng bằng javascript thuần túy. jQuery thật tuyệt vời phải không? Về cách làm hiệu ứng đồ họa, hoạt ảnh, kéo và sắp xếp các đối tượng cũng như cách làm việc chung với thư viện này sẽ được thảo luận trong các bài học tiếp theo.

Ở cuối bài học này tôi muốn nói về các khái niệm cơ bản của jQuery. Cú pháp toán tử jQuery có thể được biểu diễn đại khái như sau:

Ở đâu bộ chọn- một yếu tố hoặc các yếu tố mà chúng ta sẽ làm điều gì đó.

hoạt động- chính xác chúng ta sẽ làm gì với các phần tử đã chọn. Chúng ta có thể thêm bất kỳ hiệu ứng nào, kiểu css, thay đổi mã html, v.v. Bất kỳ sự kiện cũng có thể được liệt kê ở đây.

thuộc tính hành động- nếu chúng được cung cấp bởi hành động.

Hôm nay chỉ vậy thôi, bài tiếp theo chúng ta sẽ nghiên cứu về bộ chọn.

Điều này sẽ cài đặt jQuery trong thư mục node_modules. Trong node_modules/jquery/dist/ bạn sẽ tìm thấy bản phát hành không nén, bản phát hành nén và tệp bản đồ.

liên kết Tải xuống jQuery bằng Bower

Phiên bản thứ hai giúp bạn cập nhật mã để chạy trên jQuery 3.0 trở lên, khi bạn đã sử dụng Migrate 1.x và nâng cấp lên jQuery 1.9 trở lên:

liên kết Kiểm tra trình duyệt chéo với jQuery

Hãy đảm bảo kiểm tra các trang web sử dụng jQuery trong tất cả các trình duyệt mà bạn muốn hỗ trợ. Trang web cung cấp sẵn các máy ảo để thử nghiệm nhiều phiên bản khác nhau của trình duyệt web IE. Bạn có thể tìm thấy phiên bản cũ hơn của các trình duyệt khác tại oldversion.com.

liên kết Bản dựng trước khi phát hành của jQuery

Nhóm jQuery liên tục làm việc để cải thiện mã. Mỗi cam kết đối với kho lưu trữ Github sẽ tạo ra một phiên bản mã đang hoàn thiện mà chúng tôi cập nhật trên jQuery CDN. Những phiên bản này đôi khi không ổn định và không bao giờ phù hợp với nơi sản xuất. Chúng tôi khuyên bạn nên sử dụng chúng để xác định xem lỗi đã được sửa chưa khi báo cáo lỗi đối với các phiên bản đã phát hành hoặc để xem liệu có lỗi mới nào được đưa ra hay không.

liên kết Sử dụng jQuery với liên kết CDN Các CDN khác

Các CDN sau đây cũng lưu trữ các phiên bản nén và không nén của bản phát hành jQuery. Bắt đầu với jQuery 1.9, chúng cũng có thể lưu trữ các tệp ; kiểm tra tài liệu của trang web.

Lưu ý rằng có thể có sự chậm trễ giữa bản phát hành jQuery và tính khả dụng của nó ở đó. Hãy kiên nhẫn, họ nhận được các tập tin cùng lúc bài đăng trên blog được công khai. Ứng viên Beta và phát hành khôngđược lưu trữ bởi các CDN này.

Thư viện JQuery quen thuộc với các nhà thiết kế và nhà phát triển. Đây là một trong những thư viện JavaScript phổ biến nhất mà bạn có thể tìm thấy trên web.

Mọi nhà thiết kế và phát triển có uy tín đều quen thuộc với các chức năng và khả năng của thư viện này:

jQuery được thiết kế để giải quyết hầu hết mọi tác vụ trên trang web;
jQuery có thể loại bỏ rắc rối khi tạo một trang web đẹp và đầy đủ chức năng;
Nếu bạn cần giải quyết các vấn đề trên nhiều trình duyệt, hãy thêm thư viện JavaScript vào bộ sưu tập các công cụ bạn sử dụng.

Thư viện JQuery - công cụ tuyệt vời dành cho các nhà phát triển web. Có một số lượng lớn các plugin miễn phí trên Internet.

Bạn có thể dành nhiều thời gian để tìm kiếm những thứ bạn cần, vì bạn sẽ phải làm việc với từng trang web để tìm phiên bản mới nhất của thư viện JQuery phù hợp với mình.

Do đó, để tiết kiệm thời gian của bạn, chúng tôi đã tổng hợp các thư viện jQuery hữu ích nhất trong bài viết này. Bạn có thể sử dụng chúng trên trang web của mình để thêm các hiệu ứng thú vị và hữu ích.

1. Cây:

Plugin Tree cung cấp cho bạn khả năng tạo cấu trúc cây cho trang web của bạn. Nó có thể mở rộng, tùy chỉnh, mạnh mẽ và rất dễ sử dụng.

2. jQuery rung:

Đây là một plugin được tạo đặc biệt để sử dụng trên thiêt bị di động. Nó cho phép nhà phát triển làm cho bất kỳ thiết bị nào rung theo mẫu tùy chỉnh trong Thời kỳ nhất định thời gian.

3. Chỉ báo chuyến bay:

Plugin rất dễ sử dụng. Bạn sẽ có thể hiển thị các chỉ số chuyến bay chất lượng cao với sử dụng HTML, CSS3, JQuery và hình ảnh SVG.

4. Thanh trượt ánh sáng jQuery:

jQuery LightSlider là một thanh trượt cảm ứng có khả năng tùy chỉnh cao để hiển thị nội dung trang web của bạn. Hiệu ứng trượt và mờ dần có sẵn. Nó tương thích với tất cả các trình duyệt chính.

5. jQuery GoUp!

Rất dễ sử dụng. Cho phép khách truy cập trang web của bạn di chuyển lên đầu trang chỉ bằng một cú nhấp chuột.

6. Trình cắt ảnh:

Plugin jQuery này cho phép bạn cắt hình ảnh trên trang web của mình. Có các tùy chọn cài đặt và xem trước. Bạn cũng sẽ có thể đặt chiều cao và chiều rộng.

7. Thanh trượt Devrama:

Devrama hoàn toàn thanh trượt thích ứng hình ảnh từ cơ hội duy nhất. Hỗ trợ cả hình ảnh và nội dung HTML. Có một số tùy chọn cho hiệu ứng thay đổi hình ảnh.

8.jQFader:

jQFader là một plugin đơn giản để áp dụng hiệu ứng mờ dần cho các thành phần trên trang web của bạn. Dễ sử dụng. Dễ dàng sử dụng trên bất kỳ trang web nào.

9.Bộ công cụ:

Forkit.js là một plugin jQuery hoạt hình hoạt động giống như một tấm màn mà bạn có thể ẩn đằng sau nội dung bổ sung. Thường nằm ở góc trên bên phải.

10. Thanh trượt tin tức dọc:

Đúng như tên gọi, nó là một thanh trượt dọc dựa trên jQuery và CSS 3 để hiển thị các tiêu đề tin tức. Có một chức năng xem trước và tổng quan ngắn gọn Tin tức.

11. Tìm kiếm:

Plugin jQuery này cho phép bạn tìm kiếm văn bản trong danh sách có sẵn trên một trang. Ẩn các phần tử không khớp với truy vấn tìm kiếm.

12. Vuốt trình duyệt:

Plugin này tạo hiệu ứng bàn di chuột để cuộn qua các trang khi tính năng cuộn bị tắt trên trang web. Sự kiện xảy ra khi con lăn chuột được cuộn.

13. Bữa tối với gà:

ChickenDinner là một plugin jQuery độc đáo. Cho phép bạn tải hình ảnh từ mảng hình ảnh được tạo ở phía máy khách, thông qua thẻ img hoặc hình nền.

14. Tấm nhấp nháy:

Plugin hoàn toàn đáp ứng và rất dễ sử dụng. Cho phép bạn tạo cảm giác cuộn từng trang qua nội dung trên trang web.

15. SVGMagic:

Làm cách nào để chuyển đổi hình ảnh SVG sang định dạng PNG? Tận dụng điều này jQuery đơn giản thư viện. Nó tìm kiếm hình ảnh ở định dạng SVG trên trang web và nếu trình duyệt không hỗ trợ SVG, hãy chuyển đổi chúng thành PNG.

16. lười biếngYT:

Plugin này có thể được sử dụng cho bổ sung nhanh chóng video từ YouTube. Khi được tải lần đầu tiên, lớp sẽ chứa hình ảnh xem trước của video và khi nhấp vào, video sẽ phát.

17.ScrollMagic:

Với plugin này, bạn có thể ghim một thành phần trang ở một vị trí nhất định, bật hoạt ảnh và tại thời điểm người dùng cuộn trang đến một vị trí nhất định.

18. RowGrid:

RowGrid là một plugin jQuery được thiết kế để trình bày các thành phần trang dưới dạng bảng. Công cụ nhỏ và dễ sử dụng.

19. Sửa chữa:

Plugin jQuery này được sử dụng để tạo cửa sổ phương thức với theo dõi băm. Thiết kế đáp ứng đầy đủ phong cách phẳng và rất dễ dàng để thiết lập.

20. Trình xem toàn cảnh:

Plugin jQuery này có thể rất hữu ích cho trang web của bạn. Nó cho phép bạn thêm hình ảnh toàn cảnh, điều này chắc chắn sẽ làm cho trang trở nên độc đáo hơn.

21. Nhãn nổi:

Plugin này được xây dựng trên jQuery, quen thuộc với nhiều nhà phát triển. Công việc của nó là hiển thị một số văn bản mặc định trong trường nhập và thay đổi nó khi người dùng bắt đầu nhập.

22. Hộp chất lỏng:

Plugin jQuery rất hữu ích. Mở rộng và cải thiện khả năng của mô-đun hộp đèn chất lỏng. Hoạt động như một liên kết đến một hình ảnh lớn hơn.

23. Khoảng không:

Headroom.js sẽ giúp bạn ẩn điều hướng (hoặc nội dung khác khỏi tiêu đề) trên trang web. Khi khách truy cập cuộn xuống trang, điều hướng sẽ biến mất và xuất hiện khi người dùng quay lại đầu trang.

24. Thanh trượt chữ A:

A-Slider là một thanh trượt đơn giản và thích ứng, cũng hỗ trợ nội dung âm thanh. Rất dễ sử dụng và có thể tùy chỉnh khá linh hoạt bằng HTML.

25. CoverflowJS:

Đây là dự án coverflow sẽ tạo lại hiệu ứng 'CoverFlow' bằng cách sử dụng các thành phần giao diện người dùng jQuery và các phép biến đổi CSS3.

26. URL jQuery:

Các khả năng của plugin jQuery này rất giống với chức năng của tệp đính kèm trong cửa sổ tạo bài đăng trên Facebook. Cho phép bạn tạo bản xem trước nhanh của bất kỳ URL nào dựa trên thuộc tính

Plugin cho phép các ứng dụng web tải hình ảnh cho các độ phân giải màn hình khác nhau.

28. Trình thu gọn jQuery:

Plugin jQuery này cho phép bạn ẩn văn bản theo từ, chữ cái hoặc dòng bằng API khá linh hoạt. Có nhiều lựa chọn để ẩn đoạn văn.

29. Cuộn hình ảnh thị sai:

Một plugin tạo hiệu ứng dịch chuyển hình ảnh. Dễ sử dụng. Đống tùy chọn bổ sungđể sửa đổi. Hoạt ảnh được thực hiện bằng CSS3.

30. Cuộn khối:

Plugin JQuery chia nội dung trang web thành các trang cho hiệu suất tốt hơn và sau đó hiển thị chúng theo khối.

31. Trình chiếu hình ảnh toàn trang:

Một plugin jQuery toàn trang giúp tạo trình chiếu tự động lấp đầy toàn bộ không gian màn hình bằng một hình ảnh. Kích thước hình ảnh được tự động điều chỉnh để phù hợp với khu vực xem.

32. Cây dễ dàng

Plugin EasyTree jQuery được thiết kế để chuyển đổi danh sách UL hoặc JSON thành menu dạng cây cho trang web của bạn. Dễ sử dụng và hoàn toàn miễn phí.

33. Đã ánh xạ:

Mapsed đơn giản hóa quá trình đánh dấu các địa điểm trên bản đồ. Bạn cũng có thể thêm và chỉnh sửa địa điểm nếu chúng không có trong Google Địa điểm API.

34. Thanh cuộn rạng rỡ:

Plugin jQuery này cho phép bạn tạo các thanh cuộn (băng chuyền) đáp ứng với lưới và bố cục ngang đơn giản. Radiant Scroller hỗ trợ một số tùy chọn tùy chỉnh và cũng cung cấp API để quản lý.

35. Hộp đèn hình ảnh:

Hộp đèn tối giản cho hình ảnh. Theo mặc định, plugin không có nhãn và nút điều hướng, điều này làm cho nó đơn giản nhưng khổ hạnh. Đáp ứng và hỗ trợ thiết bị cảm ứng, chạy trên hầu hết các hệ điều hành di động.

36. Mr.JsonTable:

Plugin này rất dễ sử dụng. Với sự trợ giúp của nó, bạn có thể sắp xếp dữ liệu JSON dưới dạng bảng HTML, với khả năng phân trang và sắp xếp. Bạn cũng có thể ẩn các cột.

37. ImageFit:

ImageFit có thể rất hữu ích cho các nhà phát triển. Được thực hiện đơn giản. Có kích thước nhỏ. Nó sẽ giúp bạn đặt bất kỳ hình ảnh nào ở bất cứ đâu trên trang web của bạn.

38. Trình xác thực Bootstrap:

Plugin này sẽ rất hữu ích khi bạn muốn thêm khả năng xác thực vào trang web của mình. Có nhiều tùy chọn tích hợp và rất dễ sử dụng.

39. Thay đổi kích thước Plugin cuối:

Plugin này được sử dụng để hiển thị thông báo sau khi thay đổi kích thước cửa sổ trình duyệt.

40. Nền thích ứng:

Plugin sử dụng màu chủ đạo trong ảnh nền và thêm màu này vào nền của phần tử gốc.

41.FormChimp:

Plugin jQuery, là một dạng Mailchimp Ajax có thể tùy chỉnh hoàn toàn, cho phép người dùng dễ dàng đăng nhập vào Mailchimp.

42. Mật khẩu Peekaboo:

Plugin sẽ cho phép bạn tạm thời hiển thị mật khẩu đã nhập cho người dùng nếu họ muốn.

Melnikova 620000 Nga, vùng Sverdlovsk, Ekaterinburg. +7 953 039 559 1 info@website

Cách bao gồm thư viện JQuery

truy vấn

Ưu điểm của CDN

Ghi chú

Nhược điểm của CDN

Ghi chú

Từ jquery.com/download

1. Mở code.jquery.com trong trình duyệt của bạn.

jQuery là Thư viện JavaScript, cho phép tương tác giữa JavaScript và HTML. Nhờ JQuery, bạn có thể truy cập và thao tác bất kỳ phần tử DOM nào. Các nhà phát triển cung cấp một số phiên bản của thư viện này:

để phát hành (phiên bản nén trong đó tất cả các nhận xét và khoảng trắng đều bị xóa - có trọng lượng ít hơn);
để phát triển (phiên bản không nén dành cho nhà phát triển có cấu trúc và không gian được bảo tồn - có trọng lượng hơn)

Có hai cách để kết nối JQuery với một trang web, chúng khác nhau đáng kể và có những ưu và nhược điểm riêng. Trước tiên hãy xem xét phương pháp đơn giản nhất, sau đó chuyển sang phương pháp phức tạp hơn.

Kết nối JQuery bằng CDN

CDN (Mạng phân phối nội dung) - phân bổ theo địa lý cơ sở hạ tầng mạngđể cung cấp nội dung cho người dùng. CDN cho phép bạn tăng tốc độ phân phối nội dung đến người dùng cuối.

Ưu điểm của CDN

cải thiện hiệu suất trang web của bạn bằng cách tải thư viện từ Internet chứ không phải từ bộ nhớ cục bộ.

Lưu ý: nếu người dùng truy cập một trang web khác cũng sử dụng CDN thì khi truy cập trang web của chúng tôi, thư viện JQuery sẽ được tải từ bộ đệm của trình duyệt.

Nhược điểm của CDN

nếu máy chủ CDN không khả dụng vì lý do nào đó, thư viện JQuery sẽ không được kết nối với trang web của bạn.

Lưu ý: có một tỷ lệ rất nhỏ các máy chủ cơ sở hạ tầng CDN không khả dụng.

Trên trang jquery.com/download, chúng tôi được cung cấp một số máy chủ CDN (Google CDN, Microsoft CDN, CDNJS CDN và JsDelivr CDN) từ đó chúng tôi có thể tải xuống và kết nối thư viện. Chúng tôi sẽ sử dụng CDN JQuery tiêu chuẩn. Để kết nối JQuery, hãy làm theo một số bước đơn giản:

1. Mở code.jquery.com trong trình duyệt của bạn.

2. Chọn phiên bản cần thiết và phong cách thư viện.

3. Thêm mã sau để đưa thư viện vào một khu vực trên trang web của bạn.

Thuộc tính toàn vẹn và nguồn gốc chéo được sử dụng để kiểm tra tính toàn vẹn của tệp. Điều này cho phép các trình duyệt đảm bảo rằng các tập tin được lưu trữ trên tài nguyên của bên thứ ba không bị giả mạo.

4. Thư viện được kết nối thành công với trang web của bạn.

Kết nối thư viện JQuery cục bộ

Thư viện cục bộ là thư viện mà bạn đã tải xuống từ trang web chính thức và sau đó kết nối nó từ thư mục gốc trên trang web của bạn.

Ưu điểm của thư viện địa phương

Thư viện JQuery sẽ luôn có sẵn cho khách truy cập trang web của bạn vì nó sẽ được tải từ thư mục gốc.

Nhược điểm của thư viện địa phương

Khi khách truy cập truy cập trang web, trình duyệt sẽ tự động tải thư viện JQuery vào bộ đệm. Điều này, đến lượt nó, sẽ ảnh hưởng đến hiệu suất của trang web.

Để kết nối thư viện theo cách này, hãy làm theo một số bước theo hướng dẫn sau:

1. Mở jquery.com/download trong trình duyệt của bạn.

2. Tìm tiêu đề JQuery và chọn phiên bản bạn muốn.

3. Đặt tệp thư viện đã tải xuống vào thư mục gốc của trang web của bạn.

4. Thêm mã sau để đưa thư viện vào một khu vực trên trang web của bạn.

Câu hỏi đầu tiên đặt ra khi bắt đầu làm việc với thư viện jQuery là làm thế nào để kết nối nó? Thật lạ là tôi đã không viết về điều này sớm hơn và bây giờ tôi quyết định lấp đầy khoảng trống này.

Trong bài viết này, tôi sẽ cho bạn biết cách thêm jQuery một cách chính xác trên trang web html thông thường và trên các công cụ phổ biến.

Kết nối jQuery từ trang web của bạn

Cách phổ biến nhất để kết nối một thư viện. Trước tiên, bạn cần tải xuống phiên bản mới nhất từ trang web của nhà phát triển. Trang tải xuống trình bày một số tùy chọn thư viện, ví dụ: hiện tại nó cung cấp tải xuống “Nén, sản xuất jQuery 3.1.1” và “Không nén, phát triển jQuery 3.1.1”. Tùy chọn đầu tiên là phiên bản nén của thư viện, tất cả các nhận xét đã bị xóa khỏi nó, trong trường hợp này thư viện chiếm ít dung lượng hơn nhiều, do đó trang mà nó sẽ được kết nối sẽ tải nhanh hơn. Lựa chọn thứ hai, nói một cách đại khái, nguồn thư viện, nó được cấu trúc ở dạng dễ đọc với các nhận xét và chủ yếu dành cho các nhà phát triển. Vì vậy, tôi khuyên bạn nên sử dụng phiên bản nén của thư viện.

Sau khi thư viện được tải xuống, bạn cần đặt nó trên máy chủ nơi chứa các tệp trang web. Tôi thường tạo thư mục “js” trong thư mục gốc của trang web mà tôi sao chép vào thư viện cần thiết và tôi cũng đặt một tập tin với các chức năng của mình ở đó.

Bây giờ bạn có thể truy cập trực tiếp vào kết nối jQuery. Cấu trúc của trang web mà bạn kết nối jQuery có thể khác nhau. Nhưng nó chắc chắn chứa Thẻ HTML, ĐẦU và THÂN. Vì vậy, để kết nối jQuery bạn cần thêm thẻ SCRIPT kèm link tới thư viện bên trong thẻ ĐẦU.

Tiêu đề trang web

Trong một số trường hợp, thư viện được đưa vào trước thẻ đóng body, thẻ này liên quan đến thứ tự xử lý trang html browser. Vì trình duyệt đọc các dòng một cách tuần tự nên khi kết nối jQuery ở cuối tệp, trước tiên trình duyệt sẽ hiển thị trang web, sau đó mới kết nối động. Với kết nối chậm, phương pháp này đảm bảo tăng tốc độ tải trang web và chỉ sau đó là hoạt động của thanh trượt và phần còn lại. Mã cho kết nối này trông như thế này:

Tiêu đề trang web

Chú ý! Không nên đổi tên tệp thư viện jQuery (thường được đổi thành jquery.js), vì sau này sẽ lưu lại tên chính thức file sẽ giúp bạn biết bạn đang sử dụng phiên bản thư viện nào (trong ví dụ của tôi là phiên bản 3.1.1 được sử dụng).

Kết nối jQuery với các trang trên trang web của bạn từ các nguồn bên ngoài

Phương pháp này tốt vì thư viện được kết nối từ trang web và không nằm trên ổ cứng của bạn. Điều này đặc biệt đúng khi số lượng lớn dự án nhỏ và cho việc học tập.

Phương thức kết nối này được gọi là “Kết nối với CDN”. Mạng phân phối nội dung, hay thường được gọi là CDN (Mạng phân phối nội dung), là mạng lưới các máy chủ trên toàn thế giới. Chúng giúp cải thiện hiệu suất của máy chủ web và giảm tải cho lưu lượng truy cập của bạn.

Các CDN phổ biến nhất để kết nối jQuery:

Tôi thường sử dụng kết nối từ Google Developers. Một số đoạn mã đã được chuẩn bị sẵn cho chúng tôi trên trang dự án; chỉ cần sao chép dòng của đoạn chúng tôi cần và đưa nó vào tệp. Với phương thức kết nối này, mã sẽ trông như thế này:

Tiêu đề trang web

< ! DOCTYPE html >

< html >

< head >

< meta charset = "utf-8" >

< title >Tiêu đề trang web< / title >

< / head >

< body >

< / body >

< / html >

Lợi thế phương pháp này, có phải nhiều trang web kết nối jQuery thông qua API Google, điều đó có nghĩa là có khả năng cao thư viện này đã có trong bộ đệm trình duyệt của người dùng và nó sẽ không được tải lần thứ hai.

Kết nối jQuery với WordPress

jQuery được tự động đưa vào WordPress, do đó không cần phải đưa các thư viện từ các phiên bản khác theo cách thủ công. Điều này xảy ra trong mẫu với sử dụng php mã số:

Điều này sẽ tạo ra một chuỗi kết nối jQuery bên trong thẻ HEAD.

Tại thời điểm viết bài, WordPress đi kèm với jQuery v1.12.4, nhưng như bạn có thể thấy, phiên bản của thư viện này rất khác so với phiên bản có trong các ví dụ trên. Có thể kết nối phiên bản mới nhất của thư viện nhưng có khả năng xảy ra xung đột.

Để tránh xung đột nhưng vẫn sử dụng phiên bản thư viện cần thiết, bạn cần sử dụng đúng cách Các kết nối jQuery trong tệp tin.php.