01第1節：hide()和show()方法的使用
使用jQuery技術，可以使用hide()方法隱藏指定的Html元素，還可以使用show()方法顯示指定的Html元素。
Hide()方法和show()方法通常配合使用，一起實現Html元素的顯示和隱藏得到某種動態效果。
一、顯示/隱藏基本使用
下面我們列舉一個例子，實際演示一下jQuery的顯示和隱藏方法的使用。Html+jQuery代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function s() {$("#div2").show();}function h() {$("#div2").hide();}</script></head><body><div><input type="button" value="顯示" onclick="s()" /><input type="button" value="隱藏" onclick="h()" /></div><div id="div2" style="width:300px; height:30px; background-color:#808080"></div></body></html>
在此代碼中，分別對div2元素設置顯示和隱藏。
圖1
圖1是運行的結果，頁面上的2個按鈕是用來控制下面的div塊的顯示和隱藏的。
圖2
在圖2中點擊「隱藏」按鈕就會將div元素隱藏掉，但不會刪除。同樣點擊「顯示」按鈕，會再次將div元素顯示出來。
二、顯示/隱藏的速度
對於show()和hide()方法，是可以使用參數的，第1個參數是速度，可以取的值有：slow、fast，還可以是具體的毫秒數，1秒=1000毫秒。
下面來測試一下顯示和隱藏的速度，Html+jQuery代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function s() {$("#div2").show("slow");}function h() {$("#div2").hide("slow");}</script></head><body><div><input type="button" value="顯示" onclick="s()" /><input type="button" value="隱藏" onclick="h()" /></div><div id="div2" style="width:300px; height:30px; background-color:#808080"></div></body></html>
jQuery的hide()和show()方法，如果使用了速度，則會呈現一定的特效，給人一種玄幻的感覺。
圖3
這樣呈現出來的效果，元素的顯示和隱藏不是一下子出來的，而是慢慢的顯示和隱藏。
三、更多的使用方法
針對show()和hide()方法，還可以具有第二個參數，用於執行一段JS代碼回調函數。
$(selector).hide(speed,callback);$(selector).show(speed,callback);Speed和callback是2個可選的參數。
對於speed參數，用於設置隱藏和顯示的速度，可使用的值有"slow"、"fast" 或具體的毫秒數。
對於callback參數，用於隱藏和顯示工作完成後所執行的回調函數名稱，用於處理後續的工作。
02第2節：toggle()方法
在jQuery中，可以使用toggle()方法切換Html元素的顯示和隱藏，實現了顯示和隱藏這2個功能。
toggle()方法的功能是顯示被隱藏的元素，並隱藏已顯示的元素，這樣可以使用一個按鈕就可以實現顯示和隱藏元素的功能。
toggle()方法的基本語法如下：
$(selector).toggle(speed,callback);
該方法的參數與hide()和show()方法的參數含義是一樣的。
下面我們來舉個例子，使用一下toggle()方法，代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function f1() {$("#div1").toggle("2000");}</script></head><body><input id="Button1" type="button" value="button" onclick="f1()" /><p/><div id="div1" style="border:1px solid #ddd; background-color:#ddd;width:300px; height:100px">Hello</div></body></html>
在此代碼中，使用了toggle("2000")來實現元素的顯示/隱藏的切換，運行效果如下：
圖4
在圖4中，有一個按鈕和一個div塊，現在使用按鈕事件來控制div塊的顯示和隱藏。
當點擊按鈕後，其運行效果如下圖所示：
圖5
通過效果可以看到，div塊慢慢的隱藏了，再次點擊按鈕，則又會慢慢的顯示出來。這2種效果是由toggle()這一個方法實現的。