Javascript笔记大全02
DOM
简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
DOM树
窗口加载事件
// 为window绑定一个onload事件
window.onload = function() {}
或者
window.addEventListener('load',function() {});
// 该事件对应的响应函数将会在页面加载完成之后执行
// 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload是窗口（页面）加载事件，会在页面或图像加载完成后立即发生。通常用于 < body > 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script>
function loadImage(){
alert("图片加载完成");
}
script>
head>
<body>
<img src="logo.png" onload="loadImage()" width="336" height="36">
body>
html>
事件
// 事件三要素
// 点击一个按钮，弹出对话框
// 1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
// 事件源 事件被触发的对象 谁 在这个案例里是按钮
var btn = document.getElementById('btn');
// 事件类型 如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下
// 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('帅！');
}
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1.获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件1
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
获取元素
获取页面中的元素可以使用以下几种方式
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
根据ID获取
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<button id="btn">我是一个按钮button>
<script type="text/javascript">
// 获取button对象
// 2.get 获得 element 元素 by 通过
// 3.参数id是大小写敏感的字符串
// 获取button对象
var btn = document.getElementById('btn');
// 4.返回的是一个元素对象
console.log(typeof btn); // object
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(btn);
script>
body>
html>
根据标签名获取
// getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名');
注意：
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
- 得到元素对象是动态的
还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取时不包括父元素自己
<body>
<ul>
<li>最带琴女36Eli>
<li>最带琴女37Eli>
<li>最带琴女38Eli>
<li>最带琴女39Eli>
<li>最带琴女40Eli>
ul>
<ol>
<li>大大大li>
<li>大大大li>
<li>大大大li>
<li>大大大li>
<li>大大大li>
ol>
<script type="text/javascript">
// 获取所有的li（这里有10个）
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
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]);
}
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4.如果页面中没有这个元素 返回的是空的伪数组的形式
// 获取ol里面的li（这里有5个）
// 5.element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
var ol = document.getElementsByTagName('ol'); // [ol]
console.log(ol[0].getElementsByTagName('li'));
script>
body>
根据name属性获取
getElementsByName()
通过HTML5新增的方法获取
document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
<body>
<div class="box">
<ul>
<li id="nav">首页li>
<li>产品li>
ul>
div>
<script type="text/javascript">
// 1.getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3.querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
script>
body>
获取特殊元素
获取body元素
document.body // 返回body元素对象
获取HTML元素
document.documentElement // 返回html元素对象
节点
Node—构成HTML文档最基本的单元
常用节点分为四类
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
获取元素通常使用两种方式：
- 利用DOM提供的方法获取元素
document.getElementById()
document.getElementsByTagName()
document.querySelector 等
// 逻辑性不强、繁琐
-
利用节点层级关系获取元素
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
父子节点
node.parentNode
// 1. parenNode 属性可返回某节点的父节点，注意是最近的一个父节点
// 2. 如果指定的节点没有父节点则返回 null
<body>
<div class="box">
<span class="erweima">xspan>
div>
<script type="text/javascript">
// 1.父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点（亲爸爸），如果找不到父节点就返回null
console.log(erweima.parentNode); // box
script>
body>
子节点
parentNode.childNodes (标准)
// parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
// 注意：返回值里面包含了所有子节点，包括元素节点，文本节点等
// 如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
parentNode.children (非标准)
// parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是重点）
// 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
<body>
<div>我是divdiv>
<span>我是spanspan>
<ul>
<li>我是lili>
<li>我是lili>
<li>我是lili>
<li>我是lili>
ul>
<ol>
<li>我是lili>
<li>我是lili>
<li>我是lili>
<li>我是lili>
ol>
<div class="demo">
<div class="box">
<span class="erweima">xspan>
div>
div>
<script type="text/javascript">
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1.子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);// [text, li, text, li, text, li, text, li, text]
console.log(ul.childNodes[0].nodeType); // 3
console.log(ul.childNodes[1].nodeType); // 1
// 2.children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children); // [li, li, li, li]
script>
body>
第一个子元素和最后一个子元素
parentNode.firstChild
// firstChild 返回第一个节点，找不到则返回 null，同样，也是包含所有的节点
parentNode.lastChild
// lastChild 返回最后一个节点，找不到则返回 null，同样，也是包含所有的节点
// 注意：这两个方法有兼容性问题，IE9以上才支持
<body>
<ol>
<li>我是li1li>
<li>我是li2li>
<li>我是li3li>
<li>我是li4li>
ol>
<script type="text/javascript">
var ol = document.querySelector('ol');
// 1.firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild); // text
console.log(ol.lastChild); // text
// 2.firstElementChild 返回第一个子元素节点
console.log(ol.firstElementChild); // li1
console.log(ol.lastElementChild); // li4
// 3.实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]); // li1
// 最后一个
console.log(ol.children[ol.children.length - 1]); // li4
script>
body>
兄弟节点
node.nextSibling
// nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点
node.previousSibling
// perviousSibling 返回当前元素上一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点
// 注意：下面的两个方法有兼容性问题，IE9以上才支持
node.nextElementSibling
// nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回 null
node.previousElementSibling
// previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回 null
<body>
<div>我是divdiv>
<span>我是spanspan>
<script type="text/javascript">
var div = document.querySelector('div');
// nextSibling 下一个兄弟节点 包含元素节点或者文本节点等
console.log(div.nextSibling); // #text
console.log(div.previousSibling); // #text
console.log(div.nextElementSibling); // 我是span
console.log(div.previousElementSibling); // null
script>
body>
创建节点
document.createElement('tagName');
// 可用于创建一个元素节点对象，需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
// 创建li元素节点
var li = document.createElement('li');
创建文本节点
document.createTexNode();
// 可用于创建一个文本节点对象
// 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
// 创建娑娜文本节点
document.createTextNode('娑娜');
添加节点
appendChild()
// 向一个父节点中添加一个新的子节点
// 用法：父节点.appendChild(子节点);
// 创建指定文本的li
var btn = document.createElement("BUTTON");
var t = ocument.createTextNode("CLICK ME");
// 把 CLICK ME 添加到按钮btn里
btn.appendChild(t);
insertBefore()
// 可以在指定的子节点前插入新的子节点
// 语法：父节点.indertBefore(新节点,旧节点);
// 1.创建节点元素节点
var li = document.createElement('li');
// 获取ul
var ul = document.querySelector('ul');
// 2.添加节点 node.appendChild(child) node 父级 child是子级 后面追加元素 类似于数组中的push
ul.appendChild(li);
// 3.添加节点 node.inserBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
// 4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素
替换节点
replaceChild()
// 可以使用指定的子节点替换已有的子节点
<body>
<ul id="myList"><li>Coffeeli><li>Teali><li>Milkli>ul>
<p id="demo">单击按钮替换列表中的第一项。p>
<button onclick="myFunction()">点我button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。p>
<p><strong>注意:strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。p>
body>
删除节点
removeChild()
// 可以删除一个子节点
// 语法：父节点.removeChild(子节点);
<body>
<button>删除button>
<ul>
<li>熊大li>
<li>熊二li>
<li>光头强li>
ul>
<script type="text/javascript">
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2.删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
btn.onclick = function() {
if (ul.children.length == 0) {
// 数组长度为0时，按钮不可点击
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
script>
body>
复制节点
cloneNode()
// cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
// 注意：
// 1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
// 2. 如果括号为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
<body>
<ul id="myList1"><li>Coffeeli><li>Teali>ul>
<ul id="myList2"><li>Waterli><li>Milkli>ul>
<p id="demo">单击按钮将项目从一个列表复制到另一个列表中p>
<button onclick="myFunction()">点我button>
<script>
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
// 若里面为false，则文本Milk不会被复制，只有空的li
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
script>
body>
操作元素
DOM操作可以改变网页的内容、结构、样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
改变元素内容
element.innerText
// 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
// 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
style>
head>
<body>
<button>显示当前系统时间button>
<div>某个时间div>
<script type="text/javascript">
// 当我们点击了按钮，div里面的文字会发生变化（某个时间变成当前系统时间）
// 1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2077-7-7';
div.innerText = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个2021年7月27日星期二
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
}
script>
body>
html>
innerText 和 innerHTML的区别
- innerText 不识别html标签 非标准
- innerHTML 识别html标签 W3C标准
常用元素的属性操作
1.innerText\innerHTML 改变元素内容
2.src、href
3.id、alt、title
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
img {
width: 300px;
}
style>
head>
<body>
<button id="sona">娑娜button>
<button id="gewen">格温button>
<br>
<img src="../img/娑娜.jpg" >
<script type="text/javascript">
// 修改元素属性 src
// 1.获取元素
var sona = document.getElementById('sona');
var gewen = document.getElementById('gewen');
var img = document.querySelector('img');
// 2.注册事件 处理程序
gewen.onclick = function() {
img.src = '../img/格温.jpg';
img.title = '灵罗娃娃'
}
sona.onclick = function() {
img.src = '../img/娑娜.jpg';
img.title = '琴瑟仙女'
}
script>
body>
html>
图片切换练习
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 500px;
height: 550px;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: lightpink;
text-align: center;
}
style>
head>
<script type="text/javascript">
window.onload = function() {
// 点击按钮切换图片
// 获取两个按钮
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// 要切换图片就要修改img标签的src属性
// 获取img标签
var img = document.getElementsByTagName('img')[0];
// 创建一个数组，用来保存图片的路径
var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.jpg'];
// 创建变量，来保存当前正在显示的图片的索引
var index = 0;
// 设置提示文字
// 获取id为info的p元素
var info = document.getElementById('info');
info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';
// 分别为两个按钮绑定单机响应函数
prev.onclick = function() {
// 切换图片就是修改img的src属性
// 要修改一个元素的属性： 元素.属性 = 属性值
// 切换到上一张，索引自减
index--;
// 判断index是否小于0
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
// 当点击按钮后，重新设置信息
info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';
};
next.onclick = function() {
// 切换到下一张，索引自加
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';
};
}
script>
<body>
<div id="outer">
<p id="info">p>
<img src="img/1.png" >
<button id="prev">上一张button>
<button id="next">下一张button>
div>
body>
html>
表单元素的属性操作
// 利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled
显示隐藏密码
仿京东显示密码，点击按钮将密码框切换为文本框，并且可以查看密码明文
分析：
- 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
- 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box {
position: relative;
width: 400px;
border: 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="../img/眼1.jpeg" id="eye" >
label>
<input type="password" id="pwd">
div>
<script type="text/javascript">
// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后 flag一定要变化
if(flag == 0) {
pwd.type = 'text';
eye.src = '../img/眼1.jpeg';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = '../img/眼2.jpg';
flag = 0;
}
}
script>
body>
html>
获取元素当前显示的样式
第一种
注意该方法只支持IE浏览器，其他的报错
// 语法：元素.currentStyle.样式名
// 它可以用来读取当前元素正在显示的样式
alert(box1.currentStyle.width);
// 如果当前元素没有设置该样式，则获取它的默认值
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById('btn01');
var box1 = document.getElementById('box1');
btn01.onclick = function() {
alert(box1.currentStyle.width);
};
}
script>
<body>
<button id="btn01">点我一下button>
<br><br>
<div id="box1" style="width: 20px;">div>
body>
第二种
// 语法：元素.style.样式名
alert(box1.style.width);
// 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById('btn01');
var box1 = document.getElementById('box1');
btn01.onclick = function() {
alert(box1.style.width);
};
}
script>
<body>
<button id="btn01">点我一下button>
<br><br>
<div id="box1" style="width: 20px;">div>
body>
第三种
getComputedStyle()
该方法会返回一个对象，对象中封装了当前元素对应的样式
- 可以通过对象，样式名来读取样式
- 如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没有设置width，它不会获取到auto，而是一个长度。
- 该方法不支持IE8及以下的浏览器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style type="text/css">
#test {
height: 50px;
background-color: rgb(178,116,230);
}
style>
head>
<body>
<p>点击按钮计算 DIV 的背景颜色。p>
<p><button onclick="myFunction()">点我button>p>
<div id="test">测试 DIVdiv>
<p>计算值为: <span id="demo">span>p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
script>
body>
html>
getPropertyValue() 方法返回指定的 CSS 属性的值。
样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作
注意：
- JS里面的样式采取驼峰命名法 比如 forntSize、backgroundColor
- JS修改style样式操作，产生的是行内样式，css权重比较高
- 如果样式修改较多，可以采取操作类名方式更改元素样式
- class因为是个保留字，因此使用className来操作元素类名属性
- className会直接更改元素的类名，会覆盖原先的类名
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
style>
head>
<body>
<div>div>
<script type="text/javascript">
// 1.获取元素
var div = document.querySelector('div');
// 2.注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
// 如果CSS中的样式名含有-，如：background-color
// 需要将这种样式名修改为驼峰命名法
// 去掉-，然后将-后的字母大写
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
script>
body>
html>
案例
仿淘宝关闭二维码案例
- 核心思路：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素
- 点击按钮，就让这个二维码盒子隐藏起来即可
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.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: pointer;
}
style>
head>
<body>
<div class="box">
淘宝二维码
<img src="../img/2维码.jpg" >
<i class="close-btn">xi>
div>
<script type="text/javascript">
// 1.获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 程序处理
btn.onclick = function() {
box.style.display = 'none';
}
script>
body>
html>
案例2
显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
input {
color: #999;
}
style>
head>
<body>
<input type="text" value="手机">
<script type="text/javascript">
// 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>
html>
使用className修改样式属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
style>
head>
<body>
<div class="first">文本div>
<script type="text/javascript">
// 1.使用element.style获得修改元素样式 如果样式比较少 或者 功能简单 的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'pueple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了change
// 2.我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3.如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
script>
body>
html>
案例
密码框格式提示错误信息：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background:url(../img/眼1.jpeg) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(../img/眼2.jpg);
}
.right {
color: green;
background-image: url(../img/眼1.jpeg);
}
style>
head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码p>
div>
<script type="text/javascript">
// 1.获取元素
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('错误');
message.className = 'message wrong';
message.innerHTML = '输入错误';
} else {
message.className = 'message right';
message.innerHTML = '输入正确';
}
}
script>
body>
html>
拖拽
拖拽的流程
- 当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
- 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
- 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
style>
<script type="text/javascript">
window.onload = function() {
// 获取box1
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var img1 = document.getElementById('img1');
// 开启box1的拖拽
drag(box1);
drag(box2);
drag(img1);
};
/**
* 提取一个专门用来设置拖拽的函数
* 参数，开启拖拽的元素
*/
function drag(obj) {
// 当鼠标在被拖拽元素上按下时开始拖拽 onmousedown
obj.onmousedown = function(event) {
// 设置box1捕获所有鼠标按下的事件
/*
setCapture()
- 只有IE支持，但是在火狐中调用时不会报错
而如果使用chrome调用，会报错
*/
/**
* if(box1.setCapture) {
box1.setCapture();
}
*/
obj.setCapture && obj.setCapture();
event = event || window.event;
// div的偏移量 鼠标.clientX - 元素.offsetLeft
// div的偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event) {
event = event || window.event;
// 当鼠标移动的时候拖拽元素跟随鼠标移动 onmousemove
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box1的位置
obj.style.left = left + 'px';
obj.style.top = top + 'px';
};
// 为document绑定一个鼠标松开事件
document.onmouseup = function() {
// 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
当拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
此时会导致拖拽功能异常，这个是浏览器提供的默认行为
如果不希望发生这个行为，则可以通过return false 来取消默认行为
但是这招对IE8不起作用
*/
return false;
};
};
script>
head>
<body>
我是一段文字
<div id="box1">div>
<div id="box2">div>
<img src="../img/sona.png" id="img1" style="position: absolute;" >
body>
html>
三种动态创建元素的区别
document.write()
element.innerHTML
document.createElement()
区别
- document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 createELement 高
DOM重点核心
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建
- document.write
- innerHTMl
- createElement
增
- appendChild
- insertBefore
删
- removeChild
改
主要修改dom的元素属性，dom元素的内容、属性、表单的值等
- 修改元素属性：src、href、title等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled等
- 修改元素样式：style、className
查
主要获取查询dom元素
- DOM提供的API方法：getElementById、getElementsByTagName 古老用法不太推荐
- H5提供的新方法：querySelector、querySelectorAll 提倡
- 利用节点操作获取元素：父（parentNode）、子（Children）、兄（previousElementSibling）、nextElementSibling 提倡
自定义属性的操作
获取属性值
element.属性 获取属性值
element.getAttribute('属性');
// 区别
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性'); 主要获得自定义的属性（标准）我们程序员自定义的属性
设置属性值
element.属性 = '值' 设置内置属性值
element.setAttribute('属性','值');
// 区别
element.属性 设置内置属性值
element.setAttribute('属性'); 主要设置自定义的属性（标准）
移除属性
element.removeAttribute('属性');
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div class="demo" index="1" class="nav">div>
<script type="text/javascript">
var div = document.querySelector('div');
// 1.获取元素的属性值
// (1) element.属性
console.log(div.id);
// (2) element.getAttribute('属性') get得到获取 attribute属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 2.设置元素属性值
// (1) element.属性 = '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性','值'); 主要针对于自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer'); // class 特殊 这里面写的就是class不是className
// 3.移除属性 removeAttribute(属性)
div.removeAttribute('index');
script>
body>
html>
H5自定义属性
自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
于是h5给我们新增了自定义属性
设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如：<div data-index= '1'>div>
或者使用JS设置
element.setAttribute('data-index',2)
<body>
<div getTime="20" data-index="2" data-list-name="andy">div>
<script type="text/javascript">
var div = document.querySelector('div');
//console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法
// dataset 是一个集合里面存放了所有data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采用 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
script>
body>
获取H5自定义属性
- 兼容性获取：element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持
Tab选项卡
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" type="text/css" href="imgs/index.css"/>
head>
<body>
<div class="tab_contents">
<ul class="tab_nav">
<li class="tabNav_active">
<img src="imgs/sona1.jpg" >
<h2>琴瑟仙女h2>
li>
<li>
<img src="imgs/gw1.jpg" >
<h2>灵罗娃娃h2>
li>
<li>
<img src="imgs/ven1.jpg" >
<h2>暗夜猎手h2>
li>
<li>
<img src="imgs/kat1.jpg" >
<h2>不祥之刃h2>
li>
<li>
<img src="imgs/niko1.jpg" >
<h2>万花通灵h2>
li>
ul>
<ul class="tab_box">
<li class="tabBox_active">
<img src="imgs/sona2.jpg" >
<div>
<h2>娑娜h2>
<p>
娑娜是一位弦乐演奏家，“叆华”的优美和弦与多变曲调就是她唯一的语言。
这种文雅的举止让她深得德玛西亚贵族的宠爱，不过有人猜测她迷人的旋律其实是在施放魔法——这在王国境内是如履薄冰。
在外人看来她一言不发，但娑娜最亲密的同伴却能读懂她。娑娜弹拨的和声不仅能够安抚受伤的盟友，而且还能打击掉以轻心的敌人。
p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/sona/">
Look at all >
a>
button>
div>
li>
<li>
<img src="imgs/gw2.png" >
<div>
<h2>格温h2>
<p>
格温是一个被魔法赋予了生命的玩偶，而她所挥使的正是当初创造了她自己的工具。
格温无比珍惜这份机缘，踏出的每一步都承载着曾经主人的爱意。格温拥有控制“圣霭”的能力。
这是一种来自远古的庇护性法术，她的剪刀、衣针和缝线都因圣霭而得到了庇佑。
即便有这么多新奇的事物等待着格温，她既感到兴奋，但又带着强烈的使命感，决心拯救在这个破碎世界里艰难挣扎的人们。
p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/gwen/">
Look at all >
a>
button>
div>
li>
<li>
<img src="imgs/ven2.jpeg" >
<div>
<h2>薇恩h2>
<p>
肖娜·薇恩是一位无情的德玛西亚怪物猎手。终其一生，她都在寻找杀害她全家的恶魔。
她的手臂上装着十字弩，心中燃烧着熊熊的复仇怒火，从暗影中射出圣银弩箭的风暴，
薇恩只有在杀死那些为黑暗魔法所控制的人和生物时，才能真正感到愉悦。
p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/vayne/">
Look at all >
a>
button>
div>
li>
<li>
<img src="imgs/kat2.jpg" >
<div>
<h2>卡特琳娜h2>
<p>
果断坚决、心狠手辣，卡特琳娜是诺克萨斯的顶尖刺客。
作为传奇将军杜·克卡奥的长女，她凭借出其不意的迅猛刺杀很快声名鹊起。
强烈的野心曾经驱使她挑战重兵把守的暗杀目标，甚至不惜冒险让友军暴露在危险中。
不过无论是怎样的任务，卡特琳娜都会毫不迟疑地在锯刃匕首的风暴中履行自己的使命。
p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/katarina/">
Look at all >
a>
button>
div>
li>
<li>
<img src="imgs/niko2.png" >
<div>
<h2>妮蔻h2>
<p>
妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，
甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，
但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。
p>
<button>
<a href="https://yz.lol.qq.com/zh_CN/champion/neeko/">
Look at all >
a>
button>
div>
li>
ul>
div>
<script type="text/javascript">
/*
* 思路：
* 循环遍历导航条
* 点击导航条切换类名 进行 显示和隐藏
**/
var tabNavItem = document.querySelectorAll('.tab_nav>li');
var tabBoxItem = document.querySelectorAll('.tab_box>li');
var tabNavActive = document.querySelector('.tabNav_active');
var tabBoxActive = document.querySelector('.tabBox_active');
tabNavItem.forEach(function(item,index) {
item.onmouseenter = function() {
tabNavActive.className = '';
this.className = 'tabNav_active';
tabNavActive = this;
tabBoxActive.className = '';
tabBoxItem[index].className = 'tabBox_active';
tabBoxActive = tabBoxItem[index];
}
})
script>
body>
html>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
/*
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
*/
height: 100vh;
background: #282c34;
/* 让盒子进行flex(弹性布局)布局，并且居中显示 */
display: flex;
/* 1.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
justify-content: center;
/* 2.align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
align-items: center;
}
/* 去除小圆点 */
.tab_contents ul {
list-style: none;
}
.tab_contents {
width: 700px;
height: 200px;
/* background: white; */
}
.tab_contents .tab_nav {
display: flex;
}
.tab_contents .tab_nav li {
padding: 10px 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #e5e9ea;
margin-right: 2px;
color: #607291;
cursor: pointer;
display: flex;
position: relative;
overflow: hidden;
}
.tab_contents .tab_nav li img {
width: 20px;
margin-right: 5px;
/* 设置不透明级别 */
opacity: 0.3;
transition: opacity 0.3s;
}
.tab_contents .tab_nav li h2 {
font-size: 14px;
}
.tab_contents .tab_nav li:hover img {
opacity: 1 !important;
}
.tab_contents .tabNav_active {
background: #f9f9f9 !important;
}
/* 面板 */
.tab_contents .tab_box {
position: relative;
/* 最小高度 */
min-height: 150px;
background: #f9f9f9;
padding: 2em;
color: #607291;
}
.tab_contents .tab_box li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 15px;
box-sizing: border-box;
/*
display 不支持动画切换
*/
/* display: none; */
opacity: 0;
visibility: hidden;
transition: all 1s ease;
}
.tab_contents .tab_box .tabBox_active {
/* display: flex; */
opacity: 1;
visibility: visible;
}
.tab_contents .tab_box li img {
width: 128px;
}
.tab_contents .tab_box li div {
width: 100%;
/* height: 128px; */
position: relative;
margin-left: 20px;
}
.tab_contents .tab_box li p {
text-indent: 2em;
margin: 20px 0;
line-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.tab_contents .tab_box li button {
margin-top: 20px;
width: 110px;
height: 25px;
border: #607291 solid 1px;
background: transparent;
float: right;
}
.tab_contents .tab_box li button a {
text-decoration: none;
color: #607291;
}
排他算法
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他算法
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式（留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<button>按钮5button>
<script type="text/javascript">
// 1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// 先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// 然后才让当前的元素背景颜色位pink
this.style.backgroundColor = 'pink';
}
}
script>
body>
百度换肤效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/01.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 class="baidu">
<li><img src="../img/01.jpg" >li>
<li><img src="../img/002.jpg" >li>
<li><img src="../img/003.png" >li>
<li><img src="../img/004.jpg" >li>
ul>
<script type="text/javascript">
// 1.获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是点击图片的路径 images/01.jpg
// console.log(this.src);
// 把这个路径this.src给body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
script>
body>
html>
全选反选
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.wrap {
margin: 200px 600px;
}
thead th {
color: #fff;
background-color: deepskyblue;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
style>
head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
th>
<th>商品th>
<th>价钱th>
tr>
thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
td>
<td>iPhone13td>
<td>10000td>
tr>
<tr>
<td>
<input type="checkbox" />
td>
<td>iPad Protd>
<td>5000td>
tr>
<tr>
<td>
<input type="checkbox" />
td>
<td>iPad Airtd>
<td>2000td>
tr>
<tr>
<td>
<input type="checkbox" />
td>
<td>Apple Watchtd>
<td>2000td>
tr>
tbody>
table>
div>
<script type="text/javascript">
// 1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll');// 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 注册事件
j_cbAll.onclick = function() {
// this.checked 得到当前复选框的选中状态如果是true 就是选中，如果是false就是未选中
console.log(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;// 退出循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断
}
}
j_cbAll.checked = flag;
}
}
script>
body>
html>
属性操作
主要针对于自定义属性
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute移除属性
事件操作
给元素注册事件，采取 事件源.事件类型 = 事件处理程序
注册事件
概述：给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
- 利用on开头的事件onclick
- < button οnclick= “akert(‘hi~’)”>< /button>
- btn.onclick = function() {}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- W3C标准推荐方式
- addEventListener() 它是一个方法
- IE9 之前的IE不支持此方法，可使用attachEvent() 替代
- 特点：同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
addEventListener 事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false
<body>
<button>传统注册事件button>
<button>方法监听注册事件button>
<script type="text/javascript">
var btns = document.querySelectorAll('button');
// 1.传统方式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u'); // 覆盖前面的hi
}
// 2.事件监听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个监听器（事件处理程序）
btns[1].addEventListener('click',function() {
alert(22);
})
btns[1].addEventListener('click',function() {
alert(33);
})
script>
body>
attachEvent注册事件（了解）
该特性是非标准，请尽量不要在生产环境中使用它
注册事件兼容性解决方案
function addEventListener (element,eventName,fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName,fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEventt('on' + eventName,fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
删除事件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div>1div>
<div>2div>
<div>3div>
<script type="text/javascript">
var divs = document.querySelectorAll('div');
// 点击第一个盒子输出1，然后再次点击失效
divs[0].onclick = function() {
alert(1);
// 1.传统方式删除事件
divs[0].onclick = null;
}
// 2.removeEventListener 删除事件
// 点击第二个盒子输出2，然后再次点击失效
divs[1].addEventListener('click',fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(2);
divs[1].removeEventListener('click',fn);
}
script>
body>
html>
删除事件兼容性解决方案
function removeEventListener(elemt,eventName,fn) {
// 判断当前浏览器是否支持removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener (eventName,fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName,fn);
} else {
element['on' + eventName] = null;
}
}
DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
比如我们给一个div注册了点击事件：
DOM事件流分为3个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素的接收的过程
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
width: 100px;
height: 100px;
margin: 100px auto;
background-color: pink;
}
.son {
margin: 25px;
width: 50px;
height: 50px;
background-color: purple;
}
style>
head>
<body>
<div class="father">
<div class="son">son盒子div>
div>
<script type="text/javascript">
// dom 事件流 三个阶段
// 1.JS代码中只能执行捕获或者冒泡其中的一个阶段
// 2.onclick 和 attachEvent（ie）只能得到冒泡阶段
// 3.捕获阶段 如果addEventListener 第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click',function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click',function() {
// alert('father');
// }, true);
// 3.冒泡阶段 如果addEventListener 第三个参数是false 或者省略 那么则处于冒泡阶段 son -> father -> body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click',function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click',function() {
alert('father');
}, false);
script>
body>
html>
- 实际上开发中我们很少使用捕获，我们更关注事件冒泡
- 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助我们巧妙的做某些事件
事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click',function(event) {})
// 这个event就是事件对象，我们还喜欢写成e或者evt
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解：事件发生后，跟事件相关的一系列信息数据集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法
比如：
- 谁绑定了这个事件
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
- 键盘触发事件的话，会得到键盘的相关信息，如按下了哪个键
这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div>123div>
<script type="text/javascript">
// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
// console.log(e);
// console.log(window.event);
e = e || window.event; // 事件对象的兼容性方案
console.log(e);
}
// div.addEventListener('click',function(e) {
// console.log(e);
// })
// 1.event 就是一个事件对象 写到我们监听函数的 小括号里面 当形参来看
// 2.事件对象只有有了事件才会存在，它是系统给我们自带创建的，不需要我们传递参数
// 3.事件对象是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，
//鼠标坐标啊，如果是键盘事件里面就包含键盘事件的信息 比如 判断用户按下了哪个键
// 4.这个事件对象我们可以自己命名 比如 event、ent、e
// 5.事件对象也有兼容性问题 ie678 通过 window.event
script>
body>
html>
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
| e.type | 返回事件的类型 比如 click mouseover 不带 on |
| e.cancelBubble | 该属性阻止冒泡 非标准 ie6-8使用 |
| e.returnValue | 该属性 阻止默认事件（默认行为） 非标准 ie6-8使用 比如 不让链接跳转 |
| e.preventDefault() | 该方法 阻止默认事件（默认行为） 标准 比如 不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div>123div>
<ul>
<li>abcli>
<li>abcli>
<li>abcli>
ul>
<script type="text/javascript">
// 常见事件对象的属性和方法
// 1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
var div = document.querySelector('div');
div.addEventListener('click',function(e) {
console.log(e.target); // 123
console.log(this); // 123
})
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
// 我们给ul绑定了事件 那么this就指向ul
console.log(this); //
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
console.log(e.target); //
})
// 了解兼容性
// div.onclick = function(e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
script>
body>
html>
阻止默认行为
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div>123div>
<a href="http://www.baidu.com">百度a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
form>
<script type="text/javascript">
// 常见事件对象的属性和方法
// 1.返回事件类型
var div = document.querySelector('div');
div.addEventListener('click',fn);
div.addEventListener('mouseover',fn);
div.addEventListener('mouseout',fn);
function fn(e) {
console.log(e.type);
}
// 2.阻止默认行为（事件）
var a = document.querySelector('a');
a.addEventListener('click',function(e) {
e.preventDefault(); // dom标准写法
})
// 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
// 特定：return后面的代码不执行了
return false;
alert('fuck you！')
}
script>
body>
html>
阻止事件冒泡
两种方式：
标准写法：利用事件对象里面的stopPropagation()方法
e.stopPropagation()
非标准写法：IE6-8利用事件对象cancelBubble属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.father {
width: 100px;
height: 100px;
margin: 100px auto;
background-color: pink;
}
.son {
margin: 25px;
width: 50px;
height: 50px;
background-color: purple;
}
style>
head>
<body>
<div class="father">
<div class="son">son盒子div>
div>
<script type="text/javascript">
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click',function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // 非标准 cancel取消 bubble 泡泡
},false);
var father = document.querySelector('.father');
father.addEventListener('click',function() {
alert('father');
},false);
document.addEventListener('click',function() {
alert('document');
})
script>
body>
html>
事件委托（代理、委派）
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡管理原理影响设置每个子节点
作用：只操作一次dom，提高了程序的性能
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<ul>
<li>知否知否，点我应有弹框在手！li>
<li>知否知否，点我应有弹框在手！li>
<li>知否知否，点我应有弹框在手！li>
<li>知否知否，点我应有弹框在手！li>
<li>知否知否，点我应有弹框在手！li>
ul>
<script type="text/javascript">
// 事件委托的核心原理：给父节点添加监听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
e.target.style.backgroundColor = 'pink'; // 点击li，会变粉色
})
script>
body>
html>
常用的鼠标事件
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e) {
e.preventDefault();
})
2.禁止鼠标选中（selectstar 开始选中）
dpcument.addEventListener('selectstart',function(e) {
e.preventDefault();
})
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
我是一段不愿意分享的文字
<script type="text/javascript">
// 1.contextmenu 我们可以禁止右键菜单
document.addEventListener('contextmenu',function(e) {
e.preventDefault();
})
// 2.禁止选中文字 selectstart
document.addEventListener('selectstart',function(e) {
e.preventDefault();
})
script>
body>
html>
鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息集合。现阶段我们主要是用鼠标事件对象
MouseEvent 和键盘事件对象 KeyboardEvent
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
body {
height: 3000px;
}
style>
head>
<body>
<script type="text/javascript">
// 鼠标事件对象 MouseEvent
document.addEventListener('click',function(e) {
console.log(e.clientX);
console.log(e.clientY);
console.log('----------------');
// 2.page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
})
script>
body>
html>
跟随鼠标案例
分析：
- 鼠标不断的移动，使用鼠标移动事件：mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
img {
width: 78px;
position: absolute;
top: 2px;
}
style>
head>
<body>
<img src="../../tab选项卡/imgs/ven1.jpg" >
<script type="text/javascript">
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e) {
// 1.mousemove 只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
// 2.核心原理
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x,'y坐标是' + y);
// 3.千万不要忘记给left和top添加px单位
pic.style.left = x + 'px';
pic.style.top = y + 'px';
});
script>
body>
html>
常用键盘事件
事件除了使用鼠标触发，还可以使用键盘触发
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按钮被松开时触发 |
| onkeydown | 某个键盘按钮被按下时触发 |
| onkeypress | 某个键盘按钮被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等 |
注意：
- 如果使用addEventListener不需要加on
- 三个事件的执行顺序是：keydown – keypress – keyup
- 对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// 常用键盘事件
// 1.keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起了');
// }
document.addEventListener('keyup',function() {
console.log('我弹起了');
})
// 2.keydown 按键按下的时候触发
document.addEventListener('keydown',function() {
console.log('我按下了');
})
// 3.keypress 按键按下的时候触发
document.addEventListener('keypress',function() {
console.log('yoho');
})
script>
body>
html>
键盘事件对象
| 键盘事件对象 属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注意：
- onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
- 实际开发中，更多的使用keydown 和 keyup，它能识别所有的键（包括功能键）
- keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1.我们的keyup和keydown事件不区分字母大小写 a和A得到的都是65
// 2.我们的keypress 事件区分字母大小写 a 97 和 A 65
document.addEventListener('keyup',function(e) {
// console.log(e);
console.log('up:' + e.keyCode);
// 可以利用keyCode返回的ASCII码值来判断用户按下了哪个键
if (e.keyCode === 65) {
alert('按下的是a键');
} else {
alert('没有按下a键');
}
})
document.addEventListener('keypress',function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
script>
body>
html>
案例
分析：
- 核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
- 搜索框获得焦点：使用js里面的focus()方法
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input type="text">
<script type="text/javascript">
var search = document.querySelector('input');
document.addEventListener('keyup',function(e) {
if (e.keyCode === 83) {
search.focus();
}
})
script>
body>
html>
除了keyCode，事件对象中还提供了几个属性
- altkey
- ctrlkey
- shiftkey
这三个用来判断alt ctrl 和 shift 是否被按下，如果按下则返回true，否则返回false