在 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. axios请求数据完整

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 首页组件 <button @clic ...

  2. openresty开发系列23--lua面向对象

    openresty开发系列23--lua面向对象 面向对象编程(Object Oriented Programming,OOP)是一种非常流行的计算机编程架构.java,c++,.net等都支持面向对 ...

  3. Python3基础 bool True为1 False为0

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  4. C++11使用make_shared的优势和劣势

    Why Make_shared ? C++11 中引入了智能指针, 同时还有一个模板函数 std::make_shared 可以返回一个指定类型的 std::shared_ptr, 那与 std::s ...

  5. Shenzhen Wanze Technology Co., Ltd.隐私协议

    本隐私权政策详细说明了Shenzhen Wanze Technology Co., Ltd.团队(“我们”或“我们的”)通过我们的应用程序和网站收集的信息,以及我们将如何使用这些信息. 1.我们不会通 ...

  6. Python - Django - 模板语言之自定义过滤器

    自定义过滤器的文件: 在 app01 下新建一个 templatetags 的文件夹,然后创建 myfilter.py 文件 这个 templatetags 名字是固定的,myfilter 是自己起的 ...

  7. 抓取二维数组某值出来,到一维数组---array_column

    /*** * '抓取二维数组某值出来,到一维数组' * @param $arr * @param $item * @return array */ function get_arr_item_val( ...

  8. 【Leetcode_easy】970. Powerful Integers

    problem 970. Powerful Integers solution: class Solution { public: vector<int> powerfulIntegers ...

  9. 网站证书(SSL域名证书)常见格式使用

    主流的Web服务软件通常都基于两种基础密码库:OpenSSL和Java 1.Tomcat.Weblogic.JBoss等系统是使用Java提供的密码库.通过Java的Keytool工具,生成Java ...

  10. 2019年Java面试题基础系列228道（6）

    51.ArrayList 与 LinkedList 的不区别? 最明显的区别是 ArrrayList 底层的数据结构是数组,支持随机访问,而LinkedList 的底层数据结构书链表,不支持随机访问. ...