一、jQuery hide() 显示和 show()隐藏

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").hide();
        })
        $('#show').click(function(){
            $("p").show();
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
</body>

语法:

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

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

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").hide(1000);//给hide加上参数
        })
        $('#show').click(function(){
            $("p").show(1000);
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮,我就会消失。如果点击“显示”按钮,我又出现啦</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
</body>

二、jQuery toggle()方法

通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").toggle(1000);//给hide加上参数
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击"隐藏/显示"按钮,我就会消失或者出现啦</p>
    <button id="hide" type="button">隐藏/显示</button>
</body>

语法:

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

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

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery_效果(隐藏和显示)的更多相关文章

  1. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  2. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. jQuery效果---隐藏与显示

    隐藏与显示 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. jQuery效果------隐藏hide()/显示show()

    hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...

  5. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  6. jQuery 效果 - 隐藏和显示

    $('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...

  7. jQuery 效果 – 隐藏和显示

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...

  8. jQuery效果--隐藏和显示

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

  9. jQuery效果-隐藏与显示 小方块的移除

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

随机推荐

  1. Nsdate的各种常用操作

    // //  NVDate.h // //  Created by Noval Agung Prayogo on 2/5/14. //  Copyright (c) 2014 Noval Agung ...

  2. PHP命令行模式基本介绍

      首先要保证php在cli模式下可用,php –v会返回PHP的版本号. [gaojian3@log001 ~]$ php -v PHP (cli) (built: Aug ::) Copyrigh ...

  3. [开发]Win7环境下Eclipse连接Hadoop2.2.0

    准备: 确保hadoop2.2.0集群正常运行 1.eclipse中建立mven工程,并编辑pom文件如下 <dependencies> <dependency> <gr ...

  4. linux 全自动提权 exp perl脚本

    linux 全自动提权 exp perl脚本 作者: admin 日期: 2013/01/19发表评论 (0) 查看评论   国外流传过来的 地址 http://dl.packetstormsecur ...

  5. 【剑指offer】连续子数组最大和

    思路dp很清楚,就是要注意细节. int FindGreatestSumOfSubArray(vector<int> array) { ; ], tempsum = array[]; // ...

  6. 2014多校第六场 1007 || HDU 4927 Series 1(杨辉三角组合数)

    题目链接 题意 : n个数,每操作一次就变成n-1个数,最后变成一个数,输出这个数,操作是指后一个数减前一个数得到的数写下来. 思路 : 找出几个数,算得时候先不要算出来,用式子代替,例如: 1 2 ...

  7. node操作mysql数据库

    1.建立数据库连接:createConnection(Object)方法       该方法接受一个对象作为参数,该对象有四个常用的属性host,user,password,database.与php ...

  8. BZOJ 4199 品酒大会

    以前一直听说什么后缀数组height合并之类的 表示我这种后缀数组都敲不熟的蒟蒻怎么会写 但是做了做觉得还是很简单的嘛 这个题是有两问的,第一问是求LCP>=R的后缀对有多少个 这个就是AHOI ...

  9. intent传递参数

    来建第一个Activity:MyIntent  [mw_shl_code=java,true]public class MyIntent extends Activity {              ...

  10. servlet中中文乱码问题

    在web项目中经常回碰到中文乱码的问题,特此整理一下,有不足的地方,希望大家纠正. 1从前台往后台传数据,.以get方式发送请求,发送的参数不乱,但是后台接收到参数乱码 在Tomcat的server. ...