JQuery入門——事件切換之toggle()方法應(yīng)用介紹
1、在toggle()方法中,可以依次調(diào)用N個(gè)指定的函數(shù),直到最后一個(gè)函數(shù),然后重復(fù)對(duì)這個(gè)函數(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ù)覽:
第一次點(diǎn)擊:
第二次點(diǎn)擊:
- JQuery入門——事件切換之hover()方法應(yīng)用介紹
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時(shí)處理示例
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- jquery鼠標(biāo)停止移動(dòng)事件
- jQuery實(shí)現(xiàn)單擊和鼠標(biāo)感應(yīng)事件
- jquery 禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件。
- jQuery鼠標(biāo)事件總結(jié)
- jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件
- jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能示例
相關(guān)文章
jquery讀取xml文件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery讀取xml文件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法,涉及jQuery操作XML文件及Ajax動(dòng)態(tài)加載的技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項(xiàng)目的時(shí)候經(jīng)常會(huì)在主頁面上點(diǎn)擊某個(gè)按鈕,右側(cè)彈出一個(gè)div輸出對(duì)應(yīng)內(nèi)容的詳細(xì)信息,怎么實(shí)現(xiàn)的呢,今天小編給大家分享通過jquery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果,感興趣的朋友一起看看吧2016-10-10jQuery實(shí)現(xiàn)分頁功能(含ajax請(qǐng)求、后臺(tái)數(shù)據(jù)、附完整demo)
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)分頁功能的相關(guān)資料,主要包含ajax請(qǐng)求和后臺(tái)數(shù)據(jù),文末給出了完整的demo示例,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04基于jquery的inputlimiter 實(shí)現(xiàn)字?jǐn)?shù)限制功能
因客戶要求區(qū)分全角跟半角,所以在jquery.inputlimiter.js插件上還做了些小改動(dòng)。2010-05-05實(shí)例講解jquery中mouseleave和mouseout的區(qū)別
這篇文章主要以實(shí)例詳細(xì)講解了jquery中mouseleave和mouseout的區(qū)別,模仿下拉框效果,感興趣的小伙伴們可以參考一下2016-02-02Jquery如何使用animation動(dòng)畫效果改變背景色的代碼
這篇文章主要介紹了Jquery如何使用animation動(dòng)畫效果改變背景色,需要的朋友可以參考下2020-07-07