定义和用法
此方法可以将匹配元素隐藏。
如果被选的元素已被显示，则隐藏该元素。
语法:$(selector).hide(speed,callback)
| 参数 | 描述 |
|---|---|
| speed |
可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 |
| callback |
可选。hide 函数执行完之后，要执行的函数。 除非设置了 speed 参数，否则不能设置该参数。 |
隐藏当前的 HTML 元素。
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 $("button").click(function(){
10 $(this).hide();
11 })
12 })
13 </script>
14 </head>
15 <body>
16 <button type="button">Click me</button>
17 </body>
18 </html>
隐藏 id="test" 的元素，隐藏指定的元素。如指定id名或class名称的元素。（指定id名或class名的元素必须用在元素名前面加“#”或者“.” 和css样式一样）
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 $("button").click(function(){
10 $("#test").hide();
11 })
12 })
13 </script>
14 </head>
15 <body>
16 <h2>This is a heading</h2>
17 <p>This is a paragraph.</p>
18 <p id="test">This is another paragraph.</p>
19 <button type="button">Click me</button>
20 </body>
21 </html>
1 <html>
2 <head>
3 <script type="text/javascript" src="/jquery/jquery.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function()
6 {
7 $("button").click(function()
8 {
9 $(".test").hide();
10 });
11 });
12 </script>
13 </head>
14 <body>
15
16 <h2 class="test">This is a heading</h2>
17 <p class="test">This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button type="button">Click me</button>
20
21 </body>
22 </html>
隐藏所以相同标签元素，如<p>标签
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 $("button").click(function(){
10 $("p").hide();
11 })
12 })
13 </script>
14 </head>
15 <body>
16 <h2>This is a heading</h2>
17 <p>This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button type="button">Click me</button>
20 </body>
21 </html>
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果方法对隐藏效果加以时间限定，那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如：
1 $("div").hide(2000)
以上代码可以将所有div元素在2000毫秒(2秒)内隐藏。此方法也可以在隐藏完成后触发一个回调函数。例如:
1 $("div").hide(2000,function(){alert("我隐藏好了")});
实例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=" utf-8">
5 <meta name="author" content="http://www.jb51.net/" />
6 <title>hide()函数-脚本之家</title>
7 <style type="text/css">
8 div{
9 color:blue;
10 background-color:green;
11 width:100px;
12 height:100px;
13 margin-top:10px;
14 }
15 </style>
16 <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
17 <script type="text/javascript">
18 $(document).ready(function(){
19 $("#first").click(function(){
20 $(".first").hide();
21 })
22 $("#second").click(function(){
23 $(".second").hide(2000,function(){alert("我隐藏好了")});
24 })
25 })
26 </script>
27 </head>
28 <body>
29 <div class="first"></div>
30 <div class="second"></div>
31 <button id="first">瞬间隐藏</button>
32 <button id="second">优雅的隐藏</button>
33 </body>
34 </html>
时间： 2024-10-15 07:00:02