思洋互动网站建设学前班

利用jQuery的显示与隐藏函数实现（1）

1．显示和隐藏函数

在jQuery的众多函数中，专门提供了操作元素显示和隐藏的函数show()、hide()。

（1）jQuery函数show()--显示元素

该函数显示隐藏的元素。其语法形式如下：

1. show()  
2. show(speed,[callback]) 

注：如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过   hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。speed，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；callback，在动画完成时执行的函数，每个元素执行一次。

（2）jQuery函数hide()--隐藏元素

该函数隐藏显示的元素。其语法形式如下：

1. hide()  
2. hide(speed,[callback]) 

注：如果选择的元素是隐藏的，这个方法将不会改变任何东西。speed，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；callback，在动画完成时执行的函数，每个元素执行一次。

HTML代码和CSS样式参考光盘内容。这里看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").hide();      //隐藏元素  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").show();      //显示元素  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script> 

 

上述代码简单实现了DIV的显示与隐藏的切换。页面初始加载及按钮的偶数次单击时效果如图3.8所示，奇数次单击"显示/隐藏"按钮后效果如图3.9所示。

图3.8  DIV的显示

图3.9  DIV的隐藏