JQuery入門——事件切換之toggle()方法應(yīng)用介紹

更新時(shí)間：2013年02月05日 15:58:15 作者：

在toggle()方法中，可以依次調(diào)用N個(gè)指定的函數(shù)，直到最后一個(gè)函數(shù)，然后重復(fù)對(duì)這個(gè)函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時(shí)候相當(dāng)?shù)姆奖?接下來(lái)將會(huì)詳細(xì)介紹toggle()方法的使用，感興趣的你可不要錯(cuò)過(guò)了啊

1、在toggle()方法中，可以依次調(diào)用N個(gè)指定的函數(shù)，直到最后一個(gè)函數(shù)，然后重復(fù)對(duì)這個(gè)函數(shù)輪番調(diào)用，其語(yǔ)法如下：toggle(fn, fn2, [fn3, fn4,...])，其中fn、fn2、fn3、fn4等函數(shù)依次調(diào)用。

2、示例代碼：

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

<!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)擊：

您可能感興趣的文章:

相關(guān)文章

Jquery uploadify圖片上傳插件無(wú)法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無(wú)法上傳的情況，下面為大家介紹下不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-12-12
關(guān)注jquery技巧提高jquery技能(前端開發(fā)必學(xué))
本文給大家介紹jquery前端開發(fā)關(guān)注jquery技巧提高jquery技能，對(duì)jquery前端開發(fā)感興趣的朋友可以參考下本文
2015-11-11
jQuery EasyUI 入門必看
下面小編就為大家?guī)?lái)一篇jQuery EasyUI 入門必看。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
封裝了jQuery的Ajax請(qǐng)求全局配置
這篇文章主要介紹了封裝了jQuery的Ajax請(qǐng)求全局配置的相關(guān)資料,需要的朋友可以參考下
2015-02-02
seajs加載jquery時(shí)提示$ is not a function該怎么解決
這篇文章主要介紹了seajs加載jquery時(shí)提示$ is not a function該怎么解決的相關(guān)資料,需要的朋友可以參考下
2015-10-10
基于jquery的給文章加入關(guān)鍵字鏈接
最近在做一個(gè)網(wǎng)站，遇到需要給網(wǎng)站內(nèi)所有的文章加關(guān)鍵字鏈接的問(wèn)題，我們?cè)跒g覽一些網(wǎng)站的文章的時(shí)候，會(huì)發(fā)現(xiàn)文章里面的某些關(guān)鍵字是加了鏈接的，并且高亮顯示。
2010-10-10
常用的jquery模板插件——jQuery Boilerplate介紹
Query Boilerplate是一個(gè)不錯(cuò)的jQuery插件開發(fā)工具，使用這個(gè)工具可以幫助你快速的構(gòu)建一個(gè)jQuery框架。這個(gè)工具提供你很多評(píng)論用以幫助你使得開發(fā)變得簡(jiǎn)單和直接，它是個(gè)真正的面對(duì)對(duì)象的工具，你可以實(shí)現(xiàn)公開或者私有的方法或者公開或者私有的屬性。
2014-09-09
利用JQuery阻止事件冒泡
冒泡事件就是點(diǎn)擊子節(jié)點(diǎn)，會(huì)向上觸發(fā)父節(jié)點(diǎn)，祖先節(jié)點(diǎn)的點(diǎn)擊事件。本文主要介紹JQuery阻止事件冒泡的實(shí)例解析。需要的朋友來(lái)看下吧
2016-12-12
使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo
這篇文章給大家介紹使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo的實(shí)現(xiàn)思路，涉及到Jquery.Qrcode基本使用,Jquery.Qrcode對(duì)中文字符的支持及Jquery.Qrcode添加自定義Logo圖片的相關(guān)知識(shí)，本文介紹非常詳細(xì)，具有參考價(jià)值，感興趣的朋友一起看看吧
2016-09-09
jQuery實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)重新發(fā)送短信驗(yàn)證碼功能,結(jié)合實(shí)例形式分析了基于jQuery的倒計(jì)時(shí)操作功能實(shí)現(xiàn)方法,涉及jQuery表單提交、驗(yàn)證、正則操作等技巧,需要的朋友可以參考下
2017-01-01