JQuery 事件及案例

时间：2023-11-11 20:46:02

JQuery事件与JavaScript事件相似，只是把其中的on去掉

1.click，dblclick事件

案例1：点击缩略图换背景

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="scripts/jquery-1.7.1.min.js"></script>

    <script language="javascript">

        $(document).ready(function () {

            $(".tt").click(function () {

                var aa = $(this).css("background-image");

                $("body").css("background-image",aa);

            });

        })

    </script>

    <style type="text/css">

        .tt {

        width:80px;

        height:80px;

        float:left;

        margin:10px;

        background-size:80px 80px;

        border:1px solid gray;

        }

        #t1 {

        background-image:url("images/01.jpg")

        }

         #t2 {

        background-image:url("images/02.jpg")

        }

          #t3{

        background-image:url("images/03.jpg")

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div class="tt" id="t1"></div>

        <div class="tt" id="t2"></div>

        <div class="tt" id="t3"></div>

    </div>

    </form>

</body>

</html>

案例2:单击轮换背景（简便方法：使用toggle(function(){},function(){}....function(){})来切换样式）

将上述<script></script>中的代码更换成下列代码（鼠标点击一次执行一次toogle）

$(document).ready(function () {

            $(this).toggle(function () {

                $(document).find("body").css("background-image", "url(images/01.jpg)");

            }, function () {

                $(document).find("body").css("background-image", "url(images/02.jpg)");

            }, function () {

                $(document).find("body").css("background-image", "url(images/03.jpg)");

            });

        });

2.mousedown，mouseup事件

案例：图片被单击后产生一种按下去又弹起来的效果

$(document).ready(function () {

            $(".tt").mousedown(function () {

                $(this).css("margin", "11px 11px 11px 11px").css("height","78px").css("width","78px").css("border", "1px solid black");

            }).mouseup(function () {

                $(this).css("margin", "10px 10px 10px 10px").css("height", "80px").css("width", "80px").css("border", "1px solid gray");

            });

        });

3.mouseover，mouseout事件——可以合成为hover(function(){},function(){})

案例：奇偶行不同色的光棒效果

法一：最原始的方法：直接操作样式表的background-color样式

 <script language="javascript">

        $(document).ready(function () {

            $("#GridView1 tr:gt(0):odd").css("background-color", "pink");

            var bg = "white";

            $("#GridView1 tr:gt(0)").mouseover(function () {

                bg = $(this).css("background-color");

                $(this).css("background-color","yellow");

            }).mouseout(function () {

                $(this).css("background-color", bg);

            });

        });

    </script>

法二：通过增与删样式表选择器来实现。toggleClass

<script language="javascript">

        $(document).ready(function () {

            $("#GridView1 tr:gt(0):odd").addClass("odd");

            $("#GridView1 tr:gt(0)").mouseover(function () {

                $(this).toggleClass("mover");  //没有该样式就添加

            }).mouseout(function () {

                $(this).toggleClass("mover");  //有该样式就删除

            });

        });

    </script>

4.focus，blur事件

案例：文本框（必填）效果

<script language="javascript">

        $(document).ready(function () {

            $("#TextBox1").focus(function () {

                $(this).css("color", "black");

                if ($(this).val() == "(必填)") {

                    $(this).val("");

                }

            }).blur(function () {

                if ($(this).val().length == ) {

                    $(this).css("color","#aaaaaa").val("(必填)");

                }

            });

        });

    </script>

相关文章