文章目录
DOM案例
使用DOM(文档对象模型)可以操作网页中的元素,本文主要是整理了一些针对DOM操作元素常见的案例。
一.DOM操作元素案例
1.DOM修改元素内容案例
示例:
<style>
div {
width: 220px;
height: 30px;
color: #fff;
line-height: 30px;
background-color: pink;
}
p {
width: 220px;
height: 30px;
color: #fff;
line-height: 30px;
background-color: pink;
}
</style>
<button class="btn">鼠标点击改变内容</button>
<div>我是一只小毛驴</div>
<p></p>
/* 案例1: 点击button按钮,div文字发生变化,显示日期函数返回的日期 */
// 1. 获取事件源
var btn = document.querySelector('.btn');
var div = document.querySelector('div');
// 2. 注册事件
btn.onclick = function () {
div.innerHTML = getDate(); // 调用getDate()
}
function getDate() { // 定义当前日期函数getDate()
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
- 本案例旨在调用
getDate()函数作为元素(div)的内容
2.分时问候案例
示例:
<style>
img {
width: 300px;
height: 230px;
}
</style>
<img src="images/m.gif" alt="">
<div>早上好呀</div>
/* 案例2:分时显示不同图片,显示不同问候语。
案例分析:
1.根据系统不同的时间来判断,所以需要用到日期的内置对象
2.利用多分支来设置不同的图片
3.需要一个图片,并且根据时间修改图片,所以就需要用到元素的src属性
4.需要一个div,显示不同问候语,修改元素内容即可
*/
// 1.获取事件源
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2.获取日期内置对象(getHours)
var date = new Date();
h = date.getHours();
// 3.根据不同时间段,显示不同图片/问候语
if (h < 12) {
img.src = 'images/m.gif';
div.innerHTML = '亲,早上好 又是充满希望的一天~~~';
} else if (h < 18) {
img.src = 'images/a.gif';
div.innerHTML = '亲,下午好,好好写代码';
} else {
img.src = 'images/n.gif';
div.innerHTML = '亲,晚上好,写完代码早点睡~';
}
- 本案例旨在获取日期内置对象(
Date),根据不同条件,修改img的src属性和div的innerHTML属性的内容
3.仿京东显示隐藏密码明文案例
示例:
<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 label img {
position: absolute;
top: 4px;
right: 30px;
width: 24px;
height: 24px;
}
</style>
<div class="box">
<label for="">
<img src="images/close.png" alt="">
</label>
<input type="password" value="">
</div>
/* 案例3: 仿京东显示隐藏密码明文案例
案例分析:
1.点击眼睛按钮,把密码框类型改为文本框类型就可以看到里面的密码
2.一个按钮两个状态,点击一次,切换成文本框,继续点击一次切换为密码框
算法: 利用一个flag变量,来判断flag的值,初始值为0,如果为0就切换为文本框。
如果为1,则切换为密码框。
*/
// 1.获取事件源
var ipt = document.querySelector('input');
var label = document.querySelector('label');
var img = document.querySelector('img');
// 2.注册事件 3.事件处理函数
var flag = 0; // 全局变量,全局起效果
label.onclick = function () {
if (flag == 0) {
ipt.type = 'text';
img.src = 'images/open.png';
flag = 1; // 点击一次后flag变为1
} else {
ipt.type = 'password';
img.src = 'images/close.png';
flag = 0;
}
}
- 本案例旨在利用
flag变量的值(01),切换文本框和密码框,做到显示密码与隐藏密码的动态效果
4.仿淘宝关闭二维码案例
示例:
<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>
<div class="box">
淘宝二维码
<img src="images/tao.png" alt="">
<i class="close-btn">x</i>
</div>
/* 案例4:仿淘宝关闭二维码案例
案例分析:
1.利用样式的显示和隐藏完成,display:none隐藏元素 display:block显示元素
2.点击关闭按钮,就让这个二维码盒子隐藏起来即可
*/
<script>
// 1.获取事件源
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 3.事件处理函数
btn.onclick = function () {
box.style.display = 'none'; // 隐藏
}
- 本案例旨在通过触发
onclick事件,将页面的元素(box)隐藏
5.遍历精灵图案例
示例:
<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>
<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>
/* 案例5:遍历精灵图
案例分析:
遍历精灵图首先精灵图需要满足有规律这个条件
*/
// 1.获取事件源
var lis = document.querySelectorAll('li');
// 2.注册事件 3.事件处理程序
for (var i = 0; i < lis.length; i++) {
// 让索引号i*44获得每个li在的背景精灵图的y坐标,所以index就是我们要的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px'; // '0 -44px'
}
- 本案例旨在根据有
规律的精灵图,做遍历效果依次获取到每个li对应的背景图片
6.显示隐藏文本框内容案例
示例:
<style>
input {
color: #999;
}
</style>
<div class="box">
<input type="text" name="" id="" value="手机">
</div>
/*案例6:显示隐藏文本框内容案例
案例分析:
1.首先需要两个事件,获得焦点事件onfocus,失去焦点事件onblur
2.如果获得焦点,判断表单里面内容是否是默认文字(value),如果是默认文字,就清空表单
3.如果失去焦点,判断表单里面内容是否为空,为空的话则添加默认文字
*/
// 1.获取事件源
var ipt = document.querySelector('input');
// 2.注册事件1.(得到焦点事件) 3.事件处理函数
ipt.onfocus = function () {
if (ipt.value === '手机') {
ipt.value = '';
}
// 获得焦点时,文本框里的文字颜色'#333'
ipt.style.color = '#333';
}
// 注册事件2.(失去焦点事件)
ipt.onblur = function () {
if (ipt.value === '') {
ipt.value = '手机';
}
// 失去焦点时,文本框里的颜色#999(复原)
ipt.style.color = '#999';
}
- 本案例旨文本框内容会根据获得焦点事件(
onfocus)和失去焦点事件(onblur)时作出动态的修改
7.密码框验证信息案例
示例:
<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: url(images/wrong.png) no-repeat;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
</style>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
/*案例7:密码验证信息案例(用户鼠标离开密码框,里面输入的密码长度不是6~16位,则提示错误信息,否则提示输入正确信息)
案例分析:
1.首先判断到的事件是失去焦点事件onblur
2.如果输入正确则提示正确信息,颜色为绿色小图标变化
3.如果输入不是6~16位,则提示错误信息,颜色为红色小图标变化
4.因为里面样式变化比较多,我们采取element.className修改样式
*/
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 失去焦点事件
ipt.onblur = function () {
// 判断输入的密码位数
if (ipt.value.length < 6 || ipt.value.length > 16) {
// element.className 类名样式操作
message.className = 'message wrong';
message.innerHTML = '您输入的密码位数有误,要求输入6~16位的密码';
} else {
message.className = 'message right';
message.innerHTML = '您输入的密码正确';
}
}
- 本案例旨在失去焦点事件(
onblur)时,根据判断用户输入的密码位数,显示不同的提示效果
8.仿世纪佳缘用户名显示隐藏案例
示例:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 120px;
margin: 20px auto;
}
.box input {
width: 100%;
height: 20px;
padding-left: 8px;
border: 1px solid #ccc;
outline: none;
font-size: 12px;
color: #999;
}
</style>
<div class="box">
<input type="text" id="username" value="邮箱/ID/手机号">
</div>
/* 案例8：仿世纪佳缘用户名显示隐藏案例
案例分析:
1.首先判断鼠标的焦点事件
2.当获取到焦点时,文本框内容由默认变为空
3.当失去焦点时,文本框继续显示默认内容
*/
// 1.获取事件源
var username = document.getElementById('username');
// 2.注册事件 3.事件处理函数
//(1) 获得焦点事件
username.onfocus = function () {
if (username.value === '邮箱/ID/手机号') {
this.value = '';
}
this.style.borderColor = 'pink';
}
//(2) 失去焦点事件
username.onblur = function () {
if (username.value === '') {
this.value = '邮箱/ID/手机号';
}
this.style.borderColor = '#ccc'
}
- 本案例旨在根据不同的鼠标焦点事件,让文本框
value属性值改变,切换不同的状态
9.排他思想(算法)案例
示例:
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
/* 案例9:排他思想(如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法)
案例分析:
1.所有元素全部清除样式
2.给当前元素设置样式
*/
// 1.获取事件源
var btns = document.getElementsByTagName('button');
// 2.注册事件 3.事件处理程序
for (var i = 0; i < btns.length; i++) {
// 每个button元素添加点击事件
btns[i].onclick = function () {
// (1) 先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前元素的背景颜色为orange
this.style.backgroundColor = 'orange';
}
}
- 本案例旨在同组元素(
button)中给当前元素实现样式,采用排他思想
10.百度换肤案例
示例:
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/1.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>
<div class="baidu">
<ul>
<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>
</div>
/*
案例10:百度换肤案例(选择某个图片时,将该图片作为页面的背景图片)
案例分析:
1.循环遍历获取每个图片元素的点击事件
2.给当前图片元素添加背景图片
3.背景图片的url地址就是当前选择的图片的地址
*/
// 1.获取元素
var img = document.querySelector('.baidu').querySelectorAll('img');
// 2.注册循环事件 //3.事件处理函数
for (var i = 0; i < img.length; i++) {
img[i].onclick = function () {
// this.src = 'images/1.jpg';
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
- 本案例旨在获得点击事件的图片元素(
img),将src属性赋值给页面(body)的背景图,实现换肤效果
11.表格隔行变色案例
示例:
<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>
<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>
/* 案例11：表格隔行变色案例(鼠标经过表格中的某行时,当前行的背景颜色发生改变,鼠标离开时则背景颜色还原默认)
案例分析:
1.遍历循环tr获取到每一行,给每个tr元素添加鼠标经过/离开事件
2.鼠标经过时,添加className类名修改样式,鼠标离开,className为空
*/
// 1.获取元素
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2.利用循环注册事件 3.事件处理函数
for (var i = 0; i < trs.length; i++) {
// 鼠标经过事件 onmouseover
trs[i].onmouseover = function () {
this.className = 'bg';
}
// 鼠标离开事件 onmouseout
trs[i].onmouseout = function () {
this.className = '';
}
}
- 本案例旨在根据鼠标经过/离开事件,设置
className类名修改元素(tr)样式
12.全选反选案例
示例:
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
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>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="th_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="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>
/*案例12:全选反选案例(1.点击全选按钮时,下面所有的复选框为选中状态。2.下面复选框全部选中时,上面的全选按钮状态为选中状态)
案例分析:
1.当点击某个按钮时,当前元素为选中状态(属性checked就为true)
2.全选做法:点击全选按钮时,让下面所有复选框按钮的checked属性跟随全选按钮
3.反选做法:当下面复选框全部选中时,上面的全选按钮才是选中状态,给下面所有复选框都绑定点击事件,每次点击,都要检查4个小按钮是否全被选中。设置flag,初始值为true,flag作全选按钮的checked属性值。当有其中一个复选框未选中时,修改flag的值为false。
4.反选做法只有满足所有复选框都为选中状态时,全选按钮才为全选状态
*/
// 1.获取元素
var th_cbAll = document.getElementById('th_cbAll');
var tb_cbs = document.getElementById('tb').querySelectorAll('input');
// 2.注册事件 3.事件处理程序
// (1) 全选按钮添加点击事件
th_cbAll.onclick = function () {
// console.log(this.checked);
for (var i = 0; i < tb_cbs.length; i++) {
tb_cbs[i].checked = this.checked; // 复选框checked状态跟随全选按钮
}
}
// (2)遍历选好给下面每个复选框添加点击事件
for (var i = 0; i < tb_cbs.length; i++) {
tb_cbs[i].onclick = function () {
// flag控制全选按钮是否选中
var flag = true;
// 每点击当前的复选按钮时,都要循环遍历所有复选按钮(检查所有复选按钮的状态)
for (var i = 0; i < tb_cbs.length; i++) {
// 表示如果有未选中的
if (!tb_cbs[i].checked) {
// flag值为false
flag = false;
break; // 只要有一个未选中,剩下的就无需循环,使用break退出能提高执行效率
}
}
th_cbAll.checked = flag;
}
}
- 本案例旨在设置元素(
th_cbAlltb_cbs的)checked属性一致(为true)时,实现全选。通过设置flag控制th_cbAll的选中状态,实现反选
13.tab栏切换案例
示例:
<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 {
display: none;
}
</style>
<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>
/* 13:tab栏切换案例(点击tab栏当前的li元素,当前元素的背景色和字体颜色改变。根据当前元素,显示下边对应的div项目栏)
案例分析:
Tab栏有两个大的模块
上面的模块选项卡,点击某一个,当前这个底色会是红色,其余不变(排他思想)修改类名的方式。
下面的内容模块,会随着上面的选项卡变化。所以下面模块变化要写在点击事件里面。
规律:下面模块的显示内容和上面的选项卡一一对应,相匹配。
核心思路: 给上面的tab_list中里面的所有小li添加自定义属性,属性值从0开始编号,将这个属性值索引充当下面内容(item)的索引,就能一一对应上了。
*/
// 1.获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// 2.循环遍历给每个小li注册点击事件
for (var i = 0; i < lis.length; i++) {
// 给每个li设置自定义属性index(从0开始)
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
// 排他思想,清除所有的li的类(清除样式)
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 当前li设置自己的样式(current类)
this.className = 'current';
var index = this.getAttribute('index');
console.log(index);
// 排他思想
for (var i = 0; i < items.length; i++) {
// 排除其余的item,让他们隐藏起来
items[i].style.display = '';
}
// 当前对应的item显示出来
items[index].style.display = 'block';
}
}
- 本案例旨在利用排他思想设置当前元素li的样式;给每个元素li设置自定义属性
index;获取到index作为items元素的索引,将元素li与当前items一一对应;触发li的点击事件时,相应的items元素也一同显示出来
14.新浪下拉菜单案例
示例:
<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>
<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>
/* 案例14:新浪下拉菜单案例
案例分析:
1.通过节点操作来获取和修改元素
2.设置鼠标经过事件,li的子节点元素显示
3.设置鼠标离开事件,li的子节点元素隐藏
*/
// 1.获取元素
var nav = document.querySelector('.nav');
// 获取nav中的子元素节点li(4个li)
var lis = nav.children;
// 2.循环注册事件 3.事件处理函数
for (var i = 0; i < lis.length; i++) {
// 鼠标经过事件
lis[i].onmouseover = function () {
this.children[1].style.display = 'block';
}
// 鼠标离开事件
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
- 本案例旨在根据鼠标经过/离开事件,修改元素子节点的
display属性,让当前元素(li)的子节点元素显示/隐藏 - 简而言之就是点击
tab栏中的某个元素的同时,显示相对应的item栏项目
15.简单版留言板案例
示例:
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
/* 15.留言板案例(在留言板中输入发布内容,点击发布后,显示评论)
核心思路: 点击按钮发布后,就会动态的创建一个li,添加到ul中,点击删除链接,ul中的li删除。
1.创建li的同时,把文本域里面的值通过li.innerHTML赋值给li
2.如果想要让最新的留言在后面显示,则appendChild(child),如果想让最新的留言在前面显示则用insetBefore(child,元素位置)
3.当我们把文本域里的值赋值给li时,多添加一个删除的链接
4.需要把所有的链接获取过来,给链接添加点击事件,当我们点击链接,删除当前链接所在的li
5.阻止链接跳转给href加: javascript:void(0); 或者 javascript:;
*/
// 1.获取事件源
var text = document.querySelector('textarea');
var button = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.注册事件 3.事件处理函数
button.onclick = function () {
if (text.value == '') {
alert('您没有输入任何内容!');
return false;
} else {
// (1) 创建节点
var list = document.createElement('li');
list.innerHTML = text.value + '<a href="javascript:;">删除</a>'; // li添加内容的同时,还加了a链接(删除) 想让链接不跳转,则href为 javascript:;
// (2) 添加节点
ul.insertBefore(list, ul.children[0]);
// (3) 删除节点 点击a的时候,
// 获取元素a,遍历所有的元素a,给a添加点击事件
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
// this.parentNode就是li
ul.removeChild(this.parentNode); // 删除的是他的父元素(li),所以li是child node.removeChild(child)
}
}
}
}
- 本案例旨在创建节点(同时添加文本域元素的内容)、添加节点和删除节点操作,动态的作出留言的效果
16.动态生成表格案例
示例:
<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>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
/* 16.动态生成表格案例(根据后端的数据动态的生成表格)
案例分析:
1.因为里面的学生数据都是动态的,我们需要用js动态生成。这里我们模拟数据库中(后端传过来)的数据,自己定义好数据。
2.数据的存储形式我们采取对象进行存储
3.存储多个对象(数据),采用数组存储多个对象
*/
// 1.先准备好学生的数据
var datas = [{
'uname': '刘备',
'subject': 'javascript',
'score': 90
}, {
'uname': '关羽',
'subject': 'javascript',
'score': 99
}, {
'uname': '张飞',
'subject': 'javascript',
'score': 88
}, {
'uname': '赵云',
'subject': 'javascript',
'score': 95
}, {
'uname': '马超',
'subject': 'javascript',
'score': 92
}];
// 2.往tbody里面加入行,数据库有多少人,就有多少行(datas.length)
// 获取元素
var tbody = document.querySelector('tbody');
// 遍历datas,得到行数,创建并添加行
for (var i = 0; i < datas.length; i++) {
// (1).创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 行里面创建单元格 td单元格的数量取决于每个对象里面的属性个数(for循环遍历对象)
for (var k in datas[i]) {
// (2).创建单元格
var td = document.createElement('td');
// 把对象里面的属性值给td
// console.log(datas[i][k]); obj[k]得到属性值 k得到属性名
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3.创建最后带有删除内容的单元格(代码从上到下执行,先创了一行,一行中创了三个单元格后,我们再创个单元格)
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.添加删除操作
// 获取元素
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 删除的是链接所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
- 本案例旨在根据数组(
datas)中的数据动态生成行数(tr),根据对象(datas[i])的属性动态生成单元格(td),动态的将对象的属性值datas[i][k]作为单元格的内容,根据创建/添加/删除节点的操作动态的生成表格和删除表格的数据
二.DOM事件高级案例
1.鼠标跟随案例
示例:
<style>
img {
/* 使用绝对定位不占位置 */
position: absolute;
}
</style>
<img src="images/angel.gif" alt="">
/* 案例1: 图片跟随鼠标
案例分析:
1.鼠标在不断的移动,使用鼠标事件:mousemove
2.在页面中移动,给document注册事件
3.图片要移动,而且不占位置,我们使用绝对定位即可
4.核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标，把获取到的坐标作为img的left和top就可以移动图片。
*/
var img = document.querySelector('img');
// 1.mousemove 鼠标移动事件
document.addEventListener('mousemove', function (e) {
// 2.鼠标坐标属性
var x = e.pageX;
var y = e.pageY;
console.log('鼠标的x轴坐标:' + x + '鼠标的y坐标' + y);
//3.图片跟随鼠标坐标
img.style.left = x + 'px';
img.style.top = y + 'px';
// 不想让鼠标默认在图片左上角
// img.style.left = x - 50 + 'px';
// img.style.top = y - 40 + 'px';
- 本案例旨在绑定鼠标移动(
mousemove)事件,在事件中获取到鼠标的坐标,将鼠标的坐标作为图片的位置,实现图片跟随鼠标的效果
2.仿京东按键输入内容案例
示例:
<input type="text">
/* 案例2: 仿京东按键输入内容
核心思路:
检测用户是否按下了s键,如果按下了s键,就把光标定到搜索框中
1.使用键盘事件对象里面的keyCode属性判断用户按下的是否是s键
2.搜索框获得焦点:使用js里面的focus()方法
*/
var input = document.querySelector('input');
document.addEventListener('keyup', function (e) {
console.log(e.keyCode);
if (e.keyCode === 83) {
input.focus(); // input元素获得光标
}
})
- 本案例旨在设置了键盘弹起侦听(
key up)事件,当用户按下某键时,根据返回得到的ASICC编码值进行判断,目的是为了触发该键时获取到光标(focus())
3.仿京东快递查询单号案例
示例:
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
/* 案例3:仿京东快递查询单号
案例分析:
1.快递单号输入时,上面的盒子con显示
2.表单检测用户输入: 添加键盘监听事件
3.同时把快递单号里的值(value)赋值给con盒子(innerHTML)作为内容
4.有个判断条件: 如果快递单号内容为空,con盒子隐藏
*/
var con = document.querySelector('.con');
var input = document.querySelector('.jd');
// 表单检测用户输入
input.addEventListener('keyup', function () {
// 表单内容为空时,con隐藏
if (input.value == '') {
con.style.display = 'none';
} else {
// 用户输入时,con显示并且内容为表单里的内容
con.style.display = 'block';
con.innerHTML = input.value;
}
// 失去焦点,con隐藏
input.addEventListener('blur', function () {
con.style.display = 'none';
})
// 获得焦点(内容不为空时),con显示
input.addEventListener('focus', function () {
if (input.value !== '') {
con.style.display = 'block';
}
})
})
- 本案例旨在设置了键盘弹起侦听(
keyup)、鼠标获得/失去焦点侦听(focus,blur)事件,来显示/隐藏con盒子,实现用户输入内容时,con盒子同时显示并同步文本框内容。
扫一扫
1305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
