快捷導(dǎo)航

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

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

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

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