JQuery là gì? Một số ví dụ về jQuery

JQuery là gì? Một số ví dụ về jQuery

10/04/2021

Có lẽ đối với những bạn là lập trình viên thì sẽ không còn xa lạ gì với jQuery. Vậy đối với những bạn mới bắt đầu tìm hiểu về kiến thức thì sao? Nếu muốn biết rõ hơn về jQuery là gì thì hãy cùng chúng tôi tìm hiểu ngay trong bài viết ngày hôm nay nhé!

jQuery là gì

Các module phổ biến của jQuery

jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn. jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau. Một trong những đối thủ nặng ký của jQuery đó là JS Framework.

  • Ajax – xử lý Ajax
  • Atributes – Xử lý các thuộc tính của đối tượng HTML
  • Effect – xử lý hiệu ứng
  • Event – xử lý sự kiện
  • Form – xử lý sự kiện liên quan tới form
  • DOM – xử lý Data Object Model
  • Selector – xử lý luồng giữa các đối tượng HTML

jQuery Hide and Show

Với jQuery, bạn có thể ẩn và hiển thị các phần tử HTML bằng các phương thức hide() và show():

Ví dụ

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

jQuery Sliding

Với jQuery, bạn có thể tạo hiệu ứng sliding (trượt) trên các phần tử HTML:

  • slideDown()
  • slideUp()
  • slideToggle()

 Ví dụ

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery Animation

Ví dụ

$("button").click(function(){
  $("div").animate({
     left: '250px',
     height: '+=150px',
     width: '+=150px'
  });
});

jQuery Manipulating CSS

Ví dụ

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

Với khái niệm về jQuery cũng như các ví dụ thực tế của nó đã được chúng tôi liệt kê ở trong bài viết hy vọng sẽ giúp bạn hiểu được JQuery và nó cũng sẽ giúp cho bạn trong việc sử dụng JavaScript. Thử xem nhé!

Theo w3schools

Bài viết liên quan
Không có bài viết liên quan
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments