jQuery hide() 和 show()

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

$("#hide").click(function(){
$("p").hide();
}); $("#show").click(function(){
$("p").show();
});

语法:

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

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

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

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

下面的例子演示了带有 speed 参数的 hide() 方法:

实例

$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()

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

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

实例

$("button").click(function(){
$("p").toggle();
});

语法:

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

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

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

代码:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

另一种方式:

我设置同一个按扭给它设置两个点击事件,一个是点击隐藏,还有一个是双击显示一秒延迟,当然你也可以用一个方法,看个人喜好,我这里这么写只是为了测试代码,因为可能使用的外部JQuery的文件不一样,所以这里请您自行引入

code:

<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
//点击会隐藏
$("p").hide();
});

$("#btn1").dblclick(function(){
//在隐藏完成后双击显示,一秒延迟
$("p").show(1000);
})
});
</script>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id="btn1">BTN1</button>

</body>

jQuery效果--隐藏和显示的更多相关文章

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

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

  2. jQuery 效果 - 隐藏和显示

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

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

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

  4. jQuery 效果 – 隐藏和显示

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

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

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

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

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

  7. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

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

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

  9. jQuery_效果(隐藏和显示)

    一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...

随机推荐

  1. [eclipse]如何修改Eclipse编辑器的字体

    步骤如下, 菜单->"Window"->“Preference”->“General”->“Appearance”->“Colors & Fo ...

  2. SQLite 使用主键,ROWID 及自增列

    SQLite 使用主键,ROWID 及自增列 之前关注过一些嵌入式数据库,倒时 SQLite 风头更劲,在 Android 上被应用,在 HTML5 中一些浏览器的 Local Database 的实 ...

  3. Thread 源码阅读

    Thread 属性说明 /** * 程序中的执行线程 * @since 1.0 */ public class Thread implements Runnable { /* Make sure re ...

  4. jdbc元数据

    l  在jdbc中获取数据库的定义,例如:数据库.表.列的定义信息.就用到元数据. l  在jdbc中可以使用: 数据库元数据.参数元数据.结果集元数据 l  (元数据定义相关api,  ..Meta ...

  5. NAT(地址转换技术)详解

    目录 NAT产生背景ip地址基础知识NAT技术的工作原理和特点静态NAT动态NATNAT重载(经常应用到实际中)NAT技术的优缺点优点缺点NAT穿越技术应用层网关(ALG)ALG的实际应用NAT技术的 ...

  6. 性能测试的 Check List (不断更新中)

    1. 开发人员是否提交了测试申请?2. 测试对象是否已经明确?3. 测试范围是否已经明确?4. 本次不被测试的范围是否已经明确?5. 测试目标是否已经明确?6. 何时开始性能测试?7. 何时终止一轮性 ...

  7. 如何解决使用 JMeter 时遇到的问题

    这是对 JMeter 官方网站上一篇文章的翻译.点击这里可以访问原文JMeterTroubleShooting. • check the log file. This is normally in t ...

  8. CompletableFuture.allOf that doens't return Void(CompletableFuture.allOf不能返回Void的解决方法)

    import java.util.List; import java.util.concurrent.CompletableFuture; import java.util.concurrent.Ti ...

  9. C语言基础:汉诺塔(递归方法)

    分析:当只有一个盘子的时候,只需要从将A塔上的一个盘子移到C塔上.当A塔上有两个盘子是,先将A塔上的1号盘子(编号从上到下)移动到B塔上,再将A塔上的2号盘子移动的C塔上,最后将B塔上的小盘子移动到C ...

  10. SQLSERVER去除某一列的重复值并显示所有数据\DISTINCT去重\ISNULL()求SUM()\NOT EXISTS的使用

    进入正题,准备我们的测试数据 1.我们要筛选的数据为去除 GX 列的重复项 并将所有数据展示出来,如图所示: ' 2.这种情况下我们是不可以使用DISTINCT来去重的,我们可以来尝试一下: 首先,单 ...