JQ-事件-1

jiangfeng666

于 2016-06-24 14:47:11 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/jiangfeng666/article/details/51752710

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ-事件-1</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
.hh{
width:100px;
height:100px;
background:#3C0;
}
</style>
</head>

<body>

<input name="" type="text" id="textBox" id="tex"/>
<input name="" type="button" id="textBtn" />
<input name="" type="button" id="mos" value="按钮事件" />
<input name="" type="button" id="mos2" value="按钮事件22" />
<select id="sel">
    <option>11</option>
    <option>22</option>
    <option>33</option>
    <option>44</option>
</select>
<div style="width:100px;height:2000px;"></div>
<script>
    $(function(){
        $("#textBox").focusin(function(){
            $(this).css("background","red");
            $("#textBox").after("<p id='hhh'>后面</p>")
            })
        $("#textBox").focusout(function(){
            $(this).css("background","white");
            $("#hhh").remove();
            })
        $("#textBtn").click(function(){
                $("#textBox").after("后面")
                })
        ///$(window).keydown( function(event){
    //$("body").append( "<br>你按下的按键的代码值为:[" + event.which + ']' ) ;
        //} );
        $("#mos").mouseover(function(){
            alert("鼠标经过")
            });
        $("#mos").mousedown(function(){
            alert("鼠标按下")
            });
        $("#mos").mouseup(function(){
            alert("鼠标抬起")
            });
        $("#mos2").mouseenter(function(){
            alert("鼠标进入")
            });
        $("#mos2").mouseleave(function(){
            alert("鼠标离开")
            });
        //改变窗口大小
        $(window).resize(function(){
            alert("Stop it!");
        });
        //滚动事件
        $(window).scroll( function() { 
         alert("滚动");
         } );
        $("#sel").select( function () { 
            alert("选中我啦")
         } );
        })
</script>
</body>
</html>