前言
对前端想要完整的学习的话可以跟着我的步骤学习哦！基本上我每天都会更新文章内容哒，更新完会在文章后面写完结！所以收藏起来学习更好哦!
教你完全学会JavaScript（基础篇——更新中）从入门到精通
教你完全学会JavaScript（DOM篇——完结）从入门到精通
教你完全学会JavaScript（BOM篇——更新中）从入门到精通
教你完全学会JavaScript（jQuery篇——等待）从入门到精通
目录
DOM简介
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
DOM树
（1）文档：一个页面就是一个文档，DOM中使用document表示
（2）元素：页面中的所有标签都是元素，DOM中使用element表示
（3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM使用node表示
(DOM把以上内容看作是对象)
（1）通过ID获取：getElementId()
（2）通过标签名获取:getElementByTagName()
（3）通过HTML5获取
（4）特殊元素获取
1.DOM获取元素（id获取）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='time'>2023-5-1</div>
<script>
// (1)通过id获取
//返回的是Element对象(对象的类型是object)
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>
</body>
</html>
2.DOM获取元素（标签名获取）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>小伦1</li>
<li>小伦2</li>
<li>小伦3</li>
<li>小伦4</li>
<li>小伦5</li>
</ul>
<script>
//(2)通过标签名获取
//返回的是获取过来元素对象的集合 以伪数组的形式存储
var lis=document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);//小伦1
//打印里面元素对象_遍历
for (var i=0;i<=lis.length;i++ ){
console.log(lis[i]);
}
</script>
</body>
</html>
3.DOM获取元素（html5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//（3）通过HTML5获取
//1.通过getElementByClassName获取
var boxs=document.getElementsByClassName('box');
console.log(boxs);
//2.通过querySelector获取 返回指定选择器的第一个元素对象 class用. id用#
var firstBox=document.querySelector('.box');
console.log(firstBox);
var nav=document.querySelector('#nav');
var li=document.querySelector('li');
console.log(li);
//3.querySelectorAll()返回指定选择器的所有元素对象集合
var allbox=document.querySelectorAll('.box');
console.log(allbox);
</script>
</body>
</html>
4.DOM获取元素（特殊获取）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//（4）特殊元素获取
//1.获取body元素
var bodyEle=document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
</body>
</html>
5..事件基础
简单理解：触发——响应机制，网页中的每个元素都可以产生某些可以触发JavaScript的事件。
（1）事件三要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">小伦</button>
<script>
//点击一个按钮,弹出对话框
// 事件是有三部分组成的 事件源 事件类型 事件处理程序
// (1)事件源 事件被触发的对象 按钮
var btn_on=document.getElementById('btn');
// (2)事件类型 如何触发 什么事件 比如鼠标点击(onclick)
// (3)事件处理程序 通过一个函数赋值的方式完成
btn_on.onclick=function(){
alert('小罗');
}
</script>
</body>
</html>
6.执行事件步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 1.获取事件源
var div=document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick=function() {
console.log('我被选中了');
}
</script>
</body>
</html>7.操作元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p{
width: 300px;
height: 50px;
line-height: 20px;
color: rgba(255, 255, 255, 0);
background-color: blueviolet;
}
</style>
</head>
<body>
<button>显示当前时间；</button>
<div>shijain</div>
<p>111</p>
<script>
// 当我们点击了按钮，div里面的文字会发生变化
// 1.获取元素
var btn=document.querySelector('button');
var div=document.querySelector('div');
// 2.注册事件
btn.onclick=function(){
// div.innerText='2023年';
div.innerText=getDate();
}
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var dates=date.getDate();
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day=date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
// 这个是直接显示
var p=document.querySelector('p');
p.innerText=getDate();
</script>
</body>
</html> 
8.操作元素innerText和innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innnerText和innerHTML的区别
// 1.innerText 不识别html标签
var div=document.querySelector('div');
div.innerText='<strong>hello<strong>';
// div.innerHTML='<strong>hello<strong>';
//这两个属性是可读写的 可以获取元素里面的内容
var p=document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
9.操作元素_修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id='zzx'>猪猪侠</button>
<button id='crq'>超人强</button>
<img src="images/zzx.png" alt="">
<script>
var zzx=document.getElementById('zzx');
var crq=document.getElementById('crq');
var img=document.querySelector('img');
zzx.onclick=function(){
img.src='images/zzx.png';
img.title='猪猪侠';
}
crq.onclick=function(){
img.src='images/crq.png';
img.title='超人强';
}
</script>
</body>
</html>
10.分时间问候案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/s.gif" alt="">
<div></div>
<script>
// 1.获取元素
var img=document.querySelector('img');
var div=document.querySelector('div');
// 2，得到当前的小时数
var date=new Date();
var h=date.getHours();
if(h<12){
img.src='images/早上好.gif';
div.innerHTML='早上好';
}
if(h>12 && h<18){
img.src='images/下午好.gif';
div.innerHTML='下午好';
}
if(h>18){
img.src='images/晚上好.gif';
div.innerHTML='晚上好';
}
</script>
</body>
</html>11.操作元素表单属性
利用DOM可以操作如下表单元素的属性：type,value,checked,selected,disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function(){
input.value='被点击啦';
//btn.disabled=true;//不能再被点击
this.disabled=true;//和btn.disabled=true;作用一样
}
</script>
</body>
</html>
12.模仿京东显示密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
/* 居中显示 */
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
position: absolute;
width: 24px;
top: 10px;
right:2px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/不显示眼睛.jpg" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
<script>
// 1.获取元素
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
// 2.注册事件 处理程序
var flag=0;
eye.onclick=function(){
if(flag==0){
pwd.type='text';
flag=1;
img.src='images/显示眼睛.jpg';
}else{
pwd.type='password';
flag=0;
img.src='images/不显示眼睛.jpg';
}
}
</script>
</div>
</body>
</html>13.样式属性操作
1.element.style 行内样式操作
2.element.style 类名样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
div.onclick=function(){
this.style.backgroundColor='pink';
this.style.width='200px';
}
</script>
</body>
</html>
14.关闭二维码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
width: 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 border #ccc;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
关闭猪猪侠图片
<img src="images/zzx.png" alt="">
<i class="close-btn">x</i>
<script>
var btn=document.querySelector('.close-btn');
var box=document.querySelector('.box');
btn.onclick=function(){
box.style.display='none';
}
</script>
</div>
</body>
</html>
15.循环精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 初始化页面 */
* {
margin: 0;
padding: 0;
}
/* 取消列表中的小点点 */
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 打开这张图片的原图可以看到这张图片的原图第一个图的坐标是0，0,第二张图的坐标是0,-44
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
// backgroundPosition代表的是图片的坐标
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>16.显示隐藏文本框内容
1.获得焦点onfocus
2.失去焦点onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
color: #ccc;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
// 1.获取元素
var text=document.querySelector('input');
// 点击input里面就会获得焦点
text.onfocus=function(){
console.log('获得焦点');
// 就是说这一步：默认的本来就是手机，如果你不想要手机，就会清空掉
if(this.value=='手机'){
this.value='';
}
// 输入的时候变成黑色
this.style.color= '#333';
}
// 点击input外面的就失去焦点
text.onblur=function(){
console.log('失去焦点');
if(this.value==''){
this.value='手机';
}
// 就是本来已经输入内容了，但是鼠标点击到外面，里面输入的内容变回灰色
this.style.color='#ccc';
}
</script>
</body>
</html>
17.邮箱注册提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 首先判断的事件是表单失去焦点 onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
// 因为里面变化样式较多，我们采取className修改样式
// 1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</body>
</html> 
18.开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>开关灯</button>
<script>
var btn=document.querySelector('button');
var flag=0;
btn.onclick=function(){
if(flag=='0'){
document.body.style.backgroundColor='black';
flag=1;
}else{
document.body.style.backgroundColor='#fff';
flag=0;
}
}
</script>
</body>
</html>19.更换皮肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 首先写css的思路是：一层一层看 由大到小 */
/* 1.全局初始化 */
*{
margin: 0;
padding: 0;
}
/* 刚开始的背景是默认背景1 */
body{
background: url(images/1.jpg) no-repeat center top;
}
/* 不要那个默认的小圆圈 */
li{
list-style: none;
}
.baidu{
/* 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 */
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="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<script>
// 获取元素 先找到ul(这一步就是告诉大家我要找类名叫baidu的ul，下面的img)
var imgs=document.querySelector('.baidu').querySelectorAll('img');
// 利用for循环依次为我们的图片注册点击事件
for (var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
// this.src可以获取点击的那一张照片
console.log(this.src);
document.body.style.backgroundImage='url(' + this.src + ')';
}
}
</script>
</body>
</html>
20.表格隔行变色
需要用到两个鼠标事件：鼠标经过onmouseover 鼠标离开onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 1000px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: rgb(195, 201, 255);
}
</style>
</head>
<body>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>代码</th>
<th>课程名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 获取tbody中的所有行
var trs=document.querySelector('tbody').querySelectorAll('tr');
for (var i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.className='bg';
}
trs[i].onmouseout=function(){
this.className='';
}
}
</script>
</body>
</html>
21.表单的全选和取消全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化页面 */
* {
padding: 0;
margin: 0;
}
.wrap {
width: 400px;
margin: 100px auto 0;
}
table {
/* 决定表格的边框是合并在一起的 */
border-collapse: collapse;
/* 相邻单元格的边框间的距离 */
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
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>iPhone8</td>
<td>8000</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>
var j_cbAll=document.getElementById('j_cbAll');
var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
j_cbAll.onclick=function(){
// 通过this.checked得到当前按钮的选定状态
// this.checked;
for (var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked;
}
}
// 下面复选框需要全部选中，上面的全选才能选中：给下面所有复选框绑定点击事件，每次点击都要循环一边
// 这个for循环主要是遍历，为的就是小按钮绑定点击事件
for (var i=0;i<j_tbs.length;i++) {
j_tbs[i].onclick=function(){
// 最开始的时候默认是true
var flag=true;
// 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
for (var i=0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
j_cbAll.checked=false;
flag=false;
}
}
j_cbAll.checked=flag;
}
}
</script>
</body>
</html>
22.自定义属性的操作
1.获取属性值
element.属性 获取属性值
element.getAttribute('属性');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo" index="1"></div>
<script>
// 获取元素的属性值
var div=document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
// 2.设置元素的属性值
div.id='test';
// element.setAttribute('属性','值') 主要针对自定义属性
div.className='navs';
div.setAttribute('index',2);
div.setAttribute('class','footer');
// 3。删除属性
div.removeAttribute('index');
</script>
</body>
</html>
23.tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
/* 就是不显示出来 */
/* 下面的style="display: block;"的意思就是默认显示：商品介绍模块内容 */
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
// 获取元素:我们现在要的是tab_list中的所有li
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己 就是我点那个li，那个li就变成current的颜色
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
24.H5的自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div=document.querySelector('div');
// console.log(div.getTime);不能这样子获取，因为getTime是自定义属性
console.log(div.getAttribute('getTime'));
// 为了知道它是自定义属性，还是元素自带的，所以H5规定自定义属性data-开头作为属性名并且赋值
div.setAttribute('data-time',20);//设置了一个新的自定义属性
console.log(div.getAttribute('data-index'));
// h5新增的获取自定义属性的方法
// dataset是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
console.log(div.dataset.listName);
</script>
</body>
</html>25.节点操作
目的：获取元素
方法：1.利用DOM提供的方法获取元素
2.利用节点层次关系获取元素
基本属性：nodeType(节点类型),nodeName(节点名称),nodeValue(节点值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是DIV</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class=""box>
<span class="erweima">x</span>
</div>
<script>
var erweima=document.querySelector('.erweima');
// 得到的是离元素最近的父级节点
console.log(erweima.parentNode);//获取父节点 box
</script>
</body>
</html>
26.子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是DIV</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class=""box>
<span class="erweima">x</span>
</div>
<script>
// DOM提供的方法获取
var ul=document.querySelector('ul');
var lis=ul.querySelectorAll('li');
//1.子节点:得到ul中所有的孩子li
// console.log(ul.childNodes);//得到的是所有的子节点 包括元素节点，文本节点
// 2.children获取所有的子元素节点,实际开发用这个，记住这个就行
console.log(ul.children);
</script>
</body>
</html>
27.子节点--第一个子元素和最后一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ol>
<script>
var ol=document.querySelector('ol');
// 获取第一个元素
console.log(ol.firstChild);//它拿到的是ol换行的那个text节点
console.log(ol.firstElementChild);//I9支持
console.log(ol.lastElementChild);//I9支持
// 实际开发的写法
console.log(ol.children[0]);//第一个元素
console.log(ol.children[ol.children.length-1]);//最后一个元素的索引号
</script>
</body>
</html>
28.下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
/* 表示没有文本修饰效果。就是不要下面的那一条线 */
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<!-- ul是unordered lists的缩写(无序列表) -->
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
// 获取nav元素
var nav=document.querySelector('.nav');
// nav元素下面有四个小li
var lis=nav.children;
for (var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
// 哦哦哦这是他的第二个孩子,第二个孩子是ul(看缩进就知道了)
this.children[1].style.display='block';
}
lis[i].onmouseout=function(){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
29.兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div=document.querySelector('div');
// 得到的是下一个兄弟节点 包括元素节点 文本节点等
console.log(div.nextSibling);
// 得到的是上一个兄弟节点
console.log(div.previousSibling);
// 得到下一个兄弟元素节点
console.log(div.nextElementSibling);//有兼容性问题,I9支持
// 得到上一个兄弟节点
console.log(div.previousElementSibling);//有兼容性问题,I9支持
</script>
</body>
</html>30.创建和添加节点
创建节点：document.createElement('tagName')
添加节点：node.appendfChild(child)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1.创建节点
var li=document.createElement('li');
// 2.添加节点 node.appendChild(child) node父级 child子级 后面追加元素 相当于push
var ul=document.querySelector('ul');
ul.appendChild(li);
// 3.添加节点 node.insertBefore(child,指定元素)
var lili=document.createElement('li');
// 这句话的意思就是在ul的第一个孩子前面添加元素
ul.insertBefore(lili,ul.children[0]);
// 4.我们想要页面添加一个新的元素 1.创建元素 2.添加元素
</script>
</body>
</html>
31.简单的发布留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
// 2.注册事件
btn.onclick=function(){
if(text.value==''){
alert('小伦你是不是没有输入内容呀~');
return false;
}else{
console.log(text.value);
var li=document.createElement('li');
// 先有li才能赋值
li.innerHTML=text.value;
// ul.appendChild(li);
// 因为最新的留言一般都是出现在最上面 所以按照逻辑 都是第一个留言的上面添加就是最新的留言
ul.insertBefore(li,ul.children[0]);
}
}
</script>
</body>
</html>
32.删除节点
node.removechlid(child)删除一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>删除</button>
<ul>
<li>猪1</li>
<li>猪2</li>
<li>猪3</li>
</ul>
<script>
// 1.获取元素
var ul=document.querySelector('ul');
var btn=document.querySelector('button');
// 2.删除元素
// ul.removeChild(ul.children[0]);
// 3.点击按钮依次删除里面的孩子
btn.onclick=function(){
// 因为删除是删掉一个其他就变成第一个的 所以在这里我们不需要for循环
if(ul.children.length==0){
this.disabled=true;
}else{
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html>
33.删除留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li a{
float: right;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
// 2.注册事件
btn.onclick=function(){
if(text.value==''){
alert('小伦你是不是没有输入内容呀~');
return false;
}else{
console.log(text.value);
var li=document.createElement('li');
// 先有li才能赋值
// javascript:; 是阻止链接跳转
li.innerHTML=text.value + "<a href='javascript:;'>删除</a>";
// ul.appendChild(li);
// 因为最新的留言一般都是出现在最上面 所以按照逻辑 都是第一个留言的上面添加就是最新的留言
ul.insertBefore(li,ul.children[0]);
// 删除链接 删除的是当前链接的li元素
var as=document.querySelectorAll('a');
// 它要删除那个a呢 我们就要看我们的我们点击的是那个a 我们要删除a的父亲:li
for (var i=0; i<as.length;i++){
as[i].onclick=function(){
// 删除的就是a元素的父亲:li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html> 
34.节点操作——复制节点
node.cloneNode（）返回调用该方法接待你的一个副本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul=document.querySelector('ul');
// 克隆的第一个元素 node.cloneNode()括号为空或者是里面是false 浅拷贝 只复制标签不复制里面的内容
// node.cloneNode(true);括号为true 深拷贝 复制标签复制里面的内容
var lili=ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
</html> 
35.动态生成表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,th{
border:1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 1.先去准备号学生的数据 以数组的形式进行存储[]
var datas=[{
name:'小伦',
subject:'JavaScript',
score:100
},{
name:'小罗',
subject:'JavaScript',
score:100
},{
name:'小猪',
subject:'JavaScript',
score:90
},{
name:'小猫',
subject:'JavaScript',
score:80
}];
// 2.往tbody里面创建含：有几个人（通过数组长度）我们就创建几行
var tbody=document.querySelector('tbody');
for (var i=0;i<datas.length;i++){//外面的for循环管的是行
var tr=document.createElement('tr');
tbody.appendChild(tr);
// 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
for(var k in datas[i]){//里面的for循环管列td
var td=document.createElement('td');
// 把对对象里面的属性值datas[i][k] 给 td
td.innerHTML=datas[i][k];
tr.appendChild(td);
}
// 创建有删除的单元格
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 删除操作开始
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
// 行的爸爸叫tbody 看图理解为什么是爸爸的爸爸
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>1
</body>
</html>
36.动态创建元素
dcument.write();
document.innerHTML
document.createElement();
经典面试题：innerHTML和createElement哪个效率高？
如果用的是采取数组的形式拼接，innerHTML效率要比createElement高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// window.onload = function() {
// document.write('<div>123</div>');
// }
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function() {
// document.write('<div>123</div>');
// }
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
// 经典面试题：innerHTML和createElement哪个效率高
// 如果用的是采取数组的形式拼接。innerHTML效率要比createElement高
</script>
</body>
</html>37.DOM重点核心
（1）创建：
document.write
innerHTML
createElement
(2)增
appendChild
insertBefore
（3）改
修改元素属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disable
修改元素样式：style、className
（4）删
removeChild
（5）查
DOM提供API方法：geElementById、getElementsByTagName
H5提供的新方法：querySelector、querySelectorAll
利用节点操作获取元素：parentNode、children、previousElementSibing、nextElementSibing
38.注册事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns=document.querySelectorAll('button');
// 1.传统方式注册事件
btns[0].onclick=function(){
alert('hi');
}
btns[0].onclick=function(){
alert('hello');
}
// 2.事件侦听注册事件 与传统的不一样 它会弹出两个 传统的只弹最后一个出来
btns[1].addEventListener('click',function(){
alert(22);
})
btns[1].addEventListener('click',function(){
alert(21);
})
</script>
</body>
</html>
39.删除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs=document.querySelectorAll('div');
divs[0].onclick=function(){
alert('再点击一边就不会出现啦');
// 1.传统的方式删除事件
divs[0].onclick=null;
}
// 2.removeEventListener事件
divs[1].addEventListener('click',fn);
function fn(){
alert('hh');
divs[1].removeEventListener('click',fn);
}
// 3.I8之后的版本不能用这个
divs[2].attachEvent('onclick',fn1);
function fn1(){
alert('33');
divs[2].detachEvent('onclick',fn1);
}
</script>
</body>
</html>40.DOM事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 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);
// 4. 冒泡阶段 如果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);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
</html>点击son盒子依次出现：
41 .常见事件对象属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
// 1.e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
var div=document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
})
var ul=document.querySelector('ul');
ul.addEventListener('click',function(e){
console.log(this);//返回ul
console.log(e.target);//返回li
})
// 兼容性处理
div.onclick=function(e){
e=e||window.event;
var target=e.target || e.srcElement;
}
</script>
</body>
</html>点击123：
42.实际对象阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 1.返回事件类型 看鼠标对div做了什么
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();
// e.returnValue;这是低版本的浏览器使用的方法
})
</script>
</body>
</html>当我的鼠标经过123和离开123：
43.阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 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);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation();//阻止事件冒泡 当点击son的时候 只出现son 后面的father和docunment不会出现
e.cancelBubble=true;//阻止冒泡 不标准（低版本浏览器）
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function(e) {
alert('father');
}, false);
document.addEventListener('click', function(e) {
alert('document');
})
</script>
</body>
</html>
44.事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>小猪</li>
<li>小猪</li>
<li>小猪</li>
<li>小猪</li>
<li>小猪</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
var ul=document.querySelector('ul');
ul.addEventListener('click',function(e){
// alert('弹出小猪');
e.target.style.backgroundColor='pink';
})
</script>
</body>
</html> 
45.常用的鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我不想被别人看到
<script>
//1. 禁用右键
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
// 2、禁止选中文字
document.addEventListener('selectstart',function(e){
e.preventDefault();//复制不了了
})
</script>
</body>
</html>46.鼠标事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.addEventListener('click',function(e){
console.log(e.clientX);
console.log(e.clientY);
// 如果页面很大 就是在很大页面的当前页面的坐标 重点记住
console.log(e.pageX);
console.log(e.pageY);
})
</script>
</body>
</html>47.跟随鼠标的皮卡丘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
position: absolute;
}
</style>
</head>
<body>
<img src="images/R-C.gif" alt="">
<script>
var pic=document.querySelector('img');
document.addEventListener('mousemove',function(e){
// 每次移动鼠标 都会得到最新的鼠标坐标
var x=e.pageX;
var y=e.pageY;
// 想要图片在鼠标中间 根据图片大小进行移动
pic.style.left=x-340+'px';
pic.style.top=y-340+'px';
})
</script>
</body>
</html>48.常用的键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起了');
// }
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 键盘事件对象中的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>49.模拟京东按键输入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
var search=document.querySelector('input');
document.addEventListener('keyup',function(e){
// 就是当我按了s键的时候，光标就出现在文本框里面了
console.log(e.keyCode);
if(e.keyCode==83){
search.focus();
}
})
</script>
</body>
</html>50.模拟快递查询单号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入你的快递单号" class="jd">
</div>
<script>
var con=document.querySelector('.con');
var jd_input=document.querySelector('.jd');
jd_input.addEventListener('keyup',function(){
if(this.value==''){
con.style.display='';
}else{
con.style.display='block';
con.innerText=this.value;
}
})
//当我们失去焦点，就隐藏con盒子
jd_input.addEventListener('blur',function(){
con.style.display='none';
})
jd_input.addEventListener('focus',function(){
if(this.value !==''){
con.style.display='block';
}
})
</script>
</body>
</html>
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
