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()方法 切换
页面刷新点击按钮瞬间内容隐藏的就显示,内容显示的就隐藏。