在 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>

jQuery的显示和隐藏的更多相关文章

  1. jQuery学习-显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Jquery的显示与隐藏

    $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:&q ...

  3. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  4. jquery统计显示或隐藏的元素个数

    统计显示的checkbox的数量: 统计隐藏的checkbox数量:

  5. 7.jQuery之显示与隐藏效果

    这里用到三个函数方法:show()   hide()  toggle() 注意点是三个方法里面的两个参数的使用,前一个参数是时间,表示显示速度:后一个参数是回调函数,只有前面的动画执行完之后,回调函数 ...

  6. jquery实现显示和隐藏toggle（）方法的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  8. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

随机推荐

  1. 从Windows转mac遇到的一些坑

    本屌由于运气,分了一台imac来办公,由于以前一直都在用windows,现在用Mac有很多不适应的地方.下面介绍一下Mac与Windows有明显区别的地方: mac与windows鼠标滑轮方向不同. ...

  2. pytorch如何先初始化变量，然后再赋值

    下面是定义初始化 #初始化输入的张量 - torch.empty是返回一个包含未初始化数据的张量 self.input = torch.empty(size=(self.opt.batchsize, ...

  3. Flutter修改应用图标及图标

    应用名称是需要在 Android 和 iOS 中分别调整的:Android 是在 AndroidManifest.xml 中修改:iOS 则是在 Info.plist 中修改的: 如果需要更改应用的 ...

  4. 5.7.27版本mysql新增用户

    因为我们目前只有root,所以只能先用root登陆mysql,再新增用户: $ bin/mysql -u root -p Enter password: Welcome to the MySQL mo ...

  5. get请求utf-8解码

    package utils;import java.io.UnsupportedEncodingException;import java.net.URLDecoder; /*** <p> ...

  6. Linux记录-史上最全的MySQL高性能优化实战总结(转载)

       史上最全的MySQL高性能优化实战总结! 1.1 前言 MySQL对于很多Linux从业者而言,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优 ...

  7. Locust性能测试-分布式执行的方法(亲测ok)

    来源:https://www.cnblogs.com/yoyoketang/p/11681370.html 前言 使用Locust进行性能测试时,当一台单机不足以模拟所需的用户数量的时候,可以在多台机 ...

  8. linux信号量例子

    semaphore.h 提供的是 POSIX 标准定义的 semaphore 接口,而 sys/sem.h 里 提供的是符合 System V 标准的 semaphore接口 (semget, sem ...

  9. 【Leetcode_easy】941. Valid Mountain Array

    problem 941. Valid Mountain Array solution: class Solution { public: bool validMountainArray(vector& ...

  10. JS扩展Array.prototype引发的问题及解决方法

    遇到的问题 一上班收到个bug,写的表单联动插件在ie里面会出现js源码,当时有点意外,从没出现过这问题. 问题的原由 为什么会出现一个function呢?其它调用的插件的页面为什么没有这问题? 控制 ...