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 参数是隐藏或显示完成后所执行的函数名称。

  • 相关阅读:
    IIS服务器支持.apk文件下载
    java序列化
    ECMAScript 5/6/7兼容性速查表
    jquery获得select选中索引
    javascript获取调用方法的父引用
    AsyncCTP &IdentityModel
    开源的Owin 的身份验证支持 和跨域支持
    为什么Application_BeginRequest会执行两次
    基于Redis的消息订阅/发布
    基于异步的MVC webAPI控制器
  • 原文地址:https://www.cnblogs.com/mtime2004/p/9779461.html
Copyright © 2011-2022 走看看