Buzz
Để ẩn hiện phần tử HTML, chúng ta sử dụng các phương thức show() và hide() trong jQuery. Hãy nhanh chóng đào sâu vào bài học jQuery của Mytour để tìm hiểu thêm về những phương thức này.
Khám phá cách ẩn hiện các phần tử HTML bằng jQuery
1. Hiện và ẩn phần tử HTML bằng show() và hide() trong jQuery
Như đã được nói trước đó, để ẩn và hiện các phần tử HTML, sử dụng các phương thức show () và hide() trong jQuery.
Phương thức hide() đặt thuộc tính display: none cho phần tử được chọn. Ngược lại, show() khôi phục thuộc tính display của tập hợp 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ụ: Dưới đây là ví dụ minh họa cách sử dụng show() và hide() trong jQuery để ẩn và hiện các phần tử HTML:
Kết quả xuất hiện như sau:
Bổ sung vào đó, có thể đặt tham số thời gian để tạo hiệu ứng ảnh động linh hoạt trong jQuery trong khoảng thời gian cụ thể.
Thời lượng có thể được xác định bằng cách sử dụng một trong chuỗi 'slow' hoặc 'fast' đã được định nghĩa trước hoặc tính bằng số mili giây để đạt độ chính xác cao hơn. Giá trị càng lớn, hiệu ứng ảnh động sẽ hiển thị chậm hơn.
Ví dụ: Dưới đây là một ví dụ minh họa về cách sử dụng chuỗi slow và fast để xác định thời gian hiển thị của hiệu ứng ảnh động:
Kết quả hiển thị như sau:
Lưu ý: Chuỗi 'fast' tương ứng với khoảng thời gian là 200 mili giây, trong khi chuỗi 'slow' tương ứng với khoảng thời gian là 600 mili giây.
Ngoài ra, có thể xác định một hàm callback để thực thi sau khi phương thức show() hoặc hide() hoàn tất, như minh họa dưới đây:
Kết quả xuất hiện như sau:
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 cho phép hiển thị hoặc ẩn các phần tử tùy thuộc vào trạng thái ban đầu của chúng. Nếu phần tử ban đầu đang hiển thị, sử dụng toggle() sẽ ẩn nó; ngược lại, nếu phần tử ban đầu đang ẩn, nó sẽ được hiển thị.
Ví dụ: Trong đoạn mã dưới đây, chúng ta áp dụng phương thức toggle() để hiển thị hoặc ẩn các phần tử HTML:
Kết quả xuất hiện như sau:
Tương tự, có thể đặt thời gian hiển thị cho phương thức toggle() để tạo hiệu ứng linh hoạt, giống như các phương thức show() và hide(), như minh họa trong ví dụ sau đây:
Kết quả xuất hiện như sau:
Thêm vào đó, chúng ta cũng có thể xác định hàm callback cho phương thức toggle().
Ví dụ: Dưới đây là một ví dụ minh họa cách chỉ định hàm callback cho phương thức toggle():
Kết quả sau sẽ xuất hiện như sau:
Trong bài học này, Mytour chia sẻ cách ẩn hiện các phần tử HTML bằng jQuery. Đồng thời, bạn cũng có thể tham khảo thêm nhiều bài học khác trên Mytour để nắm vững về cách xây dựng trang web bằng jQuery.
Trong bài học kế tiếp, Mytour sẽ hướng dẫn chi tiết về hiệu ứng Fade in và Fade out trong jQuery.
