實例講解Jquery中隱藏hide、顯示show、切換toggle的用法
更新時間:2016年05月13日 16:53:06 作者:yenga
這篇文章主要介紹了實例講解Jquery中隱藏hide、顯示show、切換toggle的用法,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery中show()、hide()和toggle()用法實例,供大家參考,具體內(nèi)容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初識jQuery</title>
<script src="http:/www.dbjr.com.cn/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用這個jquery庫-->
<style>
#test{
display:none;
width:120px;
height:50px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="test">Hello world!</div>
<!--設(shè)置三個按鈕,每次點擊調(diào)用特定的函數(shù)-->
<button onclick="sayHello()">點我打開!</button>
<button onclick="sayGoodbye()">點我關(guān)閉!</button>
<button onclick="change()">點我切換!</button>
<script type="text/javascript">
function sayHello(){
$("#test").show(5000);
<!--設(shè)參數(shù)5000,表示用5000ms的時間完成這個動作-->
}
function sayGoodbye(){
$("#test").hide();
<!--不設(shè)置,默認速度-->
}
function change(){
$("#test").toggle("slow");
<!--設(shè)置以slow的速度打開-->
}
</script>
</body>
</html>
效果圖:

以上就是本文的全部內(nèi)容,希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能
- jQuery控制元素顯示、隱藏、切換、滑動的方法總結(jié)
- jQuery實現(xiàn)的導(dǎo)航條切換可顯示隱藏
- jquery實現(xiàn)隱藏與顯示動畫效果/輸入框字符動態(tài)遞減/導(dǎo)航按鈕切換
- 用jQuery實現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實例代碼
- Jquery實現(xiàn)點擊切換圖片并隱藏顯示內(nèi)容(2種方法實現(xiàn))
- jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
- jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能
相關(guān)文章
jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝的相關(guān)資料,需要的朋友可以參考下2015-11-11
jquery實現(xiàn)網(wǎng)站列表切換效果的2種方法
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網(wǎng)站列表切換效果的2種方法,供大家參考,感興趣的小伙伴們可以參考一下2016-08-08
jQuery選擇器源碼解讀(七):elementMatcher函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀(七):elementMatcher函數(shù),本文講解了源碼、功能、參數(shù)、返回函數(shù) 等內(nèi)容,需要的朋友可以參考下2015-03-03

