<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="mshengjq.js"></script>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
#left{
background-color: red;
height: 300px;
width: 200px;
float: left;
}
#middle{
background-color: gold;
width: 400px;
height: 300px;
float: left;
}
#right{
background-color: green;
height: 400px;
width: 200px;
/*margin: 0 auto;*/
float: right;
}
#footer{
background-color: blue;
height: 20px;
width: 800px;
clear: both;
margin: 0 auto;
}
#both{
width: 800px;
/*height: 600px;*/
margin: 0 auto;
/*clear: both;*/
background-color: pink;
}
#head{
background-color: yellow;
height: 100px;
width: 800px;
margin: 0 auto;
}
#empty{
clear: both;
}
</style>
<script>
$(document).ready(function() {
$("div").click(function(){
//alert(this.id);
// if(this.id=="head"){
// $(this).css("background-color","red");
// }
// else{
$(this).hide(2000,ShowDiv);//函数名不加双引号以及括号
// }
});
});
function ShowDiv(){
var x = $("#head").show(2000);//此处可以使用jQuery css选择器
$(this).css("background-color","red");
}
function GetDivs(){
var x=document.getElementsByTagName("div");
alert(x.length);
var idnames="";
for(var item in x){
var idname=x[item].id;
idnames=idname +" ";
}
alert(idnames);
}
</script>
</head>
<body>
<div id="head">
</div>
<div id="both">
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
<div id="empty">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
06-09
515
515
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
