BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Show() và Hide() trong jQuery

Trong bài này chúng ta sẽ tìm hiểu hai hàm được dùng để tạo hiệu ứng ẩn và hiển thị trong jQuery, đó là hàm show() và hide().

Show() và hide() được dùng khá nhiều khi bạn làm việc với jQuery, nó giúp ẩn hoặc hiện thị một nội dung nào đó. Có thể là một thẻ div, một thẻ input, thậm chí là toàn bộ trang web.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Cú pháp hide và show trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính CSS display:none cho phần tử được chỉ định. Ngược lại, hàm show() sẽ khôi phục lại thuộc tính display, thường là display block, inline hoặc inline-block.

Cú pháp như sau:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Trong đó:

  • selector chính là các phẩn tử HTML được chỉ định.
  • speed là tốc độ ẩn và hiển thị. Mặc định là 0 nếu bạn không nhập.
  • callback là một hàm sẽ được gọi sau khi hàm hide hoặc hàm show thực hiện xong.

Ví dụ: Viết chương trình jQuery sử dụng hide() và show() để ẩn và hiện nội dung của các thẻ p.

Demo RUN
$(document).ready(function(){
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function(){
        $("p").show();
    });
});

2. Một vài ví dụ khác với hàm hide và show trong jQuery

Chúng ta sẽ làm thêm một vài demo khác nữa nhé.

Ví dụ 1: Ẩn / hiện thẻ div với tốc độ là 1 giây.

Demo RUN
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide(1000);
    });

    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show(1000);
    });
});

Đơn vị của thời gian là miliseconds nhé các bạn. 1 giây = 1000 miliseconds.

Ví dụ 2: Sử dụng các từ khóa về tốc độ "fast" và "slow".

  • fast = 200 miliseconds
  • slow = 600 miliseconds
Demo RUN
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide("fast");
    });

    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show("slow");
    });
});

3. Sử dụng hàm callback trong show và hide

Tham số callback chính là một hàm, hàm này sẽ được gọi ngay sau khi hàm show và hide kết thúc.

Ví dụ dưới đây sẽ hiển thị thông báo cho bạn biết là hai hàm show và hide đã hoàn thành.

Demo RUN
$(document).ready(function () {
    // Ẩn các thẻ p khi click vào button hide
    $(".hide-btn").click(function () {
        $("div").hide("slow", function(){
            alert("Hàm hide đã chạy xong");
        });
    });

    // Hiện các thẻ p khi click vào button show
    $(".show-btn").click(function () {
        $("div").show("slow", function(){
            alert("Hàm show đã chạy xong");
        });
    });
});

Hàm này rất hữu ích khi bạn muốn thực hiện một công việc nào đó sau khi hai hàm trên thực hiện xong.

Như vậy là minh đã giới thiệu xong phương thức hide và show trong jQuery.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Top