JQuery 事件及案例

時間 2020-08-09

標籤 jquery 事件案例欄目 JQuery 简体版

原文原文鏈接

JQuery事件與JavaScript事件類似，只是把其中的on去掉javascript

1.click，dblclick事件css

案例1：點擊縮略圖換背景html

<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(){})來切換樣式）java

將上述<script></script>中的代碼更換成下列代碼（鼠標點擊一次執行一次toogle）jquery

$(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事件ui

案例：圖片被單擊後產生一種按下去又彈起來的效果this

$(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(){})url

案例：奇偶行不一樣色的光棒效果spa

法一：最原始的方法：直接操做樣式表的background-color樣式code

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

相關標籤/搜索