有些时候我们需要在一个页面中不刷新页面直接隐藏和显示部分信息，这个时候我们可以使用hide()方法和show()方法。
hide()方法：
描述：使用自定义效果来隐藏匹配的元素。
show()方法：
show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
hide()：
.hide( effect [, options ] [, duration ] [, complete ] )
参数 | 类型 | 描述 | 默认值 |
effect | String | 一个字符串，指示要使用哪一种特效。 | |
options | Object | 特效具体的设置和 easing。 | |
duration | Number 或 String | 一个字符串或一个数字，指定动画将运行多久。 | 400 |
complete | Function() | 一旦动画完成时要调用的函数。 | |
.hide( options )
参数 | 类型 | 描述 |
options | Object |
|
该插件扩展自 jQuery 内置的 .hide() 方法。如果 jQuery UI 未加载，调用 .hide() 方法不会直接失败，因为该方法在 jQuery 中存在。但是不会发生预期的行为。
show():
语法
$( selector).show( speed,easing,callback)
参数 | 描述 |
speed | 可能的值：
|
easing | 可能的值：
提示：扩展插件中提供更多可用的 easing 函数。 |
callback | 可选。show() 方法执行完之后，要执行的函数。 |
这里提供一个简单的示例代码：
<!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>
<option value="" selected="selected">--全部--</option>
<option value="0">2万人以下</option>
<option value="1">2万人以上</option>
</select>
</span2>
