Jquery基础之hide,show,toggle

16-05-09 来源：[db:作者]

收藏我要投稿

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

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script src="../../jquery/1.9.0/jquery.js" type="text/javascript"></script><!--引用这个jquery库-->
<style type="text/css">
#test{
    display:none;
    width:120px;
    height:50px;
    border:1px solid blue;
	 }</style>
<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>

2.Jquery 效果：隐藏hide（）,显示 show（），切换toggle（）

点击复制链接与好友分享!回本站首页