<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.10jQury选择器之可见选择器</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//可见选择器
//$(':visible');取得可见元素
//$(':hidden'); 获取隐藏元素
//为显示按钮添加鼠标事件
$('#showdiv').click(
//执行函数
//显示元素
function(){
$('.indiv').show();
//show()等价于display:block
}
);
//为隐藏按钮添加鼠标事件
$('#hidediv').click(
//执行函数
//隐藏元素
function(){
$('.indiv').hide();
//hide()等价于display:none
}
);
//设置按钮样式
$(':button').css({'margin':'5px','width':'60px','height':'30px'});
});
</script>
<style>
*{
margin:0;
padding:0;
}
.outdiv{
width:200px;
height:200px;
border:2px solid #000;
margin:5px;
float:left;
}
.indiv{
width:200px;
height:170px;
background-color:#999
}
h3{
width:200px;
height:30px;
background-color:#FCC;
font-size:16px;
text-align:center;
line-height:30px;
}
#div1{
display:block;
}
#div2{
display:none;
}
#div3{
visibility:hidden;
}
#div4{
opacity:0;
}
#div5{
width:0;
height:0;
}
#div6{
opacity:0.5
}
</style>
</head>
<body>
<input type="button" id="showdiv" value="显示">
<button id="hidediv">隐藏</button>
<br>
<div class="outdiv">
<h3>1 display:block</h3>
<div class="indiv" id="div1"></div>
</div>
<div class="outdiv">
<h3>2 display:none</h3>
<div class="indiv" id="div2"></div>
</div>
<div class="outdiv">
<h3>3 visibility:hidden</h3>
<div class="indiv" id="div3"></div>
</div>
<div class="outdiv">
<h3>4 opacity:0</h3>
<div class="indiv" id="div4"></div>
</div>
<div class="outdiv">
<h3>5 width:0 height:0</h3>
<div class="indiv" id="div5"></div>
</div>
<div class="outdiv">
<h3>6 opacity:0.3</h3>
<div class="indiv" id="div6"></div>
</div>
</body>
</html>
单击显示按钮
单击隐藏按钮
