您的位置：首页 > Web前端 > JQuery

Jquery基础之hide,show,toggle

2016-05-08 09:37 549 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航