WebAPIs 和 JS 基础关联性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxDT9LDO-1650614076669)(D:\图片\1649645626(1)].png)
API
简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
比如手机充电的接口:这个充电接口就是一个API
Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
现阶段我们主要针对于浏览器讲解常用的 API ,主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框, 直接使用 alert(‘弹出’)
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
因为 Web API 很多,所以我们将这个阶段称为 WebAPIs
API 和 Web API 总结
- API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)
- 学习 Web API 可以结合前面学习内置对象方法的思路学习
DOM
DOM简介
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 文档:一个页面就是一个文档,DOM 中使用 document表示
- 元素:页面中的所有标签都是元素,DOM 中使用 element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
DOM 把以上内容都看做是对象
获取元素
DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5新增的方法获取
- 特殊元素获取
1.根据 ID 获取
(1)getElementById() 元素对象
使用 getElementById() 方法可以获取带有ID 的元素对象。
document.getElementById(‘id’);
console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
使用 console.dir() 可以打印我们获取的元素对象,更好的查看对象里面的属性和方法
// 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
2.根据标签名获取
(2)getElementsByTagName() 集合
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名'); // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
<body>
<ul>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久22</li>
<li>知否知否,应是等你好久33</li>
<li>知否知否,应是等你好久44</li>
<li>知否知否,应是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);//得到第一个li
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
4.通过 HTML5 新增的方法获取
(1)getElementsByClassName(‘类名’)元素对象集合
(2)querySelector(‘选择器’)元素对象
(3))querySelectorAll(‘选择器’);元素对象集合
- document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
- document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
- document.querySelectorAll(‘选择器’); // 根据指定选择器返回
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
获取特殊元素(body,html)
- doucumnet.body // 返回body元素对象
- document.documentElement // 返回html元素对象
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
事件
事件三要素
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
页面中有一个按钮,当鼠标点击按钮的时候,弹出“你好”警示框。
获取事件源(按钮)
注册事件(绑定事件),使用 onclick
编写事件处理程序,写一个函数弹出 alert 警示框
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};
鼠标事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08e0pfTO-1650614076671)(D:\图片\图片1.png)]
// 点击一个按钮,弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
<button id="a">点我</button>
<script>
var b = document.getElementById('a');// 1. 获取事件源
// var b = document.querySelector('#a');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
b.onclick = function() {
alert('啾咪');
}
操作元素 改变元素内容
JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
<body>
<button>时间</button>
<div></div>
<script>
var a = document.querySelector('button');
var b = document.querySelector('div');
a.onclick = function() {
b.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
innerText 和 innerHTML的区别
除了可以赋值之外 ,还可以获取内容
innerText 和 innerHTML赋值:
<div></div>
1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是:</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是:</strong> 2019';
innerText 和 innerHTML获取内容:
<p>
我是文字
<span>123</span>
</p>
1. innerText去除空格和换行
var p = document.querySelector('p');
console.log(p.innerText);
1. innerHTML保留空格和换行的
var p = document.querySelector('p');
console.log(p.innerHTML);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2ZaMwCU-1650614076672)(D:\图片\1649679116(1)].png)
常用元素的属性操作 修改元素属性
常用元素的属性操作
1.innerText、innerHTML 改变元素内容
2.src、href
3.id、alt、title
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>
案例1:分时显示不同图片,显示不同问候语
根据不同时间,页面显示不同图片,同时显示不同的问候语。
如果上午时间打开页面,显示上午好,显示上午的图片。
如果下午时间打开页面,显示下午好,显示下午的图片。
如果晚上时间打开页面,显示晚上好,显示晚上的图片。
<body>
<img src="./img/s.gif" alt="">
<div>上午好</div>
<script>
// 1.获取元素
var a = document.querySelector('img');
var b = document.querySelector('div');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
a.src = './img/s.gif';
b.innerHTML = '亲,上午好,好好写代码';
} else if (h < 18) {
a.src = './img/x.gif';
b.innerHTML = '亲,下午好,好好写代码';
} else {
a.src = './img/w.gif';
b.innerHTML = '亲,晚上好,好好写代码';
}
</script>
</body>
表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性: type、value、checked、selected、disabled
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
案例:仿京东显示密码
点击按钮将密码框切换为文本框,并可以查看密码明文。
<body>
<div class="box">
<label for="">
<img src="./img/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素
var a = document.getElementById('eye');
var b = document.getElementById('pwd');
// 2. 注册事件 处理程序
var f = 0;
a.onclick = function() {
if (f == 0) {
a.img = './img/open.png';
b.type = 'text';
f = 1; // 点击一次之后, flag 一定要变化
} else {
a.img = './img/close.png';
b.type = 'password';
f = 0;
}
}
</script>
</body>
样式属性操作 element.style element.className
1.element.style 行内样式操作
2.element.className类名样式操作
注意:
1.JS 里面的样式采取驼峰命名法比如 fontSize、backgroundColor
2.JS 修改style 样式操作,产生的是行内样式,CSS权重比较高
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。
<div class="box">
淘宝二维码
<img src="./img/tao.png" alt="">
<i class="close-btn">×</i>
</div>
<script>
// 核心思路: 利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素
// 点击按钮,就让这个二维码盒子隐藏起来即可
// 1. 获取元素
var a = document.querySelector('.box');
var i = document.querySelector('.close-btn');
// 2. 注册事件 处理程序
i.onclick = function() {
a.style.display = 'none';
}
</script>
可以利用 for 循环设置一组元素的精灵图背景
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
显示隐藏文本框内容
当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。
首先表单需要2个新事件,获得焦点 onfocus 失去焦点 onblur
如果获得焦点, 判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容
如果失去焦点, 判断表单内容是否为空,如果为空,则表单内容改为默认文字
<body>
<input type="text" value="手机">
<script>
// 1.获取元素
var text = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3. 注册事件 失去焦点事件 onblur
text.onblur = function() {
// console.log('失去了焦点');
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
</script>
1.element.style 行内样式操作
2.element.className类名样式操作
注意:
1.JS 里面的样式采取驼峰命名法比如 fontSize、backgroundColor
2.JS 修改style 样式操作,产生的是行内样式,CSS权重比较高
注意:
-
如果样式修改较多,可以采取操作类名方式更改元素样式。
-
class因为是个保留字,因此使用className来操作元素类名属性
-
className 会直接更改元素的类名,会覆盖原先的类名。
-
如果想要保留原先的类名,我们可以这么做 多类名选择器
第一种方法:this.className = ‘first 空格 change’;那么原来的类名first就加上了change
第二种方法:this.className=this.className+'change’或者this.className += ‘change’;
案例: 密码框格式提示错误信息
用户如果离开密码框,里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息
首先判断的事件是表单失去焦点 onblur
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
因为里面变化样式较多,我们采取className修改样式
var a = document.querySelector('.ipt');
var me = document.querySelector('.message');
a.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
me.innerHTML = '您输入的位数不对要求6~16位';
me.className = 'message wrong';
} else {
me.className = 'message right';
me.innerHTML = '您输入的正确';
}
}
操作元素总结
操作元素是 DOM 核心内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q29U4K8l-1650614076673)(D:\图片\1649818038(1)].png)
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var a = document.getElementsByTagName('button');
// a得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < a.length; i++) {
a[i].onclick = function() {
for (var i = 0; i < a.length; i++) {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
a[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'red';
}
//2. 首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
}
</script>
</body>
//百度换肤
<ul class="baidu">
<li><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
</ul>
// 1. 获取元素
var a = document.querySelector('.baidu').querySelectorAll('img');
// 2. 循环注册事件
for (var i = 0; i < a.length; i++) {
a[i].onclick = function() {
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
//全选与反选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1、先实现全选的功能
// 1.1、获取全选按钮
var all = document.querySelector('#j_cbAll');
var inps = document.querySelector('#j_tb').querySelectorAll('input');
// 等同于:var inps=document.querySelector('#j_tb input');
all.onclick = function() {
for (var i = 0; i < inps.length; i++) {
inps[i].checked = this.checked;
}
}
// 2、实现反选的操作
// 2.1、给每一个小的复选框 注册一个点击事件
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function() {
// 2.2、判断 全选按钮 是否被选中了?
// 2.3、获取到 小的复选框 被选中的个数
var a = 0;
for (var i = 0; i < inps.length; i++) {
if (inps[i].checked) {
a++
}
}
// 根据a的值 就可以决定全选按钮的选中状态了 当a的值为4的时候 被选中
if (a == inps.length) {
all.checked = true;
} else {
all.checked = false;
}
}
}
</script>
</body>
开关灯案例:
<body>
<button>开关</button>
<script>
var a = document.querySelector('button');
console.log(a);
var f = 0;
a.onclick = function() {
if (f == 0) {
document.body.style.backgroundColor = 'black';
a.innerHTML = '开';
f = 1;
} else {
document.body.style.backgroundColor = '#fff';
a.innerHTML = '关';
f = 0;
}
}
</script>
自定义属性的操作
如果是自定义属性那么不能通过 element.属性 的方法得到 如下
<div getTime="20" data-index="2" data-list-name="andy"></div>
var div = document.querySelector('div');
console.log(div.getTime);//结果是undefined因为getTime是自定义属性可以通过以下的代码实现
console.log(div.getAttribute('getTime')); //输出结果是20
// h5新增的获取自定义属性的方法 它只能获取data-开头的
div.setAttribute('data-time', 20);//新增了一个data-time="20"的属性
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
console.log(div.dataset);// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset.index);//等同于如下:
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
<div id="demo" index="1" class="nav"></div>
有一个盒子有以下操作
1.获取属性值 element.属性
(1) element.属性
console.log(div.id);
(2)element.getAttribute(''属性'); // 获取标签行内属性值 get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
element.setAttribute('属性', '值'); // 设置标签行内属性值
element.removeAttribute('属性'); // 移除标签行内属性
上述三个方法用于获取任意的行内属性值,“element.属性”获取内置属性值。
2.设置属性值 setAttribute
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test'; //<div id="test" index="1" class="nav"></div>
div.className = 'navs';//<div id="test" index="1" class="navs"></div>
(2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);//<div id="test" index="2" class="navs"></div>
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className//<div id="test" index="2" class="footer"></div>
3.移除属性removeAttribute
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');<div id="test" class="footer"></div>
案例:tab栏的切换
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
<script>
var tab_cons = document.querySelector('.tab_cons');
var divs = tab_cons.querySelectorAll('div');
var tab_btns = document.querySelector('.tab_btns');
var inputs = tab_btns.querySelectorAll('input');
console.log(divs[0]);
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute('index', i);
inputs[i].onclick = function() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].className = '';
}
this.className = 'active';
var index = this.getAttribute('index');
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
divs[index].style.display = 'block';
}
}
</script>
节点操作
1.节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML元素(节点)均可被修改,也可以创建或删除。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kJ0uNaQr-1650614076674)(D:\图片\图片10.png)]
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3
我们在实际开发中,主要操作的是元素节点
2.获取元素节点
获取元素节点通常使用两种方式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wmol4Juv-1650614076674)(D:\图片\1649845711(1)].png)
3.节点层次
利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系
(1).父级节点 node.parentNode
node.parentNode 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
(2).子节点
1. parentNode.childNodes
parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
案例:
// DOM 提供的方法(API)获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes); //ul所有的子节点 包含 元素节点 文本节点等等的集合
console.log(ul.childNodes[0].nodeType); //文本节点 nodeType 为 3
console.log(ul.childNodes[1].nodeType); //元素节点 nodeType 为 1
2. parentNode.children
parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回
(这个是我们重点掌握的)。
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
3.parentNode.firstChild
firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点
案例:
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
4.parentNode.lastChild
lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。
5. parentNode.firstElementChild
firstElementChild 返回第一个子元素节点,找不到则返回null。
案例
// 5. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
6. parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点,找不到则返回null。
注意:这5 6两个方法有兼容性问题,IE9 以上才支持。
实际开发中,firstChild 和 lastChild包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:重要!!!!!
1.如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
2.如果想要最后一个子元素节点,可以使用 parentNode.chilren[parentNode.chilren.length - 1]
(3). 兄弟节点
1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。
2. node.previousSibling
previousSibling 返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。
3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
注意:3,4这两个方法有兼容性问题, IE9 以上才支持。
案例:
<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>
4.创建节点createElement()
document.createElement(‘tagName’)
document.createElement()方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
5.删除节点node.removeChild(child)
node.removeChild(child)
node.removeChild()方法从 DOM 中删除一个子节点,返回删除的节点。
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
6.复制节点node.cloneNode()
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。
注意:
- 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
- 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<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>
7.替换节点parentNode.replaceChild(newChild, oldChild);
parentNode.replaceChild(newChild, oldChild); 用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。
简单版发布留言案例
核心思路: 点击按钮之后,就动态创建一个li,添加到ul 里面。
创建li 的同时,把文本域里面的值通过li.innerHTML 赋值给 li
如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore
<script>
// 1. 获取元素
var text = document.querySelector('textarea ');
var ul = document.querySelector('ul');
var bt = document.querySelector('button');
// 2. 注册事件
bt.onclick = function() {
if (text.value == '') {
alert('请输入内容');
} else {
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 它的父亲
var sc = document.querySelectorAll('a');
for (var i = 0; i < sc.length; i++) {
sc[i].onclick = function() {
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
案例:动态生成表格
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { //遍历数据个数并根据个数创建行数 外面的for循环管行 tr
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in datas[i]) { //创建一行的单元格 里面的for循环管列 td
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = datas[i][k];
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = '<a href="javascript:;">删除 </a>';
}
// 4. 删除操作 开始
var sc = document.querySelectorAll('a');
for (var i = 0; i < sc.length; i++) {
sc[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</table>
</body>
创建元素总结
- document.write()
- innerHTML
- document.createElement()
1.创建元素总结区别
1. document.write 是直接将内容写入页面的内容流,会导致页面全部重绘 document.write('<div>123</div>');
2. innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
3. innerHTML 复制节点的时候,不会复制原先节点的事件,会存在内存泄露问题
4. 如果页面创建元素很多,建议使用 innerHTML 因其效率更高(不要拼接字符串,采取数组形式拼接)
5. 如果页面创建元素较少,建议使用 createElement()
总结:不同浏览器下,innerHTML 效率要比 creatElement 高!!!!!!
事件高级
1.注册事件(绑定事件)
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式
(1)传统注册方式
利用 on 开头的事件 onclick
<button onclick=“alert('hi~')”></button>
btn.onclick = function() {}
特点: 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
(2)方法监听注册方式
w3c 标准 推荐方式
addEventListener() 它是一个方法
IE9 之前的 IE 不支持此方法,可使用 attachEvent() 代替
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
①addEventListener事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收三个参数:
- type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认是 false。学完 DOM 事件流后,我们再进一步学习
②attachEvent事件监听方式ie9以前的版本支持
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。
该方法接收两个参数:
- eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on
- callback: 事件处理函数,当目标触发事件时回调函数被调用
注意:IE8 及早期版本支持!!!
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function() {
alert(11);
})
</script>
</body>
(3).注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器
2.删除事件(解绑事件)
(1).传统注册方式
eventTarget.onclick = null;
(2).方法监听注册方式
①eventTarget.removeEventListener(type,listener[, useCapture]);
②eventTarget.detachEvent(eventNameWithOn, callback);
案例:
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
</body>
(3)删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
DOM事件流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sk0b5VQm-1650614076675)(D:\图片\1649932928(1)].png)
我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点(
最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfOzY0bC-1650614076675)(D:\图片\图片11.png)]
注意
1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和 attachEvent 只能得到冒泡阶段。
3.addEventListener(type, listener[,useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
结果就是点击son会先弹出father再弹出son
4.实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
结果就是先弹出son然后弹出father最好是document
5.有些事件是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave
6.事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。
事件对象
什么是事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener(‘click’,function(event){})
// 这个 event就是事件对象,我们还喜欢的写成e或者 evt
官方解释:event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象 event,它有很多属性和方法。
注意:事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
事件对象本身的获取存在兼容问题:
1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
解决:
e = e || window.event;
// 了解兼容性
// div.onclick = function(e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
比如:
- 谁绑定了这个事件。
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
eventTarget.onclick = function(event) {
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt
})
这个 event 是个形参,系统帮我们设定为事件对象,不需要传递实参过去。
当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。
var div = document.querySelector('div');
div.onclick = function(e) {
// console.log(e);
// console.log(window.event);
// e = e || window.event;
console.log(e);
}
1.常见事件对象的属性和方法
e.target 只兼容ie9以上和 this 的区别:
this 是事件绑定的元素,这个函数的调用者(绑定这个事件的元素) e.target 是事件触发的元素。
// 我们给ul 绑定了事件 那么this 就指向ul
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this);//返回的是绑定的ul
console.log(e.currentTarget);
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
console.log(e.target);//返回的是点击的li
})
兼容性处理:
// 了解兼容性
// div.onclick = function(e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
e.currentTarget 但是ie678不认识
了解 跟 this 有个非常相似的属性 e.currentTarget ie678不认识
2.阻止默认行为(事件)
1. e.preventDefault() // dom 标准写法 普通浏览器
如果注册事件用addEventListener 那么阻止行为只能用e.preventDefault()
// 2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);//次行代码不会被输出
}
2. e.returnValue 低版本浏览器 ie678
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);//次行代码不会被输出
}
3.return false 没有兼容性问题
特点: return 后面的代码不执行了, 而且只限于传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);//次行代码不会被输出
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgDVDPtb-1650614076676)(D:\图片\图片12.png)]
// 常见事件对象的属性和方法
// 1. 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);//返回结果为click mouseover mouseout
}
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);
}
阻止事件冒泡的两种方式
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。
事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。
1.e.stopPropagation() 标准写法
- 标准写法:利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
<body>
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
2.e.cancelBubble = true; 非标准写法 IE 6-8
- 非标准写法:IE 6-8 利用事件对象 cancelBubble属性
e.cancelBubble = true;
阻止事件冒泡的兼容性解决方案
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
事件委托
事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', f);
function f(e) {
e.target.style.backgroundColor = 'red';//e.target 当前点击的对象
}
</script>
常见鼠标事件
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
2. 禁止选中文字 selectstart
禁止鼠标选中(selectstart 开始选中)
鼠标跟随事件坐标
<style>
img {
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
// 2.核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标, 把这个x和y坐标做为图片的top和left 值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3 . 千万不要忘记给left 和top 添加px 单位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>
</body>
案例:
鼠标按下盒子左键拖拉 松开不动
var div = document.querySelector('div');
div.addEventListener('mousedown', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//移动的时候,把鼠标在页面中的坐标,减去鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
div.style.left = e.pageX - x + 'px';
div.style.top = e.pageY - y + 'px';
}
//鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
常用的键盘事件
事件除了使用鼠标触发,还可以使用键盘触发。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3HiJNCZ-1650614076676)(D:\图片\图片13.png)]
document.onkeyup = function() {
console.log('我弹起了');
}
document.addEventListener('keyup', function() {//如果使用addEventListener 不需要加 on
console.log('我弹');
})
注意:
- 如果使用addEventListener 不需要加 on
2.onkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头,shift 等。
3.三个事件的执行顺序是: keydown-- keypress — keyup
1.键盘事件对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RrKtQNPa-1650614076677)(D:\图片\图片14.png)]
注意:
onkeydown 和 onkeyup 不区分字母大小写,onkeypress 区分字母大小写。
在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键(包括功能键)
Keypress 不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
// 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
// console.log(e);
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bb9cfefh-1650614076677)(D:\图片\图片15.png)]
(1)键盘案例
模拟京东按键输入内容
当我们按下 s 键, 光标就定位到搜索框
①核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面
②使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
③搜索框获得焦点: 使用 js 里面的 focus()方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
if (e.keyCode === 83) {
search.focus();
}
})
(2)京东快递单号案例
①快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的文字
②同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容
③如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
④注意: keydown 和 keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中。
⑤keyup事件触发的时候,文字已经落入文本框里面了
⑥当我们失去焦点,就隐藏这个con盒子
⑦当我们获得焦点,并且文本框内容不为空,就显示这个con盒子
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
// console.log('输入内容啦');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
// 当我们失去焦点,就隐藏这个con盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 当我们获得焦点,就显示这个con盒子
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})
BOM 浏览器对象模型
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
1.DOM
文档对象模型
DOM 就是把「文档」当做一个「对象」来看待
DOM 的顶级对象是 document
DOM 主要学习的是操作页面元素
DOM 是 W3C 标准规范
2.BOM
浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差
3.BOM 的构成
BOM比 DOM 更大,它包含 DOM
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZO4xMTc-1650614076678)(D:\图片\图片16.png)]
4.window对象的常见事件
(1)窗口加载事件
1. window.onload 与 window.addEventListener
window.onload = function(){}
或者
window.addEventListener("load",function(){});
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
注意:
1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
2. window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
3. 如果使用 addEventListener 则没有限制
//load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
2. DOMContentLoaded Ie9以上才支持
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。
(2)调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
定时器
window 对象给我们提供了2个非常好用的方法-定时器。
1.setTimeout()只调用一次
setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// setTimeout('callback()', 3000); // 我们不提倡这个写法
setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
注意:
- window 可以省略。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”,fn); 里面的 函数也是回调函数。
案例:5秒后自动关闭的广告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
2.setInterval()会调用很多次
window.setInterval(调用函数, 延时时间)
setInterval(function() {
console.log('继续输出');
}, 1000);
setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
案例:
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>
停止 setInterval() 定时器
window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
一.案例:倒计时
①这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)
②三个黑色盒子里面分别存放时分秒
③三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
④第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
⑤最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var ss = document.querySelector('.hour');
var ff = document.querySelector('.minute');
var mm = document.querySelector('.second');
var inputTime = +new Date('2022-4-16 18:00:00');
countDown();
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
ss.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
ff.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
mm.innerHTML = s;
}
</script>
body>
<div>
<span>00</span>
<span>天</span>
<span>00</span>
<span>时</span>
<span>00</span>
<span>分</span>
<span>00</span>
<span>秒</span>
</div>
<script>
var spans = document.querySelectorAll('span');
function djs() {
// 1、先得到当前的时间
var now = new Date();
// 2、给一个未来的时间点
var wl = new Date('2022-04-17 2:20:30');
// 3、得到时间差值 可以直接拿未来的时间点 - 当前的时间点 就是 时间差值 毫秒数
// var cha = wl - now; //毫秒
var chas = parseInt((wl - now) / 1000); //除以1000以后会有小数点 所以取整 秒
// 判断 chas的值 如果是0了 那么证明 未来时间 与 当前时间 一样了
// 作业 : 就是清除定时器的时候 页面上的 值应该都是 00
if (chas <= 0) {
clearInterval(timer);
spans[6].innerHTML = '00';
return true
}
var day = parseInt(chas / 60 / 60 / 24);
console.log(day);
// 4、进行一个三元表达式的判断 补0的
day = day >= 10 ? day : '0' + day;
// 5、把 这个得到的倒计时天数 给 赋值过去
spans[0].innerHTML = day;
var hours = parseInt(chas / 60 / 60 % 24);
// console.log(hours);
// 4、进行一个三元表达式的判断 补0的
hours = hours >= 10 ? hours : '0' + hours;
// 5、把 这个得到的倒计时天数 给 赋值过去
spans[2].innerHTML = hours;
var minutes = parseInt(chas / 60 % 60);
// console.log(minutes);
// 4、进行一个三元表达式的判断 补0的
minutes = minutes >= 10 ? minutes : '0' + minutes;
// 5、把 这个得到的倒计时天数 给 赋值过去
spans[4].innerHTML = minutes;
var seconds = parseInt(chas % 60);
// console.log(seconds);
// 4、进行一个三元表达式的判断 补0的
seconds = seconds >= 10 ? seconds : '0' + seconds;
// 5、把 这个得到的倒计时天数 给 赋值过去
spans[6].innerHTML = seconds;
}
djs()
var timer = setInterval(djs, 1000)
// 清除倒计时
</script>
</body>
二.案例:发送短信
<body>
手机号码: <input type="number"> <button>发送</button>
<script>
// 按钮点击之后,会禁用 disabled 为true
// 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的,因此需要用到定时器
// 定义一个变量,在定时器里面,不断递减
// 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 3; // 定义剩下的秒数 自定义一个时间
btn.addEventListener('click', function() {
btn.disabled = true;//点一下以后按钮禁用
var timer = setInterval(function() {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);//停止定时器
btn.disabled = false;//复原按钮
btn.innerHTML = '发送';//复原按钮字体
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
this
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
现阶段,我们先了解一下几个this指向
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
<button>点击</button>
<script>
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
console.log(this);
function fn() {
console.log(this);
}
window.fn();
window.setTimeout(function() {
console.log(this);
}, 1000);
// 2. 方法调用中谁调用this指向谁
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); // this指向的是btn这个按钮对象
// }
btn.addEventListener('click', function() {
console.log(this); // this指向的是btn这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();
三.课后作业:时钟
<style>
div {
width: 400px;
height: 100px;
line-height: 100px;
background-color: pink;
margin: 0 auto;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div>
<span class="aa"></span>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
var day1 = new Date('2022-4-16');
var year = day1.getFullYear();
var mo = day1.getMonth() + 1;
var ri = day1.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var xing = day1.getDay();
console.log('今天是:' + year + '年' + mo + '月' + ri + '日' + arr[xing]);
var aa = document.querySelector('.aa');
aa.innerHTML = year + '年' + mo + '月' + ri + '日' + arr[xing];
// // 格式化日期 时分秒
// var date = new Date();
// console.log(date.getHours()); // 时
// console.log(date.getMinutes()); // 分
// console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
// var b = document.querySelector('.b');
var ss = document.querySelector('.hour');
var ff = document.querySelector('.minute');
var mm = document.querySelector('.second');
countDown();
setInterval(countDown, 1000);
function countDown() {
var ow = new Date(); // 返回的是当前时间总的毫秒数
// var now = ow / 1000;
// var h = parseInt(now / 60 / 60 % 24); //时
var h = ow.getHours();
// var h = parseInt(date / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
ss.innerHTML = h + ':'; // 把剩余的小时给 小时黑色盒子
// var m = parseInt(now / 60 % 60); // 分
var m = ow.getMinutes();
m = m < 10 ? '0' + m : m;
ff.innerHTML = m + ':';
// var s = parseInt(now % 60); // 当前的秒
var s = ow.getSeconds();
s = s < 10 ? '0' + s : s;
mm.innerHTML = s;
}
// countDown();
</script>
</body>
JS执行队列
JS 是单线程
console.log(1);
setTimeout(function () {
console.log(3);
}, 1000);
console.log(2);
//结果123
1.同步和异步
console.log(1);
setTimeout(function () {
console.log(3);
}, 0);
console.log(2);
//结果123
因为根据js的执行机制可知异步回调函数需要放入任务队列中 先执行栈 再来看任务队列
2.JS 执行机制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDSbtOtE-1650614076678)(D:\图片\17.png)]
console.log(1);
document.onclick = function() {
console.log('click');
}
console.log(2);
setTimeout(function() {
console.log(3)
}, 3000)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzbkeDKD-1650614076679)(D:\图片\图片17.png)]
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
3.location对象
什么是 location 对象
window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location对象。
URL
统一资源定位符(Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJ49u6aO-1650614076679)(D:\图片\图片18.png)]
location 对象的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkao3smK-1650614076680)(D:\图片\图片19.png)]
重点记住:href 和search
4.navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
5.history对象
window对象给我们提供了一个history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的
URL。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R6MnqCP8-1650614076680)(D:\图片\图片20.png)]
history对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sLp1bJ8K-1650614076680)(D:\图片\图片21.png)]
1.元素偏移量 offset 系列
(1).offset 概述
- offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
- 获得元素距离带有定位父元素的位置 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准
- 获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位!!!
offset系列常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujBmDOYg-1650614076681)(D:\图片\图片22.png)]
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>
</body>
(2).offset 与 style 区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3nWi3ql2-1650614076681)(D:\图片\1650184773(1)].png)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ilnpb2XZ-1650614076682)(D:\图片\图片23.png)]
案例:获取鼠标在盒子内的坐标
<div class="box"></div>
<script>
// 我们在盒子内点击, 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标( e.pageX, e.pageY)
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离, 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(box.offsetLeft);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
</script>
案例:模态框拖拽
弹出框,我们也称为模态框。
点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。
点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
鼠标松开,可以停止拖动模态框移动。
点击弹出层, 模态框和遮挡层就会显示出来 display:block;
点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;
在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
触发事件是鼠标按下 mousedown, 鼠标移动mousemove 鼠标松开 mouseup
拖拽过程: 鼠标移动过程中,获得最新的值赋值给模态框的left和top值, 这样模态框可以跟着鼠标走了
鼠标按下触发的事件源是 最上面一行,就是 id 为 title
鼠标的坐标 减去 鼠标在盒子内的坐标, 才是模态框真正的位置。
鼠标按下,我们要得到鼠标在盒子的坐标。
鼠标移动,就让模态框的坐标 设置为 : 鼠标坐标 减去盒子坐标即可,注意移动事件写到按下事件里面。
鼠标松开,就停止拖拽,就是可以让鼠标移动事件解除
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起,就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
案例:仿京东放大镜
window.onload = function() {
// 1、要实现的效果是 : 当鼠标移到小盒子上的时候,让淡黄色的盒子和右边的大盒子显示出来
// 1.1、获取元素对象
var small = document.querySelector('.preview_img');
var yellow = document.querySelector('.mask');
var big = document.querySelector('.big');
// 获取大图
var bigImg = document.querySelector('.bigImg');
// 1.2、 给小盒子注册一个鼠标移上事件 onmouseover
small.onmouseover = function() {
// 1.3、 让淡黄色的盒子 和 大盒子显示出来
yellow.style.display = 'block';
big.style.display = 'block';
}
// 2、当鼠标离开小盒子的时候 让淡黄色的盒子 和 大盒子 隐藏就可以了 onmouseout
// 2.1、给小的盒子注册一个鼠标离开事件
small.onmouseout = function() {
// 2.2、离开的时候让 淡黄色的盒子 和大盒子 隐藏
yellow.style.display = 'none';
big.style.display = 'none';
}
// 3、给small盒子注册一个鼠标移动事件 onmousemove
small.onmousemove = function(e) {
// console.log(123);
// 3.1、鼠标在小盒子里边移动的时候 让 淡黄色的盒子 跟随鼠标一起移动
// 3.2、求鼠标在盒子里边移动的位置
var x = e.pageX - small.offsetLeft;
var y = e.pageY - small.offsetTop;
// console.log(x);
// 3.3、把这个移动的距离给淡黄色的盒子 左边距和 上边距就可以了
// 而且是要在淡黄色盒子中间来显示的 所以要 向左和向上走自己宽和高的一半
yellow.style.left = x - yellow.offsetWidth / 2 + 'px';
yellow.style.top = y - yellow.offsetHeight / 2 + 'px';
// 4、这里需要限制一下 淡黄色盒子 要移动的 最小值 和 最大值
// 4.1、要得到他的最小值 0
// var minX = 0;
// 4.2、要得到他的最大值 就是 small这个盒子的宽度 - 淡黄色盒子的宽度
var maxX = small.offsetWidth - yellow.offsetWidth;
var maxY = small.offsetHeight - yellow.offsetHeight;
// 4.3、有了最大值和最小值 那么久需要进行判断 判断是否小于最小的 火鬃大于最大的
if (yellow.offsetLeft <= 0) {
yellow.style.left = 0 + 'px';
} else if (yellow.offsetLeft >= maxX) {
yellow.style.left = maxX + 'px';
}
// 4.4、左右判断以后 上下也是一样的
if (yellow.offsetTop <= 0) {
yellow.style.top = 0 + 'px';
} else if (yellow.offsetTop >= maxY) {
yellow.style.top = maxY + 'px';
}
// 5、让右边的大图 随着左边的 淡黄色 移动而 移动
// 5.1、得到大图走的最大距离 大图所在的盒子宽度 - 大图的宽度
// 因为图片的宽度 是比 大盒子的宽度要大的 所以 大图的宽度 - 大盒子的宽度 图片走的最大距离
var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
// 小盒子走的距离 / 小盒子的最大距离 = 大图走的距离 / 大图走的最大距离
// 大图走的距离 = 小盒子走的距离 * 大图走的最大距离 / 小盒子的最大距离
var X = yellow.offsetLeft * bigMaxX / maxX;
var Y = yellow.offsetTop * bigMaxY / maxY;
bigImg.style.left = -X + 'px';
bigImg.style.top = -Y + 'px';
}
}
2.元素可视区 client 系列
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jnYipiJu-1650614076682)(D:\图片\图片24.png)]
淘宝 flexible.js源码分析
立即执行函数 (function(){})() 或者 (function(){}())
主要作用: 创建一个独立的作用域。 避免了命名冲突问题
<script>
// 1.立即执行函数: 不需要调用,立马能够自己执行的函数
function fn() {
console.log(1);
}
fn();
// 2. 写法 也可以传递参数进来
// 1.(function() {})() 或者 2. (function(){}());
(function(a, b) {
console.log(a + b);
var num = 10;//局部变量 与下边的num名没有冲突
})(1, 2); // 第二个小括号可以看做是调用函数 、、如果有多个立即执行的函数那么用分号隔开
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部变量
}(2, 3));
// 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
</script>
下面三种情况都会刷新页面都会触发 load 事件。
1.a标签的超链接
2.F5或者刷新按钮(强制刷新)
3.前进后退按钮
但是 火狐中,有个特点,有个“往返缓存”,这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中,pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件,注意这个事件给window添加。
3.元素滚动 scroll 系列
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cioEb10-1650614076683)(D:\图片\图片25.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZQJfMUHq-1650614076683)(D:\图片\图片26.png)]
1.页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll
事件。
(1) 兼容性的问题window.pageYOffset和 window.pageXOffset IE9 开始支持
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
\1. 声明了 DTD,使用 document.documentElement.scrollTop
\2. 未声明 DTD,使用 document.body.scrollTop
\3. 新方法 window.pageYOffset和 window.pageXOffset,IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left
案例:仿淘宝固定右侧侧边栏
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子,就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
</script>
</body>
三大系列总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cVU9ahcN-1650614076684)(D:\图片\1650202192(1)].png)
他们主要用法:
1.offset系列 经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得
mouseenter 和mouseover的区别
- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover,它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发
- 之所以这样,就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
1.动画函数封装
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
2.筋斗云案例
<script src="animate.js"></script>
<script>
window.addEventListener('load', function() {
// 1. 获取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
// 2. 给所有的小li绑定事件
// 这个current 做为筋斗云的起始位置
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠标经过把当前小li 的位置做为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠标离开就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 当我们鼠标点击,就把当前位置做为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}
})
</script>
</head>
<body>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">我是佩奇</a></li>
<li><a href="#">啥是佩奇</a></li>
</ul>
</div>
</body>
3.淘宝返回优美顶部
goBack.addEventListener('click', function() {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
// 动画函数
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 15);
}
触屏事件 touch
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPEjdpWo-1650614076684)(D:\图片\图片27.png)]
// 1. 获取元素
// 2. 手指触摸DOM元素事件
var div = document.querySelector('div');
div.addEventListener('touchstart', function() {
console.log('我摸了你');
});
// 3. 手指在DOM元素身上移动事件
div.addEventListener('touchmove', function() {
console.log('我继续摸');
});
// 4. 手指离开DOM元素事件
div.addEventListener('touchend', function() {
console.log('轻轻的我走了');
});
1.触摸事件对象(TouchEvent)
TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylcMSGqE-1650614076685)(D:\图片\图片28.png)]
var div = document.querySelector('div');
div.addEventListener('touchstart', function(e) {
console.log(e.targetTouches[0]);//因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
}
targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes
div.addEventListener('touchend', function(e) {
// console.log(e);
// 当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表
// 但是会有 changedTouches
});
(1)移动端触摸屏拖拉盒子案例
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
// (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
// (3) 离开手指 touchend:
var div = document.querySelector('div');
var startX = 0; //获取手指初始坐标
var startY = 0;
var x = 0; //获得盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function(e) {
// 获取手指初始坐标
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove', function(e) {
// 计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 移动我们的盒子 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault(); // 阻止屏幕滚动的默认行为
});
</script>
</body>
2.classList 属性
classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加,移除及切换 CSS 类。有以下方法
添加类:
element.classList.add(’类名’);
focus.classList.add(‘current’);
移除类:
element.classList.remove(’类名’);
focus.classList.remove(‘current’);
切换类:
element.classList.toggle(’类名’);
focus.classList.toggle(‘current’);
注意以上方法里面,所有类名都不带点
案例:开关灯
<style>
.bg {
background-color: black;
}
</style>
</head>
<body>
<div class="one two"></div>
<button> 开关灯</button>
<script>
// classList 返回元素的类名
var div = document.querySelector('div');
// console.log(div.classList[1]);
// 1. 添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add('three');
// 2. 删除类名
div.classList.remove('one');
// 3. 切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
document.body.classList.toggle('bg');
})
</script>
</body>
移动端常用开发插件
JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
我们以前写的animate.js 也算一个最简单的插件
fastclick 插件解决 300ms 延迟。 使用延时
GitHub官网地址: https://github.com/ftlabs/fastclick
if ('addEventListener' indocument) {
document.addEventListener('DOMContentLoaded',function() {
FastClick.attach(document.body);
}, false);
}
1.Swiper 插件的使用
中文官网地址: https://www.swiper.com.cn/
- 引入插件相关文件。
- 按照规定语法使用
2.其他插件
superslide: http://www.superslide2.com/
iscroll: https://github.com/cubiq/iscroll
插件的使用
1.确认插件实现的功能
2.去官网查看使用说明
3.下载插件
4.打开demo实例文件,查看需要引入的相关文件,并且引入
5.复制demo实例文件中的结构html,样式css以及js代码
练习-移动端视频插件 zy.media.js
移动端常用开发框架
框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等。
框架: 大而全,一整套解决方案
插件: 小而专一,某个功能的解决方案
1.Bootstrap
Bootstrap 是一个简洁、直观、强悍的前端开发框架,它让 web 开发更迅速、简单。
它能开发PC端,也能开发移动端
Bootstrap JS插件使用步骤:
1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数
本地存储
1.window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据:
sessionStorage.setItem(key, value)
获取数据:
sessionStorage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
清空数据:(所有都清除掉)
sessionStorage.clear()
2.window.localStorage
1、声明周期永久生效,除非手动删除 否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
清空数据:(所有都清除掉)
localStorage.clear()
3.案例:记住用户名
如果勾选记住用户名, 下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名
案例分析
-
把数据存起来,用到本地存储
-
关闭页面,也可以显示用户名,所以用到localStorage
-
打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框
-
当复选框发生改变的时候change事件
-
如果勾选,就存储,否则就移除
<body> <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名 <script> var username = document.querySelector('#username'); var remember = document.querySelector('#remember'); if (localStorage.getItem('username')) { username.value = localStorage.getItem('username'); remember.checked = true; } remember.addEventListener('change', function() { if (this.checked) { localStorage.setItem('username', username.value) } else { localStorage.removeItem('username'); } }) </script> </body>