jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画


2017年8月3日学习总结


jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画

jQuery选择器、操作DOM、事件、动画


一个小案例

模拟网页上的广告,点击x关掉或3秒后自动关掉。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>homework1</title>
<style>
#ad{
width:800px;
height:500px;
background-color:yellow;
margin:0 auto;
text-align:center;
line-height:500px;
font-size:100px;
}
#ad input{
margin:10px;
float:right;
background-color:red;
}
#ad p{
margin:0;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function shut(){
$("#ad").slideUp();
}

$(function(){
setTimeout(function(){
$("#ad").slideUp();
},3000);
});
</script>
</head>
<body>
<div id="ad">
<input type="button" value="x" onclick="shut();"/>
<p>广告</p>
</div>
</body>
</html>


网页运行结果


jQuery选择器、操作DOM、事件、动画