教育资源为主的文档平台

当前位置: 查字典文档网> 所有文档分类> > 计算机软件及应用> JQuery动态隐藏和显示DIV

JQuery动态隐藏和显示DIV

上传者:陈飞
|
上传时间:2015-04-21
|
次下载

JQuery动态隐藏和显示DIV

JQuery动态隐藏和显示DIV

?JQuery动态隐藏和显示DIV 使用jquery要控制div的显示与隐藏真的很方便,一句话就搞定了,请看下面使用说明。 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; 不过记得一定要加JQuery的引用: <script type="text/javascript" src="../../scripts/jquery.min.js"></script> 在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍。 jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结 1,show()方法 显示出隐藏的 <p> 元素。 $(".btn2").click(function() { $("p").show(); }); 2,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> 3,slideDown()方法 以滑动方式显示隐藏的 <p> 元素: $(".btn2").click(function() { $("p").slideDown(); }); 4,hide() 方法 隐藏可见的 <p> 元素: $(".btn1").click(function() { $("p").hide(); }); 这个函数经常与show一起使用 5,css()方法 css() 方法设置或返回被选元素的一个或多个样式属性。 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); $("p").css("display","none"); 下面来看一个实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wendang.chazidian.com/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://wendang.chazidian.com/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")

JQuery动态隐藏和显示DIV

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

版权声明:此文档由查字典文档网用户提供,如用于商业用途请与作者联系,查字典文档网保持最终解释权!

下载文档

热门试卷

2016年四川省内江市中考化学试卷
广西钦州市高新区2017届高三11月月考政治试卷
浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
广西钦州市钦州港区2017届高三11月月考政治试卷
广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
广西钦州市高新区2016-2017学年高二11月月考政治试卷
广西钦州市高新区2016-2017学年高一11月月考政治试卷
山东省滨州市三校2017届第一学期阶段测试初三英语试题
四川省成都七中2017届高三一诊模拟考试文科综合试卷
2017届普通高等学校招生全国统一考试模拟试题(附答案)
重庆市永川中学高2017级上期12月月考语文试题
江西宜春三中2017届高三第一学期第二次月考文科综合试题
内蒙古赤峰二中2017届高三上学期第三次月考英语试题
2017年六年级(上)数学期末考试卷
2017人教版小学英语三年级上期末笔试题
江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
重庆市九龙坡区七校2016-2017学年上期八年级素质测查(二)语文学科试题卷
江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题(无答案)
【人教版】河北省2015-2016学年度九年级上期末语文试题卷(附答案)
四川省简阳市阳安中学2016年12月高二月考英语试卷
四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
安徽省滁州中学2016—2017学年度第一学期12月月考​高三英语试卷
山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题(必修一第四、五单元)
福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷

网友关注

2 封锚工序考核试卷
计算机网格信息安全与管理试题答案8
桥梁工程 大工15春《桥梁工程》在线作业1及答案
计算机原理 大工15春《计算机原理》在线作业2及答案
电器学 大工15春《电器学》在线测试1及答案
大工15春《国际金融》在线作业1答案
计算机网格信息安全与管理试题答案6
环境监测复习题
计算机网格信息安全与管理试题答案3
职业道德复习题(仿考)
T+产品操作课件-财务(new)
财务管理考试试题
结构设计原理 大工15春《结构设计原理》在线作业1及答案
自学考试 审计模拟考题
建筑制图 大工15春《建筑制图》在线作业3及答案
电路理论 大工15春《电路理论》在线作业2及答案
第一章总论练习题
大工15春《数字电路与系统》在线作业2及答案
刀具(磨工题库)
桥梁修补作业试题答案
测量学 大工15春《测量学》在线作业2及答案
多媒体技术 大工15春《多媒体技术》在线测试3及答案
大工15春《国际金融》在线作业2答案
结构设计原理 大工15春《结构设计原理》在线作业3及答案
电路理论 大工15春《电路理论》在线作业1及答案
多媒体技术 大工15春《多媒体技术》在线测试2及答案
大工15春《国际金融》在线作业3答案
大工15春《数字电路与系统》在线作业3及答案
2014年下期幼儿园试题
大工15春《数字电路与系统》在线作业1及答案

网友关注视频

第8课 对称剪纸_第一课时(二等奖)(沪书画版二年级上册)_T3784187
【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,辽宁省
冀教版英语五年级下册第二课课程解读
【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
外研版八年级英语下学期 Module3
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,湖北省
沪教版牛津小学英语(深圳用)五年级下册 Unit 1
精品·同步课程 历史 八年级 上册 第15集 近代科学技术与思想文化
冀教版小学数学二年级下册第二单元《有余数除法的竖式计算》
第12章 圆锥曲线_12.7 抛物线的标准方程_第一课时(特等奖)(沪教版高二下册)_T274713
二年级下册数学第一课
【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
冀教版英语四年级下册第二课
北师大版数学 四年级下册 第三单元 第二节 小数点搬家
冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
沪教版八年级下册数学练习册20.4(2)一次函数的应用2P8
外研版英语七年级下册module1unit3名词性物主代词讲解
冀教版小学英语五年级下册lesson2教学视频(2)
外研版英语七年级下册module3 unit2第一课时
沪教版牛津小学英语(深圳用) 四年级下册 Unit 12
二年级下册数学第三课 搭一搭⚖⚖
外研版英语三起6年级下册(14版)Module3 Unit1
8 随形想象_第一课时(二等奖)(沪教版二年级上册)_T3786594
苏教版二年级下册数学《认识东、南、西、北》
北师大版小学数学四年级下册第15课小数乘小数一
沪教版牛津小学英语(深圳用) 五年级下册 Unit 10
三年级英语单词记忆下册(沪教版)第一二单元复习
二年级下册数学第二课
小学英语单词
沪教版牛津小学英语(深圳用) 五年级下册 Unit 7