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 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 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与已存在的Java应用程序集成
2006/10/09 PHP
PHP+DBM的同学录程序(1)
2006/10/09 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php 多文件上传的实现实例
2016/10/23 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
浅析python中的分片与截断序列
2016/08/09 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
文秘自荐信
2014/06/28 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
2015元旦感言
2015/12/09 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis