1.實現單擊事件動態交替
之前我們講到了toggleClass()，對於單擊事件而言，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>
本文就先到這裡了，小伙伴們是否對jQuery鼠標事件有新的認識了呢，希望小伙伴們能夠喜歡。