jQuery實現(xiàn)單擊和鼠標感應(yīng)事件

更新時間：2015年02月01日 16:01:29 投稿：hebedich

這篇文章主要介紹了jQuery實現(xiàn)單擊和鼠標感應(yīng)事件的方法的相關(guān)資料,需要的朋友可以參考下

1.實現(xiàn)單擊事件動態(tài)交替

之前我們講到了toggleClass()，對于單擊事件而言，jQuery同樣提供了動態(tài)交替的toggle()方法，這個方法接受兩個參數(shù)，兩個參數(shù)均為監(jiān)聽函數(shù)，在click事件中交替使用。

例子：點擊事件的動態(tài)交互。

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("#ddd").toggle(

                    function(oEvent) {

                        $(oEvent.target).css("opacity", "0.5");

                    },

                    function(oEvent) {

                        $(oEvent.target).css("opacity", "1.0");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

2.實現(xiàn)鼠標感應(yīng)

在css中可以利用:hover偽類實現(xiàn)樣式的改版，實現(xiàn)單獨的css樣式，在jQuery引入后，幾乎所有的元素都可以用hover()來感應(yīng)鼠標。并且可以制作更復(fù)雜的效果。其本質(zhì)是mouseover和mouseout事件的合并
hover(over,out)方法可接受兩個參數(shù)，均為函數(shù)。第一個是鼠標移動到元素上面觸發(fā)，第二個是鼠標移出元素時觸發(fā)。

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("#ddd").hover(

                    function(oEvent) {

                        //第一個函數(shù)相當于mouseover事件監(jiān)聽

                        $(oEvent.target).css("opacity", "0.5");

                    },

                    function(oEvent) {

                        //第二個函數(shù)相當于mouseover事件監(jiān)聽

                        $(oEvent.target).css("opacity", "1.0");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

與第一個例子相比，只是把toggle()換成了hover().

受wenzi0_0指導(dǎo)，寫幾個關(guān)于toggle()的小例子

1.常規(guī)的應(yīng)用

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function() {

                $("#ddd").click(function(){

                $("#eee").toggle();    

                });

            });

        </script>

        <div id="ddd">11</div>

        <div id="eee">122</div>

2.css屬性

復(fù)制代碼代碼如下:

<script type="text/javascript">

            $(function(){

                $("#eee").toggle(function() {

                        $("#ddd").css("background-color", "green");

                    },

                    function() {

                        $("#ddd").css("background-color", "red");

                    },

                    function() {

                        $("#ddd").css("background-color", "yellow");

                    }

                );

            });

        </script>

        <div id="ddd">11</div>

        <div id="eee">122</div>