开发工具与关键技术：DW与jQuery
作者：陈锦通
撰写时间：2019年1月19日星期六
第一步：
先来导入jQuery的文件，否则会报错。
<!--<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>-->
<script>
$(".button").click(function(){
$(".div").hide(3000);
/*$(".div").show(3000);*/
});
</script>
结果：
第二步：
来了解一下要用的两个属性值
- show是匹配到显示隐藏的元素。
- hide是匹配到隐藏显示的元素。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.div{
width:400px;
height:400px;
background:#FC0004;
}
.button{
width:100px;
height:50px;
background:#F414D7;
border:3px solid #00FF5C;
}
</style>
</head>
<body>
<button class="button">这是按钮</button>
<div class="div"></div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><!--导入jQuery文件-->
<script>/*jQuery代码部分*/
$(".button").click(function(){
$(".div").hide(3000);/*隐藏显示的元素*/
/*$(".div").show(3000);*//*显示隐藏的元素*/
/*hide和show一起用的话结果不变*/
});
</script>
</body>
</html>