實例講解Jquery中隱藏hide、顯示show、切換toggle的用法
更新時間：2016年05月13日 16:53:06 作者：yenga
這篇文章主要介紹了實例講解Jquery中隱藏hide、顯示show、切換toggle的用法，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery中show()、hide()和toggle()用法實例，供大家參考，具體內容如下
<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>
<!--設置三個按鈕，每次點擊調用特定的函數-->
<button onclick="sayHello()">點我打開！</button>
<button onclick="sayGoodbye()">點我關閉！</button>
<button onclick="change()">點我切換！</button>
<script type="text/javascript">
function sayHello(){
$("#test").show(5000);
<!--設參數5000，表示用5000ms的時間完成這個動作-->
}
function sayGoodbye(){
$("#test").hide();
<!--不設置，默認速度-->
}
function change(){
$("#test").toggle("slow");
<!--設置以slow的速度打開-->
}
</script>
</body>
</html>
效果圖：
以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。
相關文章
jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列（十）事件系統(tǒng)之事件包裝的相關資料,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網站列表切換效果的2種方法，供大家參考，感興趣的小伙伴們可以參考一下2016-08-08
JQUERY 瀏覽器判斷實現(xiàn)函數，如果只是為了判斷瀏覽器不建議用，如果你已經用了jquery才用啊，要不沒必要因為這個小功能，加個那么大的類庫吧。2009-08-08
$.format,jquery.format 使用說明，需要的朋友可以參考下。2011-07-07
這篇文章主要介紹了jQuery刪除一個元素后淡出效果展示刪除過程的方法,實例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery居中元素scrollleft計算方法,結合實例形式分析了jQuery獲取及計算頁面滾動元素的相關操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jQuery循環(huán)動畫與獲取組件尺寸的方法,實例分析了animate用法及組件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jQuery選擇器源碼解讀（七）：elementMatcher函數
這篇文章主要介紹了jQuery選擇器源碼解讀（七）：elementMatcher函數,本文講解了源碼、功能、參數、返回函數 等內容,需要的朋友可以參考下2015-03-03
jquery異步請求實例代碼，需要的朋友可以參考下。2011-06-06
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)大屏滾動播放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06