前端之JS篇(七)——Web APIsDOM部分内容
2024-06-01 15:40:17
1.Web APls
1.1 Web APls 和JS基础关联性
1.1.1 JS的组成
1.1.2 JS基础阶段以及Web APls阶段
1.2 API 和 Web API
1.2.1 API
1.2.2 Web API
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API
1.2.3 API和 Web API 总结
1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
2.Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.Web API 一般都有输入和输出(函数的传参和返回值)，Web API很多都是方法(函数)。
4.学习Web API 可以结合前面学习内置函数对象方法的思路学习，(1.作用？2.需要参数？3.返回值？4.代码验证)。
2. DOM
Web APlsd的两大核心，一个是DOM(页面文档对象模型)，另一个是BOM(浏览器对象模型)。
2.1 什么是DOM
DOM主要讲解四大部分：获取元素，事件基础，操作元素，节点操作。
2.2 DOM 树
2.2 获取页面元素
DOM在我们实际开发中主要用来操作元素
我们如何来获取页面中的元素呢？
获取页面中的元素可以使用以下几种方式：
| 根据ID获取 |
|---|
| 根据标签名获取 |
| 通过HTML5新增的方法获取 |
| 特殊元素获取 |
2.2.1 根据ID获取
使用getElementById()方法可以获取带有ID的元素对象。
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- #time 快速输入--><div id="time">2022-10-6</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面// 2.get意思是获得 element意思是元素 by意思是通过 // 3.用驼峰命名法严格区别大小写// 4. 参数 id 是大小写敏感的字符串,参数位置加引号的原因// 5.返回的是一个元素对象var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// console.dir 打印返回的元素对象 查看元素的属性和方法 console.dir(timer);</script></body>
</html>
效果如下
2.2.2 根据标签名获取
使用 getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><!-- ul>li*5 使用快捷键--><ul><!-- 快捷键 shift + alt + A + 鼠标点击 --><li>秋天来了，树叶都变黄了！1</li><li>秋天来了，树叶都变黄了！2</li><li>秋天来了，树叶都变黄了！3</li><li>秋天来了，树叶都变黄了！4</li><li>秋天来了，树叶都变黄了！5</li></ul><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的// 伪数组:对象形式，只有数组的length属性和索引下标属性var lis = document.getElementsByTagName('li');console.log(lis);// 输出第一个元素console.log(lis[0]);// 2.想要依次打印里面的元素对象我们额可以采用遍历的方式for (var i = 0; i < lis.length;i++) {console.log(lis[i]);console.log(typeof lis[i]);}// 3.如何页面中只有一个li,返回的还是伪数组的形式// 4.如果页面中没有这个元素，返回的还是空的伪数组</script></body>
</html>
效果如下
拓展：
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- ul>li*4 --><ul><li>今天是阴天1</li><li>今天是阴天2</li><li>今天是阴天3</li><li>今天是阴天4</li></ul><!-- ol>li*4 --><ol id = 'ol'><li>记得多穿点衣服1</li><li>记得多穿点衣服2</li><li>记得多穿点衣服3</li><li>记得多穿点衣服4</li></ol><script>// 1.需求：只获取ol标签里面的元素 // 解决： element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素var ol = document.getElementsByTagName('ol'); // ol// 伪数组不能作为父元素，伪数组里面的指定元素可以作为父元素// console.log(ol.getElementsByTagName('li')); Uncaught TypeError: ol.getElementsByTagName is not a functionconsole.log(ol[0].getElementsByTagName('li'));console.log('**********************');// 优化var ol = document.getElementById('ol');console.log(ol.getElementsByTagName('li'));</script></body>
</html>
效果如下
2.2.3 通过HTML5新增的方法获取
ie9以上版本才支持
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- .box*2 --><div class="box">盒子1</div><div class="box">盒子2</div><!-- #nav --><div id="nav"><!-- ul>li*2 --><ul><li>首页</li><li>产品</li></ul><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 总结：通过类名、通过id、通过标签名都可以得到元素集合// 2. querySelector 返回指定选择器的第一个元素对象// 切记：使用querySelector时，里面的选择器需要加符号 类选择器(.box),id选择器(#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);console.log('**********************************');// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li')console.log(lis);</script></div>
</body>
</html>
效果如下
2.2.4 获取特殊元素(body,html)
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面// 1.获取body 元素var bodyEle = document.body;console.log(bodyEle);console.dir(bodyEle);// 2.获取html元素var htmlEle = document.documentElement;console.log(htmlEle); </script>
</body>
</html>
效果如下
2.3 关于伪数组
1.伪数组的特点：1.是Object对象2.有length属性3.数值有下标属性，可以用索引4.没有数组特别的方法: forEach(), push(), pop(), splice()
2.常见的伪数组：1.jQuery 对象（比如 $(“div”) ）2.函数内部的 arguments3.DOM 对象列表（比如通过 document.getElementsByTags ，document.childNodes返回的NodeList对象）
3.伪数组的意义：伪数组存在的意义，是可以让普通的对象也能正常使用数组的很多方法（push和forEach等）
4.伪数组转换为真正的数组可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象
5.判断一个对象是否属于“伪数组”1.Array.isArray2.instanceof
2.4 事件基础
2.4.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解: 触发 ----响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- button#btn 快捷键 --><button id="btn">唐伯虎</button><script>// 需求：点击一个按钮，弹出对话框// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素// (1). 事件源 事件被触发的对象 谁---按钮var btn = document.getElementById('btn')console.log(btn); // <button id="btn">唐伯虎</button>// (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下// (3) 事件处理程序 通过一个函数赋值的方式 完成btn.onclick = function() {alert('点秋香');}</script></body>
</html>
效果如下
2.4.2 执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>123</div><script>// 执行事件步骤实例// 需求：点击div 控制台输出 我被选中了// 1.获取事件源var div = document.querySelector('div');// 2.绑定事件 注册事件// div.onclick// 3.添加事件处理程序div.onclick = function() {console.log('我被选中了');}</script></body>
</html>
效果如下
2.4.3 常见的鼠标事件
应用场景例如：
2.5 操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。
2.5.1 改变元素的内容(操作元素重点一)
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p {width: 300px;height: 35px;/* 垂直居中---行高等于盒子高度 偏上---行高小于盒子高度 偏下---行高大于盒子高度*/line-height: 50px;color: aqua;background-color: orange;}</style></head>
<body><button>显示当前系统事件</button><div>某个时间</div><p>456</p><script>// 需求：当我们点击 了按钮，div里面的文字会发生变化// 1.获取元素 (两个元素：按钮，时间)var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {div.innerHTML = 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();return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];}// 我们元素可以不用添加事件,一刷新直接显示当前时间// 操作DOM// 1.获取元素var p = document.querySelector('p');p.innerHTML = getDate();</script></body>
</html>
效果如下
innterText和innerHTML的区别
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div><p>我是文字<span>123</span></p><script>// innerText 和 innerHTML的区别var div = document.querySelector('div');// 1.innerText 不识别html标签 非标准 读的时候去除空格和换行// div.innerText = '<strong>今天是:</strong>2022-10-7'; // <strong>今天是:</strong>2022-10-7// 2.innerHTML 识别html标签 W3C标准 读的时候保留空格和换行div.innerHTML = '<strong>今天是:</strong>2022-10-7';// 3.这两个属性是可读写的 ---> 可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script></body>
</html>
效果如下
2.5.2 常用元素的属性操作
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id='ldh'>刘德华</button><button id='zxy'>张学友</button><img src="data:images/ldh.jpg" alt="" width="200" height="200"><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>
</html>
效果如下
2.5.3 案例：分时显示不同图片，显示不同问候语
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 300px;}</style>
</head>
<body><img src="data:images/s.jpg" alt=""><div>上午好</div><script>/* 案例分析1.根据系统不同时间来判断，所以需要用到日期内置函数2.利用多分支语句来设置不同的图片3.需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性4.需要一个div元素，显示不同问候语，修改元素内容即可*/// 1.获取元素var img = document.querySelector('img');var div = document.querySelector('div')// 2. 得到当前的小时数var date = new Date();console.log(date);var h = date.getHours();// 3.判断小时数改变图片和文字信息if (h < 12) {img.src = 'images/s.jpg';div.innerHTML = '早上好啊，今天是个好日子';} else if (h < 18) {img.src = 'images/x.jpg';div.innerHTML = '下午好啊，今天日落很漂亮';} else {img.src = 'images/w.gif';div.innerHTML = '晚上好啊，去跑步啊~';}</script></body>
</html>
效果如下
2.5.4 表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<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 = '点击了'; 此时页面没反应// 原因: innerHTML 是对于普通盒子 比如 div 标签里面的内容，对于表单里面的属性不适用input.value = '被点击了';// 需求2: 按钮点击一次之后被禁用 disabled // btn.disabled = true;// 也可以用this来实现this.disabled = true;// this 指向的是事件函数的调用者(此处是指btn调用了)}</script>
</body>
</html>
效果如下
(此处知识点可结合往期前端之HTML篇(二)——HTML标签详解之表单标签部分学习)
2.5.5 案例:仿京东显示密码
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;border-bottom: 1px solid #ccc;/* auto 浏览器计算外边距 */margin: 100px auto;}/* 设置输入框格式 */.box input {position: relative;width: 370px;height: 30px;border: 0;outline: none;}/* 设置图片格式 */.box img {/* 利用定位，定到最右边 子绝父相 */position: absolute;top: 112px;right: 570px;width: 24px;}</style>
</head>
<body><div class="box"><!-- 一般lable和input标签混合使用，为了增加用户体验lable的for属性值和input里面的id属性值一样时，比如性别选择中，点击男就可以选择前面的按钮 --><label for=""><img src="data:images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"> </div><script>// 1.获取元素 获取两个元素，一个图标，一个inputvar eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2.注册事件 处理程序 点击睁眼图标显示密码 点击闭眼图片不显示密码var flag = 0;eye.onclick = function() {if (flag == 0) {pwd.type = 'text';// 点击一次之后，flag一定要变化flag = 1;// eye.src = 'images/open.png';// 此时用this也可以this.src = 'images/open.png';} else {pwd.type = 'password';flag = 0;// eye.src = 'images/close.png';// 此时用this也可以this.src = 'images/close.png';}}</script></body>
</html>
效果如下
2.5.6 改变元素的属性(操作元素重点二)
我们可以通过JS修改元素的大小、颜色、位置等样式。
1.element.style 演示 ，新建.html文件，执行代码如下:
(element.style 适用于样式修改比较少的情况)
(行内样式权重比较高)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div ></div><!-- 需求：点击div盒子，让它变成紫色 --><script>// 1. 获取元素var div = document.querySelector('div');// 2. 注册事件 处理程序div.onclick = function() {// div里面的属性采取驼峰命名法 不再像css的background-color了// div.style.backgroundColor = 'purple';// this 表示当前的事件源this.style.backgroundColor = 'purple';// 需求提升：让宽度变大 高度变小this.style.width = '250px';this.style.height = '100px';}</script>
</body>
</html>
效果如下
2.关于element.className 类名操作样式的演示 见下文2.5.10部分
特点：element.className适用于样式修改比较多的情况
2.5.7 案例：淘宝点击关闭二维码
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 80px;height: 90px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* 默认的格式 display"block */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;/* cursor: pointe 鼠标经过或点击有小手样式 */cursor: pointer;}</style>
</head>
<body><div class="box">淘宝二维码<img src="data:images/tao.png" alt=""><i class="close-btn">x</i></div><script>// 1.获取元素 "x"号需要点击 box需要关掉var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件，处理程序btn.onclick = function() {// 注意，下行不能用this,如果用了的话，this指代的事件源是btn,但实际我们需要调用得到的是box的属性 box.style.display = 'none';// this.style.display = 'none'; 用这行，结果是 x 号没了，二维码还在}</script>
</body>
</html>
(本案例的核心是:display的属性，它有两个值，block——显示，none ——隐藏。点击x号后，并不是删掉了，而是隐藏起来了)
效果如下
2.5.8 案例：循环精灵图背景
本案例所演示的精灵图sprite.png，如下
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 32px;height: 32px;background-color: orange;margin: 15px;background: url(images/sprite.png) no-repeat;}</style>
</head>
<body><!-- .box>ul>li*12 --><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>// 1.获取元素 所有的小livar 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>
</body>
</html>
效果如下
(因精灵图不是标准精灵图)
2.5.9 案例：显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {color: #999;}</style>
</head>
<body><input type="text" value="手机"><script>// 1.获取元素var text = document.querySelector('input');// 2.注册实际 获得焦点事件 onfocustext.onfocus = function() {// console.log('得到了焦点');// 下行的this指代函数的调用者，指text// 点击输入框时，显示为空，如果输入的不是默认值时，显示不为空if (this.value === '手机') {// 如果你输入的值等于默认值，清空操作this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑this.style.color = '#333';}// 3.注册事件 失去焦点事件 onblurtext.onblur = function() {console.log('失去了焦点');// 什么都没输入，显示默认值；如果输入了不是默认值，显示为输入的值，不显示默认值sif (this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color = '#999';}</script>
</body>
</html>
效果如下
案例细节
2.5.10 使用className修改样式属性(修改样式属性的方法二)
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 150px;background-color: aqua;}.change {background-color: orange;color: blue;font-size: 30px;margin-top: 50px;}</style>
</head>
<body><!-- 需求1:点击div盒子，让背景色变色 --><div class="first">文本</div><script>// 1.使用 element.style 获得修改元素样式 特点: 如果样式比较少 或者 功能简单的情况下var test = document.querySelector('div');test.onclick = function() {/* this.style.backgroundColor = 'purple';// 需求2：再修改文字颜色this.style.color = '#fff';// 需求3：修改字体大小this.style.fontSize = '25px';// 需求4：再移动位置 调整上边距this.style.marginTop = '100px'; */// 2.使用element.className更改元素的样式 特点：适合于样式较多或者功能复杂的情况// 第二种方法，让当前盒子添加已经修改好样式的类// 此处为什么直接不是this.class的原因：因为class已经是保留字// this.className = 'change'; // 意思是当我们当前元素的类名改为了change 这个类// 3.因为element.className会直接覆盖之前的类名，如果想要保留原先的类名，我们可以这么做// 用法：this.className = '原类名 新类名'; 多类名选择器this.className = 'first change';}</script></body>
</html>
效果如下
效果如下
效果如下
2.5.11 案例：密码框格式提示错误信息
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {clear: red;background-image: url(images/wrong.png);}.right {color: greenyellow;background-image: url(images/right.png);background-size: 22px 22px;}</style>
</head>
<body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>/* 案例分析1.首先判断的事件是表单失去焦点 onblur2.如果输入正确则提示正确的信息颜色为绿色小图标变化3.如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化4.因为里面变化样式较多，我们采用className修改样式 */// 1.获取元素 表单和pvar ipt = document.querySelector('.ipt');var message = document.querySelector('.message')// 2.注册事件 失去焦点(事件源:表单)ipt.onblur = function() {// 根据表单里面值的长度 ipt.value.lengthif (this.value.length < 6 || this.value.length > 16) {// console.log('错误');// 给p标签添加新的类样式，并保留之前的样式，对于相同的样式属性，新样式会覆盖旧样式的属性message.className = 'message wrong';message.innerHTML = '您输入的位数不对，要求6~16位';} else {message.className = 'message right';message.innerHTML = '您输入的正确';}}// </script>
</body>
</html>
效果如下
2.5.12 操作元素总结
需要掌握的案例：
| 案例1 | 世纪佳缘 用户名 显示隐藏内容 |
|---|---|
| 案例2 | 京东关闭广告(直接隐藏即可) |
| 案例3 | 新浪下拉菜单(微博即可) |
| 案例4 | 开关灯效果(一个按钮，点击一次，变黑 ；再次点击按钮，变亮) |
2.5.13 排他思想
前面的例子主要是针对于一个元素添加的事件，遇到一组元素添加事件怎么办？(例如轮播图小按钮)
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 需求1：给每个按钮都添加事件 --><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1.获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的伪数组 里面的每一个元素 btns[i]for (var i = 0;i < btns.length; i++) {// 利用循环的方式都给每个按钮绑定了一个点击事件btns[i].onclick = function() {// console.log('123');// 需求2：点击哪个按钮，哪个按钮变色// 注意点：// 1.我们先把所有的按钮背景颜色去掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// 2.然后才让当前的元素背景颜色为紫色this.style.backgroundColor = 'purple';}}// 2.首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想</script>
</body>
</html>
效果如下
效果如下
2.5.14 案例：百度换肤
需求：给定4个图片，点击哪个图片，哪个图片设定为当前壁纸
案例分析：
1.这个案例练习的是给一组元素注册事件
2.给4个小图片利用循环注册点击事件
3.当我们点击了这个图片，让我们页面背景改为当前的图片
4.核心算法：把当前图片的src路径取过来，给body做为背景即可。
新建.html文件， 执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background: url(images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
</head>
<body><!-- ul.baidu>li*4 --><ul class="baidu"><li><img src="data:images/1.jpg"></li><li><img src="data:images/2.jpg"></li><li><img src="data:images/3.jpg"></li><li><img src="data:images/4.jpg"></li></ul><script>// 1.获取元素 选取所有的图片imgvar imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2.循环注册事件for (var i = 0; i < imgs.length;i++) {imgs[i].onclick = function() {// this 指当前点击的那张图片// console.log(this.src); // this.src 就是点击图片的路径，把这个路径this.src给body就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body>
</html>
效果如下
2.5.15 案例：表格隔行变色
案例：给一个表格，当鼠标经过某一行时，某一行会变色
案例分析：
1.用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
2.核心思路：鼠标经过tr行(当前行)，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3.注意：第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 800px;margin: 100px auto;text-align: center;/* border-collapse 用于表格属性, 表示表格的两边框合并为一条 表示折叠边框 */border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head>
<body><table><thead><!-- tr>td*6 --><tr><td>代码</td><td>名称</td><td>最新公布净值</td><td>累计净值</td><td>前单位净值</td><td>净值增长率</td></tr></thead><tbody><tr><td>0001</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0002</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0003</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0004</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0005</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0006</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0007</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0008</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0009</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr><tr><td>0010</td><td>开放债券</td><td>1.075</td><td>1.79</td><td>1.074</td><td>+0.046%</td></tr></tbody></table><script>// 1.获取元素 获取的是tbody里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2.利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body>
</html>
效果如下
2.5.16 案例：表单全选、取消全选
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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 "微软雅黑";}td:nth-of-type(1) {text-align: center;}tbody tr,tfoot tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}button {width: 50px;}</style>
</head>
<body><!-- 表格外部容器 --><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" checked ='checked'/></th><th>商品</th><th>价格</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>土豆丝</td><td>2元</td></tr><tr><td><input type="checkbox" /></td><td>鸡肉</td><td>30元</td></tr><tr><td><input type="checkbox" /></td><td>香蕉</td><td>4元</td></tr><tr><td><input type="checkbox" /></td><td>面包</td><td>8元</td></tr></tbody></table></div><script>// 1.全选和取消全选做法：让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可//获取全选的这个复选框var j_cbAll = document.getElementById("j_cbAll");var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框// 1.注册事件j_cbAll.onclick = function() {// this.checked 可以得到当前复选框的选中状态,如果是true,就是选中;如果是false,就是未选中。this.checked;// 让所有下面的复选框都选中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}// 2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环// 查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。for (var i =0; i < j_tbs.length;i++) {j_tbs[i].onclick = function() {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (var i = 0; i < j_tbs.length; i++) {// 某一个按钮没有被选中if (!j_tbs[i].checked) { flag = false;break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了。}}j_cbAll.checked = flag;}}</script>
</body>
</html>
效果如下
2.5.17 自定义属性操作
程序员自己添加的属性，称为自定义属性
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- #demo --><!-- 假设自定义index属性，业务场景的需要，为了区分 --><div id="demo" index="10"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值 两种方式// (1) element.属性console.log(div.id); // demo// (2) element.getAttribute('属性') get 得到获取 attribute 属性的意思 console.log(div.getAttribute('id')); // demo// 2.程序员自己添加的属性，称为自定义属性 比如：自定义属性index,如何获取它的值呢？如下console.log(div.getAttribute('index')); // 10</script>
</body>
</html>
效果如下
2.5.18 案例：tab栏切换(重点)
当鼠标点击上面相应的选项卡(tab)，下面内容跟随变化
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tab {width: 800px;margin: 100px auto;}.tab_list {height: 30px;border-bottom: 1px solid red;}.tab_list ul li {float: left;padding:5px 50px 5px 50px ;text-align: center;cursor: pointer;}.tab_list .current {background-color: red;color: #fff;}.item {display: none;}</style>
</head>
<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（1.1万+）</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></div><script>//2.上面的选项卡，点击某一个 当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');//for循环绑定点击事件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';//2.下面的显示内容模块var index = this.getAttribute('index');// console.log(index);//排他思想// 干掉所有人 让其余的item 这些div隐藏for(var i=0;i<items.length;i++){items[i].style.display = 'none';}// 留下我自己 让对应的item 显示出来items[index].style.display = "block";}}</script>
</body>
</html>
效果如下
2.5.19 H5的自定义属性
如何判断是不是自定义属性，H5规定自定义属性data-开头作为属性名并且赋值
新建.html文件，执行代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div getTime="20" data-index="2" data-list-name="andy"></div><script>// 获取getTime属性var div = document.querySelector('div');console.log(div.getTime); // undefined 原因：自定义属性不能用element.属性获取，只能用getAttribute获取console.log(div.getAttribute('getTime')); // 20// 为了解决上列情况，如何判断是不是自定义属性，H5规定自定义属性data-开头作为属性名并且赋值// 设置自定义属性div.setAttribute('data-time',20);console.log(div.getAttribute('data-time')); // 20console.log(div.getAttribute('data-list-name')); // andy// H5新增的获取自定义属性的方法dataset，它只能获取data-开头的// dataset 是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset); // OMStringMap {index: '2', time: '20'}// 取对象的属性，方法一console.log(div.dataset.index); // 2// 取对象的属性，方法二console.log(div.dataset['time']); // 20// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法console.log(div.dataset.listName); // andyconsole.log(div.dataset['listName']); // andy// 总结：getAttribute获取元素属性 兼容性更强</script>
</body>
</html>
效果如下
前端之JS篇(七)——Web APIsDOM部分内容相关推荐
- 面向面试题的前端学习-js篇（自用，持续完善中）
前言:初心是记录面试题,慢慢由每个知识点引伸出去,逐渐查缺补漏,构建出更完善的前端知识系统. 题目来源:牛客网 gitnub 目录 HTTP协议 get请求传参长度的误区 补充get和post请求在缓 ...
- 微博、腾讯视频(部分)提取器-- 前端Vue.js篇
单击下载前端代码 提取器:主要功能是将输入的微博视频地址转换成可下载的视频地址,如下图所示 JS部分代码 export default {name: "app",component ...
- 前端之JS篇(四)——三种循环(forwhiledo...while)
前言: JS的流程控制分为顺序结构,分支结构和循环结构 1.JS的循环 循环的目的: 在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句. 在js中,主要有三种 ...
- 前端之JS篇(一)——计算机基础JS简介
1.计算机基础 1.1 编程语言 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握 ...
- 前端学习JS第七天（P90--P101）
1.DOM,文档对象模型,document object model,在js中通过dom操作网页.文档就指整个html网页,对象就是将网页每一个部分都转换成对象,模型用来表示对象之间的关系. 2.网页 ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
- [前端] Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
- web前端研发工具篇
web前端研发工具篇 一.常见前端开发IDE 1.Visual Studio Code 2.hbuilder 3.sublime text3 4.WebStorm 5.Atom 6.Dreamweav ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- 2019前端中高级面试精华100题【一/js篇】（有答案）
以下问题大部分偏初中级,答案也都是简明扼要,可以在面试时应付一下,免得无点可说在第一面就被PASS.如果这些问题能让你快速回忆起平时所学,串联起前后的技能点,在面试时有个好的发挥,也就不费我整理这些面 ...
最新文章
- Installshield 2015 实现检测某安装文件是否存在并运行安装
- Elasticsearch之分页变量
- 【原创】TLV5618芯片驱动程序
- lazada选品怎么做，东南亚母婴玩具类目选品分析
- 从零写一个编译器（三）：语法分析之几个基础数据结构
- 20级四班班级管理规章制度
- 软考网络工程师学习笔记5-局域网与城域网（二）
- 判断ip地址的合法性python_使用Python判断IP地址合法性的方法实例
- RabbitMQ之路由键转发消息
- SQL Server 获取日期是星期周几(默认从周日开始到周六 1-7)
- python、mysql、git之各种系统下的安装
- 关于安装office软件时和visio软件冲突
- 如何修改电脑的MAC地址(手把手更改)
- IDEA安装及破解永久版教程————鹏鹏
- 跟我学习搭建一个SSR
- Linux 命令系统性学习
- 17. 尚融宝引入阿里云短信服务
- 用c语言验证5阶魔方矩阵,穷举法打印n阶魔方矩阵
- (六) 自己写简单的u-boot
- 企业微信可以自动回复吗？