jQuery的显示和隐藏

　　在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

　　隐藏例子：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>jquey隐藏显示</title>
      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->
     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function(){
            $('p').click(function(){
                $(this).hide();
            })
         })
     </script>
 </head>
 <body>
       <p>点我，消失</p>
       <p>点我，我也消失</p>
 </body>
 </html>

　　通过 jQuery，还可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquey隐藏显示</title>
    <style>
          div{width:100px;height:100px;border:1px solid red;}
    </style>
     <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $('.show1').click(function(){
               $('div').show(1000);
           })
           $('.hide1').click(function(){
               $('div').hide(1000);
           })
        })
    </script>
</head>
<body>
    <button class="show1">显示</button>
    <button class="hide1">隐藏</button>
      <div>
          <p>点我，消失</p>
      <p>点我，我也消失</p>
      </div>
</body>
</html>

　　通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

　　例子：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>jquey隐藏显示</title>
     <style>
           div{width:100px;height:100px;border:1px solid red;}
     </style>
      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->
     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function(){
           $(".show1").click(function(){
             $("div").toggle("slow");
             });
          });
     </script>
 </head>
 <body>
     <button class="show1">显示&隐藏</button>
       <div>
           <p>点我，消失</p>
       <p>点我，我也消失</p>
       </div>
 </body>
 </html>