01第1节：hide()和show()方法的使用
使用jQuery技术，可以使用hide()方法隐藏指定的Html元素，还可以使用show()方法显示指定的Html元素。
Hide()方法和show()方法通常配合使用，一起实现Html元素的显示和隐藏得到某种动态效果。
一、显示/隐藏基本使用
下面我们列举一个例子，实际演示一下jQuery的显示和隐藏方法的使用。Html+jQuery代码如下：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctions(){$(#div2).show();}functionh(){$(#div2).hide();}/script/headbodydivinputtype=buttonvalue=显示onclick=s()/inputtype=buttonvalue=隐藏onclick=h()//divdivid=div2style=width:px;height:30px;background-color:#/div/body/html
在此代码中，分别对div2元素设置显示和隐藏。
图1
图1是运行的结果，页面上的2个按钮是用来控制下面的div块的显示和隐藏的。
图2
在图2中点击“隐藏”按钮就会将div元素隐藏掉，但不会删除。同样点击“显示”按钮，会再次将div元素显示出来。
二、显示/隐藏的速度
对于show()和hide()方法，是可以使用参数的，第1个参数是速度，可以取的值有：slow、fast，还可以是具体的毫秒数，1秒=毫秒。
下面来测试一下显示和隐藏的速度，Html+jQuery代码如下：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctions(){$(#div2).show(slow);}functionh(){$(#div2).hide(slow);}/script/headbodydivinputtype=buttonvalue=显示onclick=s()/inputtype=buttonvalue=隐藏onclick=h()//divdivid=div2style=width:px;height:30px;background-color:#/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()方法，代码如下：
!DOCTYPEhtmlhtmlheadtitle/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionf1(){$(#div1).toggle();}/script/headbodyinputid=Button1type=buttonvalue=buttononclick=f1()/p/divid=div1style=border:1pxsolid#ddd;background-color:#ddd;width:px;height:pxHello/div/body/html
在此代码中，使用了toggle()来实现元素的显示/隐藏的切换，运行效果如下：
图4
在图4中，有一个按钮和一个div块，现在使用按钮事件来控制div块的显示和隐藏。
当点击按钮后，其运行效果如下图所示：
图5
通过效果可以看到，div块慢慢的隐藏了，再次点击按钮，则又会慢慢的显示出来。这2种效果是由toggle()这一个方法实现的。