jQuery鼠标键盘表单事件大全

来源：互联网发布：淘宝手机怎么改评论编辑：程序博客网时间：2024/05/17 08:51
<!DOCTYPE html><html><head>    <title>jquery事件监听</title>    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <script type="text/javascript">        $(function(){            var msg = $('#msg');            //鼠标点击事件            $('#div1').click(function(){                msg.html('1被点击了');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标双击事件            $('#div2').dblclick(function(){                msg.html('2被双击了');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标覆盖事件            $('#div3').mouseover(function(){                msg.html('鼠标在3上面');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标移入事件            $('#div4').mouseenter(function(){                msg.html('鼠标移入了4');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标移出事件            $('#div4').mouseleave(function(){                msg.html('鼠标移出了4');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标按下事件            $('#div5').mousedown(function(){                msg.html('鼠标在5按下了');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            //鼠标松开事件            $('#div5').mouseup(function(){                msg.html('鼠标在5松开了');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#input1').keydown(function(){                msg.html('在input1按下键盘！');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#input1').keyup(function(){                msg.html('在input1松开键盘！');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#input1').focus(function(){                msg.html('input1得到了焦点！');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#input1').blur(function(){                msg.html('input1失去了焦点！');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#input2').change(function(){                msg.html('input2的内容改变了！并失去了焦点');                msg.fadeIn(1000);                msg.fadeOut(1000);            });            $('#mainForm').submit(function(event) {                msg.html('表单内容提交！');                msg.fadeIn(1000);                msg.fadeOut(1000);            });        });    </script>    <style type="text/css">        .div1{            height: 30px;            width: 30px;            background: pink;            display: inline-block;            margin: 5px;        }    </style></head><body>    <div class="div1" id="div1">1</div>    <div class="div1" id="div2">2</div>    <div class="div1" id="div3">3</div>    <div class="div1" id="div4">4</div>    <div class="div1" id="div5">5</div>    <form id="mainForm" action="#">        1：<input type="text" id="input1"/><br>        2：<input type="text" id="input2"/><br>        <input type="submit" name="submit">    </form>    <div id="msg" style="display:none"></div></body></html>
阅读全文
0 0