在 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. vs Qt mysql 打包程序 Driver not loaded Driver not loaded

    vs下开发Qt连接mysql程序,开发过程中操作MySQL没有问题,但打包以后安装在别的电脑上发现竟然无法连接MySQL,打包的时候,所需的libmysql.dll等dll文件拷贝到exe同级目录了, ...

  2. Windows 下使用OpenSSL生成RSA公钥和私钥

    Windows 下使用OpenSSL生成RSA公钥和私钥 (1)下载OpenSSL 可到该地址下载OpenSSL: https://www.openssl.org/source/(https://ww ...

  3. C# WinForm程序中使用Unity3D控件 (转)

    https://www.cnblogs.com/cnxkey/articles/5394378.html 最近在自学Unity3D,打算使用这个时髦.流行.强大的游戏引擎开发一个三维业务展示系统,不过 ...

  4. UCOS III的时间片轮转调度的一个问题

    1. 如果当前一个任务A在时间片未到来之前,主动放弃剩下的时间片,进入下一个任务B,那么下一个任务的的执行时间是多久? 书上说,是重置时间片,也就是说任务B也运行一个完整的时间片.

  5. Python 的包管理工具 distribute, setuptools, easy_install命令与 pip命令

    Setuptools 是 Python Enterprise Application Kit (PEAK)的一个副项目,它是 Python 的disutils工具的增强工具,可以让程序员更方便地创建和 ...

  6. DES 指定键的大小对于此算法无效

    KEY (byte[])  长度不为8.  一般KEY使用UTF8编码.  byte[] byKey = Encoding.UTF8.GetBytes(key); 加密内容的编码,由两方协商. Sys ...

  7. 【GStreamer开发】GStreamer基础教程11——调试工具

    目标 有时我们的应用并没有按照我们的预期来工作,并且在总线上获得的错误信息也没有足够的内容.这时我们该怎么办呢?幸运的时,GStreamer自身提供了大量的调试信息,通常这些信息会给出一些线索,指向出 ...

  8. java设计模式(一)——单例模式

    1.基本介绍 单例设计模式,就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例,并且该类只提供-一个取得其对象实例的方法(静态方法).如:一般情况下,数据库的连接 2.创建方式: ...

  9. PHP实现单点登录最简单的方法

    PHP实现单点登录最简单的方法 用户在A登录 存入登录状态 登录B站(A的识别要传入B) 获取A的登录状态

  10. windows添加“以管理员身份运行”

    方法: 新建一个txt文件,命名为"admin.txt",记得打开"显示后缀名",要求看到.txt并可修改之. 将下列代码粘贴进去. Windows Regis ...