jQuery 效果 - 隐藏和显示

jQuery hide() 和 show()

show()方法显示隐藏的元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery-2.2.0.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("#hide").click(function(){
 8   $("p").hide();
 9   });
10   $("#show").click(function(){
11   $("p").show();
12   });
13 });
14 </script>
15 </head>
16 <body>
17 <p id="p1">如果点击"隐藏"按钮,我就会消失。</p>
18 <button id="hide" type="button">隐藏</button>
19 <button id="show" type="button">显示</button>
20 </body>
21 </html>

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery-2.2.0.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8   $("p").hide(1000);
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">隐藏</button>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 </body>
18 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery-2.2.0.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $(".ex .hide").click(function(){
 8     $(this).parents(".ex").hide("slow");
 9   });
10 });
11 </script>
12 <style type="text/css">
13 div.ex
14 {
15 background-color:#e5eecc;
16 padding:7px;
17 border:solid 1px #c3c3c3;
18 }
19 </style>
20 </head>
21
22 <body>
23
24 <h3>中国办事处</h3>
25 <div class="ex">
26 <button class="hide" type="button">隐藏</button>
27 <p>联系人:张先生<br />
28 北三环中路 100 号<br />
29 北京</p>
30 </div>
31
32 <h3>美国办事处</h3>
33 <div class="ex">
34 <button class="hide" type="button">隐藏</button>
35 <p>联系人:David<br />
36 第五大街 200 号<br />
37 纽约</p>
38 </div>
39
40 </body>
41 </html>

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

可规定"slow"、"fast" 或毫秒

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery-2.2.0.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8   $("p").toggle("1000");
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">切换</button>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 </body>
18 </html>
时间: 2024-10-09 22:16:27

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

Jqurey学习笔记---5、jQuery 效果 - 隐藏和显示

jQuery 效果 - 隐藏和显示演示一个简单的 jQuery hide() 方法. a.$(document).ready(function ()-->触法事件-->执行事件. 1. <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#

jQuery 效果 – 隐藏和显示

在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动,淡入淡出,以及动画,哇哦! 点击 显示/隐藏面板 实例 jQuery hide() 简单的jQuery hide()方法演示. jQuery hide() 另一个hide()实例.演示如何隐藏文本. jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 s

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

jQuery动画隐藏和显示 hide() show() toggle()用法

jQuery动画隐藏和显示 hide()  show() toggle()用法 <div>www.cnmibee.com</div> 1,jQuery hide() 和 show() $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 2,jQuery toggle

JQuery效果隐藏/显示

hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 speed 可选.规定元素从可见到隐藏的速度.默认为 "0". 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" 在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度.宽度.外边距.内边距

jquery的隐藏和显示——下拉框式

下拉框定义value值 后面写上onchange方法(onchange 事件会在域的内容改变时发生) 然后定义方法, 然后两个span解决.

jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hide()与show()方法 eg1:显示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微软雅黑";color:#666;} .yym{wid

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggle() 方法来切换 hide() 和 show() 方法. parents 找到每个span元素的所有祖先元素. $("span").parents() 找到每个span的所有是p元素的祖先元素. $("span").parents("p") 1 &

Jquery效果代码--(二)

//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); }); //展示效果演示 $(document).ready(function(){ $("#show").click(function