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{ 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>