JavaScript và jQuery: Những điểm khác biệt chính bạn cần biết

Chúng tôi đã biết JavaScript và JQuery trong một vài năm. JavaScript được phát minh sớm hơn jQuery. Cả hai đều mạnh mẽ và được sử dụng trong phát triển web và được sử dụng cho cùng một mục đích tức là làm cho trang web tương tác và động. Nói cách khác, chúng mang lại sức sống cho các trang web. Mọi người có thể thắc mắc rằng nếu chúng được sử dụng cho cùng một mục đích thì tại sao lại có hai khái niệm riêng biệt? Trong bài viết JavaScript vs jQuery này, chúng ta sẽ tìm hiểu cái nào tốt hơn cái nào khác theo trình tự sau:

• JavaScript: Một ngôn ngữ mạnh mẽ trong phát triển web
• JQuery: Một thư viện được phát triển từ JavaScript
• Tại sao JQuery được tạo ra và các khả năng đặc biệt của JQuery là gì
• Sự khác biệt giữa JavaScript và JQuery với các ví dụ
  • Thêm JavaScript và JQuery vào tài liệu HTML của chúng tôi
  • DOM Traversal and Manipulation
  • Xử lý sự kiện
  • Cuộc gọi Ajax
  • Hoạt hình

JavaScript: Một ngôn ngữ mạnh mẽ trong phát triển web

JavaScript là một ngôn ngữ kịch bản được sử dụng để thêm tính tương tác vào các trang web của chúng tôi. Nó là một trong ba công nghệ cốt lõi cùng với HTML và CSS được sử dụng để tạo các trang web. Trong khi HTML và CSS xác định cấu trúc của trang web và giao diện / kiểu dáng của các trang web, JavaScript được sử dụng để làm cho trang web động bằng cách thêm tính tương tác vào nó, có nghĩa là với JavaScript, chúng ta có thể thêm một số mã để nhấp chuột, di chuột qua và các sự kiện trên trang web và nhiều hơn nữa.

JavaScript được hỗ trợ bởi tất cả các trình duyệt web và các trình duyệt web có một công cụ JavaScript tích hợp để xác định mã JavaScript và làm việc với nó. Do đó, JavaScript chủ yếu là một ngôn ngữ phía máy khách. Nó là một ngôn ngữ có thể được sử dụng như một ngôn ngữ thủ tục cũng như một ngôn ngữ hướng đối tượng dựa trên nguyên mẫu. Khi chúng tôi sử dụng JavaScript chính, chúng tôi đang làm việc với ngôn ngữ thủ tục trong khi JavaScript nâng cao sử dụng các khái niệm hướng đối tượng.

Hãy tiếp tục với JavaScript và jQuery của chúng tôi và hiểu thư viện được phát triển từ JavaScript.

jQuery: Một thư viện được phát triển từ JavaScript

Trong nhiều năm, JavaScript đã trở thành một ngôn ngữ mạnh mẽ để phát triển web. Có rất nhiều thư viện và khung công tác được xây dựng dựa trên JavaScript. Các thư viện và khuôn khổ này được phát triển để mở rộng khả năng của JavaScript, làm được nhiều việc với nó và cũng để giúp công việc của nhà phát triển dễ dàng hơn.

jQuery là một trong những thư viện JavaScript được xây dựng từ nó. Đây là thư viện JavaScript phổ biến nhất do John Resign phát minh và được phát hành vào tháng 1 năm 2006 tại BarCamp NYC. jQuery miễn phí, một thư viện mã nguồn mở, được cấp phép theo Giấy phép MIT. Điều này có một tính năng mạnh mẽ là khả năng tương thích trên nhiều trình duyệt. Nó có thể dễ dàng xử lý các vấn đề trên nhiều trình duyệt mà chúng ta có thể gặp phải với JavaScript. Do đó, nhiều nhà phát triển sử dụng jQuery để tránh các vấn đề tương thích giữa các trình duyệt.

Bây giờ, hãy tiếp tục với blog JavaScript và jQuery của chúng tôi và xem lý do jQuery được tạo ra.

Tại sao jQuery được tạo ra và các khả năng đặc biệt của jQuery là gì?

Trong JavaScript, chúng ta phải viết rất nhiều mã cho các hoạt động cơ bản trong khi với jQuery, các hoạt động tương tự có thể được thực hiện với một dòng mã. Do đó, các nhà phát triển thấy làm việc với jQuery dễ dàng hơn so với JavaScript.

• Mặc dù JavaScript là ngôn ngữ cơ bản mà từ đó jQuery đã phát triển, jQuery làm cho việc xử lý sự kiện, thao tác DOM, các cuộc gọi Ajax dễ dàng hơn nhiều so với JavaScript. jQuery cũng cho phép chúng tôi thêm các hiệu ứng động trên trang web của chúng tôi, vốn tốn rất nhiều công sức và các dòng mã bằng JavaScript.
• jQuery có các plugin tích hợp để thực hiện thao tác trên trang web. Chúng tôi chỉ cần bao gồm hoặc nhập plugin vào trang web của mình để sử dụng nó. Vì vậy, các plugin cho phép chúng ta tạo ra các hình ảnh động và tương tác hoặc hiệu ứng trừu tượng.
• Chúng tôi cũng có thể tạo plugin tùy chỉnh của mình với jQuery. Nếu chúng tôi yêu cầu hoạt ảnh được thực hiện trên một trang web theo một cách nhất định, chúng tôi có thể phát triển một plugin theo yêu cầu và sử dụng nó trên trang web của chúng tôi.
• jQuery cũng có một thư viện tiện ích giao diện người dùng cấp cao. Thư viện tiện ích con này có rất nhiều plugin mà chúng tôi có thể nhập trên trang web của mình và sử dụng nó để tạo các trang web thân thiện với người dùng.

Hãy hiểu sự khác biệt.

JavaScript so với jQuery

Tiếp tục với sự khác biệt giữa JavaScript và jQuery với Ví dụ.

JavaScript so với jQuery với các ví dụ

Hãy xem xét các ví dụ.

Thêm JavaScript và jQuery trong tài liệu HTML của chúng tôi

JavaScript được thêm trực tiếp vào tài liệu HTML bên trong thẻ hoặc tệp JavaScript bên ngoài có thể được thêm vào tài liệu HTML bằng cách sử dụng thuộc tính src.
Được viết trực tiếp bên trong thẻ script:

ansible vs con rối vs đầu bếp

alert ('Hộp cảnh báo này được gọi với sự kiện onload')

Để sử dụng jQuery, chúng tôi tải xuống tệp từ trang web của nó và tham khảo đường dẫn của tệp jQuery đã tải xuống trong thuộc tính src của thẻ SCRIPT hoặc chúng tôi có thể lấy trực tiếp từ CDN (Mạng phân phối nội dung).

Sử dụng CDN :

Hãy hiểu về thao tác và truyền tải DOM

DOM Traversal and Manipulation

Trong JavaScript:

Chúng ta có thể chọn một phần tử DOM trong JavaScript bằng phương thức document.getElementById () hoặc bằng phương thức document.querySelector ().

var mydiv = document.querySelector (“# div1”)

hoặc là

document.getElementById (“# div1”)

Trong jQuery:

Ở đây, chúng ta sẽ phải chỉ sử dụng biểu tượng $ với bộ chọn trong ngoặc.

$ (selector) $ (“# div1”) - Bộ chọn là id 'div1' $ (“. div1”) - Bộ chọn là một lớp 'div1' $ (“p”) - Bộ chọn là đoạn trong Trang html

Trong câu lệnh trên, $ là một ký hiệu được sử dụng để truy cập jQuery, bộ chọn là một phần tử HTML.

Thêm kiểu trong JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Thêm kiểu trong jQuery:

$ ('# myDiv'). css ('background-color', '# FFF')

Bộ chọn #myDiv đề cập đến mã định danh ‘myDiv’

Thao tác và lựa chọn phần tử DOM trong jQuery ngắn gọn hơn nhiều so với JavaScript.

Tiếp tục với việc xử lý sự kiện.

Xử lý sự kiện

Trong JavaScript, chúng tôi chọn một phần tử HTML:

document.getElementById ('# button1'). addEventListener ('click ', myCallback) function myCallback () {console (' inside myCallback function ')}

Ở đây phương thức getElementById () được sử dụng để chọn một phần tử theo id của nó, sau đó chúng ta sử dụng phương thức addEventListener () để thêm một Event Listener vào sự kiện. Trong ví dụ này, chúng tôi thêm hàm myCallback làm trình lắng nghe cho sự kiện ‘nhấp chuột’.

Chúng ta cũng có thể sử dụng một hàm ẩn danh trong ví dụ trên:

document.getElementById ('# button1'). addEventListener ('click ', function () {console.log (' bên trong hàm ')})

Sự kiệnListener có thể được xóa bằng cách sử dụng phương thức removeEventListener ()

document.getElementById (“# button1”). removeEventListener (“click”, myCallback)

Trong jQuery

jQuery có các sự kiện được xác định trước cho hầu hết các hành động DOM. Chúng ta có thể sử dụng sự kiện jQuery cụ thể cho một hành động.

$ (“P”). Click (function () {// click action})

Các ví dụ khác là:

$ (“# Button1”). Dblclick (function () {// hành động cho sự kiện nhấp đúp vào phần tử html có id ‘button1’}

Phương thức JQuery ‘on’ được sử dụng để thêm một hoặc nhiều sự kiện vào phần tử DOM.

$ (“# Button1”). On (“click”, function () {// action here})

Chúng ta có thể thêm nhiều sự kiện và nhiều trình xử lý sự kiện với phương thức on.

cảnh báo trong javascript là gì

$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})

Hai hoặc nhiều sự kiện có thể có cùng một trình xử lý như sau:

$ (“# Button1”). On (“click dblclick”, function () {// action here})

Do đó, chúng ta thấy rằng với mã ngắn hơn và ngắn gọn, việc xử lý sự kiện trong jQuery dễ dàng hơn trong JavaScript.

Tiếp tục với Cuộc gọi Ajax.

Cuộc gọi Ajax

Trong JavaScript

JavaScript đã sử dụng một đối tượng XMLHttpRequest để gửi một yêu cầu Ajax đến một máy chủ. XMLHttpRequest có một số phương thức để thực hiện lệnh gọi Ajax. Hai phương thức phổ biến là open (method, URL, async, user, PSW), send () và send (string).
Trước tiên, hãy tạo một XMLHttpRequest:

var xhttp = new XMLHttpRequest () Sau đó, sử dụng đối tượng này để gọi phương thức mở: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Phương thức mở thực hiện một yêu cầu nhận đến một máy chủ / vị trí, true chỉ định rằng yêu cầu là không đồng bộ. Nếu giá trị là false, có nghĩa là yêu cầu là đồng bộ.

Đưa ra yêu cầu đăng bài:

var xhttp = new XMLHttpRequest () Sau đó, sử dụng đối tượng này để gọi phương thức mở và thực hiện yêu cầu đăng bài: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Để đăng dữ liệu với yêu cầu, chúng tôi sử dụng phương thức setRequestHeader của xhttp để xác định loại dữ liệu sẽ được gửi và phương thức gửi sẽ gửi dữ liệu theo các cặp khóa / giá trị:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

Trong jQuery

jQuery có một số phương thức có sẵn để thực hiện các cuộc gọi Ajax. Với các phương pháp này, chúng tôi có thể gọi bất kỳ dữ liệu nào từ máy chủ và cập nhật một phần của trang web với dữ liệu. Các phương thức jQuery giúp cho việc gọi Ajax trở nên dễ dàng.
Phương thức jQuery load (): Phương thức này tìm nạp dữ liệu từ URL và tải dữ liệu vào bộ chọn HTML.
$ (“P”). Tải (URL, dữ liệu, gọi lại)
URL là vị trí được gọi cho dữ liệu, tham số dữ liệu tùy chọn là dữ liệu (cặp khóa / giá trị) mà chúng tôi muốn gửi cùng với lệnh gọi và tham số tùy chọn 'callback' là phương thức chúng tôi muốn thực thi sau khi tải đã hoàn thành.

Phương thức jQuery $ .get () và $ .post (): Phương thức này tìm nạp dữ liệu từ một URL và tải dữ liệu vào bộ chọn HTML.
$ .get (URL, gọi lại)
URL là vị trí được gọi cho dữ liệu và lệnh gọi lại là phương thức chúng tôi muốn thực hiện sau khi tải xong.

$ .post (URL, dữ liệu, gọi lại)
URL là vị trí được gọi cho dữ liệu, dữ liệu là cặp khóa / giá trị / s mà chúng ta muốn gửi cùng với lệnh gọi và lệnh gọi lại là phương thức chúng ta muốn thực hiện sau khi tải xong. Ở đây, dữ liệu và các tham số gọi lại là tùy chọn.

Các lệnh gọi jQuery Ajax ngắn gọn hơn JavaScript. Trong JavaScript, chúng tôi đang sử dụng một đối tượng XMLHTTPRequest, trong jQuery, chúng tôi không phải sử dụng một đối tượng như vậy.

Tiếp tục với Animation.

Hoạt hình

Trong JavaScript

JavaScript không có một hàm hoạt ảnh cụ thể như hàm jQuery animate (). Trong JavaScript, hiệu ứng hoạt ảnh chủ yếu đạt được bằng cách thao tác kiểu của phần tử hoặc bằng cách sử dụng các thuộc tính chuyển đổi, dịch hoặc hoạt ảnh CSS. JavaScript cũng sử dụng các phương thức setInterval (), clearInterval (), setTimeout () và clearTimeout () cho các hiệu ứng hoạt hình.

setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'xoay ( 20deg) '}

Hoạt ảnh trong JavaScript chủ yếu là thao tác các thuộc tính CSS.

Trong jQuery

jQuery có nhiều phương thức sẵn có để thêm hoạt ảnh hoặc hiệu ứng trên các phần tử HTML. Hãy kiểm tra một vài trong số chúng.
Phương thức animate (): Phương thức này được sử dụng để thêm hoạt ảnh trên một phần tử.

$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})

Phương thức show (): Phương thức này được sử dụng để hiển thị một phần tử từ trạng thái ẩn.

$ ('# button1'). nhấp vào (function () {$ ('# div1'). show ()})

Phương thức hide (): Phương thức này được sử dụng để ẩn một phần tử khỏi trạng thái hiển thị.

$ ('# button1'). nhấp vào (function () {$ ('# div1'). hide ()})

jQuery có các phương pháp riêng để tạo hoạt ảnh và hiệu ứng trong trang web.

phần mềm tốt nhất để lập trình java

Tóm lại, JavaScript là một ngôn ngữ để phát triển web, jQuery là một thư viện có nguồn gốc từ JavaScript. JavaScript và jQuery có tầm quan trọng riêng trong việc phát triển web.

Bây giờ bạn đã biết về Vòng lặp JavaScript, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của “JavaScript vs jQuery” và chúng tôi sẽ liên hệ lại với bạn.