jQuery的显示和隐藏
程序员文章站
2022-06-04 11:19:17
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 ......
在 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 元素：
<!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>
上一篇： cad填充图案怎么安装?cad安装填充图案的详细方法
下一篇： 19年面试总结
推荐阅读