jQuery so với JavaScript | Có gì khác biệt?

0
8

Sự khác biệt giữa JavaScript và jQuery là gì? Để hiểu sự khác biệt, bạn cần xem xét một chút mã.

Bây giờ, đừng lo lắng nếu bạn không hiểu mã. Điểm chính của việc này là xem cách jQuery và JavaScript làm điều tương tự theo những cách khác nhau và điều gì làm cho jQuery dễ dàng hơn rất nhiều cho một số thứ bạn muốn làm. Tin tưởng chúng tôi. Bạn sẽ ổn thôi.

Kiến thức cơ bản về JavaScript

Vì vậy, giả sử chúng tôi đã tạo một trang web đơn giản – nó chỉ nói “Xin chào” và “Tạm biệt” (không phải là một trang web quá mời gọi, nhưng nó chỉ ở đây để nêu rõ) – và chúng tôi muốn có một chút tương tác trong đó. Vì vậy, trang web của chúng tôi được xây dựng bằng ba ngôn ngữ giao diện người dùng cơ bản. Bạn sẽ có một chút HTML, một chút CSS và một chút JavaScript.

Nếu bạn đã xem video trước đó của chúng tôi về JavaScript là gì , bạn biết nó ở đó để thêm các yếu tố tương tác vào trang web. Nó có thể là các yếu tố tương tác phức tạp, như một “nút” có thể nhấp hoặc những thứ đơn giản hơn như thay đổi màu văn bản khi bạn nhấp vào nó. Tất cả những điều đó đều có thể làm được vì các ngôn ngữ như jQuery và JavaScript.

Sự khác biệt giữa JavsScript với JQuery

Ví dụ về JavaScript so với Ví dụ về jQuery

Để thấy sự khác biệt giữa chúng, hãy xem một ví dụ đơn giản về một ứng dụng của chúng: làm cho một dòng văn bản thay đổi màu sắc. Nếu chúng ta muốn làm điều đó bằng JavaScript, thì mã sẽ trông như thế nào:

var d = document.getElementsByClassName("goodbye"); 
var i;
for (i = 0; i < d.length; i++) {
d[i].className = d[i].className + " selected";
}

Nếu bạn không viết nhiều mã, bạn sẽ được tha thứ vì đã lạc vào tất cả những điều đó! Đó là rất nhiều mã cho một hành động và nếu bạn là người mới viết mã, nó trông giống như năm dòng vô nghĩa.

Hành động tương tự trong jQuery trông giống như sau:

$(".goodbye").addClass("selected");

Bạn có thể thấy một dòng có nội dung “lấy lớp này và thêm lớp bổ sung này từ CSS vào đó”. Về cơ bản, nó thực hiện tất cả các bước bạn đã thấy trong JavaScript và biến chúng thành một lệnh.

Bạn có thể nghĩ về nó như thế này. Khi bạn phải yêu cầu ai đó thực hiện một công việc có nhiều bước – như pha một bình cà phê – bạn không yêu cầu họ làm đi làm lại các bước, bạn chỉ nói, “Này, bạn có thể pha một ít cà phê không? ”

Đó là jQuery. Một nhóm các nhà phát triển nói, “Hãy nhìn xem. Có những điều này chúng tôi phải làm mọi lúc trong JavaScript, chúng tôi phải mất năm dòng phức tạp mỗi lần chúng tôi phải làm điều đó. ” Và họ không muốn viết năm dòng mỗi lần, vì vậy họ đã nghĩ ra cách để làm điều đó chỉ trong một hoặc hai dòng.

Bắt đầu với jQuery

Đây là những gì chúng ta thấy khi nhìn vào jQuery. Chúng tôi thấy một danh sách các tiêu đề quen thuộc – Animate, Delay, Fade-In – tất cả những thứ này sẽ tốn rất nhiều dòng mã trong JavaScript và bây giờ bạn có thể chỉ cần nhấp vào chúng và viết chúng ra có thể là năm hoặc sáu dòng . Tóm lại đó là jQuery. Đó là tất cả các chức năng của JavaScript, nhưng nó đơn giản hóa quá trình này rất nhiều.

Để bắt đầu với jQuery, bạn chỉ cần nhập một đoạn mã này vào tiêu đề của dự án:

<script src = "https://code.jquery.com/jquery-3.4.1.js" Liem = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU =" crossorigin = "hidden"> </script>

Nó giống như trong The Matrix khi Neo (hay còn gọi là Keanu Reeves) được truyền kiến ​​thức được tải lên não của anh ấy và anh ấy thức dậy và tất cả giống như “Tôi biết kung fu.”

Bằng cách nhập dòng jQuery này vào đầu mã của bạn, mã của bạn đột nhiên giống như “Tôi biết hoạt ảnh nghĩa là gì” và “Tôi biết AddClass hoạt ảnh nghĩa là gì” với một dòng mã.

Takeaways

  • jQuery là một khung công tác cho phép bạn viết JavaScript nhanh hơn và dễ dàng hơn.
  • Các nhà phát triển của jQuery đã tạo ra nó để cô đọng các tác vụ JavaScript phổ biến thành ít dòng mã hơn.
  • Bạn có thể viết mã các hành động JavaScript phổ biến nhất bằng jQuery (và bạn thực sự có thể xem trang API của chúng để biết danh sách đầy đủ về những gì bạn có thể làm)
  • Để bắt đầu sử dụng jQuery, hãy truy cập trang web https://jquery.com/

Tham khảo khóa học Lập trình Java Fullstack tại NIIT-ICT hà nội

LEAVE A REPLY

Please enter your comment!
Please enter your name here