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的parseInt 进制问题
May 07 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
vue params、query传参使用详解
Sep 12 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
Final类有什么特点
2012/04/25 面试题
商业街策划方案
2014/05/31 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
土建施工员岗位职责
2015/04/11 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
2016年中秋节慰问信
2015/12/01 职场文书