1、常用词汇
昂 课 里 课
onclick 点击
额 乐(儿) 特
alert(1); 弹窗
// 康 搜
// 啃 搜
console.log(111111); 打印
2、js初识
html:结构层 刚出生的小鸟
css:样式层 五颜六色的羽毛
js: javascript 行为层 能飞了
js:用户与浏览器之间的交互行为
js代码要写在script标签中
css代码写在style标签中
js调试工具
js弹窗
alert():阻塞性
弹窗点击确定之后,后续的js代码才能执行,否则后续的js代码不会执行
js控制台打印
console.log();
js行间引入
写在开始标签中
<div class="box" onclick="alert('饿了,干饭1')">1</div>
<div class="box" onclick="alert('饿了,干饭2')">2</div>
js内部引入
js代码要写在script标签中
script标签可以在任何位置
一般写在body末尾或者head里面
<script>
console.log(111111111);
</script>
js入门三步曲:
- 交互效果可以遵循简单的三部曲来实现(入门三部曲)
- 1.找到谁: document.getElementById('id名')
- 2.加什么事件(做什么操作):标签.事件
- 3.做什么事情: 标签.事件=function(){要做的事情}
1、找到对应的标签
document.getElementById('id名'):在文档中通过id去获取元素
document.get Element By Id 在文档中 获得 元素 通过 id
document.getElementById('btn');
2、添加事件 onclick
元素.事件名
document.getElementById('btn').onclick
3、事件触发时的响应(要做什么事情)
元素.事件名 = function(){ 事件发生时要做的事件 }
document.getElementById('btn').onclick = function(){
alert("现在下课");
}
例:
<!-- 需求:点击box,弹出一句话,(嘿,哥们,你点了我) -->
<div id="box"></div>
<script>
//1.找到谁
document.getElementById('box');
// 打印一下看看是否拿到标签
console.log(document.getElementById('box'));
// 2.加什么事件(做什么操作):
// document.getElementById('box').onclick
// 3.做什么事情
document.getElementById('box').onclick = function () {
alert('嘿,哥们,你点了我')
}
</script>
4、绝对定位
绝对定位:
参照元素:直接父元素
偏移属性:top bottom left right
left:距离参照元素左边的位移 正值往右,负值往左
right:距离参照元素右边的位移 正值往左,负值往右
top:距离参照元素上边的位移 正值往下,负值往上
bottom:距离参照元素下边的位移 正值往上,负值往下
如果子元素绝对定位,父元素没有设置相对定位,则相对html(浏览器窗口)定位
子绝父相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 400px;
background-color: tomato;
margin: 50px auto;
/* 子绝父相 */
position: relative;
}
.wrap .box {
width: 200px;
height: 200px;
/* 原谅绿 */
background-color: greenyellow;
position: absolute;
/* left: 100px;
top: 100px; */
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">box</div>
</div>
</body>
</html>
子绝父绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 400px;
background-color: tomato;
margin: 50px auto;
/* 子绝父相 */
/* position: relative; */
position: absolute;
top: 100px;
left: 200px;
}
.wrap .box {
width: 200px;
height: 200px;
/* 原谅绿 */
background-color: greenyellow;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">box</div>
</div>
</body>
</html>