jQuery ẩn hiện phần tử HTML

jQuery Hide/Show gồm các hàm ẩn, hiện, và đảo trạng thái hiển thị của các phần tử được chỉ định. Bao gồm các hàm hide(), show() và toggle().

jQuery hide()

Phương thức jQuery đơn giản nhất để ẩn một phần tử.

Cú pháp:

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

Tham số speed:
Là tùy chọn chỉ định tốc độ ẩn / hiển thị và có thể lấy các giá trị sau: “slow” – chậm, “fast” – nhanh hoặc mili giây.

Tham số callback:
Là tùy chọn là một hàm được thực thi sau khi phương thức hide() hoặc show() hoàn tất.

$("button").click(function(){
	$("p").hide(1000);
});

jQuery show()

Phương thức jQuery đơn giản nhất để hiện một phần tử đang bị ẩn.

Cú pháp:

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

Tham số speed:
Là tùy chọn chỉ định tốc độ ẩn / hiển thị và có thể lấy các giá trị sau: “slow” – chậm, “fast” – nhanh hoặc mili giây.

Tham số callback:
Là tùy chọn là một hàm được thực thi sau khi phương thức hide() hoặc show() hoàn tất.

Ví dụ

Ví dụ ẩn và hiển thị các phần tử HTML bằng các phương thức hide() và show():

$("#hide").click(function(){
	$("p").hide();
});

$("#show").click(function(){
	$("p").show();
});

HTML :

<div id="hide">
Click chuột vào đây để ẩn phần tử
</div>
<div id="show">
Click chuột vào đây để hiện phần tử
</div>
<p><img id="book" src="book.png" alt="" width="100" height="123"></p>

jQuery toggle()

Phương thức jQuery đơn giản nhất để đảo trạng thái ẩn hoặc hiện một phần tử.

Cú pháp:

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

Tham số speed:
Là tùy chọn chỉ định tốc độ ẩn / hiển thị và có thể lấy các giá trị sau: “slow” – chậm, “fast” – nhanh hoặc mili giây.

Tham số callback:
Là tùy chọn là một hàm được thực thi sau khi phương thức hide() hoặc show() hoàn tất.

Ví dụ:

$("button").click(function(){
	$("p").toggle();
});