JQuery显示隐藏页面元素的方法总结


Posted in Javascript onApril 16, 2015

在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍。

show()方法

显示出隐藏的 <p> 元素。

$(".btn2").click(function(){

  $("p").show();

});

toggle()方法

toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $("p").toggle(1000);

  });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html>

slideDown()方法

以滑动方式显示隐藏的 <p> 元素:

$(".btn2").click(function(){

  $("p").slideDown();

});

hide() 方法

隐藏可见的 <p> 元素:

$(".btn1").click(function(){

  $("p").hide();

});

这个函数经常与show一起使用

css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");

$("p").css("display","none");

看一个实例
<!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" /> 

<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"> 

        1.测试例子<br/> 

        2.测试例子<br/> 

        3.测试例子<br/> 

        4.测试例子<br/> 

        5.测试例子<br/> 

        6.测试例子<br/> 

        7.测试例子<br/> 

        8.测试例子<br/> 

        9.测试例子<br/> 

        0.测试例子<br/> 

    </div> 

</body> 

</html>
Javascript 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
基于JavaScript实现多级菜单效果
Jul 25 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 #Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
jquery图片切换实例分析
Apr 15 #Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 #Javascript
You might like
9段PHP实用功能的代码推荐
2014/10/14 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python 生成器协程运算实例
2017/09/04 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
体育教师自我鉴定
2014/02/12 职场文书
房屋买卖协议书
2014/04/10 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
无罪辩护词范文
2015/05/21 职场文书