jQuery的显示和隐藏方法与css隐藏的样式对比


Posted in Javascript onOctober 18, 2013

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

例子:

<html> 
<head> 
<title>display:none和visible:hidden的区别</title> 
</head> 
<body > 
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> 
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> 
</body> 
</html>

jQuery的显示和隐藏的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="jquery_last.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready( function(){}); 
function hiden(){ 
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast 
} 
function slideToggle(){ 
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上 
} 
function show(){ 
$("#divObj").show();//显示,参数说明同上 
} 
function toggle(){ 
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上 } 
function slide(){ 
$("#divObj").slideDown();//窗帘效果展开 
} 
</script> 
</head> 
<body> 
<h3>div里内容的显示隐藏特效</h3> 
<input type="button" value="隐藏" onclick="hiden()"/> 
<input type="button" value="显示" onclick="show()"/> 
<input type="button" value="窗帘效果显示2" onclick="slide()"/> 
<input type="button" value="窗帘效果的切换" onclick="slideToggle()"/> 
<input type="button" value="隐藏显示效果切换" onclick="toggle()"/> 
<div id="divObj" style="display:none"> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
.测试例子<br/> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
js实现随机抽奖
Mar 19 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 #Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 #Javascript
常用js字符串判断方法整理
Oct 18 #Javascript
javaScript arguments 对象使用介绍
Oct 18 #Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 #Javascript
用jquery统计子菜单的条数示例代码
Oct 18 #Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 #Javascript
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
Python素数检测的方法
2015/05/11 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python中的流程控制详解
2021/02/18 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
运动会的口号
2014/06/09 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
房屋所有权证明
2014/10/20 职场文书
大学毕业生自我评价
2015/03/02 职场文书
户外拓展训练感想
2015/08/07 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL