jquery事件相对于js来说要简单一些，尤其是代码的数量明显更简略，下面是jquery事件的两个例子，一个是全选事件，一个是导航栏的鼠标移上移除事件：
一、全选事件：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../../phpstudy/WWW/jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<h1>全选效果</h1>
<div><input type="checkbox" value="qx" id="qx" /> 全选</div>
<br />
<div>
<input type="checkbox" value="1" class="ck" /> 路飞
<input type="checkbox" value="1" class="ck" /> 索隆
<input type="checkbox" value="1" class="ck" /> 山治
<input type="checkbox" value="1" class="ck" /> 娜美
<input type="checkbox" value="1" class="ck" /> 乌索普
<input type="checkbox" value="1" class="ck" /> 弗兰奇
</div>
</body>
<script type="text/javascript">
$("#qx").click(function(){
//找到全选按钮的选中状态
//var xz = $(this)[0].checked;
var xz = $(this).prop("checked");
//改变所有的checkbox选中状态
$(".ck").prop("checked",xz);
})
</script>
</html>
二、导航栏的鼠标移上移除事件
<style>
.a{
width:50px;
height:20px;
float:left;
margin:10px;
}
</style>
<script src="jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="a">首页</div>
<div class="a">史记</div>
<div class="a">汉书</div>
<div class="a">后汉书</div>
<div class="a">三国志</div>
</body>
<script>
$(".a").mouseover(function(){
$(this).css("background-color","#666")//点击后变为灰色
})
$(".a").mouseout(function(){
$(this).css("background-color","#FFF")//移除后变为白色
})
</script>
</html>
时间： 2024-10-14 17:51:33