Ẩn hiện các phần tử HTML bằng jQuery

Bài học dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách ẩn hiện các phần tử HTML bằng jQuery, ngoài ra bạn đọc có thể tham khảo một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về Event (sự kiện) trong jQuery.

Để ẩn hiện các phần tử HTML, chúng ta sử dụng các phương thức show() và hide() trong jQuery. Tham khảo tiếp bài học jQuery dưới đây của Taimienphi.vn để tìm hiểu chi tiết các phương thức này nhé.

an hien cac phan tu html bang jquery

Ẩn hiện các phần tử HTML bằng jQuery

 

1. Ẩn hiện các phần tử HTML bằng các phương thức show() và hide() trong jQuery

Như đã đề cập ở trên, để ẩn và hiện các phần tử HTML, chúng ta sử dụng các phương thức show ()hide() trong jQuery.

Phương thức hide() thiết lập display: none cho các phần tử được chọn. Ngược lại, phương thức show() khôi phục các thuộc tính display của tập hợp các phần tử ban đầu là các khối (block), nội tuyến (inline) hoặc khối nội tuyến (inline-block) trước khi display: none được áp dụng.

Ví dụ: ví dụ dưới đây minh họa cách sử dụng các phương thức show() và hide() trong jQuery để ẩn và hiện các phần tử HTML:

an hien cac phan tu html bang jquery

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 2

Ngoài ra chúng ta có thể chỉ định tham số thời gian để ẩn hiện các hiệu ứng ảnh động trong jQuery trong một khoảng thời gian cụ thể.

Độ dài thời gian có thể được chỉ định bằng cách sử dụng một trong chuỗi "slow" hoặc "fast" được xác định trước hoặc tính bằng số mili giây để độ chính xác cao hơn, giá trị càng cao ảnh động càng hiển thị chậm.

Ví dụ: ví dụ dưới đây minh họa cách sử dụng các chuỗi slow và fast để chỉ định thời gian hiển thị ảnh động:

an hien cac phan tu html bang jquery 3

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 4

Lưu ý: Chuỗi "fast" tương đương với khoảng thời gian là 200 mili giây, chuỗi "slow" tương đương với khoảng thời gian là 600 mili giây.

Bên cạnh đó chúng ta cũng có thể chỉ định một hàm callback được thực thi sau khi phương thức show() hoặc hide() hoàn tất, chẳng hạn như trong ví dụ dưới đây:

an hien cac phan tu html bang jquery 5

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 6

2. Ẩn hiện các phần tử HTML bằng phương thức toggle() trong jQuery

Phương thức toggle() trong jQuery hiển thị hoặc ẩn các phần tử theo cách nếu ban đầu phần tử được hiển thị, phần tử đó sẽ bị ẩn, hoặc nếu ban đầu phần tử bị ẩn, thì phần tử đó sẽ được hiển thị.

Ví dụ: trong ví dụ dưới đây chúng ta sẽ sử dụng phương thức toggle() trong jQuery để hiển thị hoặc ẩn các phần tử:

an hien cac phan tu html bang jquery 7

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 8

Tương tự, chúng ta cũng có thể chỉ định tham số thời lượng cho phương thức toggle() để hiển thị ảnh động, giống như các phương thức show() và hide(), chẳng hạn như trong ví dụ dưới đây:

an hien cac phan tu html bang jquery 9

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 10

Ngoài ra chúng ta cũng có thể chỉ định hàm callback cho phương thức toggle ().

Ví dụ: ví dụ dưới đây minh họa cách chỉ định hàm callback cho phương thức toggle ():

an hien cac phan tu html bang jquery 11

Kết quả đầu ra có dạng như dưới đây:

an hien cac phan tu html bang jquery 12

Như vậy bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn cách ẩn hiện các phần tử HTML bằng jQuery. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách tạo trang web bằng jQuery.

https://thuthuat.taimienphi.vn/an-hien-cac-phan-tu-html-bang-jquery-51487n.aspx
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các hiệu ứng Fade in và Fade out trong jQuery.

Tác giả: Trần Hoạt     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Học jQuery, tài liệu tự học lập trình jQuery
Cách chèn nội dung vào tài liệu HTML bằng jQuery
Cách tạo trang web bằng jQuery
Cú pháp cơ bản của jQuery, có giải thích
Phương thức lấy và thiết lập các thuộc tính CSS trong jQuery
Từ khoá liên quan:

Ẩn hiện các phần tử HTML bằng jQuery

, jQuery, học jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá