页面内容的隐藏和显示-hide()方法和show()方法
来源:互联网 发布:淘宝流量劫持工具 编辑:程序博客网 时间:2024/06/03 12:41
有些时候我们需要在一个页面中不刷新页面直接隐藏和显示部分信息,这个时候我们可以使用hide()方法和show()方法。
hide()方法:
描述:使用自定义效果来隐藏匹配的元素。
show()方法:
show() 方法显示隐藏的被选元素。
注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
hide():
.hide( effect [, options ] [, duration ] [, complete ] )
.hide( options )
- effect
类型:String
描述:一个字符串,指示要使用哪一种特效。 - easing(默认值:
"swing"
)
类型:String
描述:一个字符串,指示要使用的 easing 函数。 - duration(默认值:
400
)
类型:Number 或 String
描述:一个字符串或一个数字,指定动画将运行多久。 - complete
类型:Function()
描述:一旦动画完成时要调用的函数。 - queue(默认值:
true
)
类型:Boolean 或 String
描述:一个布尔值,指示是否将动画放在特效队列中。如果是 false,动画将立即开始。自 jQuery 1.7 起,queue 选项也接受一个字符串,在这种情况下,动画添加到由字符串表示的队列中。
该插件扩展自 jQuery 内置的 .hide() 方法。如果 jQuery UI 未加载,调用 .hide()
方法不会直接失败,因为该方法在 jQuery 中存在。但是不会发生预期的行为。
show():
语法
$(selector).show(speed,easing,callback)
可能的值:
- 毫秒
- "slow"
- "fast"
可能的值:
- "swing" - 在开头/结尾移动慢,在中间移动快
- "linear" - 匀速移动
这里提供一个简单的示例代码:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>隐藏标签内容</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$(".btn1").click(function(){$("p").hide();});$(".btn2").click(function(){$("p").show();});});</script></head><body><p>这是一个段落。</p><button class="btn1">隐藏</button><button class="btn2">显示</button></body></html>
这里隐藏的是<p>标签中的内容,当然,我们换成其他的标签页都同样适用。为了只显示一个按钮,我在次数的使用是这样的:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>隐藏、显示标签内容</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$(".btn1").click(function(){$("p1").hide();$("p2").show();});$(".btn2").click(function(){$("p1").show();$("p2").hide();});});</script></head><body><p1>这是一。</p1><p2>这是二。</p2><p2><button class="btn1">按钮一</button></p2><p1><button class="btn2">按钮二</button></p1></body></html>
上面的都是用按钮实现的显示、隐藏,由于在显示和隐藏的同时,我需要知道谁隐藏了,谁显示了,需要将这个值传递到后台,所以我又设计的下拉框选择,决定显示和隐藏,这样就可以实现后台的判断。
实现隐藏和显示功能的下拉框我是这么实现的:
类型:<input name="Type" id = "Type" class="easyui-combobox" data-options="valueField: 'id',textField: 'value',data: [{id: '0',value: '个人',selected: true,},{id: '1',value: '企业'}]" />
调用的方法:
<script> $(function(){ $("#customerType").combobox({ valueField: 'id', textField: 'value', editable: false, panelHeight: "auto", onChange : function(n, o) { if(n==1){ $("span1").hide(); $("span2").show(); }else{ $("span2").hide(); $("span1").show(); } } }); }); </script>
我要实现显示、隐藏的内容(不同时存在于界面)
<span1>性别:<select name="sex" id="sex" class="easyui-combobox" style="width: 156px" panelHeight="auto" editable="false"> <option value="" selected="selected">--全部--</option> <option value="0">男</option> <option value="1">女</option> </select></span1><span2>企业规模:<select name="enterprise" id="enterprise" class="easyui-combobox" style="width: 156px" panelHeight="auto" editable="false"><option value="" selected="selected">--全部--</option><option value="0">2万人以下</option><option value="1">2万人以上</option></select></span2>
阅读全文
0 0
- 页面内容的隐藏和显示-hide()方法和show()方法
- 【jQuery】调用show()和hide()方法显示和隐藏元素
- jQuery的隐藏显示hide(),show()方法
- hide隐藏和show显示
- 点击show()和hide()方法显示和隐藏元素,自身也换值
- jQuery hide() 和 show() 隐藏和显示
- [JQ权威指南]第十八天:使用show()与hide()方法动画显示和隐藏图片
- fragment 的repalce方法和hide和show
- jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结
- jquery 显示隐藏div方法show(),hide(),toggle(),slideDown()总结
- jQuery 效果 show() 和 hide()方法
- 【jQuery】动画效果的show()和hide()方法
- FragmentTransition replace add show hide方法的使用和差异
- Android Fragment使用hide和show方法的问题
- jquery show hide 显示和隐藏失效/不起作用
- Fragment切换和隐藏,显示(show,hide)
- 显示show()隐藏hide()
- sharepoint 2010 讨论板回复页面 显示和隐藏(显示引用邮件)Hide/Show Quoted Messages
- 逗比日记_森田疗法
- CentOS6.8下使用yum安装mysql,并远程登陆mysql
- 【数据可视化】数据可视化七大发展趋势
- ruby环境搭建
- BUI+Springboot,问题总结
- 页面内容的隐藏和显示-hide()方法和show()方法
- CentOS 7.0关闭默认防火墙启用iptables防火墙
- 用户验证
- 莫烦tensorflow教程笔记(四)
- bootstrap
- Linux下基于RPM BUNDLE包安装MySQL
- Android笔试和面试常见题目(五)
- java提供的函数式接口
- 改变a默认样式