Phương thức show() trong JQuery

• Bùi Tấn Lực
• 81
• 19/12/2025

Phương thức show() trong JQuery dùng để hiện phần tử HTML sau khi ẩn bằng css display none hoặc sau khi ẩn bằng hàm hide(), chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Phương thức show() trong JQuery

Phương thức show() trong JQuery dùng để hiện phần tử HTML sau khi ẩn bằng css display none hoặc sau khi ẩn bằng hàm hide(), hàm hide() cũng ẩn bằng thuộc tính css display none.

Cú pháp của Phương thức show() trong JQuery

bochon.show();

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

bochon.show(thoigian);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm).

bochon.show(thoigian,hamcon);

bochon: Bộ chọn của JQuery, đó có thể là 1 id, 1 class, hoặc 1 phần tử HTML.

thoigian: Thời gian có thể là số giây hoặc fast (nhanh), slow (chậm).

hamcon: Hàm con dùng để xử lý sự kiện sau khi hiện.

Code Phương thức show() trong JQuery

Phương thức show() không tham số trong JQuery

Không cần truyền tham số vào phương thức:

<!--Ẩn Hiện phần tử HTML có id là hienid-->
<p id="hienid">Nội dung trong ID</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN ID</button>
<p>Click ẨN ID và HIỆN ID để ẩn hiện phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style -->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle</p>

<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn phần tử HTML có id là hienid
$('#nutanid').click(function(e) {
  $('#hienid').hide();		
});

// Hiện phần tử HTML có id là hienid
$('#nuthienid').click(function(e) {
  $('#hienid').show();		
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').show();		
});
</script>

Chạy Thử

Phương thức show() truyền 1 tham số trong JQuery

Tham số truyền vào có thể là số giây hoặc (slow là chậm) hoặc (fast là nhanh):

<!--Hiện chậm(slow) phần tử HTML có id là hienid-->
<p id="hienid">Nội dung để hiện chậm(slow)</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN SLOW</button>
<p>Click ẨN ID và HIỆN SLOW để ẩn, hiện chậm(slow) phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 1 giây (1000)-->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style và hiện với thời gian là 1 giây</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle với thời gian là 1 giây</p>

<!--Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style-->
<p id="hienfast" style="display:none">Nội dung ẩn bằng style được hiện nhanh(fast)</p>
<button id="nuthienfast">HIỆN FAST</button>
<p>Click HIỆN FAST để hiện nhanh(fast) phần tử HTML có id là hienfast</p>

<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn phần tử HTML có id là hienid
$('#nutanid').click(function(e) {
  $('#hienid').hide();		
});

// Hiện chậm(slow) phần tử HTML có id là hienid 
$('#nuthienid').click(function(e) {
  $('#hienid').show("slow");		
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 1 giây (1000)
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').show(1000);		
});

// Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style
$('#nuthienfast').click(function(e) {
  $('#hienfast').show("fast");		
});
</script>

Chạy Thử

Phương thức show() truyền 2 tham số trong JQuery

Tham số thứ 1 truyền vào có thể là số giây hoặc (slow là chậm) hoặc (fast là nhanh), tham số thứ 2 là một hàm con dùng để xử lý sau khi hiện:

<!--Hiện chậm(slow) phần tử HTML có id là hienid-->
<p id="hienid">Nội dung để hiện chậm(slow)</p>
<button id="nutanid">ẨN ID</button>
<button id="nuthienid">HIỆN SLOW</button>
<p>Click ẨN ID và HIỆN SLOW để ẩn, hiện chậm(slow) phần tử HTML có id là hienid</p>

<!--Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 1 giây (1000)-->
<p id="hienstyle" style="display:none">Nội dung ẩn bằng style và hiện với thời gian là 1 giây</p>
<button id="nuthienstyle">HIỆN STYLE</button>
<p>Click HIỆN STYLE để hiện phần tử HTML có id là hienstyle với thời gian là 1 giây</p>

<!--Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style-->
<p id="hienfast" style="display:none">Nội dung ẩn bằng style được hiện nhanh(fast)</p>
<button id="nuthienfast">HIỆN FAST</button>
<p>Click HIỆN FAST để hiện nhanh(fast) phần tử HTML có id là hienfast</p>

<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn phần tử HTML có id là hienid
$('#nutanid').click(function(e) {
  $('#hienid').hide();		
});

// Hiện chậm(slow) phần tử HTML có id là hienid 
$('#nuthienid').click(function(e) {
  $('#hienid').show("slow", function() { 
    alert("Phần tử đã được hiện!"); 
  });				
});

// Hiện phần tử HTML có id là hienstyle đã ẩn bằng style với thời gian là 1 giây (1000)
$('#nuthienstyle').click(function(e) {
  $('#hienstyle').show(1000, function() { 
    alert("Phần tử đã được hiện!"); 
  });						
});

// Hiện nhanh(fast) phần tử HTML có id là hienfast đã ẩn bằng style
$('#nuthienfast').click(function(e) {
  $('#hienfast').show("fast", function() { 
    alert("Phần tử đã được hiện!"); 
  });					
});
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức show() trong JQuery.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức show() trong JQuery
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn