1、jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
如下例子所示，通过点击id为"butHide"或者"butShow"按钮来隐藏或者显示<p>元素
1 $("#butHide").click(function() { 2 $("p").hide(); 3 }); 4 5 $("#butShow").click(function() { 6 $("p").show(); 7 });
举例1：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function() { 14 $(".ex .hide").click(function() { 15 $(this).parents(".ex").hide("slow"); 16 }); 17 }); 18 </script> 19 20 <style type="text/css"> 21 div.ex { 22 background-color:#e5eecc; 23 padding:7px; 24 border:solid 1px #c3c3c3; 25 } 26 </style> 27 </head> 28 29 <body> 30 31 <h3>中国办事处</h3> 32 <div class="ex"> 33 <button class="hide" type="button">隐藏</button> 34 <p>联系人：张先生<br /> 35 北三环中路 100 号<br /> 36 北京</p> 37 </div> 38 39 <h3>美国办事处</h3> 40 <div class="ex"> 41 <button class="hide" type="button">隐藏</button> 42 <p>联系人：David<br /> 43 第五大街 200 号<br /> 44 纽约</p> 45 </div> 46 47 </body> 48 </html>
输出结果：
举例2：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function() { 14 $("#hide").click(function() { 15 $("#p1").hide(); 16 }); 17 $("#show").click(function() { 18 $("#p1").show(); 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 26 <p id="p1">如果点击“隐藏”按钮，我就会消失。</p> 27 <button id="hide" type="button">隐藏</button> 28 <button id="show" type="button">显示</button> 29 30 </body> 31 </html>
输出结果：
如果点击“隐藏”按钮，我就会消失。
语法：
1 $(selector).hide(speed,callback); 2 3 $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
举例3（下面的例子演示了带有 speed 参数的 hide() 方法）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function() { 14 $("#hide").click(function() { 15 $("#p1").hide(1000); 16 }); 17 $("#show").click(function() { 18 $("#p1").show(1000); 19 }); 20 }); 21 </script> 22 </head> 23 24 <body> 25 26 <p id="p1">如果点击“隐藏”按钮，我就会消失。</p> 27 <button id="hide" type="button">隐藏</button> 28 <button id="show" type="button">显示</button> 29 30 </body> 31 </html>
输出结果：
如果点击“隐藏”按钮，我就会消失。
其它例子参考：通过hide()方法举例jQuery语法：https://www.cnblogs.com/zyjhandsome/p/9789186.html
举例4：演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
举例5：演示 jQuery hide() 函数，隐藏 id="id_test" 的元素。
举例6：演示 jQuery hide() 函数，隐藏所有 <p> 元素。
举例7：演示 jQuery hide() 函数，隐藏所有 class="class_test" 的元素。
2、jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function() { 14 $("#switch").click(function() { 15 $("p").toggle(); 16 }); 17 }); 18 </script> 19 </head> 20 21 <body> 22 23 <button id="switch" type="button">切换</button> 24 <p>这是一个段落。</p> 25 <p>这是另一个段落。</p> 26 27 </body> 28 </html>
输出结果：
这是一个段落。
这是另一个段落。
语法：
1 $(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
3、jQuery 效果参考手册
如需全面查阅 jQuery 效果，请访问我们的 jQuery 效果参考手册。