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. 【makefile】make程序的命令行选项和参数

    Make命令参数的典型序列如下所示: make [-f makefile文件名][选项][宏定义][目标] 这里用[]括起来的表示是可选的.命令行选项由破折号“–”指明,后面跟选项,如: make – ...

  2. Mysql(一)、索引研究

    一.索引简介 1. 为什么要使用索引 查询高效 2. 什么样的信息能成为索引 主键,唯一键,普通键等 二.优化你的索引 1. 二叉查找树 二叉查找树,也称二叉搜索树,或二叉排序树.其定义也比较简单,要 ...

  3. 在 Ubuntu 14.10 Server 上安装 Jetty

    Jetty提供了一个Web服务器和javax.servlet容器,为SPDY.WebSocket.OSGi.JMX.JNDI.JAAS以及许多其它集成套件添加了支持.这些组件都是开源的,也可用于商业用 ...

  4. 利用Bag中的getCount()方法统计list集合中重复元素

    实际应用场景:从Excel导入数据时,存在某个标识符相同的多条数据,需要进行合并,因此需要统计重复元素,可以利用Bag包下的getCount()进行统计,代码如下: package test.com. ...

  5. Python之文件操作工具

    逐步完善中. #!/usr/bin/python3 # -*- coding: utf-8 -*- import os import codecs #支持多国语言的编码解码 import charde ...

  6. vscode开发ExtJs安装插件以及破解方法

    https://blog.csdn.net/lovelyelfpop/article/details/69568995 1.官网下载vscode 插件. https://www.sencha.com/ ...

  7. Object.assign()的用法 -- 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,返回目标对象

    语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. ...

  8. 深入源码分析Spring中的构造器注入

    # 1. 示例 构造器注入类,分别有三个构造器,一个是无参构造器,一个是注入一个Bean的构造器,一个是注入两个Bean的构造器: public class ConstructorAutowiredT ...

  9. 配置中心 Spring Cloud config

    配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. 1.服务端 创建spring boot 项目 主要依赖 <dependenc ...

  10. 防火墙之iptables

    Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入和流出服务 ...