jQuery事件
代码实例:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://blog.fqidc.cn/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"> </script>
<title>11.12</title>
<style type="text/css">
div{
float: left;
}
.box{
width: 200px;
height: 200px;
background-color: deeppink;
}
.box1{
width: 200px;
height: 200px;
background-color: brown;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.bx{
float: left;
width: 200px;
height: 200px;
background-color: navajowhite;
}
</style>
</head>
<body>
<p>哈哈哈哈哈</p>
<button>点击隐藏</button>
<br /><br /><br />
<div class="box">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div style="clear: both; width: 100%; height: 20px;">
</div>
<div class="bx">
0
</div>
<div class="bx">
1
</div>
<div class="bx">
2
</div>
<div class="bx">
3
</div>
<div class="bx">
4
</div>
<div class="bx">
5
</div>
<script type="text/javascript">
for(var i=0;i<$(".bx").length;i++){
$(".bx").eq(i).click(function(){
$(this).css("background-color","#A52A2A");
});
};
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
//on 方法
$(".box").on("click",function(){
$(this).css("background-color","darkgreen")
});
//click 方法
$(".box1").click(function(){
$(this).css("background-color","aqua")
});
//bind 方法
$(".box2").bind("click",function(){
$(this).css("background-color","blueviolet")
});
</script>
</body>