第二阶段
文章目录
Web APIs 和 JS基础关联性
JS基础阶段
- 我们学习的是ECMAscript标准规定的基本语法
- 要求掌握JS基础语法
- 只学习基本语法,做不了常用的网页交互效果
- 目的是为了JS后面的课程打基础做铺垫
Web APIs 阶段
- Web APIs 是 w3c 组织的标准
- Web APIs 主要学习DOM 和 BOM
- Web APIs 是 JS 所独有的
- 需要使用 JS 基础的课程内容做基础
s基础学习 ECMAScript 基础语法为后面作铺垫,web APIs是Js的应用,大量使用Js 基础语法做交互效果
API 和 Web API
API
**APl ( Application Programming Interface,应用程序编程接口)**是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
简单理解:API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
类比手机充电接口:
我们要实现充电功能:
- 我们不关心手机内部变压器,内部怎么存储电等
- 我们不关心这个充电线怎么制作的
- 只知道插进去就能充电
- 那么,充电接口就是一个API
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
现阶段主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框,直接使用alert(‘弹出’)
MDN详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
因为Web API很多,所以我们将这个阶段称为Web APls
总结
- API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API一般都有输入和输出(函数的传参和返回值),WebAPI很多都是方法(函数)
- 学习Web API可以结合前面学习内置对象方法的思路学习
DOM
简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1COWXxL5-1647676018123)(F:\javascript\WebAPIS\截图\DOM树.jpg)]
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点︰网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作是对象
获取元素
根据id获取
<body>
<div id="time">2022-2-20</div>
</body>
<script>
var s = document.getElementById('time');
console.log(s);
console.log(typeof s); //object 说明返回的是一个元素对象
//console.dir 打印返回的元素对象 更好的查看里面的属性和方法
console.dir(s); //div#time
根据标签名获取
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<ol id="ol">
<li>hahaha amazing</li>
<li>hahaha amazing</li>
<li>hahaha amazing</li>
<li>hahaha amazing</li>
<li>hahaha amazing</li>
</ol>
</body>
<script>
//1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储
var list = document.getElementsByTagName("li");
console.log(list);
console.log(list[0]);
//2. 依次打印 遍历
for (var i = 0; i < list.length; i++) {
console.log(list[i]);
}
//得到的元素是动态的
//3. 如果页面中只有一个li 返回的还是伪数组的形式
//4. 如果页面中没有这个元素 返回空的伪数组
//5. element.getElementsByTagName('标签名')
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
通过HTML5新增的方法获取
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
</body>
<script>
//1. getElementsByClassName 根据类名获得某些元素
var box = document.getElementsByClassName('box');
console.log('box');
//2. querySelector 返回指定选择器的第一个元素对象 里面的选择器需要加符号
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);
</script>
特殊元素获取(body html)
// 1. 获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2. 获取html 元素
var htmlEle = document.documentElement;
console.log(htmlEle);
事件基础
事件是可以被JavaScript侦测到的行为
触发——响应机制
<body>
<button id="btn">feliks</button>
<div>123</div>
</body>
<script>
//点击一个按钮,弹出对话框
//1. 事件由三部分组成:事件源 事件类型 事件处理程序
//(1)事件源 事件被触发的对象 按钮
var btn = document.getElementById('btn');
//(2)事件类型 如何触发 什么事件
//(3)事件处理程序 通过函数赋值的方式
btn.onclick = function() {
alert('你点我干嘛');
}
var div = document.querySelector('div');
div.onclick = function() {
console.log('我div被选中了');
}
</script>
常见鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素
操作内容
- element.innerText
- 从起始位置到终止位置的内容,但它除去html标签,同时空格和换行也会去掉
<style>
div {
width: 350px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
p {
width: 350px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: green;
}
</style>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
</body>
<script>
//点击按钮,div内的文字发生变化
//1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2. 注册事件
btn.onclick = function() {
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
var day = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return '今天是: ' + year + '年' + month + '月' + dates + '日,' + arr[day] + hour + ',点' + minute + '分' + second + '秒';
}
//元素可以不用添加事件,页面刷新直接显示
var p = document.querySelector('p');
p.innerText = getDate();
- element.innerHTML
- 起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
<body>
<div></div>
<p>
我是人
<span>饿哦不是</span>
</p>
</body>
<script>
//innerText 和 innerHTML 的区别
//1. innerText 不识别HTML标签 非标准
var div = document.querySelector('div');
div.innerText = '<strong>feliks:</strong>nb';
//2. innerHTML 识别HTML W3C标准
div.innerHTML = '<strong>feliks:</strong>nb'; //feliks会加粗
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText); //去除空格和换行
console.log(p.innerHTML); //保留
</script>
操作属性
<style>
img {
width: 150px;
height: 100px;
}
</style>
<body>
<button id="eminem">Eminem</button>
<button id="hantao">憨桃</button>
<br>
<img src="../images/Eminem1.jpg" alt="" title="Eminem">
</body>
<script>
//修改属性
//1. 获取元素
var emi = document.querySelector('#eminem');
var ht = document.querySelector('#hantao');
var img = document.querySelector('img');
//2. 注册事件
ht.onclick = function() {
img.src = '../images/憨桃琳.jpg';
img.title = '憨桃人儿';
}
emi.onclick = function() {
img.src = '../images/Eminem1.jpg';
img.title = 'Eminem';
}
</script>
不同时间显示不同问候语
<style>
img {
width: 300px;
height: 200px;
}
</style>
<body>
<div></div>
<img src="../images/Eminem1.jpg" alt="" title="早上">
</body>
<script>
//获取元素
var div = document.querySelector('div');
var img = document.querySelector('img');
//得到当前的小时数
var date = new Date();
var hour = date.getHours();
if (hour < 12) {
img.src = '../images/Eminem1.jpg';
div.innerHTML = '上午好';
} else if (hour < 18) {
img.src = '../images/憨桃琳.jpg';
div.innerHTML = '下午好';
} else {
img.src = '../images/琳.jpg';
div.innerHTML = '晚上好';
}
</script>
表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type,value,checked,selected,disabled
<button>阿牛</button>
<input type="text" value="请输入内容">
<script>
//获取元素
var btn = document.querySelector('button');
var ipt = document.querySelector('input');
//注册事件,处理程序
btn.onclick = function() {
ipt.value = '我被电击了';
//禁用,使之不能再被点击
// btn.disabled = true;
this.disabled = true;
//this 指向的是事件函数的调用者 btn
}
</script>
隐藏密码明文案例
- 思路: 点击眼睛按钮,把密码框类型改为文本框
- 一个按钮两个状态,点击互相切换
- 设置一个flag判断
<style>
.box {
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
width: 24px;
top: 5px;
right: 30px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="../images/闭眼睛.png" alt="" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
//获取元素
var eye = document.querySelector("#eye");
var pwd = document.querySelector("#pwd");
//注册事件 处理
var flag = 1;
eye.onclick = function() {
if (flag == 0) {
//点击后 flag记得改变
pwd.type = 'text';
eye.src = '../images/睁眼.png';
flag = 1;
} else {
pwd.type = 'password';
eye.src = '../images/闭眼睛.png';
flag = 0;
}
}
</script>
</body>
样式属性操作
通过js修改元素的大小、颜色、位置等样式
1. element.style 行内样式操作
2. element.className 类名样式操作
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
//获取元素
var div = document.querySelector('div');
//
div.onclick = function() {
this.style.backgroundColor = '#000';
this.style.width = '200px';
}
</script>
-
Js里面的样式采取驼峰命名法比如fontsize、backgroundcolor
-
JS修改style样式操作,产生的是行内样式,css权重比较高
点击隐藏图片
<style>
img {
display: block;
width: 100px;
height: 100px;
}
</style>
<body>
<img src="../images/琳.jpg" alt="">
<span>X</span>
<script>
var img = document.querySelector('img');
var span = document.querySelector('span');
span.onclick = function() {
img.style.display = 'none';
span.style.display = 'none';
}
</script>
使用for循环用精灵图填充背景
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(../images/Eminem1.jpg) no-repeat;
}
</style>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//索引号*44
var index = i * 50;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
显示隐藏文本框内容
- 获得焦点 onfocus
- 失去焦点 onblur
<input type="text" value="请输入内容">
<script>
var ipt = document.querySelector('input');
//获得焦点
ipt.onfocus = function() {
if (this.value == '请输入内容') {
this.value = '';
}
//获得焦点,颜色加深
this.style.color = '#000'
}
//失去焦点
ipt.onblur = function() {
if (this.value == '') {
this.value = '请输入内容';
}
//失去焦点,颜色减淡
this.style.color = '#777';
}
</script>
通过类名className修改元素样式
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
color: blue;
}
.change {
width: 150px;
height: 150px;
background-color: purple;
color: black;
}
</style>
<body>
<div>测试</div>
<script>
var a = document.querySelector('div');
a.onclick = function() {
this.className = 'change';
//若想保留原来的类名:
// this.className = 'div change';
}
</script>
密码框验证信息
- 判断失去焦点onblur
- 输入正确–绿色
- 输入错误–红色
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(../images/!.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background: url(../images/wrong.png) no-repeat left center;
}
.right {
color: green;
background: url(../images/right.png) no-repeat left center;
}
</style>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var msg = document.querySelector('.message');
ipt.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
msg.className = 'message wrong';
msg.innerHTML = '格式不对';
} else {
msg.className = 'message right';
msg.innerHTML = '✔';
}
}
</script>
排他思想
- 清除所有元素样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//1.先把所有按钮的背景色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//2.让当前元素变色
this.style.backgroundColor = 'pink';
}
}
</script>
百度换肤案例
- 给四个小图片利用循环注册点击事件
- 把当前图片的src路径取过来,给Body作为背景
<style>
.baidu {
background-color: #fff;
width: 410px;
padding-top: 3px;
list-style-type: none;
margin: 100px auto;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
<body>
<ul class="baidu">
<li> <img src="../images/bg1.jpg" alt=""> </li>
<li> <img src="../images/bg2.jpg" alt=""> </li>
<li> <img src="../images/bg3.jpg" alt=""> </li>
<li> <img src="../images/bg4.jpg" alt=""> </li>
</ul>
<script>
//获取
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// console.log(this.src);
//把这个路径给body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
隔行换色
<table>
<thead>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</thead>
<tbody>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'bg';
}
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
全选与反选
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="ckall">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone</td>
<td>8000</td>
</tr>
</tbody>
</table>
<script>
var ckall = document.getElementById('ckall');
var tb = document.getElementById('tb').getElementsByTagName('input');
ckall.onclick = function() {
//this.checked可以得到当前的选中状态
for (var i = 0; i < tb.length; i++) {
tb[i].checked = this.checked;
}
}
//复选按钮影响全选
for (var i = 0; i < tb.length; i++) {
tb[i].onclick = function() {
var flag = true;
//每次点击下面的都要循环检查4个小按钮是否全被选中
for (var i = 0; i < tb.length; i++) {
if (!tb[i].checked) {
flag = false;
break;//提高效率
}
}
ckall.checked = flag;
}
}
</script>
自定义属性的操作
- element.属性 获取属性值
- element.getAttribute(‘属性’);
区别:
- element.属性 获取内置属性值(元素本身自带的属性)
- element.getAttribute(‘属性’); 主要获得自定义的属性
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
console.log(div.id);//demo
console.log(div.getAttribute('id'));//demo
console.log(div.getAttribute('index'));//1
</script>
设置属性值
- element.属性=‘值’ 设置内置属性值
- element.setAttribute(‘属性’,‘值’);
移除属性值
<div id="demo" index="1" class="nav"></div>
<script>
//获取属性值
var div = document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
//设置属性值
div.id = 'test';
div.setAttribute('index', '2');
div.setAttribute('class', 'footer');
//移除属性值
div.removeAttribute('class');
</script>
tab栏切换案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjXGZevQ-1647676018126)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220319151728810.png)]
<style>
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: pink;
color: #000;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
.tab_con {
position: absolute;
width: 300px;
height: 100px;
top: 100px;
border: 1px solid #ccc;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>包装与规格</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
包装规格模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//huoqu
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
//给5个li设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
//显示内容模块
var index = this.getAttribute('index');
console.log(index);
//排他
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
H5自定义属性
注:dataset: IE浏览器IE11版本及以上支持
getAttribute 兼容性更高
<div getTime="20" data-index="1" data-list-name="feliks"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime')); //20
div.setAttribute('data-time', 22);
console.log(div.getAttribute('data-time')); //22
console.log(div.getAttribute('data-list-name')); //feliks
//H5新增方式dataset
console.log(div.dataset.index); //1
console.log(div.dataset['index']); //1
//如果自定义属性里面有多个-连接的单词,获取时采用驼峰命名法
console.log(div.dataset.listName); //feliks
console.log(div.dataset['listName']); //feliks
</script>
H5自定义属性
注:dataset: IE浏览器IE11版本及以上支持
getAttribute 兼容性更高
<div getTime="20" data-index="1" data-list-name="feliks"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime')); //20
div.setAttribute('data-time', 22);
console.log(div.getAttribute('data-time')); //22
console.log(div.getAttribute('data-list-name')); //feliks
//H5新增方式dataset
console.log(div.dataset.index); //1
console.log(div.dataset['index']); //1
//如果自定义属性里面有多个-连接的单词,获取时采用驼峰命名法
console.log(div.dataset.listName); //feliks
console.log(div.dataset['listName']); //feliks
</script>