使用jq来让盒子消失
写代码之前,先说一下jq;
jq:一般是指jQuery。JQuery是一个优秀的javascript类库,jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果,并且方便地为网站提供Ajax交互。
我发一个jq的文件,你先把这个文件放到和你写HTML的文件相同的文件夹下:
链接:https://pan.baidu.com/s/1krb39cyMg2u6WRRRWqQUPw
提取码:27hi
放好之后就可以写这个代码了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('div').click(function(){
// $('#box').hide(500)
// 隐藏
// $('#box').show(500)
// 打开
$('#box').toggle(500)
// 既可以隐藏有可以打开
// unction(){
// $('#box').hide(500)
// 隐藏
// $('#box').show(500)
// 打开
$('#box').toggle(500)
// 既可以隐藏有可以打开
})
})
</script>
</head>
<body>
<div id="box"></div>
<div id="box_1"></div>
<!--<button id="null_1">消失</button>-->
</body>
</html>
这里可以很明确的看到,相比js,jq的代码就显得更加简单,内容也变得更加丰富多彩,所以一般我们都会优先选择jq来写。