首先来看个段落文字的显示和隐藏
1：show() 方法
显示出隐藏的 <p>元素。代码如下：
$(".btn2").click(function(){
$("p").show()
})
2：hide()隐藏可见的 <p>元素：代码如下：
$(".btn1").click(function(){
$("p").hide()
})
3：jQuery代码如下：
$("element").show("slow")
运行该代码后，元素将在600毫秒内慢慢的显示出来。其它的速度关键字还有”normal“和”fast“（长度分别是400毫秒和200毫秒）。
不仅如此，还可以为显示速度指定一个数字，单位是毫秒。
例如，使用如下代码使元素在1秒钟（1000毫秒）内显示出来；
$(”element").show(1000)在前面的例子中，把其中的hide()方法改为hide(600),show()方法改为show(600)。
jQuery代码如下：
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().hide(600)
}, function () {
$(this).next().show(600)
})
})
从代码的执行过程中，可以发现，hide(600)方法会同时减少“内容”的高度、宽度和不透明度，直至3个属性的值为0，最后设置该元素的CSS规则为“display:none”。
然后我们再来看个简单的代码：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide()
})
$(".btn2").click(function(){
$("p").show()
})
})
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
这个就是超简单的显示与隐藏了，如果要有效果我们只要在hide或show中带时间或参数即可：
代码如下：
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide(1000)
})
$(".btn2").click(function(){
$("p").show(1000)
})
})
</script>
设置好jQuery UI Datepicker后，去GitHub上搜索并下载jQuery Timepicker Addon。添加时分秒插件所需样式（官方样式，根据需要添加到页面或样式文件中）
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px}
.ui-timepicker-div dl { text-align: left}
.ui-timepicker-div dl dt { float: leftclear:leftpadding: 0 0 0 5px}
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%}
.ui-timepicker-div td { font-size: 90%}
.ui-tpicker-grid-label { background: noneborder: nonemargin: 0padding: 0}
.ui-timepicker-rtl{ direction: rtl}
.ui-timepicker-rtl dl { text-align: rightpadding: 0 5px 0 0}
.ui-timepicker-rtl dl dt{ float: rightclear: right}
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px}
配置：
通过配置showHour、showMinute、showSecond设置是否显示时分秒通过配置stepHour、stepMinute、stepSecond设置时分秒步长
我的案例：
<link href="../CSS/jquery-ui.min.css" rel="stylesheet" type="text/css" /><link href="../CSS/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css" />
<!-- 注意：此处样式与官方样式不一至 -->
<style>
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px}.ui-timepicker-div dl{ text-align: left}.ui-timepicker-div dl dt{ height: 25px}.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px}.ui-timepicker-div td { font-size: 90%}
</style>
<!-- 注意：此处因编辑器问题仅列出引用文件，请根据需要修改 -->
/JS/jquery.ui.core.min.js
/JS/jquery.ui.datepicker.min.js
/JS/jquery.ui.widget.min.js
/JS/jquery.ui.mouse.min.js
<script type="text/javascript">
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）