Javascript笔记大全02_javascript判断单击的鼠标按键:在页面中了单击鼠标弹出一个对话框,在该对话框中显-优快云博客

本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/119355827

这篇博客详细介绍了JavaScript中的DOM操作，包括DOM树、窗口加载事件、事件处理、鼠标事件、获取元素方法以及元素操作。此外，还讨论了节点操作、样式属性的修改、事件委托和常用键盘事件等，提供了丰富的示例和实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
        <!-- 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 -->
		<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>最带琴女36E</li>
		<li>最带琴女37E</li>
		<li>最带琴女38E</li>
		<li>最带琴女39E</li>
		<li>最带琴女40E</li>
	</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">x</span>
	</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>我是div</div>
	<span>我是span</span>
	<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>
		
	<div class="demo">
		<div class="box">
			<span class="erweima">x</span>
		</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>我是li1</li>
		<li>我是li2</li>
		<li>我是li3</li>
		<li>我是li4</li>
	</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>我是div</div>
	<span>我是span</span>
	<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>我是span</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()
// 可以使用指定的子节点替换已有的子节点

<!-- 语法：父节点.replaceChild(新节点,旧节点); -->
<body>
	<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></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>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></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">测试 DIV</div>
		<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">x</i>
		</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>
		<!-- 引入CSS -->
		<link rel="stylesheet" type="text/css" href="imgs/index.css"/>
		<!-- 让所有的a标签的默认跳转方式都为blank（跳转新窗口打开） -->
	</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>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
	<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>iPhone13</td>
						<td>10000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPad Pro</td>
						<td>5000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPad Air</td>
						<td>2000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>Apple Watch</td>
						<td>2000</td>
					</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>1</div>
		<div>2</div>
		<div>3</div>
		
		<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>123</div>
		<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>123</div>
		<ul>
			<li>abc</li>
			<li>abc</li>
			<li>abc</li>
		</ul>
		<script type="text/javascript">
			// 常见事件对象的属性和方法
			// 1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
			var div = document.querySelector('div');
			div.addEventListener('click',function(e) {
				console.log(e.target); // <div>123</div>
				console.log(this); // <div>123</div>
			})
			var ul = document.querySelector('ul');
			ul.addEventListener('click',function(e) {
				// 我们给ul绑定了事件 那么this就指向ul
				console.log(this); // <ul></ul>
				// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
				console.log(e.target); // <li></li>
			})
			// 了解兼容性
			// 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>123</div>
		<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>
		<!-- 效果：点击粉色盒子会弹出father和document，紫色盒子只会弹出son -->
		<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>