快捷導(dǎo)航

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

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

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

1.實(shí)現(xiàn)單擊事件動(dòng)態(tài)交替

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

例子：點(diǎn)擊事件的動(dòng)態(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.實(shí)現(xiàn)鼠標(biāo)感應(yīng)

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

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

<script type="text/javascript">

            $(function() {

                $("#ddd").hover(

                    function(oEvent) {

                        //第一個(gè)函數(shù)相當(dāng)于mouseover事件監(jiān)聽(tīng)

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

                    },

                    function(oEvent) {

                        //第二個(gè)函數(shù)相當(dāng)于mouseover事件監(jiān)聽(tīng)

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

                    }

                );

            });

        </script>

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

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

受wenzi0_0指導(dǎo)，寫幾個(gè)關(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>