jquery简单事件举例
Posted 梦深深处
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery简单事件举例相关的知识，希望对你有一定的参考价值。
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>
以上是关于jquery简单事件举例的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段