- 根据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>修改元素内容</title>
<style>
.time {
background-color: aqua;
width: 600px;
line-height: 30px;
}
</style>
</head>
<body>
<button>点击按钮</button>
<div class="time">显示时间</div>
<script>
// 获取事件源
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerText = getDate();
}
// 自动获取时间的方法
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date = date.getDate();
return '今天是' + year + '年' + month + '月' + date + '日';
}
</script>
</body>
</html>
innerText和innerHTML的区别
案例：点击修改元素属性
<body>
<button id="ys">压缩</button>
<button id="kda">KDA/女团</button> <br>
<img src="../front-end-case-analysis/img/压缩.jpeg" alt="图片找不到了~" title="亚索">
<script>
// 修改元素属性 src
// 1.获取元素
var ys = document.getElementById('ys');
var kda = document.getElementById('kda');
var img = document.querySelector('img');
// 2.操作元素
kda.onclick = function () {
img.src = '../front-end-case-analysis/img/KDA女团.jpeg';
img.title = 'KDA女团';
}
ys.onclick = function () {
img.src = '../front-end-case-analysis/img/压缩.jpeg';
img.title = '亚索';
}
</script>
</body>
案例：分时显示不同图片，显示不同问候语
<body>
<img src="../front-end-case-analysis/img/上午好.gif" alt="上午好~" title="上午好"> <br>
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date().getDate();
if (date < 12) {
img.src = '../front-end-case-analysis/img/上午好.gif';
div.innerHTML = '上午好，各位';
} else if (date < 18) {
img.src = '../front-end-case-analysis/img/下午好.gif';
div.innerHTML = '下午好，各位';
img.title = '下午好';
} else {
img.src = '../front-end-case-analysis/img/晚上好.gif';
div.innerHTML = '晚上好，各位';
img.title = '晚上好';
}
</script>
</body>
案例：仿京东密码加密
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px;
}
.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="password">
<img id="eye" src="../front-end-case-analysis/img/close.png" alt="图片不存在~">
</label>
<input id="pwd" type="password" name="password">
</div>
<script>
// 1.获取元素
var btn = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
btn.src = '../front-end-case-analysis/img/open.png';
flag = 1;
} else {
pwd.type = 'password';
btn.src = '../front-end-case-analysis/img/close.png';
flag = 0;
}
}
</script>
</body>
操作元素修改样式属性
仿淘宝关闭二维码案例
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
display: block;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="img/tao.png" alt="图片消失了">
<i class="close-btn">x</i>
</div>
<script>
var btn = document.querySelector('i');
var box = document.querySelector('div');
btn.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
循环精灵图
<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(img/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>
var lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
案例：隐藏显示文本框内容
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
// 获得焦点
text.onfocus = function () {
if (this.value === '手机') {
this.value = '';
}
text.style.color = '#333';
}
// 失去焦点
text.onblur = function () {
if (this.value === '') {
this.value = '手机';
}
text.style.color = '#999';
}
</script>
</body>
使用ClassName修改样式属性
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
color: aqua;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
var test = document.querySelector('div');
test.onclick = function () {
this.className = 'first change';
}
</script>
</body>
仿新浪的注册页面
<title>仿新浪注册页面</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(img/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(img/wrong.png);
}
.right {
color: green;
background-image: url(img/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('input');
var message = document.querySelector('p');
// 注册事件 失去焦点
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对，要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '输入正确';
}
}
</script>
</body>
排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.querySelectorAll('button');
// 遍历这个按钮数组，点击哪个哪个变红
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
for (let j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
btns[i].style.backgroundColor = 'pink';
}
}
</script>
</body>
百度换肤
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 0px;
}
.baidu li {
float: left;
margin: 0 0px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../img/1.jpg" alt="图片不见了~"></li>
<li><img src="../img/2.jpg" alt="图片不见了~"></li>
<li><img src="../img/3.jpg" alt="图片不见了~"></li>
<li><img src="../img/4.jpg" alt="图片不见了~"></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
表格各行变色
<style>
table {
width: 800px;
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: pink;
}
</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>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (let i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
trs[i].className = 'bg';
}
trs[i].onmouseout = function () {
trs[i].className = '';
}
}
</script>
</body>
表单取消全选
<script>
// 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; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>
获取自定义属性
tab栏切换
<script>
// 利用排他思想修改导航栏的背景
var t_list = document.querySelector('.tab_list');
var lis = t_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (let i = 0; i < lis.length; i++) {
// 给所有的li设置索引
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
for (let j = 0; j < lis.length; j++) {
lis[j].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (let i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
自定义属性
父节点
仿微博下拉菜单
<script>
var lis = document.querySelector('.nav').children;
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
</script>
兄弟节点
创建节点
发布留言案例（列表的自动扩容）
<textarea name="talk" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
<script>
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入数据~');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
ul.insertBefore(li, ul.children[0]);
}
}
</script>
删除节点
复制节点
前端优化
注册事件
删除事件
## DOM事件流
事件对象
浏览器认识e么，如果认识就是IE9之后的浏览器，不认识就是之前的
阻止事件冒泡
事件委托
禁止鼠标右键菜单
获得鼠标在页面中的坐标
案例：天使跟随鼠标
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="../img/angel.gif" alt="图片找不到了~">
<script>
var ipc = document.querySelector('img');
var mouse = document.addEventListener('mousemove', function (e) {
ipc.style.top = e.pageY + 'px';
ipc.style.left = e.pageX + 'px';
})
</script>
</body>
常用的键盘事件
模拟京东按键输入内容
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup', function (e) {
// 如果用户摁下s键就将焦点聚焦到输入框
if (e.keyCode === 83) {
search.focus();
}
})
</script>
模拟京东快递单号输入案例
<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 (e) {
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerHTML = this.value;
}
})
</script>
BOM对象
窗口加载事件
调整窗口事件大小
定时器及其相关案例
5秒关闭广告
<img src="../img/ad.jpg" alt="图片消失了~" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(() => {
ad.style.display = 'none';
}, 5000);
</script>
清楚计时器
倒计时案例
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1.获取三个盒子
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-6-23 17:00:00');
countDown();
setInterval(() => {
countDown();
}, 1000);
// 2.计算时间
function countDown() {
// 获取当前时间总的毫秒数
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
// 时
var h = parseInt(times / 60 / 60);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
// 分
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
// 秒
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
停止定时器
案例
手机号码：<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 10;
btn.addEventListener('click', function () {
var timer = setInterval(() => {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 10;
} else {
btn.disabled = true;
btn.innerHTML = '还剩' + time + '秒';
time--;
}
}, 1000);
})
</script>
案例：5秒之后自动跳转
<div></div>
<script>
var div = document.querySelector('div');
var time = 5;
jump();
setInterval(() => {
jump();
}, 1000);
function jump() {
if (time == 0) {
location.href = 'https://www.baidu.com';
} else {
div.innerHTML = '您将在' + time + '秒之后跳转';
time--;
}
}
</script>
location对象
history对象
offset系列
如果父亲没有定位就以body为准，父亲有定位（position）就以父亲为准
offset和style区别
获取鼠标在盒子里的坐标
<div class="box"></div>
<script>
var div = document.querySelector('.box');
div.addEventListener('mousemove', function (e) {
console.log('x的坐标为：' + (e.pageX - this.offsetLeft)
+ ' y的坐标为：' + (e.pageY - this.offsetTop));
})
</script>
mouseenter和mousemover的区别
动画实现的原理
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(() => {
if (div.offsetLeft >= 400) {
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
</script>
缓动动画原理
网页轮播图
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
