8.28 jQuery
2018-8-28 18:25:27
jQuery 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html
2018-8-28 19:53:19
还是讲的jQuery !
有点点枯燥!但是很好理解!
这几天想多看看书!电脑玩的太多!需要精心看书!
扎克伯格 说过 有时候有状态学多点,没状态就干点其他的!
越努力,越幸运!
<!DOCTYPE html>
<html>
<head>
<title>位置相关方法</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.c1{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1">我是div</div>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>自定义模态框</title>
<meta charset="utf-8">
<style type="text/css">
.cover{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 998;
}
.modal{
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<p>
<label>用户名:
<input type="text" name="">
</label>
</p>
<p>
<label>密码:
<input type="text" name="">
</label>
</p>
<p>
<input type="submit" value="登入">
<input id="cancel" type ="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// 找到点击弹出模态框的按钮
$("#b1").click(function(){
// 把 .cover和.modal显示出来(去除hide)
$(".cover").removeClass("hide"); // 显示背景
$(".modal").removeClass("hide"); //显示模态框
})
// 找到取消按钮,绑定事件
$("#cancel").click(function(){
//给背景和模态框都加上hide类
$((".cover").addClass("hide");
$((".modal").addClass("hide");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>修改css样式</title>
<meta charset="utf-8">
</head>
<body>
<p>小强</p>
<p>二哥</p>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("p").click(function(){
//把当前点击的标签变绿
// 在处理事件的函数中用this 表示 当前触发事件的标签
$(this).css("color","red");
$(this).css("font-size","24px");
})
</script>
</body>
</html>
