冯娜_20210114冯娜
知识点总结
一、定位
1、静态定位
position:staitc;<!--默认静态定位-->
2、相对定位
position:relative;<!--相对其正常的位置定位-->
3、绝对定位
position:absolute;<!--脱离正常的文档流，相对于<html>元素或staitc以外的第一个父元素进行定位-->
4、固定定位
position:fixed;<!--脱离正常的文档流，相对于浏览器视口本身进行定位-->
5、z-index
用于提升元素的层级
6、粘性定位
position:stucky;<!--相对定位和固定定位的混合体，当达到某一个阈值时固定到页面上-->
二、样式优先级
1、样式冲突：同一个元素有多个相同css属性来适配，这个时候就会发生样式冲突
2、样式优先级
内联样式>内部样式>外部样式>默认样式
id选择器>class选择器>元素选择器
3、改变优先级
使用!important提高优先级
三、JavaScript
1、BOM：核心对象是window，书写时可以省略window.
（1）window对象
window.alert("xxxx");//弹出的窗口有文字
window.prompt("xxxx");//弹出的窗口中有一段提示文字及输入框，有“确定”“取消”按钮
window.confirm("xxxx");//弹出询问窗口，有“确定”“取消”按钮，返回一个布尔类型的值
window.location;//其href属性，表示浏览器的地址，可以对其进行修改
window.history;//访问浏览器已经访问过的页面，forword()函数，表示前进一页，back()函数，表示后退一页，go(1)表示前进一页，go(-1)表示后退一页
window.document;//获取元素
（2）获取元素
document.getElementById();//根据id获取一个元素，所以id值不可以有相同的
document.getElementsByClassName();//根据class获取一（多）个元素，得到的数据类型是数组，具体的某一个元素可以用数组下标来寻找
document.getElementsByName();//根据name获取一（多）个元素，得到的数据类型是数组，具体的某一个元素可以用数组下标来寻找
document.getElementsByTagName();//根据标签名获取元素
document.querySelector();//根据选择器获取元素 （与css选择器的规则一样）
document.querySelectorAll();//根据选择器选择一（多）个元素，返回的是数组
（3）修改内容
元素.innerHTML;//修改html内容，内容中的html标签会被浏览器渲染
元素.innerText;//修改文本内容
（4）获取时间
var now1 = new Date(2020,01,14)
now1.setDate(10)
console.log(now1)//改变之后的日期
now1.setYear(119)
console.log(now1)
now1.setHours()//设置小时
now1.setMilliseconds()//设置毫秒
now1.setMinutes()//设置分钟
now1.setMonth()//设置月份
now1.setSeconds()//设置秒
now1.setTime()//设置时间戳
（5）定时器
setTimeout(函数名，间隔毫秒数)//一次性定时器
setInterval(函数名，间隔毫秒数)//循环定时器
clearInterval(函数名，间隔毫秒数)//清除定时器
案例：获取当前时间，设置按钮开始与暂停显示时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="t">
时间
</div>
<button type="button" onclick="ks()">开始</button>
<button type="button" onclick="js()">暂停</button>
<script type="text/javascript">
var timer;
//获取当时时间对象
function time(){
var t=document.getElementById("t")
var date=new Date();
var d=date.toLocaleString();
t.innerText=d;
}
//开始按钮事件
function ks(){
//若已经开始，先清除之前的
clearInterval(timer);
timer=setInterval(time,1000);
}
// 暂停按钮事件
function js(){
clearInterval(timer);
}
</script>
</body>
</html>
（6）综合案例
设置倒计时自动跳转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="zd">
<span id="num">3</span>秒后跳转到<a href="http://www.baidu.com">百度</a>
</div>
<script type="text/javascript">
//定义定时器
setInterval(n,1000);
//倒计时函数
function n(){
var num=document.getElementById("num");
number=num.innerText=num.innerText-1;
console.log(number)
if(number==1){
//跳转页面
location.href="http://www.baidu.com"
}
}
</script>
</body>
</html>
心得体会
今天结束了CSS的学习，开始了JavaScript的学习，这对我来说是个学习的好机会，之前对于BOM的学习非常的薄弱，要把握好这次机会，好好学习js。今天明白了如何获取元素，修改元素，以及定时器的用法，明天继续。
点赞
评论留言