## jQuery hide() 和 show()
通過 jQuery,您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素:
**實例:**
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("p").hide();
});
$(".show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<input type="text" id="text"><br>
<p>如果你點擊“隱藏” 按鈕,我將會消失。</p>
<button class="hide">隱藏</button>
<button class="show">顯示</button>
</body>
</html>
```
**語法:**
```
$(*selector*).hide(*speed,callback*);
$(*selector*).show(*speed,callback*);
```
可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
下面的例子演示了帶有 speed 參數的 hide() 方法:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>隱藏</button>
<p>這是個段落,內容比較少。</p>
<p>這是另外一個小段落</p>
</body>
</html>
```
*****
*****
## jQuery toggle()
通過 jQuery,您可以使用 [toggle() 方法](https://www.w3cschool.cn/jquery/eff-toggle.html)來切換 hide() 和 show() 方法。
顯示被隱藏的元素,并隱藏已顯示的元素:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button>隱藏/顯示</button>
<p>這是一個文本段落。</p>
<p>這是另外一個文本段落。</p>
</body>
</html>
```
## 語法
```
$(*selector*).toggle(*speed,easing,callback*)
```
可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可選的 easing 參數規定在動畫的不同點上元素的速度。默認值為 "swing"。可以取以下值: "swing" - 在開頭/結尾移動慢,在中間移動快; "linear" - 勻速移動
可選的 callback 參數是 toggle() 方法完成后所執行的函數名稱。
可選的 callback 參數,具有以下三點說明:
1. $(selector)選中的元素的個數為n個,則callback函數會執行n次
2. callback函數名后加括號,會立刻執行函數體,而不是等到顯示/隱藏完成后才執行
3. callback既可以是函數名,也可以是匿名函數
### toggle() - 使用 callback 參數
```
<!DOCTYPE html>
<html>
<head>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,function(){
alert("The toggle() method is finished!");
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
```
- 簡介
- 安裝
- 語法
- 選擇器
- 事件
- click
- dblclick
- mouseenter
- mouseleave
- mousedown
- mouseup
- hover
- focus
- blur
- 鍵盤事件
- 效果
- 隱藏和顯示
- 淡入淡出
- 滑動
- 動畫
- 停止滑動
- jQuery Callback 方法
- jQuery Chaining
- jQuery_HTML
- jQuery獲取
- jQuery設置
- jQuery添加元素
- jQuery刪除元素
- jQuery CSS類
- jQuery css() 方法
- jQuery 遍歷
- jQuery AJAX
- jQuery AJAX簡介
- jQuery - AJAX load() 方法
- jQuery - AJAX get() 和 post() 方法