JQuery 事件及案例

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 == 0) {
                    $(this).css("color","#aaaaaa").val("(必填)");
                }
            });
        });
    </script>

posted @ 2015-06-14 16:24 孤单成双阅读(365) 评论(0) 收藏举报

刷新页面返回顶部