周瑞兵_20210114 周瑞兵
一、 知识点总结
1、 BOM（Browser Object Model）
定义JavaScript操作浏览器的接口，提供与浏览器窗口交互的功能，用于描述浏览器中对象与对象之间的层次关系的模型，提供了独立以页面内容并能够与浏览器窗口进行交互的对象结构。
| window | ||
|---|---|---|
| history | document | location |
| 网页中所有元素 |
浏览器会为每一个页面自动创建window,location,history,document对象,借助于这些对象JavaScript能够与浏览器进行交互，从而操作浏览器中的元素。
2. 选择器
类似于CSS中的选择器，他能够通过id，class等属性选中一个元素或一个集合，用法如下：
##### 2.1 document.querySelector()
querySelector()方法只会返回匹配到的第一个元素，如有多个元素，可使用querySelectorAll()方法；
他们的参数可以是id值，class，标签。
2.2 document.getElementById()
这个方法将返回一个与之对应id属性的节点对象
2.3 document.getElementByTagName()
这个方法返回一个对象数组（准确的说是HTMLCollection集合）,返回元素的顺序是它们在文档中的顺序
2.4 document.getElementsByClassName()
这个方法来获取指定class名的元素,该方法返回文档中所有指定类名的元素集合
3. 定时器
3.1 setTimeout()
##### 3.1.1 setTimeout()方法的作用
在指定的毫秒数后执行指定代码
3.1.2 setTimeout()方法的基本用法
setTimeout("function", (毫秒)milliseconds)
3.2 setInterval()
3.2.1 setInterval()方法的作用
间隔指定的毫秒数不停地执行指定的代码，间隔毫秒一直循环下去。
3.2.2 setInterval()方法的基本用法
setInterval("function", (毫秒)milliseconds)
4.通过JavaScript操作HTML中元素
4.1 示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date</title>
</head>
<body>
<p id="timer"></p>
<hr />
<button onclick="start()" >开始</button>
<button onclick="pause()" >暂停</button>
<script type="text/javascript">
// 定时任务变量
var timer ;
// 获取当前时间对象
function start(){
// 如果已经开始了,先清除之前的
clearInterval(timer);
// 创建定时任务
timer = setInterval(time,1000);
}
function time(){
var date = new Date();
var str = date.toLocaleString();
var p = document.querySelector("#timer");
p.innerText = str;
}
function pause(){
clearInterval(timer);
}
</script>
</body>
</html>
4.2示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
p{
text-align: center;
font-size: 24px;
letter-spacing: 5px;
}
span{
font-size: 28px;
font-weight: bold;
}
</style>
</head>
<body>
<p><span id="num">3</span>秒后跳转到<a href="demo.html" id="a">demo</a>页面.或直接点击<a href="demo.html">此处</a>跳转!</p>
<script type="text/javascript">
// 先获取 数字
var num = document.querySelector("#num");
// 每个一秒 减 1
setInterval(jian,1000);
function jian(){
var cur = num.innerText - 1;
if(cur == 0){
// 跳转 document.querySelector("#a").href
location.href = "demo.html";
}
num.innerText = cur;
}
</script>
</body>
</html>
二、心得体会
1.相对定位是相对于元素正常定位，通过top，bottom，left，right属性进行偏移；
绝对定位是相对于已经定位的（非static）的祖先元素进行定位。
2.运用浏览器的控制台去调试程序。
近期评论