JQuery là gì?
Em đang học chuyên sâu vô JavaScript. Em có gặp phải jQuery. Anh chị nào biết giải thích giùm em jQuery là gì? Cách sử dụng jQuery như thế nào? Ưu điểm của jQuery là gì vậy ạ? Em cảm ơn ạ
Nếu bạn quan tâm đến hoặc bắt đầu trở thành một nhà phát triển web, lập trình viên. Và một trong những ngôn ngữ lập trình đầu tiên mà bạn cần phải học là JavaScript (một ngôn ngữ mã hóa dùng để xây dựng nội dung web động như tính năng động, các hình thức tương tác, và cuộn video). Nhưng nếu bạn đang học JavaScript (JS), bạn cũng cần làm quen với một công cụ liên quan đến JS có tên là jQuery.
JQuery thuộc JavaScript. Như được trích dẫn trên trang web chính thức của jQuery mang lại nhiều lợi ích giúp đỡ lập trình viên dùng JavaScript nhanh và gọn, giúp đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt hình và tương tác Ajax để phát triển web nhanh chóng.
Vậy thực sự jQuery là gì? Tại sao nó lại phục tốt cho quá trình viết code? Tất cả sẽ được giải đáp dưới đây và mình sẽ trả lời 1 số câu hỏi mà nhiều bạn đặt ra khi muốn sử dụng jQuery.
JQuery là gì?
jQuery là một thư viện JavaScript. Điều đó có nghĩa là, nó được xây dựng bằng JavaScript, nó chấp nhận các phương thức và chức năng Javascript. Nhưng, jQuery có thể làm nhiều hơn trong một dòng mã so với JavaScript có thể làm trong toàn bộ chức năng. Điều này rút ngắn thời gian phát triển và làm cho công việc của chúng ta dễ dàng hơn.
JQuery viết ít làm nhiều hơn? Bởi vì nhiều tác vụ phổ biến đòi hỏi nhiều dòng mã JavaScript để thực hiện và liên kết chúng thành các phương thức code bất cứ khi nào cần. Nó cũng rất hữu ích để đơn giản hóa rất nhiều thứ phức tạp từ JavaScript, như AJAX và thao tác DOM.
JQuery làm cho mọi thứ như chuyển đổi và thao tác tài liệu HTML, hoạt ảnh, xử lý sự kiện và AJAX trở nên rất đơn giản với API dễ sử dụng, hoạt động trên nhiều loại trình duyệt khác nhau.
Mục đích chính của jQuery là cung cấp cách sử dụng JavaScript dễ dàng hơn trên trang web của bạn để làm cho nó hoạt động tương tác với nhau và hấp dẫn hơn. Nó cũng được sử dụng để thêm hình ảnh động.
Các tính năng của jQuery
- Thao tác HTML
- Thao tác DOM: Bạn có thể thao tác các phần tử DOM bằng các hàm jQuery tích hợp khác nhau. Ví dụ: thêm hoặc xóa các thành phần, sửa đổi nội dung html, lớp css, v.v.
- Lựa chọn phần tử DOM: jQuery cung cấp Bộ chọn để truy xuất phần tử DOM dựa trên các tiêu chí khác nhau như tên thẻ, id, tên lớp css, tên thuộc tính, giá trị, phần tử thứ n trong phân cấp, v.v.
- Thao tác CSS
- Hiệu ứng và hoạt hình: Bạn có thể áp dụng các hiệu ứng đặc biệt cho các yếu tố DOM như hiển thị hoặc ẩn các yếu tố, mờ dần, hiệu ứng trượt, hoạt hình, v.v.
- Tiện ích
- AJAX: jQuery cũng bao gồm các hàm AJAX dễ sử dụng để tải dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang.
- Phương thức sự kiện: Thư viện jQuery bao gồm các hàm tương đương với các sự kiện DOM như click, dblclick, mouseenter, mouseleave, Blur, keyup, keydown, v.v. Các hàm này tự động xử lý các sự cố của trình duyệt chéo.
- Phân tích cú pháp JSON
- Khả năng mở rộng thông qua các trình cắm
- Hỗ trợ nhiều trình duyệt: Thư viện jQuery tự động xử lý các sự cố của trình duyệt chéo, do đó người dùng không phải lo lắng về vấn đề này. jQuery hỗ trợ IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+.
Tại sao nên sử dụng jQuery?
Đôi khi, một câu hỏi có thể đặt ra là sự cần thiết của jQuery là gì hoặc nó có gì khác biệt khi sử dụng jQuery thay vì AJAX / JavaScript? JQuery là sự thay thế của AJAX và JavaScript? Đối với tất cả những câu hỏi này, bạn có thể có câu trả lời sau đây.
JQuery rất nhỏ gọn và jQuery giúp lập trình JavaScript nhanh hơn và hiệu quả hơn, giúp tăng năng suất của nhà phát triển bằng cách cho phép họ đạt được chức năng UI quan trọng bằng cách viết một lượng mã rất nhỏ.
- Nó giúp cải thiện hiệu suất của ứng dụng
- Nó giúp phát triển hầu hết các trang web tương thích trình duyệt
- Nó giúp thực hiện chức năng quan trọng liên quan đến UI mà không cần viết hàng trăm dòng mã
- Nó nhanh
- Nó có thể mở rộng – jQuery có thể được mở rộng để thực hiện theo tùy chỉnh
Các ưu điểm khác của jQuery là:
- Dễ học: jQuery rất dễ học vì nó hỗ trợ mã hóa theo kiểu JavaScript tương tự.
- Viết ít làm nhiều hơn: jQuery cung cấp một bộ tính năng phong phú giúp tăng năng suất của các nhà phát triển bằng cách viết mã ít hơn và dễ đọc hơn.
- Tài liệu API xuất sắc: jQuery cung cấp tài liệu API trực tuyến tuyệt vời.
- Hỗ trợ nhiều trình duyệt: jQuery cung cấp hỗ trợ đa trình duyệt tuyệt vời mà không cần viết thêm mã.
- Không phô trương: jQuery không phô trương cho phép tách các mã html và mã jQuery.
- Nó sử dụng hầu hết các tính năng mới của trình duyệt mới.
Vì vậy, bạn có thể nói rằng trong số rất nhiều công cụ trên JavaScript, jQuery là phổ biến nhất và có khả năng mở rộng nhất. Nhiều công ty lớn nhất trên web cũng sử dụng jQuery.
Một số công ty này là:
- Microsoft
- IBM
- Netflix
Sự khác biệt chính giữa JavaScript và jQuery là gì?
JavaScript và jQuery được đề cập thay thế cho nhau, có thể gây nhầm lẫn khi tách hai phần này. Chỉ cần nhớ: JavaScript là ngôn ngữ lập trình độc lập, trong khi jQuery là tập hợp mã JavaScript (không phải ngôn ngữ riêng).
Để hiểu nhanh về sự khác biệt (và để minh họa chính xác những gì jQuery sử dụng), hãy xem xét những điều sau đây. Giả sử bạn muốn người dùng nhận được một lời cảm ơn vì đã đăng ký thông báo xác nhận của người dùng khi họ tự thêm vào danh sách email của trang web của bạn. Mã hóa tay mà chức năng sử dụng JavaScript sẽ trông giống như thế này:
| window.onload = initAll; function initAll() { document.getElementById(“submit”).onclick = submitMessage; } function submitMessage() { var greeting = document.getElementById(“name”).getAttribute(“value”); document.getElementById(“headline”).innerHTML = “Thank you for joining our email list,” + greeting; return false; } |
Rất nhiều mã cho một chức năng cơ bản. Tuy nhiên, bằng cách sử dụng các đoạn mã jQuery, bạn sẽ đơn giản hóa nó:
| $(“#submit”).click(function () { var greeting = $(“#name”).val(); $(“#headline”).html(“Thank you for joining our email list, ” + greeting); return false; }); |
Tập lệnh jQuery dễ quản lý hơn sẽ gửi một yêu cầu đến thư viện jQuery mà bạn có thể cài đặt trên trang web của riêng mình hoặc sử dụng qua Google bằng cách bao gồm một liên kết jQuery đến các thư viện được lưu trữ trong mã của Google:
| <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> </head> |
jQuery sau đó đáp ứng yêu cầu của bạn và thực hiện chức năng được yêu cầu cho người dùng của bạn. Cách tiếp cận (JavaScript hoặc jQuery) sẽ tạo ra một thông báo cảm ơn của bạn, nhưng một tập lệnh jQuery sẽ đưa bạn đến đó nhanh hơn và hiệu quả hơn. Hơn nữa, bạn sẽ có thể sử dụng lại hàm jQuery này bất cứ khi nào có cùng nhu cầu trong dự án phát triển web này hoặc bất kỳ dự án phát triển web nào khác mà bạn làm việc.
Bạn nên biết gì trước khi bắt đầu học jQuery?
Khuyên bạn nên tìm hiểu những điều cơ bản về thiết kế web trước khi bắt đầu học jQuery. Nên học HTML, CSS và JavaScript trước.
Tải xuống jQuery từ đâu?
Tệp JavaScript jQuery có thể được tải xuống từ trang web chính thức của jQuery.
Làm thế nào để sử dụng jQuery?
Tải tệp jQuery cục bộ
| <script type=”text/javascript” src=”jQuery-1.4.1-min.js”></script> |
Đánh dấu thẻ được giữ trong <head></head> của trang web bạn.
1. Có cần đưa thẻ jQuery vào trong trang Master / trang cơ sở / trang mẫu và trang nội dung không?
Không, về cơ bản trang chủ / trang cơ sở / trang mẫu giúp tạo bố cục nhất quán cho trang trong ứng dụng. Trong trường hợp bạn đã giới thiệu tệp jQuery trong trang chính / trang cơ sở / trang mẫu tạo ra kết xuất tệp trong trình duyệt, bạn không cần phải giới thiệu tệp jQuery trong trang nội dung nữa.
Tóm lại, không nên có nhiều hơn một thẻ <script> có tham chiếu tệp jQuery trong mã nguồn của trang web được hiển thị trong trình duyệt.
2. Sự khác biệt giữa jQuery-xxxjs và jQuery.xxx min.js là gì?
Về chức năng, không có sự khác biệt giữa jQuery-xxxjs và jQuery-xxx-min.js (còn được gọi là phiên bản rút gọn). Tuy nhiên, điều này có thể đóng một vai trò quan trọng trong hiệu suất của trang web.
3. Nó ảnh hưởng đến hiệu suất như thế nào?
Kích thước tệp jQuery-1.4.4.js là 178 KB so với phiên bản rút gọn của nó jQuery-1.4.4-min.js chỉ có kích thước 76,7 KB. Vì vậy, khi trang của bạn tải không sử dụng phiên bản rút gọn, nó sẽ tải tệp 178 KB mất nhiều thời gian hơn để tải hơn 76,7 KB.
4. Phiên bản nào của tệp jQuery nên được sử dụng?
Trong hầu hết các bản phát hành gần đây cho đến nay, chức năng cốt lõi của jQuery vẫn giữ nguyên, tuy nhiên một số tính năng hay hơn được thêm vào. Tốt nhất, bạn nên sử dụng các tệp jQuery mới nhất có sẵn trên trang web jQuery.com. Bằng cách này, bạn đảm bảo rằng chức năng trước đó của bạn sẽ vẫn hoạt động và bạn có thể sử dụng các tính năng mới có sẵn.
Tải jQuery từ CDN
CDN là gì?
CDN viết tắt của Content Distribution Network – Mạng phân phối nội dung. Là một nhóm các máy tính đặt ở các điểm khác nhau được kết nối với mạng có chứa các bản sao của tập tin dữ liệu để tối đa hóa băng thông trong việc tiếp cận các dữ liệu. Trong CDN, một máy khách truy cập một bản sao dữ liệu gần vị trí máy khách hơn là tất cả các máy khách truy cập từ một máy chủ cụ thể. Điều này giúp đạt được hiệu suất tốt hơn của việc truy xuất dữ liệu của khách hàng.
Có hai CDN hàng đầu có sẵn để lưu trữ các tệp jQuery.
Microsoft – Tải jQuery từ Microsoft AJAX CDN
Tệp jQuery có thể được tải từ Microsoft AJAX CDN.
<script type=”text/javascript” language=”Javascript” src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js”></script> |
Google – Tải jQuery từ API thư viện của Google
Tệp jQuery có thể được tải từ Google CDN.
<script type=”text/javascript” language=”Javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> </script> |
Tại sao phải tải tệp jQuery từ CDN?
Bạn có thể hỏi rằng nếu tại sao có thể tải tệp jQuery từ máy chủ thì tại sao lại tải nó từ CDN.
Câu trả lời là hợp lý và rất đơn giản. Hành vi trình duyệt là bất cứ khi nào nó tải bất kỳ trang web nào, nó sẽ giữ các tệp liên quan (ví dụ: tệp JavaScript, tệp CSS và Hình ảnh) được sử dụng cho trang đó vào bộ đệm của nó (còn được gọi là lịch sử).
Khi lần tới người dùng duyệt bất kỳ trang web nào, trình duyệt chỉ tải những tệp mới hoặc đã sửa đổi và không có sẵn trong bộ đệm hoặc lịch sử của trình duyệt. Bằng cách này, trình duyệt cải thiện hiệu suất của nó và tải trang.
Khả năng là nếu ngày càng có nhiều trang web sử dụng CDN, người dùng có thể đã duyệt một số trang web khác đang sử dụng tệp jQuery CDN và tệp đó có thể có trong bộ đệm của trình duyệt; do đó, khi người dùng duyệt trang của bạn và bạn cũng đang sử dụng tệp CDN, phiên bản cũ hơn của tệp jQuery sẽ được sử dụng. Theo cách này, trang của bạn sẽ tải nhanh hơn vì trình duyệt sẽ không phải tải lại tệp jQuery cho trang của bạn.
Những lợi ích như sau:
- Tải trang nhanh hơn vì không cần tải xuống tệp jQuery
- Lưu băng thông của bạn vì tệp jQuery không được tải từ máy chủ của bạn
- Có thể mở rộng – nói chung CDN đặt các tệp này trên các máy chủ được đặt tại các vị trí địa lý khác nhau trên thế giới để chúng tải nhanh hơn bất kể người dùng đang duyệt trang của bạn từ đâu.
Làm cách nào để tải tệp jQuery cục bộ trong trường hợp CDN không khả dụng?
Đôi khi, CDN mà bạn đã sử dụng để tải tệp jQuery không khả dụng (điều này hiếm khi xảy ra, tuy nhiên mọi thứ đều có thể, phải không?); trong trường hợp đó, bạn nên tải tệp jQuery cục bộ có sẵn trên máy chủ của mình để tất cả các chức năng liên quan đến jQuery vẫn hoạt động trên trang của bạn.
Viết các dòng mã sau:
| <!– START – jQuery Reference –> <script type=”text/javascript” language=”Javascript”src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js”></script> <script type=’text/javascript’>//<![CDATA[ if (typeof jQuery == ‘undefined’) { document.write(unescape(“%3Cscript src=’/Script/jquery-1.4.1.min.js’ type=’text/javascript’ %3E%3C/script%3E”)); }//]]> </script> <!– END – jQuery Reference –> |
Làm cách nào để thực hiện mã jQuery?
Có hai cách bạn có thể muốn thực hiện mã jQuery.
- Khi tải trang, hãy thực thi mã jQuery:
<script language=”javascript” type=”text/javascript”>
$(function () {
$(“#div1”).css(“border”, “2px solid green”);
});
</script>hoặc là:
<script language=”javascript” type=”text/javascript”>
$(“#div1”).css(“border”, “2px solid green”);
</script>Lợi ích của việc thực hiện mã jQuery theo cách này là không phải chờ toàn bộ trang tải hoàn toàn, vì vậy trong trường hợp bạn muốn người dùng thấy các hiệu ứng ngay khi các phần tử tương ứng được tải, bạn có thể sử dụng phần tử này.
Tuy nhiên, nhược điểm là nếu phần tử mà jQuery phải thực hiện chưa được tải, thì nó sẽ bị lỗi hoặc bạn sẽ không nhận được kết quả mong muốn. Vì vậy, trong khi sử dụng cách thực hiện mã jQuery này, bạn sẽ phải đảm bảo rằng phần tử mà bạn muốn làm việc với jQuery được tải trước tiên (bạn có thể đặt mã jQuery ngay sau phần tử HTML của mình).
- Chỉ thực hiện jQuery khi các đối tượng DOM hoàn chỉnh (trang hoàn chỉnh đã được tải). Bạn sẽ phải bọc mã của mình trong hàm . Ready.
<script language=”javascript” type=”text/javascript”>
$(document).ready(function () {
$(“#div1”).css(“border”, “2px solid green”);
});
</script>
Đây là cách tốt hơn và an toàn hơn để thực hiện Query. Điều này đảm bảo rằng mã jQuery sẽ chỉ thực hiện nếu trang hoàn chỉnh đã được tải trong trình duyệt để bạn yên tâm rằng người dùng sẽ không thấy bất kỳ hành vi không mong muốn nào trên trang.
