极速小乌龟

导航

jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #target {
 8             border: 1px solid #eee;
 9             border-radius: 6px;
10             padding: 10px;
11             transition: all 1s linear;
12         }
13         #target.over {
14             border: 1px solid #aaa;
15             box-shadow: 0 0 12px #aaa;
16         }
17     </style>
18 </head>
19 <body>
20 <h1>补充：使用hover(fn,fn)函数监听mouseover和mouseout两个事件</h1>
21 
22 <h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>
23 <div id="target">
24     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>
25 </div>
26 <script src="javascript/jquery-1.11.3.js"></script>
27 <script>
28   //为id为target的元素绑定hover事件，两个处理函数:
29   $("#target").hover(
30           //相应mouseover，为当前元素添加over类
31           function(){$(this).addClass("over")},
32           //响应mouseout，为当前元素移除over类
33           function(){$(this).removeClass("over")})
34 </script>元素
35 </body>
36 </html>

 

 1 jQuery页面加载后执行:
 2 特殊:$(document).ready(function(){......})
 3 笔试题:vs DOM:windows.onload=function(){.....}
 4     ready的底层事件:DOM中的ondocumentcontentloaded
 5                     只要DOM树加载,js执行完毕就会触发
 6 而onload:必须等到html,css，js，img全部加载完成才触发
 7 优化:可将原来在load之后才执行的任务(事件绑定，修改DOM树)，提前ready之后执行，可缩短页面整体加载时间。
 8 如何使用:$(document).ready(function(){......})
 9 简化:$().ready(function(){......})
10 更简化:$(function(){....})
11 其实:只要将script放在body的结尾，就可实现DOM加载后立刻执行。
12 
13 一个事件:
14 hover：
15      其实就是mouseover和mouseout的合体,hover要绑定两个事件处理函数
16 
17 如何使用:只要同时相应mouseover和mouseout时，就可简写hover

 

posted on 2017-02-14 05:17  极速小乌龟  阅读(667)  评论(0)    收藏  举报