實(shí)例講解Jquery中隱藏hide、顯示show、切換toggle的用法
本文實(shí)例為大家分享了jquery中show()、hide()和toggle()用法實(shí)例,供大家參考,具體內(nèi)容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>初識(shí)jQuery</title>
<script src="http:/m.fzitv.net/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用這個(gè)jquery庫-->
<style>
#test{
display:none;
width:120px;
height:50px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="test">Hello world!</div>
<!--設(shè)置三個(gè)按鈕,每次點(diǎn)擊調(diào)用特定的函數(shù)-->
<button onclick="sayHello()">點(diǎn)我打開!</button>
<button onclick="sayGoodbye()">點(diǎn)我關(guān)閉!</button>
<button onclick="change()">點(diǎn)我切換!</button>
<script type="text/javascript">
function sayHello(){
$("#test").show(5000);
<!--設(shè)參數(shù)5000,表示用5000ms的時(shí)間完成這個(gè)動(dòng)作-->
}
function sayGoodbye(){
$("#test").hide();
<!--不設(shè)置,默認(rèn)速度-->
}
function change(){
$("#test").toggle("slow");
<!--設(shè)置以slow的速度打開-->
}
</script>
</body>
</html>
效果圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- jQuery通過改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
- jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié)
- jQuery實(shí)現(xiàn)的導(dǎo)航條切換可顯示隱藏
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- 用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
- Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
- jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
- jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能
相關(guān)文章
jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實(shí)例分析了jQuery的UI插件使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
BxCarousel可以指定顯示的元素總數(shù),可以指定每次滾動(dòng)的元素個(gè)數(shù),自動(dòng)播放模式,前一張/后一張按鈕控制圖片流動(dòng)2013-05-05
Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象,Map()方法詳解以及數(shù)組中查詢某值是否存在
今天小編就為大家分享一篇關(guān)于Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象|Map()方法詳解以及數(shù)組中查詢某值是否存在,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01
JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
這篇文章主要介紹了JQuery中使文本框獲得焦點(diǎn)的方法,實(shí)例分析了jQuery針對(duì)文本框獲得焦點(diǎn)的技巧,需要的朋友可以參考下2015-02-02
jQuery select的操作實(shí)現(xiàn)代碼
jQuery對(duì)select的操作的實(shí)際應(yīng)用代碼。方便大家學(xué)習(xí)jquery2009-05-05
jQuery獲取復(fù)選框選中的當(dāng)前行的某個(gè)字段的值
這篇文章主要介紹了jQuery獲取復(fù)選框選中的當(dāng)前行的某個(gè)字段的值,需要的朋友可以參考下2017-09-09
IE8下Jquery獲取select選中的值post到后臺(tái)報(bào)錯(cuò)問題
IE8下出現(xiàn)的問題是直接將selectedValue post發(fā)送到后臺(tái),后臺(tái)接收時(shí)會(huì)報(bào)錯(cuò),這是因?yàn)镮E8下selectedValue當(dāng)成了數(shù)組,后臺(tái)無法識(shí)別2014-07-07
jQuery實(shí)現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10

