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中实现命名空间
Nov 23 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
javascript 写类方式之八
Jul 05 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
Paypal支付不完全指北
Jun 04 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
python远程登录代码
2008/04/29 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
thinkphp5 路由分发原理
2021/03/18 PHP
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
25道Java面试题集合
2013/05/21 面试题
《阳光》教学反思
2014/02/23 职场文书
大学生个人求职信例文
2014/07/07 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
详细了解MVC+proxy
2021/07/09 Java/Android
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript