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