zoukankan      html  css  js  c++  java
  • jQuery 隐藏效果

    jQuery hide() 和 show()

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#hide").click(function(){
        $("p").hide();
      });
      $("#show").click(function(){
        $("p").show();
      });
    });
    </script>
    </head>
    <body>
    <p>如果你点击“隐藏” 按钮,我将会消失。</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    </body>
    </html>
    

     

    $(selector).hide(speed,callback);

    $(selector).show(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    下面带有 speed 参数的 hide() 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
      });
    });
    </script>
    </head>
    <body>
    <button>隐藏</button>
    <p>这是个段落,内容比较少。</p>
    <p>这是另外一个小段落</p>
    </body>
    </html>
    

     

    jQuery toggle()

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

    显示被隐藏的元素,并隐藏已显示的元素:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggle();
      });
    });
    </script>
    </head>
    <body>
    
    <button>隐藏/显示</button>
    <p>这是一个文本段落。</p>
    <p>这是另外一个文本段落。</p>
    </body>
    </html>
    

    语法:

    $(selector).toggle(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

  • 相关阅读:
    BeanFactory 简介以及它 和FactoryBean的区别
    由kill 和 kill -9 引发的Linux signal 学习
    验证整数和小数的正则表达式
    重构!重构!重构!
    Java常用命令:jps、jstack、jmap、jstat(带有实例教程)
    子网掩码是4个255代表什么?
    常见的访问控制模型 Access Control Policy:RBAC,DAC,MAC,ABAC
    安装驱动
    大话数据治理-01什么是治理,治理什么数据
    提高 nginx 服务器 安全性,稳定性、性能 --经验总结-持续更新
  • 原文地址:https://www.cnblogs.com/mtime2004/p/9779461.html
Copyright © 2011-2022 走看看