jQuery的显示和隐藏

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

隐藏例子：

1 <!DOCTYPE html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>jquey隐藏显示</title>6      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->7     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>8     <script type="text/javascript">9         $(document).ready(function(){10            $('p').click(function(){11                $(this).hide();
12            })
13         })
14     </script>
15 </head>
16 <body>
17       <p>点我，消失</p>
18       <p>点我，我也消失</p>
19 </body>
20 </html>

通过 jQuery，还可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

--------------------------------------------------------------------
注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquey隐藏显示</title><style>div{width:100px;height:100px;border:1px solid red;}</style><!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 --><script type="text/javascript" src="jquery-1.12.0.min.js"></script><script type="text/javascript">$(document).ready(function(){$('.show1').click(function(){$('div').show(1000);}) $('.hide1').click(function(){$('div').hide(1000);}) })</script>
</head>
<body><button class="show1">显示</button><button class="hide1">隐藏</button><div><p>点我，消失</p><p>点我，我也消失</p></div>
</body>
</html>

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

例子：

1 <!DOCTYPE html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>jquey隐藏显示</title>6     <style>7           div{width:100px;height:100px;border:1px solid red;}8     </style>9      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->
10     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
11     <script type="text/javascript">
12         $(document).ready(function(){13           $(".show1").click(function(){14             $("div").toggle("slow");
15             });
16          });
17     </script>
18 </head>
19 <body>
20     <button class="show1">显示&隐藏</button>
21       <div>
22           <p>点我，消失</p>
23       <p>点我，我也消失</p>
24       </div>
25 </body>
26 </html>

jQuery的显示和隐藏相关推荐

jQuery学习-显示与隐藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>显示与 ...
jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效. hide()方法 hide() 方法用于隐藏指定的元素,与 CSS 中的 display:none 效果类似. 语法如下所示: ...
jQuery的显示与隐藏
显示.隐藏 // show() $("#show").click(function(){$("p").show(); });// hide() $(" ...
html中元素的隐藏，以及用jquery来显示和隐藏元素
添加一个属性:style="display:none;" <td id="tdTest" style="display:none;"& ...
【JavaWeb】JQuery实现广告显示和隐藏动画效果
我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head& ...
JavaWeb12_JQuery_广告的自动显示与隐藏
使用目录查看更佳! JQuery学习 JQuery基础概念一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的 ...
jQuery动画的显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
jQuery判断当前元素显示状态并控制元素的显示与隐藏
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id") ...
html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...
基于jquery实现的定时显示与隐藏div广告的实现代码下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTime ...

jQuery的显示和隐藏

jQuery的显示和隐藏相关推荐

最新文章

热门文章