- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- <script type="text/javascript" src="js/jquery-1[1].2.6.min.js"></script>
- <style type="text/css">
- .over {
- background:Red; /*这个将是鼠标高亮行的背景色*/
- }
- .color{
- background:Green;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#user").mouseover(function(){
- $(this).removeClass("color").addClass("over");
- $(this).attr("height","100px");
- })
- .mouseout(function(){
- $(this).removeClass("over").addClass("color");
- });
- })
- </script>
- </head>
- <body>
- <div id="user" class="color">鼠标移动过来</div>
- </body>
- </html>
http://wiki.jquery.org.cn/doku.php
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>无标题页</title>
- <script type="text/javascript" src="js/jquery-1[1].2.6.min.js"></script>
- <style type="text/css">
- .over {
- background:Red; /*这个将是鼠标高亮行的背景色*/
- }
- .color{
- background:Green;
- }
- </style>
- <script type="text/javascript">
- /*
- 此教程目的是让那些新手通过实际应用,对jquery有一个初步了解。
- 传说中的ready
- $(document).ready() 作用就是 在页面加载完成之后执行 封装在里面的js.
- 你可以在一个页面中使用任意多个$(document).ready事件
- */
- /*----------------传说中的ready-------------------*/
- $(document).ready(function() {
- /*------------------end-----------------*/
- /*jQuery的链式操作
- 正常情况下应该写成
- $("#user").mouseover(function(){
- $(this).addClass("over");
- });
- $("#user").mouseout(function(){
- $(this).removeClass("over");
- });
- 但是我们现在写成 $("#user").mouseover().mouseout()这种形式;
- 因为 在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作
- */
- /*----------------链式操作例子-------------------*/
- $("#user").mouseover(function(){
- $(this).removeClass("color").addClass("over");
- $(this).attr("height","100px");
- })
- .mouseout(function(){
- $(this).removeClass("over").addClass("color");
- });
- /*-----------------end-----------------*/
- })
- </script>
- </head>
- <body>
- <div id="user" class="color">鼠标移动过来</div>
- </body>
- </html>
去掉注释,清晰一些