jquery學習筆記-jQuery實現單擊和滑鼠感應事件，jquery-jquery

jquery學習筆記-jQuery實現單擊和滑鼠感應事件，jquery-jquery

對於單擊事件而言，jQuery同樣提供了動態交替的toggle()方法，這個方法接受兩個參數，兩個參數均為監聽函數，在click事件中交替使用。

例子：點擊事件的動態互動。

<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.實現滑鼠感應

在css中可以利用:hover偽類實現樣式的改版，實現單獨的css樣式，在jQuery引入後，幾乎所有的元素都可以用hover()來感應滑鼠。並且可以製作更複雜的效果。其本質是mouseover和mouseout事件的合并
hover(over,out)方法可接受兩個參數，均為函數。第一個是滑鼠移動到元素上面觸發，第二個是滑鼠移出元素時觸發。

<script type="text/javascript">            $(function() {                $("#ddd").hover(                    function(oEvent) {                        //第一個函數相當於mouseover事件監聽                        $(oEvent.target).css("opacity", "0.5");                    },                    function(oEvent) {                        //第二個函數相當於mouseover事件監聽                        $(oEvent.target).css("opacity", "1.0");                    }                );            });        </script>        <div id="ddd">11</div>

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

 

受wenzi0_0指導，寫幾個關於toggle()的小例子

1.常規的應用

<script type="text/javascript">            $(function() {                $("#ddd").click(function(){                $("#eee").toggle();                    });            });        </script>        <div id="ddd">11</div>        <div id="eee">122</div>

2.css屬性

<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>

 

寫部落格不容易，歡迎大家給評論以給鼓勵，分享是快樂！歡迎大家拍磚和點贊。（JavaScript、ajax、jQuery系列文章不斷更新，關注我即可隨時關注更新）

其他精彩文章

jQuery教程(29)-jQuery外掛程式開發之為外掛程式方法指定參數jQuery教程(28)-jQuery外掛程式開發之使用外掛程式jQuery教程(27)-jQueryajax操作之修改預設選項jQuery教程(26)-ajax操作之使用JSONP載入遠端資料jQuery教程(25)-ajax操作之安全限制