JQuery ẩn Hiện Phần Tử HTML - Đại Phố Web & Hosting

Đại Phố Web Development > Blog > Lập trình > jQuery ẩn hiện phần tử HTML 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(); }); 393

Dịch vụ web

• Thiết kế web trọn gói
• Wordpress theme
• Wordpress Plugin
• Tối ưu hóa SEO
• Ứng dụng web-based/app trên nền web
• Phạm vi hoạt động: Tiền Giang, Long An, TP.HCM, Bình Dương, Đồng Nai
• Hotline: 03 6694 1906
• Email: [email protected]

Kết nối

Share on Facebook Share Share on TwitterTweet Share on Pinterest Share Share on LinkedIn Share Share on Digg Share

Đại Phố Network Media

Từ khóa

Biểu thức chính quy Blogspot CSS HTML Javascript Joomla JQuery Laravel MyBB PHP PHP Regular Expressions Quản trị hệ thống SEO Smarty Wordpress

Mẫu web mới

DP Care Service: Mẫu trang web dịch vụ

DP Care Service là mẫu giao điện trang web dành riêng cho các loại hình dịch vụ, thích hợp cho cả nhà xưởng phụ trợ công nghiệp và dịch vụ dân dụng như: chăm sóc xe, dịch vụ gia công cho các nhà xưởng, dịch vụ y tế chăm sóc sức khỏe, dịch vụ cho thuê, dịch vụ vận tải, các loại hình gia công… [ + ]

DP Vegan Restaurant: giao diện nhà hàng thuần chay

DP Vegan Restaurant là giao diện trang web, template mẫu dành cho các nhà hàng chay, cơ sở chế biến thực phẩm chay hoặc các cửa hiệu thực phẩm thuần chay. Phù hợp cả 2 loại hình trang web bán hàng và trang web dịch vụ.… [ + ]

Organic Farm: mẫu trang web nông sản hữu cơ xanh/nhà vườn

Organic Farm là trang web thương mại đện tử dành cho công ty, cơ sở sản xuất, phân phối: nông trại trồng rau hữu cơ, siêu thị, nông sản, thực phẩm xanh, trái cây, thực phẩm healthy, thảo mộc dược liệu, cửa hàng trà thảo dược hữu cơ, vườn bếp… [ + ]

Thủ thuật

PHP: Hàm sprintf – Trả về một chuỗi được định dạng

sprintf là một hàm thư viện chuẩn C. Cũng giống như ngôn ngữ C, hàm sprintf… [ + ]

Các phương thức của đối tượng Woocommerce Product

Bạn đang muốn tìm hiểu về các phương thức và hàm của đối tượng $product trong… [ + ]

WordPress: tạo dải số phân trang cho danh mục/taxonomy

Khi viết code cho Wordpress theme, bạn muốn tạo phân trang cho danh mục là các… [ + ]