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. Win10怎样显示此电脑

    1.在桌面空白处右击鼠标,在出现的选项框中选择“个性化”按钮: 2.在打开的页面中选择左侧的“主题”选项,在右侧选择“桌面图标设置”: 3.在弹出的小窗口中勾选“计算机”,点击“确定”,回到桌面即有此 ...

  2. FTP\SFTP连接命令

    五.ftp连接     输入:ftp 10.18.49.19 2121六.输入账号密码  zhangsan/sdjg34t#七.输入:ls    查看文件是否上传       如上传 输入:bye   ...

  3. 关于web技术的一些见解

    在目前的软件技术领域中,互联网方面的技术是其中最热门的一部分.现在做一个普通的网站,就涉及到大部分的web技术了:前端展示,后端数据处理,功能模块等.我觉得,也就分两个部分的技术:前端,后端. 前端, ...

  4. C基础知识(4):指针--p=&a和*p=a的区别详解

    对于*p,[p = &a]和[*p = a]的区别详解 (1) p=&a就是用a的地址对p赋值,&p不改变,变的是p (2) *p=a就是把p所指向的那一内存空间的值赋值为a, ...

  5. python-Web-django-qq扫码登陆

    1.建路由 2.写qq登录的a链接 3 在控制器的loginQq的方法:拼接url,跳转到这个url: 去:https://graph.qq.com/oauth2.0/authorize?respon ...

  6. Typora快捷键记录

    目前使用的是Typora这款Markdown软件,记录一下快捷键用法: 1.无序列表,黑色实心圆点或白色空心圆点 首先去除缩进,使用“Ctrl”+"["键或者“Shift”+&qu ...

  7. Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper)

    Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...

  8. webdriervAPI(元素等待)

    from  selenium  import  webdriver from selenium.common.exceptions import NoSuchElementException driv ...

  9. C#4.0中的协变和逆变

    原文地址 谈谈.Net中的协变和逆变 关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Anima ...

  10. 登录进入Mysql数据库的几种方式

    前提:连接进入mysql数据库 本机安装的myslq基础信息: host= "localhost", # 数据库主机地址:127.0.0.1 port=3306, # 端口号 us ...