jquery事件

来源：互联网发布：天谕sabar捏脸数据图女编辑：程序博客网时间：2024/06/16 19:37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title></title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>    <style type="text/css">    body{    font-family: "Microsoft YaHei"    }    .cGreen{color: #4CA902}    .cPink{color: #ED4A9F}    .cBlue{color: #0092E7}    .cCyan{color: #01A6A2}    .cYellow{color: #DCA112}    .cRed{color: #B7103B}    .cPurple{color: #792F7C}    .cBlack{color: #110F10}    .cOrange{color: #FF4500}    .cGray{color: #A9A9A9}    .hide{display: none;}    div {    width:100%;    text-align: center;    }    span {    border:solid 1px #A9A9A9;    padding:10px;    text-align: center;    }    .hoverCls{    color:#FF4500;    border:solid 1px #FF4500;    }    </style>    <script type="text/javascript">        $(document).ready(function(){    $("#btn1").click(function(){    // on()点击图片弹出信息    $("img:first").on("click",function(){    alert("点击图片！");    });    });    $("#btn2").click(function(){    //$("img:first").off();    $("img:first").off("click");  // 参数指定要取消的事件    });    $("#btn3").click(function(){    /* 直接对对象绑定事件（推荐）    $(document).mousemove(function(e){       $("span:eq(1)").text(e.pageX + ", " + e.pageY);   });    */        // bind()绑定document的鼠标移动事件并显示鼠标相对位置    $(document).bind("mousemove",function(e){     $("span:last").text(e.pageX + ", " + e.pageY);    });    });    $("#btn4").click(function(){    $(document).unbind("mousemove");    });    $("#btn5").click(function(){    $("img:first").one("click",function(){    alert("one more time!");    });    });        $("#btn6").click(function(){    // hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示        $("span:first").hover(    function(){// 鼠标悬浮span上    $("img:first").hide();    $(this).addClass("hoverCls");    },    function(){// 鼠标移开span    $("img:first").show();    $(this).removeClass("hoverCls");    }    );        });        $("#btn7").click(function(){    // 鼠标移动，获取坐标，作为img图片的位置！    $(document).mousemove(function(e){    $("img:first").offset({"left":e.pageX,"top":e.pageY});    })    });        $("#btn8").click(function(){    // 给span添加事件    $("span:eq(0)").click(function(){    alert("点击Span");    return false;  // 防止事件冒泡！    });    });        // 给div添加事件    $("div:eq(0)").click(function(){    alert("点击Div");    })        });    </script>      </head>    <body>  <div>  <br>  <span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>  <br><br>  <img alt="itcast" src="logo.png">  <br><br>  鼠标的相对位置为：<span style="border:0px;"></span>  </div>    <div style="clear:both;"></div>    <br><br>    <hr>    <input type="button" id="btn1" value="on()点击图片弹出信息">    <input type="button" id="btn2" value="off()取消图片的点击事件">    <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">    <input type="button" id="btn4" value="unbind()取消bind绑定的事件">    <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">    <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">    <input type="button" id="btn7" value="图片如影随形">    <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">  </body></html>
0 0