第一天 DOM
一、获取元素
1.1 根据id获取
- 因为我们文档页面从上往下加载,所以得先有标签,所以script写在标签下面
- get 获得 element 元素 by 通过 驼峰命名法
- 参数 id是大小写敏感的字符串
- 返回的是一个元素对象
<div id="timer">2022-3-23</div>
<script>
// 1.因为我们文档页面从上往下加载,所以得先有标签,所以script写在标签下面
// 2.get 获得 element 元素 by 通过 驼峰命名法
// 3.参数 id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('timer');
console.log(timer);
// 5. console.dir 打印我们的元素对象,更好的查看里面的属性和方法
console.dir(timer);
</script>
1.2 根据标签名获取
- 返回的是获取过来元素对象的集合 以伪数组的形式存储
- 如果页面中只有 1 个 li,返回的还是伪数组的形式
- 如果页面中没有li,返回的还是伪数组的形式
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
<ol id="ol">
<li>hhhhhh</li>
<li>llllll</li>
</ol>
<script>
// 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis);
//2.依次打印
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3.如果页面中只有 1 个 li,返回的还是伪数组的形式
// 4.如果页面中没有这个元素,返回的是空伪数组
//5.如果想打印ol里面的li的话
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
1.3 h5新增获取元素方式
- document.getElementsByClassName根据类名返回元素对象合集
var boxs = document.getElementsByClassName('box');
console.log(boxs);
-
document.querySelector根据指定选择器返回第一个元素对象
- 切记里面的选择器需要加符号
- 类选择器.box id选择器 #nav
var firstbox = document.querySelector('.box');
console.log(firstbox);
var nav = document.querySelector('#nav');
console.log(nav);
var firstli = document.querySelector('li');
console.log(firstli);
- document.querySelectorAll根据指定选择器返回所有元素对象
var Boxs = document.querySelectorAll('.box');
console.log(Boxs);
1.4 获取body元素和html元素
- 获取body元素
var bodyE = document.body;
console.log(bodyE);
- 获取html元素
var htmlE = document.documentElement;
console.log(htmlE);
二、事件基础
2.1 事件概述
- JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
- 简单理解: 触发— 响应机制。
- 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
2.2 事件三要素
- 事件源(谁)
- 事件类型(什么事件) 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
- 事件处理程序(做啥) 通过一个函数赋值的方式 完成
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert('皮卡丘');
}
2.3 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
三、操作元素
3.1 改变元素内容
- element.innerText
p.innerText = '2022-3-28';
- element.innerHTML
div.innerHTML = '<strong>加粗</strong>文字';
-
innerText和innerHTML的区别
- innerText 不识别html标签,去除空格和换行
- innerHTML 识别html标签 保留空格和换行的
- 这两个属性是可读写的 可以获取元素里面的内容
<div>加粗文字</div>
<p>
123
<span>456</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签,去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>加粗</strong>文字';
// 2. innerHTML 识别html标签 保留空格和换行的
div.innerHTML = '<strong>加粗</strong>文字';
var p = document.querySelector('p');
// 这两个属性是可读写的 可以获取元素里面的内容
console.log(p.innerText);
console.log(p.innerHTML);
</script>
3.2 修改元素属性
// img.属性
img.src = "xxx";
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
zxy.onclick = function () {
img.src = "images/zxy.jpg";
img.title = '张学友';
}
ldh.onclick = function () {
img.src = "images/ldh.jpg";
img.title = '刘德华';
}
</script>
3.3 修改样式属性
- 行内样式操作// element.style.width
- JS里面的样式采取驼峰命名法,比如 fontSize ,backgroundColor
- JS 修改 style 样式操作 ,产生的是行内样式,CSS权重比较高
<div></div>
<script>
// 获取元素
var div = document.querySelector('div');
// 注册事件,修改程序
div.onclick = function () {
div.style.backgroundColor = "blue";
div.style.width = '150px';
}
</script>
-
类名样式操作// element.className
- 如果样式修改较多,可以采取操作类名方式更改元素样式
- class 因为是个保留字,因此使用className来操作元素类名属性
- className 会直接更改元素的类名,会覆盖原先的类名
- 如果想保留原来的类名可以使用多类名选择器
<style>
.first {
width: 100px;
height: 100px;
background-color: rebeccapurple;
font-size: 12px;
}
.change {
width: 200px;
height: 200px;
background-color: red;
font-size: 20px;
}
</style>
<div class="first">
文字
</div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
// - className 会直接更改元素的类名,会覆盖原先的类名
// div.className = 'change';
// - 如果想保留原来的类名可以使用多类名选择器
div.className = 'first change';
}
</script>
3.4 派他思想(算法)
如果有同一组元素,我们相要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
<script>
// 获取所有元素
var btns = document.getElementsByTagName('button');
for (i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// console.log(11);
// 先将所有按钮的颜色清空
for (i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// 在将点击的按钮的颜色变色
this.style.backgroundColor = 'pink';
}
}
</script>
3.5 自定义属性
3.5.1 获取自定义属性
- 获取内置属性值(元素本身自带的属性) element.属性;
console.log(div.id);
- 获取自定义属性(也可获取内置属性值)element.getAttribute(‘属性’);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
3.5.2 设置属性
- 设置内置属性值 element.属性 = ‘值’;
div.id = 'test';
div.className = '6';
- 主要用于设置自定义的属性 element.setAttribute(‘属性’,‘值’);
div.setAttribute('index', 2);
div.setAttribute('class', 7);
3.5.3 删除属性
div.removeAttribute('index');
3.6 H5自定义属性
3.6.1 设置H5自定义属性
- H5规定自定义属性
data-
开头作为属性名并赋值
// 设置新的属性
div.setAttribute('data-time', 20);
3.6.2 获取H5自定义属性
-
兼容性获取 `element.getAttribute(‘data-index’)
-
H5新增的:
element.dataset.index
或element.dataset['index']
IE11才开始支持- h5新增的获取自定义属性的方法 它只能获取data-开头的
- 如果自定义属性里面有多个-链接的单词,我们获取的时候采取驼峰命名法
<body>
<div gettime="20" data-index="2" data-list-name="10"></div>
<script>
// 获取元素
var div = document.querySelector('div');
// 设置新的属性
div.setAttribute('data-time', 20);
// 通用的获取属性方式
console.log(div.getAttribute('gettime'));
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
console.log(div.getAttribute('data-time'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
四、节点操作
4.1 节点概述
- 一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点:nodeType 为1
- 属性节点:nodeType 为2
- 文本节点:nodeType 为3(文本节点包括文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点
4.2 父级节点
<div class="box">
<span class="erweima"></span>
</div>
<script>
var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);
</script>
4.3 子节点
- parentNode.childNodes(标准)返回值包含了所有的子结点,包括元素节点,文本节点等
- parentNode.children(非标准)它只返回子元素节点,其余节点不返回( 重点掌握 )
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script>
// 1. parentNode.childNodes(标准)返回值包含了所有的子结点,包括元素节点,文本节点等
var ul = document.querySelector('ul');
console.log(ul.childNodes);
// 2.parentNode.children(非标准)它只返回子元素节点,其余节点不返回
console.log(ul.children);
</script>
- 第一个子节点与最后一个子节点
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3.实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
4.4 兄弟节点
- 下一个兄弟节点:node.nextSibling 上一个兄弟节点:node.previousSibling
- 包含元素节点或者 文本节点等等
- 下一个兄弟节点:node.nextElementSibling 上一个兄弟节点:node.previousElementSibling
- 得到兄弟元素节点,但有兼容性问题
<body>
<div>div</div>
<span>span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
</body>
4.5 创建节点与添加节点
- 创建节点 document.createElement(‘tagName’);
- 添加节点
- node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
- node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点前面
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1.创建节点
var li1 = document.createElement('li')
var li2 = document.createElement('li')
// 2.添加节点
// 2.1添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li1);
// 2.2 3. 添加节点 node.insertBefore(child, 指定元素);
ul.insertBefore(li2, ul.children[0]);
</script>
</body>
4.6 删除节点
- node.removeChild(child) 从 DOM 中删除一个子节点,返回删除的节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li>1</li>
<script>
var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);
</script>
</body>
4.7 复制节点
- node.cloneNode()
- 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
- 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点
<script>
var ul = document.querySelector('ul');
// 复制节点
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
// 添加节点
ul.appendChild(lili);
</script>
五、 DOM核心
5.1 创建
- document.write
- innerHTML
- createElement
5.2 增
- appendChild
- insertBefore
5.3 删
- removeChild
5.4 改
- 主要修改dom的元素属性,dom元素的内容、属性、表单的值等
- 修改元素属性:src、href、title 等
- 修改普通元素内容:innerHTML、innerText
- 修改表单元素:value、type、disabled
- 修改元素样式:style、className
5.5 查
主要获取查询dom的元素
DOM提供的API方法:getElementById、getElementsByTagName (古老用法,不推荐)
H5提供的新方法:querySelector、querySelectorAll (提倡)
利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
5.6 属性操作
- 主要针对于自定义属性
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute:移除属性
六、事件高级
6.1 注册事件
- 注册事件有两种方式:传统方式和方法监听注册方式
<script>
var btn = document.querySelectorAll('button');
// 1.传统的注册事件方式
btn[0].onclick = function () {
alert('11');
}
btn[0].onclick = function () {
alert('111');
}
// 2.事件监听注册事件
btn[1].addEventListener('click', function () {
alert('22');
})
btn[1].addEventListener('click', function () {
alert('222');
})
</script>
-
事件监听注册事件 addEventListener
(1) 里面的事件类型是字符串 所以加引号 而且不带on
(2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
6.2 删除事件
<script>
var divs = document.querySelectorAll('div');
// 1.传统删除事件
divs[0].onclick = function () {
alert('11');
divs[0].onclick = null;
}
// 2.监听删除事件
divs[1].addEventListener('click', fn);
function fn() {
alert('22');
divs[1].removeEventListener('click', fn);
}
</script>
6.3 DOM事件流
-
事件流描述的是从页面中接收事件的顺序
-
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
-
捕获阶段 true
<script>
// 捕获阶段:father→son
var son = document.querySelector('.son');
var father = document.querySelector('.father');
son.addEventListener('click', function () {
alert('son');
}, true);
father.addEventListener('click', function () {
alert('father');
}, true);
</script>
- 冒泡阶段 false
<script>
// 捕获阶段:son→father
var son = document.querySelector('.son');
var father = document.querySelector('.father');
son.addEventListener('click', function () {
alert('son');
}, false);
father.addEventListener('click', function () {
alert('father');
}, false);
</script>
6.4 事件对象
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt
})
- event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
- 这个 event 是个形参,系统帮我们设定为事件对象,不需要传递实参过去
- 当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)
6.5 事件对象的常见属性和方法
6.5.1 e.target 返回触发事件的对象
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
console.log(e.target);
console.log(this);
})
- e.target 和 this 的区别:
- this 是事件绑定的元素, 这个函数的调用者(绑定这个事件的元素),上面例子返回ul
- e.target 是事件触发的元素。上面例子返回li
6.5.2 e.type 返回事件类型
var p = document.querySelector('p');
p.addEventListener('click', fn);
p.addEventListener('mouseover', fn);
p.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
6.5.3 事件对象阻止默认行为
- 常用方式 , 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();
})
- 传统注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);
}
6.5.4 阻止事件冒泡
e.stopPropagation();
6.6 事件委托
- 事件委托的原理(重点)
- 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function () {
alert('hhh');
})
</script>
- 以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。
6.7 常见的鼠标事件
- 禁止鼠标右键与鼠标选中
<body>
<h1>我是一段不愿意分享的文字</h1>
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault(); // 阻止默认行为
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
- 鼠标事件对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIY2p8vw-1664012139690)(C:\Users\zhaozijun\AppData\Roaming\Typora\typora-user-images\1651203051510.png)]
6.8 常用的键盘事件
6.8.1 常用的键盘事件
- 如果使用addEventListener 不需要加 on
onkeypress
和前面2个的区别是,它不识别功能键,比如左右箭头,shift 等- 三个事件的执行顺序是: keydown – keypress — keyup
<body>
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
</body>
6.8.2 键盘对象属性
onkeydown
和onkeyup
不区分字母大小写,onkeypress
区分字母大小写。- 在我们实际开发中,我们更多的使用keydown和keyup, 它能识别所有的键(包括功能键)
Keypress
不识别功能键,但是keyCode
属性能区分大小写,返回不同的ASCII值
<body>
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
// 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
</body>
第二天 BOM
一、BOM概述
1.1 概述
-
BOM = Browser Object Model 👉浏览器对象模型
-
提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window
-
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
-
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分
-
BOM与DOM对比
1.2 BOM的构成
- BOM 比 DOM 更大。它包含 DOM。
- window 对象是浏览器的顶级对象,它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
- 在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt()等。
二、window 对象的常见事件
2.1 窗口加载事件
-
window.onload
window.onload
是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。- 有了window.onload就可以把JS代码写到页面元素的上方
- 因为onload是等页面内容全部加载完毕,再去执行处理函数
- window.onload 传统注册事件方式,只能写一次
- 如果有多个,会以最后一个window.onload为准
- 如果使用addEventListener 则没有限制
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击');
})
})
-
DOMContentLoaded
- DOMCountentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等
- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间
- 交互效果就不能实现,必然影响用户的体验,此时用
DOMContentLoaded
事件比较合适。
window.addEventListener('DOMContentLoaded', function () {
alert('33');
})
- 区别
load
等页面内容全部加载完毕,包括页面dom元素,图片,flash,css等DOMContentLoaded
是DOM加载完毕,不包含图片 flash css 等就可以执行,加载速度比load更快一些
2.2 调整窗口大小事件
-
window.onresize
是调整窗口大小加载事件,当触发时就调用的处理函数 -
只要窗口大小发生像素变化,就会触发这个事件
-
我们经常利用这个事件完成响应式布局。
window.innerWidth
当前屏幕的宽度
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
if (window.innerWidth <= 900) {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
})
})
三、定时器
3.1 setTimeout()定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
<script>
function boom() {
// console.log('爆炸啦');
alert('爆炸啦')
}
setTimeout(boom, 3000);
</script>
- window可以省略
- 这个调用函数:
- 可以直接写函数
- 或者写函数名
- 或者采取字符串 ‘函数名()’ (不推荐)
- 延迟的毫秒数省略默认是0,如果写,必须是毫秒
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
- setTimeout() 这个调用函数我们也称为回调函数 callback
- 普通函数是按照代码顺序直接调用,而这个函数,需要等待事件,事件到了才会去调用这个函数,因此称为回调函数。
3.2 clearTimeout()停止定时器
window.clearTimeout(timeoutID)
-
clearTimeout()
方法取消了先前通过调用setTimeout()
建立的定时器
<script>
var timer = setTimeout(function () {
alert('boom');
}, 5000)
var button = document.querySelector('button');
button.addEventListener('click', function () {
clearTimeout(timer);
})
</script>
- 里面的参数就是定时器的标识符
3.3 setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数]);
-
setInterval()
方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
<script>
setInterval(function () {
console.log('输出');
}, 1000)
</script>
window
可以省略- 这个回调函数:
- 可以直接写函数
- 或者写函数名
- 或者采取字符 ‘函数名()’
- 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次
3.4 clearInterval()停止定时器
-
clearInterval ( )
方法取消了先前通过调用setInterval()
建立的定时器 -
注意:
window
可以省略- 里面的参数就是定时器的标识符
3.5 this指向
- this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁
现阶段,我们先了解一下几个this指向 - 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数实例
四、JS执行机制
4.1 JS是单线程
- JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。
- 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
4.2 同步和异步
- 同步
- 前一个任务结束后再执行后一个任务
- 同步任务都在主线程上执行,形成一个 执行栈
- 异步
- 在做这件事的同时,你还可以去处理其他事情
- JS中的异步是通过回调函数实现的
- 异步任务有以下三种类型
- 普通事件,如
click
,resize
等 - 资源加载,如
load
,error
等 - 定时器,包括
setInterval
,setTimeout
等
- 普通事件,如
- 异步任务相关回调函数添加到任务队列中
- 执行顺序:
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
- 同步任务放在执行栈中执行,异步任务由异步进程处理放到任务队列中,执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行,由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
五、location对象
- window 对象给我们提供了一个
location
属性用于获取或者设置窗体的url,并且可以解析url。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
5.1 URL
5.2 location对象属性
- 重点记住:
href
和search
5.3 location对象方法
六、navigator对象
- navigator 对象包含有关浏览器的信息,它有很多属性
- 我们常用的是
userAgent
,该属性可以返回由客户机发送服务器的user-agent
头部的值
七、history对象
- window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互
- 该对象包含用户(在浏览器窗口中)访问过的 URL。
第三天 网页特效
一、元素偏移量 offset 系列
- offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
● 获得元素距离带有定位父元素的位置
● 获得元素自身的大小(宽度高度)
● 注意: 返回的数值都不带单位 - offsetTop与offsetLeft得到位置偏移,以带有定位的父亲为准,如果没有父亲或者父亲没有定位,则以body为准
- offsetWidth与offsetHight得到位置大小,是包括padding+border+width
- offsetParent得到父亲,必须是带有定位的父亲,如果没有父亲或者父亲没有定位,则返回body
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.得到位置偏移
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 是以带有定位的父亲为准,如果没有父亲或者父亲没有定位,则以body为准
console.log(son.offsetLeft);
// 2.得到位置大小,是包括padding+border+width
console.log(father.offsetWidth);
console.log(father.offsetHight);
// 3.得到父亲,必须是带有定位的父亲,如果没有父亲或者父亲没有定位,则返回body
console.log(son.offsetParent);
</script>
- offset 与 style 区别
- offset
● offset 可以得到任意样式表中的样式值
● offset 系列获得的数值是没有单位的
● offsetWidth 包含padding+border+width
● offsetWidth 等属性是只读属性,只能获取不能赋值
● 所以,我们想要获取元素大小位置,用offset更合适 - style
● style 只能得到行内样式表中的样式值
● style.width 获得的是带有单位的字符串
● style.width 获得不包含padding和border 的值
● style.width 是可读写属性,可以获取也可以赋值
● 所以,我们想要给元素更改值,则需要用style改变
- offset
二、元素可视区client系列
- client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。
- 通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
三、元素滚动scroll系列
-
[ scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
-
被卷去的头部:
- 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
四、总结和对比:
- 三系列总结:
- 三系列主要用法:
offset系列 经常用于获得元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得
- mouseenter 和mouseover的区别
● 当鼠标移动到元素上时就会触发 mouseenter 事件
● 类似 mouseover,它们两者之间的差别是
● mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。
● mouseenter 只会经过自身盒子触发
● 之所以这样,就是因为mouseenter不会冒泡
● 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
五、动画函数封装
5.1 动画原理
- 核心原理:通过定时器 setInterval() 不断移动盒子位置。
- 实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
if (div.offsetLeft >= 400) {
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30)
</script>
5.2 简单动画封装
<script>
// 简单动画函数封装,obj为目标对象,target为目标位置
function animate(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('span');
// 调用函数
animate(div, 400);
animate(span, 200);
</script>
5.3 给不同的对象添加不同的定时器
// 调用函数
animate(div, 400);
btn.addEventListener('click', function () {
animate(span, 200);
})
六、移动端动画
6.1 touch触摸事件
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function () {
console.log('开始触摸');
})
div.addEventListener('touchmove', function () {
console.log('触摸移动');
})
div.addEventListener('touchend', function () {
console.log('触摸结束');
})
</script>
6.2 classList的使用
<script>
var div = document.querySelector('div');
var button = document.querySelector('button');
// 添加类
div.classList.add('three');
// 删除类
div.classList.remove('one');
// 切换类
button.addEventListener('click', function () {
document.body.classList.toggle('bg');
})
</script>
6.3 插件的使用总结
- 确定插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo示实例文件,查看需要引入的相关文件,并且引入
- 赋值实例文件中的结构html,样式css及js代码
七、本地存储
7.1 window.sessionStorage
-
生命周期为关闭浏览器窗口
-
在同一个窗口下数据可以共享
-
以键值对的形式存储使用
-
存储数据 sessionStorage.setItem(key, value)
-
获取数据 sessionStorage.getItem(key)
-
删除数据 sessionStorage.removeItem(key)
-
清空所有数据 sessionStorage.clear() 慎用!会删除该页面的所有数据
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function () {
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('age', val);
})
get.addEventListener('click', function () {
console.log(sessionStorage.getItem('uname'));
})
remove.addEventListener('click', function () {
sessionStorage.removeItem('uname');
})
del.addEventListener('click', function () {
sessionStorage.clear();
})
</script>
7.2 window.localStorage
- 生命周期永久生效,除非手动删除,否则关闭页面也会存在
- 可以多窗口共享
- 以键值对的形式存储使用
- 存储数据 localStorage.setItem(key, value)
- 获取数据 localStorage.getItem(key)
- 删除数据 localStorage.removeItem(key)
- 清空所有数据 localStorage.clear() 慎用!会删除该页面的所有数据