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

更新时间：2013年10月18日 15:09:15 作者：

display:none和visible:hidden都能把网页上某个元素隐藏起来，而jQuery的显示和隐藏又有哪些方法，在本文将为大家详细介绍下，感兴趣的朋友不要错过

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> 

您可能感兴趣的文章:

强大的jquery插件jqeuryUI做网页对话框效果！简单
大家都知道JQ是用JS帮我们封装好的东西，我们就要用到它其中强大的地方，废话就不说了.....
2011-04-04
jquery插件bxslider用法实例分析
这篇文章主要介绍了jquery插件bxslider用法,以实例形式较为详细的分析了bxslider插件的使用步骤与相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
简述jQuery ajax的执行顺序
jquery ajax的执行顺序大家在项目经常会颠倒，下面通过本文给大家介绍jquery ajax的执行顺序，涉及到jquery ajax执行顺序相关知识，对jquery ajax执行顺序相关知识感兴趣的朋友一起学习吧
2016-01-01
jquery 动态增加删除行的简单实例(推荐)
下面小编就为大家带来一篇jquery 动态增加删除行的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
jquery实现点击弹出层效果的简单实例
本篇文章主要是对jquery实现点击弹出层效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
$.each与$().each的区别示例介绍
$.each是一个通用的迭代函数，可用于近似地迭代对象和数组，这个函数与$().each是专用用于迭代和执行jquery对象函数
2014-03-03
微信小程序组件 marquee实例详解
这篇文章主要介绍了微信小程序组件 marquee实例详解的相关资料,需要的朋友可以参考下
2017-06-06
利用jquery正则表达式在页面验证url网址输入是否正确
这篇文章主要介绍了关于利用jquery正则表达式在页面验证url网址输入是否正确的相关资料，文中给出了完整的示例代码，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
juqery 学习之三选择器层级基本
juqery 学习之三选择器层级基本，学习jquery的朋友可以参考下。
2010-11-11
jQuery常见的遍历DOM操作详解
这篇文章主要介绍了jQuery常见的遍历DOM操作,结合实例形式详细分析了针对DOM节点的parent()、parents()、parentsUntil()、find()、eq()、filter()等各种遍历操作相关函数与使用技巧,需要的朋友可以参考下
2018-09-09