1. 程式人生 > >jQuery的事件(程式碼演示如何使用)

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>