目录
（二）、Dom -- Web Apis（操作浏览器功能和页面元素的API）
5.2、location.assign() 可以后退网页编辑
一、JavaScript的组成
ECMAscript 、 Dom、 Bom
（一）、ECMAscript --JavaScript基础
（二）、Dom -- Web Apis（操作浏览器功能和页面元素的API）
1.
Dom（Document Object model）
w3c组织推荐的处理可扩展标志性语言（html，xml）的标准编程接口。通过这些接口可以改变元素的内容，结构和样式等。
对于HTML
dom操作：主要是元素的操作。有：创建、增、删、改、查、属性操作 及 事件的操作 |
1.1 操作元素
Dom在实际开发中主要用于操作元素1、获取页面元素的方法
调用方法document.getElementById(); 参数是大小写敏感的字符串；返回的是对象(Object)型； 可以通过console.dir()来打印返回的元素对象，比直接打印console.log() 更好的查看里面的属性和方法。
(1)、调用方法document.getElementsByTagName(); 参数是标签名；返回的是 获得的元素对象的集合，以伪数组的形式存储（无论获取的对象集合中有多少个内容，即使没有内容，任然以伪数组的形式存在 (2)、获取父元素内部中指定标签名的子元素 element.getElementsByTagName() 获取时 不包括父元素自己，父元素必须是单个对象（哪一个元素的对象） 常用的方法是给父元素一个id
（1）、通过类名（class）来获取 document.getElementsByClassName（） 返回的对象也是伪数组 （2）、document.querySelector（） 不用管什么选择器，只返回指定选择器的第一个元素对象。如果是class需要加“.” , 如果是id需要加“#”，如果是标签则什么都不需要加。 （3）、document.querySelectorAll（） 获取所有元素
（1）、获取body元素 document.body 返回body元素对象 （2）、获取html元素 document.documentElement 返回html元素对象 |
）；1、操作元素 - -更改元素内容
- element.innerText 起始位置到终止位置的内容，不识别html标签并且不保留内部标签，空格和换行也会改变。 不标准
不识别html标签
不保留标签，空格换行不保留 |
- element.innerHTML 起始位置到终止位置的全部内容，识别html标签并保留内部标签，空格和换行保留。W3C标准
识别html标签
保留标签，空格换行保留 |
| 打开页面直接显示当前时间
|
2、操作元素 -- 修改表单属性
修改表单中的内容时，需要注意的是不可以用inp.innerHTM 需要改变其value值。
// inp.innerHTML = '已显示内容'; 这样的做法有误！
inp.value = '已显示内容';
btn.disabled = true;
// this.disabled = true; 此处this指的是事件函数的调用者btn！
定位input框中的鼠标时，已定位用onfocus ，未定位用onblur； 见事件
// 鼠标在input框里面时，内容消失；在其它地方时，“输入内容”存在
inp.onfocus = function(){
inp.value='';
}
inp.onblur = function(){
inp.value='已显示内容';
}
3、操作元素 -- 修改样式属性
- 行内样式操作
div.onclick = function(){
div.style.backgroundColor = 'pink';
this.style.width = '100px';
} - 类名样式操作 className （修改的内容多的时候） 常使用
<style>
div {
background-color: aquamarine;
height: 100px;
}
.change {
background-color: blueviolet;
color: rgb(209, 18, 18);
font-size: larger;
height: 200px;
}
</style>
<!-- 此处没有给div 附类名 -->
<body>
<div>jiayou</div>
</body>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.className = 'change';
// div.style.backgroundColor = 'pink';
// this.style.width = '100px';
}
</script>
4、操作元素 -- 改变元素的属性
如，点击不同按钮，改变图片的src和title属性
|
1.2、属性操作
自定义属性
目的是保存数据以便使用
element.属性 用来html自带有属性 getAttribute 可用于自定义属性
4、区分自定义属性和其他属性的方法
5、 H5新增获取自定义属性方法
这里dataset表示data开头的所有自定义属性的集合 注意：
|
节点
1、父节点 parentNode 2、子节点 parentNode.childNodes 子节点获得的是所有的子节点的集合，包扣文本节点等，想要获得特定的节点，需要处理利用nodetype来处理，所以 一般不使用childNodes 一般使用 parentNode.children 它可以获得所有子元素的节点，常用 3、 第一个子元素节点 firstElementChild 最后一个子元素节点 lastElementChild ie9以上才可以用 4、兄弟节点 下一兄弟节点 node.nextSibling 包含所有节点 nextElementSibling(下一元素） 上一兄弟节点 node.previousSibling 包含所有节点 previousElementSibling(上一元素） 5、创建和添加节点（元素）
// 添加元素的三个步骤 1、获取要新添加的元素（给其必要属性） 2、获取已有的参考父元素 3、父.appendChild(子) 优化： 情况1、父元素已经存在，添加子元素 。使用文档片段！ 文档片段对象: 在内存中临时保存多个平级子节点的虚拟父节点对象，当文档片段将所有子元素送到DOM树上指定父节点下之后文档片段对象就释放了！不会成为DOM树上一级真实的节点！ 先生成文档片段对象，将子元素添加到文档片段中；再将片段加到父元素中 var frag = document.createDocumentFragment() frag.appendChild(spanChild) divPar.appendChild(frag) 情况2、父元素不存在 如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树
6、删除节点
7、复制节点
|
1.3、事件
事件三要素：事件源、事件类型、事件处理程序
事件源： 获取事件源 var btn = document.getElementById('btn');
事件类型：如何触发 点击事件 btn.onclick
进阶：--------------------------------------------------------------------------------------
（一）、注册/绑定 事件
1、传统方式
btn.onclick = function(){
alert('传统方式');
}2、方法监听注册事件
| addEventListener（type,listener [,useCapture] ） 事件监听方式
|
（二）、删除/解绑 事件
1、传统方式
btn.onclick = null;2、方法监听注册事件
| removeEventListener（type,listener [,useCapture] );
|
（三）、dom事件流
（四）、事件对象
event 对象 对标事件的状态，如鼠标按键状态、鼠标位置等；
| 事件对象的常见 对象和方法
1、event.target 代表的是触发事件的对象，他和 this 有着不同的含义，this 指的是绑定事件的对象和元素。
2、阻止默认事件发生
（五）、 3、阻止冒泡
|
（六）、事件委托/代理 *
（七）、常用鼠标事件
1、
附加：
| 例题1： 点击事件改变元素内容
|
2、鼠标事件对象
（八）、常见的键盘事件
document.addEventListener('keydown',function(){
console.log('按下时触发');
}) keyCode 判断用户按下那个键
document.addEventListener('keypress',function(e){
// keypress区分大小写，但是不认识功能键
alert(e.keyCode);
})（三）、Bom -- Web Apis
1、什么是BOM
2、windows对象的常见事件
2.1、窗口加载事件
1、传统
2、新
（1）、用 windows.addEventListener 不存在限制次数的问题
（2）、此方法与上面（1）不同的是，（1）事件触发是在所有包括样式表，图片这些，而该方法不包括这些。
2.2 调整窗口大小事件
3、定时器
3.1、两种定时器
1、setTimeout（） 多少毫秒后执行函数
（1）、语法规范
|
标识符： setTimeout（）函数及element.onclick = function() ,或者 addEventListener("click",fn);这些函数也成回调函数。 |
（2）、停止定时器 window.clearTimeout (timeoutID)
timeoutID 为定时器的标识符名； Windows可以省略
<body>
<img src="img/绿色.png">
<button>anniu</button>
</body>
<script>
var img = document.querySelector('img');
var timer1 = setTimeout(callback,5000);
// 5s后关闭广告
function callback(){
img.style.display = 'none';
}
//按钮关闭定时器
document.addEventListener('click',function(){
clearTimeout(timer1);
})2、setInterval () 每隔多少毫秒执行一次函数
（1）、语法规范与setTimeout（）一样
var timer2 = setInterval(demo1,2000);
function demo1(){
alert('setInterval');
}例题：倒计时
<!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>倒计时</title>
<style>
.daojishi {
height: 200px;
width: 200px;
border: 1px solid black;
background-color: rgb(247, 81, 81);
}
.time_cont {
font: 30px 'Microsoft yahei';
text-align: center;
padding-top: 50px;
}
.time_show {
text-align: center;
padding-top: 50px;
}
.hour,
.minute,
.second {
display: inline-block;
text-align: center;
background-color: black;
width: 20px;
height: 20px;
padding: 5px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="daojishi">
<div class="time_cont">
本场倒计时
</div>
<div class="time_show">
<span class="hour">2</span>
<span class="minute">0</span>
<span class="second">0</span>
</div>
</div>
</body>
</html>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-8-28 22:00:00'); //返回的是预定的时间
countDown(); //在开启定时器 之前先调用下，防止第一次刷新有空白
// 开启定时器
setInterval(countDown,1000);
// 预定的时间到现在还有多长时间
function countDown(){
var nowTime = +new Date(); //返回的是当前的时间
// var inputTime = +new Date(); //返回的是预定的时间
// + 的作用是将 object类型转化为 number 类型
var timers = (inputTime - nowTime) /1000; //单位是毫秒
var d = parseInt(timers/60/60/24);
d = d < 10 ? ('0' + d) : d; //判断是否为两位数，如果不是在前面添加一个0，如'05';
var h = parseInt(timers/60/60%24);
h = h < 10 ? ('0' + h) : h;
hour.innerHTML = h;
var m = parseInt(timers/60%60);
m = m < 10 ? ('0' + m) : m;
minute.innerHTML = m;
var s = parseInt(timers%60);
s = s < 10 ? ('0' + s) : s;
second.innerHTML = s;
}
</script>
（2）、停止setInterval() 定时器 window.clearInterval (intervalID)
附：
| this的指向问题： 一般情况下，this指向的是最终调用它的对象 全局下，this指的是全局对象window |
4、js执行队列
4.1 JS是单线程
同一时间只做一件事
4.2 同步和异步 （h5 新提出异步）
打印出来的是
所有它先将同步放在主线程上 先执行，将异步任务放在 任务队列 里，再执行异步；这里同步有
，再执行fn()；
如果有两个及以上的异步任务需要 “异步进程处理” 来安排 进入任务队列 的顺序，
它会循环的查看队列任务里面的内容（事件循环），如果有就处理！
5、location 对象
5.1、
例题： 第一个页面
<html>
<body>
<!-- <div>now web 5s后自动跳转 dao 百度</div> -->
<form action="pra(location对象用法2).html">
<input type="text" name="username" placeholder="请输入username">
<button type="submit">提交</button>
</form>
</body>
</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>location对象用法2</title>
</head>
<body>
<div></div>
</body>
</html>
<script>
var div = document.querySelector('div');
var forUsn = location.search; //forUsn为 ?username=amy
var username;
forUsn = forUsn.substr(1); //forUsn为 username=amy
forUsn = forUsn.split('='); //forUsn为 [username], [amy]
div.innerHTML = forUsn[1] + ' welcome！'; //forUsn[1]是 amy
</script>5.2、
location.assign() 可以后退网页
6、navigator 对象
7、history 对象
四、PC 端网页特效异度
1、常见offset系列属性
event.pageX; 当前鼠标距离左边的长度
event.pageY; 当前鼠标距离上边的长度
2、常见client系列属性
client 与offset 最大的区别是 client 不包含边框
附加：立即执行函数不需要调用，直接执行的函数 格式： (function( 形参 ) {} )( 实参 ) 或 ( function(形参) {}(实参)) 特点：创建了一个作用域，不会有命名冲突的情况，都是局部变量！ 一些没有见过的属性。
|
3、常见scroll系列属性
元素被卷去的头部距离 用scrollTop；页面被卷去的头部距离 用pageYOffset
 |
4、mouseenter 和 mouseover 的区别
5、动画函数封装
1、原理
2、动画函数的封装
需要注意：调用封装函数产生的空间浪费
<!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>动画</title>
<style>
div {
position: absolute;/* 要实现该效果，必须要加position */
left: 0;
width: 100px;
height: 100px;
background-color: aquamarine;
}
img {
position: absolute;/* 要实现该效果，必须要加position */
top: 100px;
left: 0;
}
</style>
</head>
<body>
<div></div>
<img src="img/open.png">
</body>
</html>
<script>
var div = document.querySelector('div');
function cartoon(obj, target) {
// 每调用一次这个函数，都会增加一个定时器，浪费空间；
// 解决方法给obj定义一个属性，且为了避免同一个对象不停调用该属性，每次调用该属性前先清除以前的定时器
clearInterval(obj.timer);
// 步长值step 写到定时器里面
var step = (target - obj.offsetLeft)/10; //动画呈现速度缓冲效果,速度越来越慢
if(step < 0)
step = -1;
else
step = 1;
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
// 让div元素移动到400px处
cartoon(div, 400);
var img = document.querySelector('img');
cartoon(img, 400);
</script>3、缓冲动画
这里的算法会出现小数，所以动画移动的位置会出现偏差，需要让步长取整;
| 让div 从400px 移动到 200px； 让img 从 0px 移动到 200px
js部分代码： |
===》 
例题：轮播图
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
