css与jq中的显示与隐藏

CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

hide() 方法隐藏被选元素。
提示：这与 CSS 属性 display:none 类似。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

切换 hide() 和 show(),与使用toggle()

//方法一：两个按钮$(document).ready(function(){    $(".btn1").click(function(){        $("p").hide();    });    $(".btn2").click(function(){        $("p").show();    });});//方法二：一个按钮$(document).ready(function(){    $("button").click(function(){        $("p").toggle();    });});

toggleClass()

该方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。
如果不存在则添加类，如果已设置则删除之。
这就是所谓的切换效果。

$(document).ready(function(){    $("button").click(function(){        $("p").toggleClass("main");        //添加或移除样式main    });});