Web APls简介
Web APIs和Js基础的关联性
JS组成
JS基础阶段以及Web APIs阶段
JS 基础阶段
- 我们学习的是ECMAScript 标准规定的基本语法
- 要求同学们掌握Js基础语法
- 只学习基本语法，做不了常用的网页交互效果
- 目的是为了 js后面的课程打基础、做铺垫
Web APIs 阶段
- web APIS是w3c组织的标准
- Web APIs 我们主要学习 DOM 和 BOM
- web APIs是我们Js 所独有的部分
- 我们主要学习页面交互功能
- 需要使用Js基础的课程内容做基础
JS 基础学习 ECMAScript 基础语法为后面作铺垫，Web APIS 是JS的用量使用 JS 基语法做交互效果
API和Web API
API
API(Application Programming lnterface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解:API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API(BOM 和DOM)。
现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用 alert('弹出’)
MDN详细API：Web API 接口参考 | MDN
因为 Web API 很多，所以我们将这个阶段称为Web APIs
API和Web API 总结
- API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
- Web API一般都有输入和输出(函数的传参和返回值)，Web API很多都是方法(函数)
- 学习WebAPI可以结合前面学习内置对象方法的思路学习
DOM
DOM简介
什么是DOM
文档对象模型(Documentbject Model,简称 DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
- 文档:一个页面就是一个文档，DOM 中使用document表示
- 元素:页面中的所有标签都是元素，DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node 表示
DOM 把以上内容都看做是对象
获取元素
如何获取页面元素
DOM在我们实际开发中主要用来操作元素
我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式：
- 根据ID 获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
根据ID 获取
使用 getElementByld() 方法可以获取带有ID的元素对象
// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2.get 意为获得 Element 意为元素 By 意为通过 驼峰命名法
// 3.ID 是大小写敏感的字符串
// 4.返回的是一个元素对象
document.getElementById('time');
console.log(timer); // 返回的是 <div id="time">2023-07-31</div>
console.log(typeof timer); // 检测数据类型 返回的是 object 是对象
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的 意思为 如果上边的内容变了 下面的js代码是不需要改变的
<ul>
<li>知否知否1</li>
<li>知否知否2</li>
<li>知否知否3</li>
<li>知否知否4</li>
<li>知否知否5</li>
</ul>
-------------------
// 1.返回的是 获取过来元素对象的集合 以 伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis); // 输出结果为 HTMLCollection(5) 刷新为 HTMLCollection(5) [li, li, li, li, li] 伪数组
console.log(lis[0]); // 输出结果为 知否知否1
// 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
} // 输出为 所有的li
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素 返回的是空的伪数组
// 5.父元素必须是指定的单个元素
还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。
<body>
<ul>
<li>知否知否1</li>
<li>知否知否2</li>
<li>知否知否3</li>
<li>知否知否4</li>
<li>知否知否5</li>
</ul>
<ol id="ol">
<li>知否1</li>
<li>知否2</li>
<li>知否3</li>
<li>知否4</li>
<li>知否5</li>
</ol>
<script>
// 获取 ol 里面所有的 li
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>通过HTML5新增的方法获取
// 根据类名返回元素对象集合 class 类
document.getElementsByClassName('类名');
document.querySelector('选择器');
// 根据指定选择器返回第一个元素对象
// 里面的选择器需要加符号 类选择器 如 .box id选择器 如 #nav
querySelectorAll('选择器');
// 根据指定选择器返回所有元素
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1.getElementsByClassName 根据类型获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs); // 结果为 [div.box, div.box]
// 2.querySelector('选择器'); 根据指定选择器返回第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox); // 结果为 <div class="box">盒子</div>
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li'); // 结果为第一个li <li>首页</li>
// 3.querySelectorAll('选择器'); 根据指定选择器返回所有元素
var allBox = document.querySelectorAll('.box'); // 结果为所有的box <div class="box">盒子</div> <div class="box">盒子</div>
</script>
</body>获取特殊元素( body，html)
获取body
document.body
获取html元素
document.documentElement
<body>
<script>
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle); // 输出结果 ，可以运行
console.dir(bodyEle); // 打印，是body
// 2.获取 html 元素
var html = document.documentElement;
console.log(htmlEle); // 结果正确
</script>
</body>事件基础
概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解:触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
<body>
<button id="btn">张三</button>
<script>
// 点击一个按钮，弹出对话框
// 1.事件是有三部分组成 事件源 事件类型 事件处理程序我们也称为事件三要素
// (1)事件源 事件被触发的对象 谁被触发了
var btn = document.getElementById('btn');
// (2)事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
// (3)事件处理程序 通过一个函数赋值饿方式 完成
btn.onclick = function(){
alert('李四');
}
</script>
</body>
执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
操作元素
JavaScript的 DOM操作可以改变网页内容、结构和样式我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
改变元素内容
方法一：
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
方法二：
element.innerHTML
起始位置到终止位置的全部内容，包括htm标签，同时保留空格和换行
<body>
<button id="btn">显示当前系统时间</button>
<div>某个时间</div>
<script>
// 当我们点击了按钮 div里面的文字发生变化
// 1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function () {
// div.innerText = '2023-8-2';
div.innerText = getDate();
}
// 封装一个获取当前时间的函数
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
<body>
<p>123</p>
<script>
// 封装一个获取当前时间的函数
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件直接使用
// 1.获取元素
var p = document.querySelector('p');
// 2.调取函数
p.innerText = getDate(); // 输出结果是 没有点击 直接显示 这种的叫 操作DOM
</script>
</body>innerText 和 interHTML 的区别
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// 1.innerText不识别 html 标签 非标准 还会去除空格 换行
var div = document.querySelector('div');
div.innerText = '今年是<strong>阴天</strong>'; // <strong>标签直接被展示出来 不识别
// 2.interHTML 识别 html 标签 W3C标准 推荐使用
div .innerHTML = '今年是<strong>晴天</strong>'; // 识别<strong>标签
// 3.这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
// 获取这个 p
console.log(p.innerText); // interText去除空格 换行
console.log(p.innerHTML); // interHTML保留空格 换行
</script>
</body>
常用元素的属性操作
1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title
案例：分时显示不同图片，显示不同问候语
根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。
案例分析：
根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
需要一个div元素，显示不同问候语，修改元素内容即可
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2.得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3.判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'img/s.gif';
div.innerHTML = '上午好，好好写代码';
}else if (h < 18) {
img.src = 'img/x.gif';
div.innerHTML = '下午好，好好写代码';
}else {
img.src = 'img/w.gif';
div.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>案例：仿京东显示密码
案例分析
- 核心思路: 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
- 算法:利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
<head>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
/* 选中蓝色边框去除 */
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序 flag 变量 重复点击
var flag = 0;
eye.onclick = function() {
// if里面意为 点击一次后密码框type值为第一次点击时，等于0时，变为'text'，顺便把flag = 1; 用于反复点击
// 如果flag为0时，则密码显示 如果flag为1时，则密码隐藏
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 赋值操作
} else {
paw.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>样式属性操作
概念
我们可以通过JS修改元素的大小、颜色、位置等样式。
1.element.style 行内样式操作
2.element.className 类名样式操作
第一种： .element.style 行内样式操作
注意：
- Js 里面的样式采取驼峰命名法 比如 fontsize、 backgroundColor
- Js 修改 style 样式操作，产生的是行内样式，css 权重比较高
案例：淘宝点击关闭二维码
核心思路:
1.利用样式的显示和隐藏完成，display:none 隐藏元素display:block显示元素
2.点击按钮，就让这个二维码盒子隐藏起来即可
案例：循环精灵图背景
可以利用for循环设置一组元素的精灵图背景
案例分析：
1.首先精灵图图片排列有规律的
2.核心思路:利用for循环修改精灵图片的背景位置background-position
3.剩下的就是考验你的数学功底了
4.让循环里面的i索引号*44就是每个图片的y坐标
案例：显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开时，里面的文字显示。
案例分析
1.首先表单需要2个新事件，获得焦点onfocus 失去焦点onblur
2.如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
3.如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
<head>
<style>
input {
color: #999;
/* 选中蓝色边框去除 */
outline: none;
}
</style>
</head>
<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>
</body>第二种 .element.className 类名样式操作
概念
<head>
<style>
div {
width: 200px;
height: 300px;
color: blue;
}
.change {
background-color: purple;
color: #fff;
font-size: #fff;
margin-top: 100px;
}
</style>
</head>
<body>
<div >
文本
</div>
<script>
// 1.使用 .element.style 行内样式操作 修改元素样式，
// 如果样式比较少 或者 功能简单的情况下使用
var text = document.querySelector('div');
text.onclick = function() {
// 修改样式只能一条一条的加 比较麻烦
this.style.backgroundColor = 'purple'
this.style.color = '#fff';
this.style.fontSize = '#fff';
this.style.marginTop = '100px';
}
// 2.使用 .element.className 类名样式操作 适合于样式较多或者功能复杂的情况
var text = document.querySelector('div');
text.onclick = function() {
// 事先写好一个css样式 当我们点击的时候 让我们当前元素的类型改为了 change
// 相当于前面的html代码中 div 标签加 class='change'
this.className = 'change';
// 3.如果想要保留原先的类型 我们可以空格 加上原先的类名 也就是以前的多类名选择器
比如：
this.clsaaName = 'first change';
}
</script>
注意：
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用className来操作元素类名属性
- className会直接更改元素的类名，会覆盖原先的类名
案例: 密码框格式提示错误信息
用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则输入正确信息
案例分析：
1.首先判断的事件是表单失去焦点onblur
2.如果输入正确则提示正确的信息颜色为绿色小图标变化
3.如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
4.因为里面变化样式较多，我们采取className修改样式
<head>
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 {
color: red;
background: url(images/wrong.png);
}
.right {
color: green;
background: url(images/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 首先判断的事件是表单失去焦点onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 2.注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面输入的值的长度 是不是6到16位 ipt.value.length
if(this.value.length < 6 || this.value.length > 16) {
message.className = 'wrong message';
message.innerHTML = '您输入的文字位数不对,要求6~16位';
} else {
message.className = 'right message';
message.innerHTML = '您输入的文字位数正确';
}
}
</script>
</body>操作元素总结
操作元素是DOM核心内容
排他思想
概念
<body>
<!-- 五个按钮都具有点击事件 像轮播图下方的小点一样 点中哪个显示哪个banner -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
// 1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns 得到的是伪数组 里面的每一个元素为 btns[i]
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）然后让当前颜色改为blue
this.style.backgroundColor = 'blue';
}
}
</script>
</body>
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:
- 所有元素全部清除样式(千掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
总结：
因为我们想要只有自己变化样式，首先先排除其他人，然后才设置自己的样式
案例：百度换肤
- 这个案例练习的是给一组元素注册事件
- 给4个小图片利用循环注册点击事件
- 当我们点击了这个图片，让我们页面背景改为当前的图片
- 核心算法:把当前图片的src路径取过来，给body做为背景即可
<head>
* {
margin: 0;
padding: 0;
}
body {
background-color: url(images/1.jpg) np-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<script>
// 1.获取元素
var imgs = document.querySelector('.baidu').querySelector('.img');
// 2.for循环注册事件
for(var i = 0; i < imgs.length; i ++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路径
console.log(this.src);
// 把这个路径 this.src 给body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</script>
</body>案例：表格隔行变色
案例分析：
1.用到新的鼠标事件 鼠标经过onmouseover 鼠标离开onmouseout
2.核心思路:鼠标经过tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3.注意:第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行
案例：表单全选取消全选案例
案例分析
1.全选和取消全选做法: 让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2.下面复选框需要全部选中，上面全选才能选中做法:给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中
3.可以设置一个变量，来控制全选是否选中
自定义属性的操作
概念
1.获取属性值
- element.属性 获取属性值
- element.getAttribute('属性');
区别：
- element.属性 获取内置属性值(元素本身自带的属性)
- element.getattribute('属性’); 主要获得自定义的属性(标准)我们程序员自定义的属性
2.设置属性值
- element.属性 = '值' 设置内置属性值
- element.setAttribute(属性’，值'); 主要设置自定义的属性(标准)
3.移除属性
- element.removeAttribute('属性');
案例：tab栏切换（重点案例）⭐
当鼠标点击上下相应的选项卡（tab），下面内容跟随变化
案例分析
1.Tab栏切换有2个大的模块
2.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想)修改类名的方式
3.下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面
4.规律:下面的模块显示内容和上面的选项卡一一对应，相匹配.
5.核心思路:给上面的tab list 里面的所有小i添加自定义属性，属性值从开始编号。
6.当我们点击tab_list里面的某个小li，让tab_con 里面对应序号的内容显示，其余隐藏 (排他
思想
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab_list {
width: 1200px;
height: 40px;
background-color: rgba(164, 206, 255, 0.79);
border: 1px solid #999;
border-radius: 5px;
margin: 100px auto 0;
}
.tab_list ul li {
float: left;
width: 200px;
line-height: 40px;
text-align: center;
}
.current {
background-color: rgb(254, 73, 73);
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</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>
// 1.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想)修改类名的方式
// 获取元素
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 () {
// 排他思想 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2.下面的显示内容模块
// 获取5个li的索引号
var index = this.getAttribute('index');
console.log(index);
// 点击哪个就让第几个的下方li 显示出来
// 干掉所有人 让其余的item 这些 div 隐藏 留下我自己 让对应的item 显示出来
for (var i = 0; i < items.length; i++) {
item[i].style.dispaly = 'none';
}
items[index].style.dispaly = 'block';
}
}
</script>
</body>H5自定义属性
自定义属性目的 : 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中.
定义属性获取是通过getAttribute(属性)获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值
比如：<div data - index = "1"></div>
或者使用JS设置
element.setAttribute('data-index' , 2)
2.获取H5自定义属性
- 兼容性获取 element.getAttribute('data-index');
- H5新增element.dataset,index 或者 element.dataset['index'] ie11 才支持 dataset 集合的意思 注意：这里的index前面不需要加data
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.geTime); // 输出结果undefined 错误
console.log(div.getAttribute('getTime')); // 因为getTime="20" 是自定义属性，所以需要getAttribute获取
div.setAttribute('data-time',20); // 也可以使用js 进行设置新的自定义属性
console.log(div.getAttribute('data-index')); // 可以获取
// H5新增的获取自定义属性的方法 他只能获取data-开头的
console.log(div.dataset.index); // 可以获取
console.log(div.dataset); // dataset是一个集合 里面存放了所有以data开头的自定义属性
console.log(div.dataset['index']); // 也可以获取
// 获取data-list-name="andy"
console.log(div.getAttribute('data-list-name')); // 第一种getAttribute获取可以
// 如果自定义属性里面有多个 - 链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName); // 第二种需要使用驼峰命名法
console.log(div.dataset['listName']); // 也可以获取
</script>
</body>
节点操作
概念
获取元素通常使用两种方式:
1.利用 DOM 提供的方法获取元素 缺点：繁琐、逻辑性不强
- document.getElementByld()
- document.getElementsByTagName()
- document.querySelector 等
2.利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node 来表示HTMLDOM树中的所有节点均可通过JavaScript进行访问，所有HTML素(节点)均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个
基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType 为2
- 文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点
节点层级
利用 DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1.父级节点
node.parentNode
// parent 父亲的意思 Node 节点 parentNode 父节点
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
<body>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
// 1.父节点
var erweima = document.querySelector('.erweima');
// 以前的做法 获取.box
// var box = document.querySelector('.box');
// 利用父子节点获取 得到的是离元素最近的父级 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
</body>2.子节点
第一种
parentNode.childNodes(标准)
parentNode.childnodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
注意 : 返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
第二种
parentNode.children (非标准)
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 (这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<script>
// 1.子节点
// 以前的做法 DOM 提供的方法(API)获取
var ul = document.querySelector('ul'); // 以前的做法 获取ul
var lis = ul.querySelector('li'); // 以前的做法 获取ul 里面的 li
// 现在的做法 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes); // 获取的是所有的子节点
console.log(ul.childNodes[0].nodeType); // 3
console.log(ul.childNodes[1].nodeType); // 1
// 2.children 获取所有的子元素节点 也是实际开发常用的
console.log(ul.children); // 获取ul里所有的子元素节点 4个 正确
</script>
</body>3.第一个子元素和最后一个子元素
parentNode.firstChild
返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
parentNode.firstElementChild
返回第一个子元素节点，找不到返回null.
parentNode.lastChild
返回最后一个子节点
parentNode.lastElementChild
最后一个子元素节点，找不到返回null.
parentNode.lastElementChild 和 parentNode.lastElementChild
注意:这两个方法有兼容性问题，IE9 以上才支持
实际开发中，firstchild和 lastchild 包含其他节点，操作不方便而 firstElementchild 和lastElementchild 又有兼容性问题，那么我们如获取第一个子元素节点或最后一个子元素节点呢?
解决方案：
1.如果想要第一个子元素节点，可以使用parentNode.chilren[0]
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ol>
<script>
var ol = document.querySelector('ol'); // 获取ol
// 1.firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild); // 获取ol的第一个元素
// 2.lastChild 最后一个子节点 不管是文本节点还是元素节点
console.log(ol.lastChild); // 获取ol的最后一个元素
// 3.firstElementChild 第一个子元素
console.log(ol.firstElementChild); // 获取ol的第一个li元素
// 4.lastElementChild 最后一个子元素
console.log(ol.lastElementChild); // 获取ol的最后一个li元素
// 5.实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]); // 打印ol的第一个元素（索引号为0）
console.log(ol.children[ol.children.length - 1]); // 老方法 获取最后一个元素
</script>
</body>案例：微博下拉菜单
<head>
<style>
* {
margin: 0;
padding: 0;
}
.nav li {
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
float: left;
/* display: inline-block; */
border: 1px solid #fff319;
background-color: #30dfeb5a;
width: 100px;
height: 100px;
}
a{
/* color:#040404; */
text-decoration: none;
/* display: block; */
/*内边距（即填充padding）的方式，让每个菜单变得宽一些*/
}
.nav ul {
display: none;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">博客</a>
<ul>
<li>博客评论</li>
<li>未读提醒</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>免费邮箱</li>
<li>VIP邮箱</li>
<li>企业邮箱</li>
</ul>
</li>
</ul>
<script>
// 1.获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到四个li
// 2.循环注册事件
for(var i = 0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>4.兄弟节点
node .nextsibling
nextsibling 返回当前元素的下一个兄弟节点，找不到则返回nu11。同样，也是包含所有的节点
node.previousSibling
previoussibling 返回当前元素上一个兄弟节点，找不到则返回nu11。同样，也是包含所有的节点。
node.nextElementsibling
nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementsibling
previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。
注意: 第三个和第四个有兼容性问题 ， IE9 以上才支持
<body>
<div>我是div</div>
<span>我是span</span>
<script>
// 兄弟节点
var div = document.querySelector('div');
// 返回当前元素的下一个兄弟节点
console.log(div.nextSibling); // 得到的不是下一个兄弟节点 结果是next文本节点 因为div后面还有个换行
// 返回当前元素上一个兄弟节点
console.log(div.previousSibling); // 结果是next文本节点
console.log(div.nextElementSibling); // 结果是span 下一个兄弟节点元素
console.log(div.previousElementSibling); // 结果是null 因为div就是第一个 没有上一个了
</script>
</body>问答：
问:如何解决兼容性问题 ?
答:自己封装一个兼容性的函数
5.1创建节点
document.createElement('tagName')
document.createElement()方法创建由 tagName 指定的 HTMI 元素。因为这些元素原先不存在是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5.2添加节点
node .appendChild(child)
node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css 里面的
after 伪元素。
.appendchild()也成为后面追加元素
node.insertBefore(child，指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于 css 里面的 before
4伪元素。
总结：
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1.创建节点元素节点
var li = document.querySelector('li');
// 2.添加节点到指定父节点的子节点列表末尾 node .appendChild(child)
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3.添加节点到夫几点的子节点列表前面 node.insertBefore(child，指定元素)
var lii = document.querySelector('li');
ul.insertBefore(lii,ul.children[0]);
// 4.我们想要页面添加一个新的元素分为两步
// 第一步：创建元素
// 第二部：添加元素
</script>
</body>案例：简单版发布留言案例
分析：
- 核心思路:点击按钮之后，就动态创建一个li，添加到ul里面
- 创建li的同时，把文本域里面的值通过liinnerHTML赋值给li
- 如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
}
ul li {
width: 260px;
height: 30px;
background-color: rgba(0, 0, 255, 0.296);
margin: 10px 0;
}
a{
/* color:#040404; */
text-decoration: none;
/* display: block; */
/*内边距（即填充padding）的方式，让每个菜单变得宽一些*/
}
button {
margin-bottom: 30px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2.注册事件
btn.onclick = function() {
if(text.value =='') {
// 如果text的value值没有输入，则弹出窗您没有输入内容，
alert('您没有输入内容');
return false; // 终止操作
} else {
// (1)创建内容
var li = document.createElement('li');
// 先有li才能赋值
li.innerHTML = text.value;
// (2)添加元素
// ul.appendChild(li); // 最新的留言在最下面展示
// 最新的留言li 展示在ul的第0个前面，也就是展示在第一个
ul.insertBefore(li,ul.children[0]); // ul.children[0] ul的第0个索引 也就是第一个
}
}
</script>
</body>6.删除节点
node.removeChild(child)
node.removechild()方法从DOM 中删除父节点中的一个子节点，返回删除的节点。
remove 移除
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
}
ul li {
width: 260px;
height: 30px;
background-color: rgba(0, 0, 255, 0.296);
margin: 10px 0;
}
a{
/* color:#040404; */
text-decoration: none;
/* display: block; */
/*内边距（即填充padding）的方式，让每个菜单变得宽一些*/
}
button {
margin-bottom: 30px;
}
</style>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 删除节点
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2.删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]); // 删除ul的第0个孩子
// 3.点击按钮依次删除里面的孩子
btn.onclick = function() {
if(ul.children.length == 0) {
// 如果ul里面孩子的数量为0 就把这个按钮禁用
this.disabled = ture;
} else {
// 如果不能于0，则可以继续删除
ul.removeChild(ul.children[0]);
}
}
</script>
</body>案例：删除留言案例
- 当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接
- 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
- 阻止链接跳转需要添加javascriptvoid(0);或者 javascript;;
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
}
ul li {
width: 260px;
height: 30px;
background-color: rgba(0, 0, 255, 0.296);
margin: 10px 0;
}
a{
/* color:#040404; */
text-decoration: none;
/* display: block; */
/*内边距（即填充padding）的方式，让每个菜单变得宽一些*/
}
button {
margin-bottom: 30px;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2.注册事件
btn.onclick = function() {
if(text.value =='') {
// 如果text的value值没有输入，则弹出窗您没有输入内容，
alert('您没有输入内容');
return false; // 终止操作
} else {
// (1)创建内容
var li = document.createElement('li');
// 先有li才能赋值 javascript:;组织跳转
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2)添加元素
// ul.appendChild(li); // 最新的留言在最下面展示
// 最新的留言li 展示在ul的第0个前面，也就是展示在第一个
ul.insertBefore(li,ul.children[0]); // ul.children[0] ul的第0个索引 也就是第一个
// (3)删除元素 删除的是当前链接的li 也就是删除他的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i ++) {
as[i].onclick = function() {
// node.removeChild(child) 删除父节点中的子节点 删除的是child为li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>7.复制节点(克隆节点)
node.cloneNode()
方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意:
1.如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克降里面的子节点
2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1.克隆节点
// .node.cloneNode() 括号为空或者里面为false是浅拷贝 只复制标签不复制里面的内容
// .node.cloneNode(true) 括号为为true是深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
// 2.放到那个位置
ul.appendChild(lili);
</script>
</body>案例：动态生成表格
分析：
1.因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。
2.所有的数据都是放到tbody里面的行里面。
3.因为行很多，我们需要循环创建多个行(对应多少人)。
4.每个行里面又有很多单元格(对应里面的数据)，我们还继续使用循环创建多个单元格并且把数据存入里面(双重for循环)
5.最后一列单元格是删除，需要单独创建单元格。
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
}
ul li {
width: 260px;
height: 30px;
background-color: rgba(0, 0, 255, 0.296);
margin: 10px 0;
}
a{
color: red;
text-decoration: none;
}
button {
margin-bottom: 30px;
}
li a {
float: right;
}
thead tr th {
background-color: #ccc;
width: 100px;
height: 30px;
border: 1px solid #666;
}
tbody tr td {
width: 100px;
height: 30px;
border: 1px solid #666;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>张三</td>
<td>Js</td>
<td>100</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>Js</td>
<td>100</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>王二</td>
<td>Js</td>
<td>100</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>麻子</td>
<td>Js</td>
<td>100</td>
<td><a href="javascript:;">删除</a></td>
</tr> -->
</tbody>
</table>
<script>
// 1.先准备好学生的数据 数组里面可以存放多个对象
var datas = [
{
name: '张三',
subject:'Js',
score: 100,
},
{
name: '李四',
subject:'Js',
score: 100,
},
{
name: '王二',
subject:'Js',
score: 100,
},{
name: '麻子',
subject:'Js',
score: 100,
},{
name: '大猪蹄子',
subject:'Js',
score: 0,
}
];
// 2.往tbody里里面创建行 有几个人（通过数组的长度） 我们就创建几行
var tbody = document.querySelector('tbody');
for(var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// (1)创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// (2)行里面创建单元格 td (跟数据有关系的3个单元格) 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象data[i]
for(var k in datas[i]) { // 外面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
td.innerHTML = datas[i][k];
// 把对象里面的属性值 给 td
tr.appendChild(td);
}
// for(var k in obj) {
// k得到的是属性名
// obj[k] 得到的是属性值
// }
// （3）创建又删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// (4) 删除操作
var as = document.querySelectorAll('a');
for(var i =0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除当前a所在的行 node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>三种动态创建元素区别
- document.write() document 文档 write写
- element.innerHTMI
- document.createElement()
区别：
1.document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 （意思是会重新创建一个html，页面中只有一个创建的元素）所以很少使用
2.innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂
4.createElement()创建多个元素效率稍低一点点，但是结构更清晰
总结:不同浏览器下，innerHTML 效率要比 creatElement 高
<body>
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// 三种动态创建元素区别
// 1.document.write() document 文档 write写
// 如果页面文档流加载完毕，在调用这句话会导致页面重绘
document.write('<div>123</div>');
// 2.element.innerHTMI
// 在inner里面创建一个a链接
var inner = document.querySelector('.inner');
inner.innerHTML = '<a href="http://wwww.baidu.com">百度</a>';
// 创建100个a 速度慢
for(var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="http://wwww.baidu.com">百度</a>';
}
// 创建100个a 使用数组的方法 先创建一个数组，里面有100个a 再放入inner中 速度超快
var arr = [];
for(var i = 0; i <= 100; i++) {
arr.push('<a href="http://wwww.baidu.com">百度</a>');
}
inner.innerHTML = arr.join('');
// 3.document.createElement('')
// 先创建一个新的a标签 再把a标签追加给create里面
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);
// 创建100个a 速度快
for(var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
</body>DOM重点核心（总结）
文档对象模型(DocumentObject Model,简称 DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口.
2.对于HTML，dom使得html形成一棵dom树.包含文档、元素、节点
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建
1.document.write
2. innerHTML
3. createElement
增
1. appendChild
2. insertBefore
删
1. removeChild
改
主要修改dom的元素属性，dom元素的内容、属性,表单的值等
1.修改元素属性: src、href、title等
2.修改普通元素内容:innerHTML、innerText
3.修改表单元素: value、type、disabled等
4.修改元素样式:style、className
查
主要获取查询dom的元素
1.DOM提供的API方法: getElementByld、getElementsByTagName 古老用法不太推荐
2.H5提供的新方法: querySelector、querySelectorAll 提倡
3.利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling.nextElementSibling)提倡
属性操作
主要针对于自定义属性
1.setAttribute:设置dom的属性值
2.getAttribute:得到dom的属性值
3.removeAttribute移除属性
事件操作
给元素注册事件，采取事件源.事件类型=事件处理程序
事件高级
注册事件（绑定事件）
概述
给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
传统注册方式
- 利用on 开头的事件onclick
- <button onclick = "alert(‘hi~’)"></button>
- btn.onclick = function(){}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- w3c标准推荐方式
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器(监听处理函数)
- 按注册顺序依次执行
addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数:
- type:事件类型字符串，比如 click、mouseover，注意这里不要带on
- listener: 事件处理函数，事件发生时，会调用该监听函数
- useCapture:可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习
attachEvent 事件监听方式（了解）i9以前的版本支持
该特性是非标准的，请尽量不要在生产环境中使用它！
eventTarget.attachEvent (eventNamewithOn, callback)
eventTargetattachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触
发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数:
- eventNameWithOn :事件类型字符串，比如onclick、onmouseover ，这里要带on
- callback:事件处理函数，当目标触发事件时回调函数被调用
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>attachEvent(i9以前的版本支持)</button>
<script>
var btns = document.querySelectorAll('button');
// 1.传统方式注册事件
btns[0].onclick = function(){
alert('hi');
}
btns[0].onclick = function(){
alert('你好');
} // 第一个事件会第二个被覆盖
// 2.事件监听方式注册事件
// (1) addEventListener 里面的时间类型是字符串 必定家引号 而且不带on
// (2) 同一个元素、事件添加多个监听事件(事件处理程序)
btns[1].addEventListener('click',function() {
alert('你好啊~');
})
btns[1].addEventListener('click',function() {
alert('你好啊~~~~');
}) // 弹两次窗口
// 3.attachEvent 事件监听方式（了解）i9以前的版本支持
btns[3].attachEvent('onclick', funciton() {
alert(123);
}) // 报错
</script>
</body>注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数，默认是flase
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
}else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
兼容性处理的原则:首先照顾大多数浏览器，再处理特殊浏览器
删除事件（解绑事件）
删除事件的方式
1.传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
（1）eventTarget.removeEventListener(type， listener[，useCapture]);
（2）eventTarget.detachEvent(eventNameWithOn， callback); ie9版本以下支持
删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.renmoveEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}
DOM事件流
- 事件流描述的是从页面中接收事件的顺序
- 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM 事件流
比如我们给一个div注册了点击事件
DOM事件流分为3个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
- 事件冒泡:IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM 最顶层节点的过程。
- 事件捕获:网景最早提出，由DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
简单理解：
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡，会在最低点( 最具体元素)之后漂浮到水面上，这个过程相当于事件冒泡。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM 事件流。
注意：
- Js代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type，listener[，useCapture])第三个参数果是true，表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave.
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: rgb(255, 197, 104);
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: rgb(255, 90, 90);
position: absolute;
left: 50%;
margin-left: -50px;
top:50%;
margin-top: -50px;
text-align: center;
line-height: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流 三个阶段
// 1.Js代码中只能执行捕获或者冒泡其中的一个阶段
// 2.onclick 和 attachEvent(ie) 只能得到冒泡阶段
// 3.捕获阶段 如果addEventLiatener 第三个参数是 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); // 结果为点father盒子弹'father' 点里面son盒子也弹'father'
// 4.冒泡阶段 如果addEventLiatener 第三个参数是 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);
// 结果为 点father盒子谈'father' 点里面son盒子第一次弹'son'再弹'father'
</script>
</body>事件对象
概念
官方解释:event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解:事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它否很多属性和方法。
<div>123</div>
<script>
// 事件对象
var div = document.querySelector('div');
// 传统方式
div.onclick = function(event) {
console.log(event); // 结果是鼠标点击的信息 比如鼠标坐标
}
// addEventListener 方式
div.addEventListener('click', function(event) {
console.log(event); // 结果是鼠标点击的信息 比如鼠标坐标
})
// 1.event 就是一个事件对象 写道我们侦听函数的小括号里 当形参来看
// 2.事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
// 3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
// 4.这个事件对象我们可以自己命名 比如 event、evt、e
// 5.事件对象也有兼容性问题 ie6 7 8不能使用 通过 window.event 来获取对象
// 兼容性写法
div.onclick = function(e) {
// console.log(e); // ie6 7 8不能使用
// console.log(window.event); // ie6 7 8能使用
e = e || window.event; // 兼容写法
console.log(e);
}
</script>
使用语法
- 这个event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
- 当我们注册事件时，event 对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。
事件对象的兼容性方案
事件对象本身的获取存在兼容问题：
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找.
解决： e = e || window.event;
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6~8使用 |
| e.type | 返回事件的类型 比如click mouseover 不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准 ie6~8使用 |
| e.returnValue | 该属性 阻止默认事件 (默认行为) 非标准 ie-8使用 比如不让链接跳转 |
| e.preventDefault() | 该方法 阻止默认事件(默认行为) 标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
// e.target 返回触发事件的对象
// 1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
// 区别：e.target 点击了哪个元素，就返回哪个元素 this 哪个元素绑定了这个点击事件 那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click',function(e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
// 我们给ul绑定了事件 那么this 就指向ul
console.log(this); // 点击返回的是ul
// 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);
}
// 跟this 有个非常相似的属性 currentTarget ie6~8不能使用
<body>
<div>123</div>
<a href="javascript:;">百度</a>
<form action="#">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 1. e.type 返回事件的类型
var div = document.querySelector('div');
div.addEventListener('click', fn); // 标点击123，返回的是mouseout
div.addEventListener('mouseover', fn); // 鼠标经过123，返回的是mouseout
div.addEventListener('mouseout', fn); // 鼠标离开123，返回的是mouseout
// 封装个函数 然后上面调用它
function fn(e) {
console.log(e.type);
}
// 2.e.preventDefault() 阻止默认事件 (默认行为) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法 低版本浏览器不支持
})
// 传统注册方式
a.onclick = function() {
// 普通浏览器e.preventDefault()
e.preventDefault();
// 低版本浏览器 ie6 7 8
e.returnValue;
// 我们也可以利用return false 也能阻止默认行为 没有兼容性问题
return false; // 特点就是return 后面代码不执行了，而且只限于传统注册方式
}
</script>
</body>
组织事件冒泡
组织事件冒泡的两种方式
事件冒泡:开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握.
阻止事件冒泡
- 标准写法:利用事件对象里面的stopPropagation()方法
e.stopPropagation()
- 非标准写法： IE6 7 8 利用事件对象 cancelBubble 属性
阻止事件冒泡的兼容性解决方案
if(e && e.stopPropagation) {
e.stopPropagation();
} else {
window.even.cancelBubble = true;
}
<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');
// 目的 点击 son盒子 文字 就只会弹出son 不会再往上冒泡了
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // ancel 取消 Bubble 泡泡
}, false);
var father = document.querySelector('.father');
father.addEventListener('click',function(e) {
alert('father');
// 目的 点击 father盒子 文字 就只会弹出father 不会再往上冒泡了
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // ancel 取消 Bubble 泡泡
}, false);
// 结果为 点father盒子谈'father' 点里面son盒子第一次弹'son'再弹'father'
document.addEventListener('click',function() {
alert('document');
})
</script>
</body>事件委托（代理、委派）
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如?
解决方案:快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势:快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。
点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM 的次数越多，这就会延长整个页面的交互就绪时间。
事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派
事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例:给ul注册点击事件，然后利用事件对象的target 来找到当前点击的li，因为点击li，事件会冒泡到ul上,ul有注册事件，就会触发事件监听器。
事件委托的作用:
我们只操作了一次DOM，提高了程序的性能.
<body>
<ul>
<li>知否知否1</li>
<li>知否知否2</li>
<li>知否知否3</li>
<li>知否知否4</li>
<li>知否知否5</li>
</ul>
<script>
// 事件委托的核心：给父节点添加侦听器，利用时间冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否');
// e.target 这个得到我们点击的对象
e.target.style.color = 'blue';
})
</script>
</body>常用的鼠标事件
常用的
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
2.禁止鼠标选中( selectstart 开始选中)
<body>
我是一段不愿意分享的文字
<script>
// 1.contextmenu 禁止鼠标右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2.禁止鼠标选中selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。
| 鼠标事件对象说 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的 X 坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的 Y 坐标 |
| e.pageX | 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的 Y 坐标 |
<script>
// 鼠标点击事件
document.addEventListener('click', function(e) {
console.log(e.clientX);
console.log(e.clientY);
})
</script>案例：跟随鼠标的图片
分析：
- 鼠标不断的移动，使用鼠标移动事件:mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理:每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片
<style>
img {
position: absolute;
width: 24px;
height: 24px;
}
</style>
<body>
<img src="images/bofang.png" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 只要我们鼠标移动1px 就会触发这个事件
// 核心原理:每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
pic.style.left = x - 12 + 'px'; // 千万记得要加单位px
pic.style.top = y - 12 + 'px';
})
</script>
</body>常用键盘事件
事件除了使用鼠标触发，还可以使用键盘触发
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时 触发 但是它不识别功能键 比如 ctrl shift 箭头等 |
注意：三个事件的执行顺序 keydown >> keypress >> keyup
键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCLL值 |
注意：
- onkeydown和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
- 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键(包括功能键)
- Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
案例: 模拟京东按键输入内容
当我们按下s键，光标就定位到搜索框
案例分析:
- 核心思路:检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
- 搜索框获得焦点:使用js里面的focus()方法
<input type="text">
<script>
var search = document.querySelector('input');
// 不能用keydown keydown是鼠标按下 会在文本框里有个s
document.addEventListener('keyup',function(e) {
console.log(e.keyCode); // 先看一下当前s键的ascll码是多少 83
if(e.keyCode === 83) {
search.focus();
}
})
</script>案例 : 模拟京东快递单号查询
要求:当我们在文本框中输入内容时，文本框上面自动显示大字号的内容
分析：
- 快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大 )
- 表单检测用户输入:给表单添加键盘事件
- 同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容
- 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
- 注意: keydown 和 keypress 在文本框里面的特点: 他们两个事件触发的时候，文字还没有落入文本框中。
- keyup事件触发的时候，文字已经落入文本框里面了
- 当我们失去焦点，就隐藏这个con盒子
- 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子
<body>
<div class="search">
<div class="con"></div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
if(this.value ==''){
con.style.dispaly = 'none';
} else {
con.style.dispaly = 'block';
con.innerText = this.value;
}
})
// 当我们失去焦点，就隐藏这个con盒子
jd_input.addEventListener('blur', function() {
con.style.dispaly = 'none';
})
// 当我们获得焦点，就显示这个con盒子
jd_input.addEventListener('focus', function() {
if(this.value !== '') {
con.style.dispaly = 'block';
}
})
</script>
</body>
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
