jQuery中的visibility与hidden方法

在前端开发中，我们经常需要控制元素的隐藏与展示。jQuery中提供了两种方法来实现此功能：visibility和hidden。

visibility方法

visibility方法用于控制元素的可见性，其有两个参数：show和hidden。通过传入参数，可以将元素设置为可见或不可见。

//将id为example的元素设置为可见
$("#example").css("visibility","visible");

//将id为example的元素设置为不可见
$("#example").css("visibility","hidden");

在元素被设置为不可见时，其仍占据着文档流中的位置。也就是说，如果一个元素被设置为不可见，那么其他元素在布局时仍然需要将它的位置考虑在内。

hidden方法

hidden方法用于控制元素的显示与隐藏，其有两个参数：show和hidden。通过传入参数，可以将元素设置为显示或隐藏。

//将id为example的元素设置为显示
$("#example").show();

//将id为example的元素设置为隐藏
$("#example").hide();

在元素被设置为隐藏时，其不再占据着文档流中的位置。也就是说，如果一个元素被设置为隐藏，那么其他元素在布局时将不再考虑它的位置。

小结

通过使用visibility和hidden方法，我们可以快速控制元素的可见性和隐藏状态。需要注意的是，这两个方法虽然看起来很相似，但其效果是不同的。在使用时需要根据具体的场景来选择使用哪一个方法。