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

• Bùi Tấn Lực
• 115
• 17/12/2025

Phương thức hide() trong JQuery dùng để ẩn một phần tử HTML, mặc định là ẩn nhanh, ngoài ra còn có thể ẩn chậm hoặc ẩn theo số thời gian, 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 hide() trong JQuery

Phương thức hide() trong JQuery dùng để ẩn một phần tử HTML, mặc định là ẩn nhanh, ngoài ra còn có thể ẩn chậm hoặc ẩn theo số thời gian, đi kèm đó có thể kèm hàm con để xử lý sự kiện sau khi ẩn.

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

bochon.hide();

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

bochon.hide(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.hide(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 ẩn.

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

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

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

$('#anid').hide();	

<!--Ẩn phần tử HTML có id là anid-->
<p id="anid">Nội dung trong ID</p>
<button id="nutanid">ẨN ID</button>
<p>Click ẨN ID để ẩn phần tử HTML có id là anid</p>

<!--Ẩn những phần tử HTML có class là classp-->
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<p class="classp">Nội dung trong class</p>
<button id="nutanclassp">ẨN CLASS</button>
<p>Click ẨN CLASS để ẩn những phần tử HTML có class là classp</p>

<!--Ẩn những thẻ P-->
<p>Nội dung trong thẻ P</p>
<p>Nội dung trong thẻ P</p>
<button id="nutanthep">ẨN THẺ P</button>
<p>Click ẨN THẺ P để ẩn những thẻ P</p>

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

// Ẩn những phần tử HTML có class là classp
$('#nutanclassp').click(function(e) {
  $(".classp").hide();		
});

// Ẩn những thẻ P
$('#nutanthep').click(function(e) {
  $("p").hide();		
});
</script>

Chạy Thử

Phương thức hide() 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):

$('#anslow').hide("slow");

<!--Ẩn chậm phần tử HTML có id là anslow-->
<p id="anslow">Nội dung được ẩn slow (chậm) - hide("slow")</p>
<button id="nutanslow">ẨN SLOW</button>
<p>Click ẨN SLOW để ẩn chậm phần tử HTML có id là anslow</p>

<!--Ẩn nhanh phần tử HTML có id là anfast-->
<p id="anfast">Nội dung được ẩn fast (nhanh) - hide("fast")</p>
<button id="nutanfast">ẨN FAST</button>
<p>Click ẨN FAST để ẩn nhanh phần tử HTML có id là anfast</p>

<!--Ẩn phần tử HTML có id là antime với thời gian là 1 giây (1000)-->
<p id="antime">Nội dung được ẩn với thời gian là 1 giây (1000)</p>
<button id="nutantime">ẨN 1 GIÂY</button>
<p>Click ẨN 1 GIÂY để ẩn phần tử HTML có id là antime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn chậm phần tử HTML có id là anslow
$('#nutanslow').click(function(e) {
  $('#anslow').hide("slow");		
});

// Ẩn nhanh phần tử HTML có id là anfast
$('#nutanfast').click(function(e) {
  $('#anfast').hide("fast");		
});

// Ẩn 1 giây phần tử HTML có id là antime
$('#nutantime').click(function(e) {
  $('#antime').hide(1000);		
});
</script>

Chạy Thử

Phương thức hide() 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 ẩn:

$('#antime').hide(1000, function() { // Ẩn trong 1 giây
    alert("Phần tử đã được ẩn!"); // Callback
});	

<!--Ẩn chậm phần tử HTML có id là anslow-->
<p id="anslow">Nội dung được ẩn slow (chậm) - hide("slow")</p>
<button id="nutanslow">ẨN SLOW</button>
<p>Click ẨN SLOW để ẩn chậm phần tử HTML có id là anslow</p>

<!--Ẩn nhanh phần tử HTML có id là anfast-->
<p id="anfast">Nội dung được ẩn fast (nhanh) - hide("fast")</p>
<button id="nutanfast">ẨN FAST</button>
<p>Click ẨN FAST để ẩn nhanh phần tử HTML có id là anfast</p>

<!--Ẩn phần tử HTML có id là antime với thời gian là 1 giây (1000)-->
<p id="antime">Nội dung được ẩn với thời gian là 1 giây (1000)</p>
<button id="nutantime">ẨN 1 GIÂY</button>
<p>Click ẨN 1 GIÂY để ẩn phần tử HTML có id là antime</p>
<script src="https://webmoi.vn/media/js/jquery-2.2.1.js"></script>
<script>
// Ẩn chậm phần tử HTML có id là anslow
$('#nutanslow').click(function(e) {
  $('#anslow').hide("slow", function() {
    alert("Phần tử đã được ẩn!"); 
  });		
});

// Ẩn nhanh phần tử HTML có id là anfast
$('#nutanfast').click(function(e) {
  $('#anfast').hide("fast", function() { 
    alert("Phần tử đã được ẩn!"); 
  });		
});

// Ẩn 1 giây phần tử HTML có id là antime
$('#nutantime').click(function(e) {
  $('#antime').hide(1000, function() { 
    alert("Phần tử đã được ẩ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 hide() trong JQuery.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Phương thức hide() 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