<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
div{width:200px;height:50px;background:#65bef9; margin: 0px auto;}
p {text-align: center;}
input{width: 70px; height: 30px; border:none; background: #ddd; color: #666;}
input:hover{background: #ccc; }
pre{ font-size: 24px;}
</style>
</head>
<body>
<div id="box"></div>
<p>
<input type="button" value="宽度" id="boxWidth">
<input type="button" value="高度" id="boxHeight">
<input type="button" value="颜色" id="boxBgcolor">
<input type="button" value="重置" id="boxReset">
<input type="button" value="隐藏" id="boxHide">
<input type="button" value="显示" id="boxShow">
</p>
<pre>
相比js而言，jquery很是方便，代码精简很多，格式也更容易记住
想问下老师js中如下代码有简写的方法吗？
function boxReset(){a
box.style.width="200px";
box.style.height="50px";
box.style.background="#65bef9";
}
</pre>
<script type="text/javascript">
$(document).ready(function(){
$('#boxWidth').click(function(){
$('#box').css('width','500px');
});
$('#boxHeight').click(function(){
$('#box').css('height','500px');
});
$('#boxBgcolor').click(function(){
$('#box').css('background','#ffa200');
});
$('#boxReset').click(function(){
$('#box').css({width:'200px' , height:'50px' , background:'#65bef9'});
});
$('#boxHide').click(function(){
$('#box').hide();
});
$('#boxShow').click(function(){
$('#box').show();
});
})
</script>
</body>
</html>
