jQuery切换事件

在jQuery中，有两个方法用于事件的切换。一个是方法hover(),另一个是方法toggle()。
所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如果一个超链接标记<a>，若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发另一个事件。就可以调用jQuery中的hover()方法轻松实现。

hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移除这个元素时，执行指定的第二个函数，其语法格式如下：

hover(over,out)

下面代码是等价的：

代码1：

$("a").hover(function(){

　　//执行代码一

},function(){

　　//执行代码二

})

代码2：

$("a").mouseover(function(){

　　//执行代码一

})

$("a").mouseout(function(){

　　//执行代码二

})

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5 <title>切换事件</title>
 6 <style>
 7     body{font-size: 13px;}
 8     .clsFrame{border: solid 1px #666;width: 220px;}
 9     .clsFrame .clsTitle{background-color: #eee;padding: 5px;font-weight: bold;}
10     .clsFrame .clsContent{padding: 5px;display: none;}
11 </style>
12 <script src="jquery.js"></script>
13 <script>
14     $(function(){
15         $(".clsTitle").hover(function(){
16             $(".clsContent").show();
17         },function(){
18             $(".clsContent").hide();
19         })
20     })
21 </script>
22 </head>
23 <body>
24     <h3>功能描述：</h3>
25     <p>在页面中，创建一个&ltdiv&gt标记,在该标记中，设置另外两个&ltdiv&gt元素。</p>
26     <p>一个用于显示标题。另一个则用于显示内容。调用jQuery中的hover()方法。</p>
27     <p>将鼠标移到标题时，自动显示内容；鼠标移出标题时，关闭显示的内容。</p>
28     <br />
29     <div class="clsFrame">
30         <div class="clsTitle">jQuery简介</div>
31         <div class="clsContent">&nbsp;&nbsp;jQuery的主旨是：以更少的代码，实现更多的功能（Write Less Do More）。</div>
32     </div>
33 </body>
34 </html>

View Code

结果如下图所示：

高否？富否？帅否？否？滚去学习！