• 技术文章 >web前端 >前端问答

    jquery显示和隐藏元素使用的是什么函数

    长期闲置长期闲置2022-04-15 11:26:05原创362

    函数是:1、show(),该方法可显示隐藏的元素,语法“元素对象.show()”;2、hide(),该方法可隐藏显示的元素,语法“元素对象.hide()”;3、toggle(),该方法可显示或隐藏元素,语法“元素对象.toggle()”。

    本教程操作环境:windows10系统、jquery3.2.1版本、Dell G3电脑。

    jquery显示和隐藏元素使用的是什么函数

    1、显示元素:show()

    如果被选元素已被隐藏,则显示这些元素:

    语法

    $(selector).show(speed,callback)

    可能的值:

    毫秒 (比如 1500)

    "slow"

    "normal"

    "fast"

    在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

    2、隐藏元素:hide()

    如果被选的元素已被显示,则隐藏该元素。

    语法

    $(selector).hide(speed,callback)

    可能的值:

    毫秒 (比如 1500)

    "slow"

    "normal"

    "fast"

    在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

    除非设置了 speed 参数,否则不能设置该参数。

    示例如下:

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
      $("p").hide();
      });
      $(".btn2").click(function(){
      $("p").show();
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button class="btn1">Hide</button>
    <button class="btn2">Show</button>
    </body>
    </html>

    输出结果:

    +2.gif

    3、自动识别,显示或者隐藏元素:toggle()

    toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

    该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() - 这会造成一种切换的效果。

    注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

    提示:该方法可被用于自定义函数之间的切换。

    语法

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

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>123</title>
    <script src="js/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("p").toggle();
    });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <button>切换  hide() 和 show()</button>
    </body>
    </html>

    输出结果:

    +3.gif

    相关视频教程推荐:jQuery视频教程

    以上就是jquery显示和隐藏元素使用的是什么函数的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:hover是jquery事件吗 下一篇:jquery和zepto一样吗
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery中大写怎么转小写• jquery怎么隐藏table列• map在jquery中的用法是什么• jquery中tr怎么删除id属性• jquery怎么发送post请求
    1/1

    PHP中文网