现在的位置: 首页 > 综合 > 正文

JQuery实例入门(添加鼠标事件)

2013年03月03日 ⁄ 综合 ⁄ 共 2773字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  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" >
  3. <head>
  4.     <title>无标题页</title>
  5.     <script type="text/javascript" src="js/jquery-1[1].2.6.min.js"></script>
  6.     
  7.     <style type="text/css"> 
  8.         .over {   
  9.             background:Red;  /*这个将是鼠标高亮行的背景色*/  
  10.         }     
  11.         .color{
  12.             background:Green;
  13.         } 
  14.     </style> 
  15.     
  16.     <script type="text/javascript">     
  17.             $(document).ready(function() {   
  18.             $("#user").mouseover(function(){   
  19.                 $(this).removeClass("color").addClass("over");
  20.                 $(this).attr("height","100px");
  21.             })   
  22.             .mouseout(function(){   
  23.                 $(this).removeClass("over").addClass("color");
  24.             });   
  25.             })
  26.         </script>
  27. </head>
  28. <body>
  29.       <div id="user" class="color">鼠标移动过来</div>
  30. </body>
  31. </html>

 http://wiki.jquery.org.cn/doku.php

 

  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" >
  3. <head>
  4.     <title>无标题页</title>
  5.     <script type="text/javascript" src="js/jquery-1[1].2.6.min.js"></script>
  6.     
  7.     <style type="text/css"> 
  8.         .over {   
  9.             background:Red;  /*这个将是鼠标高亮行的背景色*/  
  10.         }     
  11.         .color{
  12.             background:Green;
  13.         } 
  14.     </style> 
  15.     
  16.     <script type="text/javascript">     
  17.         /*    
  18.            此教程目的是让那些新手通过实际应用，对jquery有一个初步了解。   
  19.            传说中的ready   
  20.            $(document).ready() 作用就是 在页面加载完成之后执行 封装在里面的js.   
  21.            你可以在一个页面中使用任意多个$(document).ready事件   
  22.         */  
  23.           /*----------------传说中的ready-------------------*/  
  24.             $(document).ready(function() {   
  25.         /*------------------end-----------------*/  
  26.   
  27.          /*jQuery的链式操作   
  28.           正常情况下应该写成   
  29.                 $("#user").mouseover(function(){   
  30.                 $(this).addClass("over");   
  31.             });   
  32.             $("#user").mouseout(function(){   
  33.                 $(this).removeClass("over");     
  34.             });   
  35.           
  36.             但是我们现在写成 $("#user").mouseover().mouseout()这种形式;   
  37.          因为 在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作   
  38.          */  
  39.            /*----------------链式操作例子-------------------*/  
  40.             $("#user").mouseover(function(){   
  41.                 $(this).removeClass("color").addClass("over");
  42.                 $(this).attr("height","100px");
  43.             })   
  44.             .mouseout(function(){   
  45.                 $(this).removeClass("over").addClass("color");
  46.             });   
  47.               /*-----------------end-----------------*/  
  48.             })
  49.         </script>
  50. </head>
  51. <body>
  52.       <div id="user" class="color">鼠标移动过来</div>
  53. </body>
  54. </html>

去掉注释，清晰一些

 
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞