jQuery的事件(代码演示如何使用)

1、jQuery的事件有哪些？

javscript的事件：onClick,onmouseover
jquery的事件：click,mouseover
注意jQuery的事件比javascript的事件少一个on
1）鼠标事件
    click：单击事件
    //dbclick：双击事件
    mouseover：鼠标悬念（移入）
    mouseout：鼠标移出

        <style>
        .abc{
                background-color: #aaa;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("#nav li").mouseover(function(){
                    $(this).addClass("abc");//当鼠标移入li元素时添加样式
                }).mouseout(function(){
                    //$(this).removeClass() //当鼠标移出时删除所有样式
                    $(this).removeClass("abc") //当鼠标移出时删除指定样式
                });

            });
        </script>

        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">在线浏览</a></li>
            </ul>
        </div>

2) 键盘事件
      keydown：键盘按下事件
      keypress：键盘按下并放开时触发
      keydown：键盘放开时触发

        <script type="text/javascript">
            $(function(){
                //按回车键自动登录(不用再点击登录按钮)
                $(document).keydown(function(event){
                    if(event.keyCode==13){
                        $("#actionForm").submit();
                        return true;
                    }
                    return false;
                })
            });
        </script>

        <form id="actionForm" action="../index.html">
            登录名：<input id="txtLoginName" /><br />
            密码：<input type="password" />
            <input type="button" value="登录" />
        </form>

3) 表单事件
      focus：获得焦点时触发
      blur：失去焦点
      select：文本选中时触发

<script type="text/javascript">
            $(function(){
                //文本框获得焦点时，将当前文本框的内容清空（值等于"请输入登录名.."）
                //文本框失去焦点时，判断内容是否为"请输入登录名.."或是否为空，那么将这个值"请输入登录名.."设回到文本框

                $("#txtLoginName").focus(function(){
                    if($(this).val()=='请输入登录名...'){
                        $(this).val('');//清空内容
                    }
                }).blur(function(){
                    if($(this).val().trim()==''){
                        $(this).val('请输入登录名...');//清空内容
                    }
                });
            });
        </script>

        <form id="actionForm" action="../index.html">
            登录名：<input id="txtLoginName" value="请输入登录名..." /><br />
            密码：<input type="password" />
            <input type="button" value="登录" />
        </form>

4）其它事件
      bind()：绑定事件
      unbind()：移除绑定事件

    <script type="text/javascript">
        $(function(){
                //绑定单个事件
//              $("#btn1").bind('click',function(){
//                  alert("OK");
//              });
                //绑定多个事件
                $("#btn1").bind({
                    mouseover:function(){
                        alert("鼠标悬念");
                    },
                    mouseout:function(){
                        alert("鼠标移出");
                    }
                })
                //解除绑定事件
                $("#btn2").click(function(){
                    //$("#btn1").unbind("click");//解除绑定的单个事件
                    $("#btn1").unbind("mouseover mouseout");//解除多个绑定的事件，用空格分隔
                    //$("#btn1").unbind();//解除所有绑定的事件
                });
            });
        </script>

        <input type="button" id="btn1" value="点我" /><br />
        <input type="button" id="btn2" value="解除绑定" />

      hover()：相当于mouseover和mouseout的组合

        .abc{
                background-color: #aaa;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function(){
//              $("#nav li").mouseover(function(){
//                  $(this).addClass("abc");//当鼠标移入li元素时添加样式
//              }).mouseout(function(){
//                  //$(this).removeClass() //当鼠标移出时删除所有样式
//                  $(this).removeClass("abc") //当鼠标移出时删除指定样式
//              });

                $("#nav li").hover(
                    function(){
                        $(this).addClass("abc");//当鼠标移入li元素时添加样式
                    },
                    function(){
                        $(this).removeClass("abc") //当鼠标移出时删除指定样式
                    }
                );

            });
        </script>

      togger()：
           a) 鼠标连续点击
           b) 显示和隐藏  

<script type="text/javascript">
            $(function(){
                //点击当前页面时显示红绿蓝的背景色
                $("body").toggle(
                    function(){
                        $(this).css("background-color","red");
                    },
                    function(){
                        $(this).css("background-color","green");
                    },
                    function(){
                        $(this).css("background-color","blue");
                    }
                );

            });
        </script>
    </head>
    <body>
        测试
    </body>