jQuery简介（八）

jQuery简介（八）

元素的隐藏和显示

show()元素的显示   hide()元素的隐藏   toggle()元素的切换

举个例子  页面上有一个宽高为200px的div盒子 

我想点击按钮隐藏这个正方形

这是html代码

一个没有任何内容的div和一个button按钮 加上ID到后面绑定点击事件

这是css代码

设置宽，高的值和背景颜色

这是js代码

获取button按钮绑定点击事件，在点击事件里给div添加hide()方法，实现点击隐藏效果

hide() 方法元素隐藏

这是效果   没点击前的效果

点击按钮隐藏div内容  

实现原理就是改变了display的值

这个是单独拥有隐藏效果的方式

下面是单独拥有显示效果的方式

在css中加入display：none;时在页面加载完成后隐藏div内容，这是点击按钮没有效果。

这时改变js代码

将$(“div”).hide();改为$(“div”).show();

   

页面刷新后点击按钮显示内容和上面隐藏内容写法基本一样

toggle()方法 切换

页面刷新点击按钮瞬间内容隐藏的就显示，内容显示的就隐藏。