您的位置：首页 > Web前端 > JQuery

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

2008-11-04 16:02 656 查看

<!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>

去掉注释，清晰一些

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function class user

相关文章推荐

新的分享

章节导航