jq简单的图片放大缩小
开始自己的学习之旅，坚持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
</head>
<body>
<div id="divimg" style="width:400px"><img id="imgcont" alt="" src="img/2.jpg" style="width:200px;height:200px"
</div>
<input id="btn1" type="button" value="放大"/>
<input id="btn2" type="button" value="缩小"/><br />
<script>
$("#btn1").click(function(){
$("#imgcont").css({width:"250px",height:"250px"});
});
$("#btn2").click(function(){
$("#imgcont").css({width:"150px",height:"150px"});
});
//鼠标浮动事件
// $("#imgcont").mouseover(function(){
// $("#imgcont").css({width:"300px",height:"300px"});
// });
// $("#imgcont").mouseout(function(){
// $("#imgcont").css({width:"200px",height:"200px"});
// });
</script>
</body>
</html>
//简单的显示隐藏替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello World jQuery!</title>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="show" />
<input id="btnHide" type="button" value="hidden" /><br/>
<input id="btnChange" type="button" value="change content is Hello World, too!"/>
<script>
$("#btnShow").bind("click",function(event){
$("#divMsg").show();//显示
});
$("#btnHide").bind("click",function(event){
$("#divMsg").hide();//隐藏
});
$("#btnChange").bind("click",function(event){
$("#divMsg").html("Hello World,too!");
});
</script>
</body>
</html>
//验证框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
</head>
<body>
<div id="divMsg">验证输入框</div>
<input id="text1" type="text" />
<input id="text2" type="text" readonly="readonly" /><br />
<script>
$("#text1").bind("focus",function(event){
$("#text2").val("256yu9");
});
</script>
</body>
</html>
