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 function
console.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.函数内部的 arguments
3.DOM 对象列表(比如通过 document.getElementsByTags ,document.childNodes返回的NodeList对象)
3.伪数组的意义:
伪数组存在的意义,是可以让普通的对象也能正常使用数组的很多方法(push和forEach等)
4.伪数组转换为真正的数组
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象
5.判断一个对象是否属于“伪数组”
1.Array.isArray
2.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="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="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="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1.获取元素 获取两个元素,一个图标,一个input
var 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="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.获取元素 所有的小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>
</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.注册实际 获得焦点事件 onfocus
text.onfocus = function() {
// console.log('得到了焦点');
// 下行的this指代函数的调用者,指text
// 点击输入框时,显示为空,如果输入的不是默认值时,显示不为空
if (this.value === '手机') {
// 如果你输入的值等于默认值,清空操作
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3.注册事件 失去焦点事件 onblur
text.onblur = function() {
console.log('失去了焦点');
// 什么都没输入,显示默认值;如果输入了不是默认值,显示为输入的值,不显示默认值s
if (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.首先判断的事件是表单失去焦点 onblur
2.如果输入正确则提示正确的信息颜色为绿色小图标变化
3.如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
4.因为里面变化样式较多,我们采用className修改样式
*/
// 1.获取元素 表单和p
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message')
// 2.注册事件 失去焦点(事件源:表单)
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (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="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1.获取元素 选取所有的图片img
var 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. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[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')); // 20
console.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); // andy
console.log(div.dataset['listName']); // andy
// 总结:getAttribute获取元素属性 兼容性更强
</script>
</body>
</html>
效果如下