jQuery: Hide & Show
Giải phóng thời gian, khai phóng năng lực
Hide & Show bao gồm các phương thức cho phép ẩn và hiện các phần tử HTML.
Các phương thức Hide & Show bao gồm:
Ø hide()
Ø show()
Ø toggle()
hide() và show()
Để ẩn hoặc hiện các phần tử HTML bạn dùng hai phương thức là hide() và show().
Cú pháp:
$(Bộ_chọn).hide(Tốc_độ, callback);
$(Bộ_chọn).show(Tốc_độ, callback);
Tham số Tốc_độ sẽ thiết lập tốc độ ẩn và hiện, các giá trị áp dụng cho tham số này là: slow, fast hoặc giá trị số thể hiện thời gian là mini giây.
Tham số callback là một hàm, hàm này sẽ được thực thi sau khi các phương thức hide() và show() thực hiện xong.
Cả hai tham số Tốc_độ và callback đều là các tùy chọn, chúng không bắt buộc phải xuất hiện.
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{color:green;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("#b1").click(function(){ $("p").hide(1000); }); $("#b2").click(function(){ $("p").show(1000); }); }); </script> </head> <body> <button id="b1">Click => Ẩn</button> <button id="b2">Click => Hiện</button> <p>v1study.com</p> <p>demo.v1study.com</p> </body> </html>
Demo:
Phương thức toggle()
toggle() cho phép điều khiển cả hành động ẩn cũng như hiện của đối tượng.
Cú pháp:
$(Bộ_chọn).toggle(Tốc_độ, callback);
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{color:green} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("p").toggle(500); }); }); </script> </head> <body> <button>Click => Ẩn + Hiện</button> <p>v1study.com</p> <p>demo.v1study.com</p> </body> </html>
Demo:
Giải phóng thời gian, khai phóng năng lực