Jquery基础之hide,show,toggle

1.认识JQurey,在上面的博文中有提到,实现同样的效果,引用jquery可以减少很多代码。jquery的宗旨就是write less,do more,这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量。搭建jquery环境也比较简单,一个是下载jquery文件库到本地引用,还有一个直接引用文件库的URL,这里提供一个1.9.0的地址:
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

2. Jquery 效果:隐藏hide(),显示 show(),切换toggle()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>初识jQuery</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用这个jquery库-->

<style>
#test{
    display:none;
    width:120px;
    height:50px;
    border:1px solid blue;
	 }
</style>
</head>
    
    <body>
        <div id="test">Hello world!</div>
		<!--设置三个按钮,每次点击调用特定的函数-->
        <button onclick="sayHello()">点我打开!</button>
        <button onclick="sayGoodbye()">点我关闭!</button>
		<button onclick="change()">点我切换!</button>
		
        <script type="text/javascript">
            function sayHello(){
                $("#test").show(5000);
			<!--设参数5000,表示用5000ms的时间完成这个动作-->	
            }
			
			 function sayGoodbye(){
                $("#test").hide();
			<!--不设置,默认速度-->
            }
			
			 function change(){
                $("#test").toggle("slow");
			<!--设置以slow的速度打开-->
            }
        </script>
    </body>
</html>


你可能感兴趣的:(Jquery基础之hide,show,toggle)