JQuery入門——事件切換之toggle()方法應(yīng)用介紹
1、在toggle()方法中,可以依次調(diào)用N個指定的函數(shù),直到最后一個函數(shù),然后重復(fù)對這個函數(shù)輪番調(diào)用,其語法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn、fn2、fn3、fn4等函數(shù)依次調(diào)用。
2、示例代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle方法</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px}
</style>
<script type="text/javascript">
$(function(){
$("img").toggle(function(){
$("img").attr("src","Images/img05.jpg");
$("img").attr("title",this.src);
},function(){
$("img").attr("src","Images/img06.jpg");
$("img").attr("title",this.src);
},function(){
$("img").attr("src","Images/img07.jpg");
$("img").attr("title",this.src);
}
)
})
</script>
</head>
<body>
<img />
</body>
</html>
3、效果圖預(yù)覽:
第一次點擊:
第二次點擊:
- JQuery入門——事件切換之hover()方法應(yīng)用介紹
- 使用JS或jQuery模擬鼠標(biāo)點擊a標(biāo)簽事件代碼
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時處理示例
- jquery事件機制擴展插件 jquery鼠標(biāo)右鍵事件
- jquery鼠標(biāo)停止移動事件
- jQuery實現(xiàn)單擊和鼠標(biāo)感應(yīng)事件
- jquery 禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery事件機制擴展插件 jquery鼠標(biāo)右鍵事件。
- jQuery鼠標(biāo)事件總結(jié)
- jquery模擬實現(xiàn)鼠標(biāo)指針停止運動事件
- jQuery實現(xiàn)鼠標(biāo)移入移出事件切換功能示例
相關(guān)文章
jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法
這篇文章主要介紹了jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法,涉及jQuery操作XML文件及Ajax動態(tài)加載的技巧,需要的朋友可以參考下2015-05-05jQuery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕,右側(cè)彈出一個div輸出對應(yīng)內(nèi)容的詳細(xì)信息,怎么實現(xiàn)的呢,今天小編給大家分享通過jquery實現(xiàn)點擊任意位置彈出層外關(guān)閉彈出層效果,感興趣的朋友一起看看吧2016-10-10jQuery實現(xiàn)分頁功能(含ajax請求、后臺數(shù)據(jù)、附完整demo)
這篇文章主要給大家介紹了關(guān)于jQuery實現(xiàn)分頁功能的相關(guān)資料,主要包含ajax請求和后臺數(shù)據(jù),文末給出了完整的demo示例,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-04-04基于jquery的inputlimiter 實現(xiàn)字?jǐn)?shù)限制功能
因客戶要求區(qū)分全角跟半角,所以在jquery.inputlimiter.js插件上還做了些小改動。2010-05-05實例講解jquery中mouseleave和mouseout的區(qū)別
這篇文章主要以實例詳細(xì)講解了jquery中mouseleave和mouseout的區(qū)別,模仿下拉框效果,感興趣的小伙伴們可以參考一下2016-02-02Jquery如何使用animation動畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動畫效果改變背景色,需要的朋友可以參考下2020-07-07