在 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. Flutter响应式编程 - RxDart

    import 'package:flutter/material.dart'; import 'package:rxdart/rxdart.dart'; import 'dart:async'; cl ...

  2. append()、appendChild() 和 innerHTML 的区别

    概念和区别:append() 可以同时传入多个节点或字符串,没有返回值: 据说 append 还是试用期的方法,有兼容问题,(但我用了暂时火狐,谷歌,iE都能使用). https://develope ...

  3. flutter的 图片组件基本使用

    import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends Statele ...

  4. 0.9.0.RELEASE版本的spring cloud alibaba sentinel实例

    sentinel即哨兵,相比hystrix断路器而言,它的功能更丰富.hystrix仅支持熔断,当服务消费方调用提供方发现异常后,进入熔断:sentinel不仅支持异常熔断,也支持响应超时熔断,另外还 ...

  5. source insight 使用配置（私人）

    1.输入两个空格,两个空格全消失,前后的字粘在一起显示,不想这样,就取消下图的勾.

  6. 【翻译】Flink window

    本文翻译自flink官网:https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/stream/operators/window ...

  7. mongodb多个条件查询in,日期查询,嵌套查询，统计集合总数等常用实例

    1. 多个条件查询in in db.inventory.find( { qty: { $in: [ 5, 15 ] } } ) 2. 日期查询 db.books.find({}) 查询时间大于6-,结 ...

  8. react 生命周期图解

    参考地址:https://www.cnblogs.com/gdsblog/p/7348375.html

  9. jvm(5)---垃圾回收（回收算法和垃圾收集器）

    1.垃圾回收算法 1.1 标记-清除算法 算法分为“标记”和“清除”阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法,效率也很高,但是会带来两个明显的问题 ...

  10. CF1223D Sequence Sorting

    思路: 首先把数组离散化,然后观察可以发现,在最优解中最终没有被移动过的那些数字一定是连续的,那么找到最长的连续的数字长度即可. 实现: #include <bits/stdc++.h> ...