jquery中show()、hide()和toggle()用法實(shí)例
更新時(shí)間：2015年01月15日 15:43:58 投稿：shichen2014
這篇文章主要介紹了jquery中show()、hide()和toggle()用法,以實(shí)例形式分析了show()、hide()和toggle()在顯示、隱藏及切換等應(yīng)用技巧,需要的朋友可以參考下
本文實(shí)例講述了jquery中show()、hide()和toggle()用法。分享給大家供大家參考。具體分析如下：
這里介紹了jquery效果：show()方法、hide()方法和toggle()方法
現(xiàn)實(shí)應(yīng)用場(chǎng)景：QQ面板里我的好友分組
復(fù)制代碼 代碼如下:
<html>
<head>
<title>jquery效果：show()方法、hide()方法和toggle()方法</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$("p").show();
});
$("#hide").click(function(){
$("p").hide(2000);
});
$("#tog").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button id="show">顯示</button><button id="hide">隱藏</button><button id="tog">切換</button>
<p>這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落</p>
</body>
</html>
<head>
<title>jquery效果：show()方法、hide()方法和toggle()方法</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$("p").show();
});
$("#hide").click(function(){
$("p").hide(2000);
});
$("#tog").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button id="show">顯示</button><button id="hide">隱藏</button><button id="tog">切換</button>
<p>這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落這是一個(gè)段落</p>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇淺談EasyUI常用控件的禁用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
本文給大家分享的是使用jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交的代碼，思路非常不錯(cuò)，這里推薦給小伙伴們參考下。2015-07-07
利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)
本篇文章主要是對(duì)利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JQuery擴(kuò)展插件Validate 5添加自定義驗(yàn)證方法
從前面的示例中不難看出validate中自帶的驗(yàn)證方法足以滿(mǎn)足一般的要求，對(duì)于特別的要求可以使用addMethod(name,method,message)添加自定義的驗(yàn)證規(guī)則，下面的示例中添加了一個(gè)用于正則表達(dá)式驗(yàn)證的擴(kuò)展驗(yàn)證的方法2011-09-09
jQuery EasyUI常用數(shù)據(jù)驗(yàn)證匯總
這篇文章主要為大家詳細(xì)匯總了jQuery EasyUI常用數(shù)據(jù)驗(yàn)證,介紹了validatebox()提供的自定義驗(yàn)證，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery中的$的相關(guān)資料,需要的朋友可以參考下2015-01-01
jQuery+PHP實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示特效
我們?cè)谝恍?yīng)用中需要?jiǎng)討B(tài)展示數(shù)據(jù)，比如當(dāng)前在線人數(shù)，當(dāng)前交易總額，當(dāng)前匯率等等，前端頁(yè)面需要實(shí)時(shí)刷新獲取最新數(shù)據(jù)。本文將結(jié)合實(shí)例給大家介紹使用jQuery和PHP來(lái)實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果。2015-03-03
jQuery實(shí)現(xiàn)垂直半透明手風(fēng)琴特效代碼分享
這是一款jquery hover抽屜式導(dǎo)航圖片展開(kāi)收縮切換特效代碼，用戶(hù)還可以自定義對(duì)應(yīng)幻燈片的標(biāo)題與文字說(shuō)明，是一款非常實(shí)用的幻燈片特效源碼。2015-08-08
jQuery實(shí)現(xiàn)導(dǎo)航回彈效果
本文主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航回彈效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jquery實(shí)現(xiàn)簡(jiǎn)單的全選和反選功能
我們?cè)谧鲰?xiàng)目的時(shí)候，經(jīng)常需要實(shí)現(xiàn)全選和反選功能，到網(wǎng)上搜了一圈，發(fā)現(xiàn)網(wǎng)上寫(xiě)的全選的代碼，不是完整的，是有bug的。下面結(jié)合自己的項(xiàng)目給大家分享下。2016-01-01