JavaScript复习之事件,BOM,DOM
事件
事件使用方式(重点)
基础描述
(1)在元素上直接定义：
<input type="button" value="普通按钮" onclick="myFun1()">
function myFun1() {
}
(2)事件绑定：
document.getElementById('myBtn').οnclick=function(){
}
(3)了解：
document.getElementById('myBtn').addEventListener('click',function(){
})
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="myBtn" type="button" value="普通按钮">
</body>
<script type="text/javascript">
function myFun1() {
console.log('事件使用方式一');
}
console.log(document.getElementById('myBtn'));
document.getElementById('myBtn').onclick = function() {
console.log('事件使用方式二');
}
</script>
</html>
常用事件
基础介绍
(1)鼠标单击事件：
click->当用户点击元素时发生的事件
(2)鼠标移入移出事件：
mouseover->当鼠标指针移动到元素上时发生的事件
mouseout->当用户将鼠标指针移出元素时发生的事件
(3)焦点事件：
focus->当元素获取到焦点时发生的事件
blur->当元素失去焦点时发生的事件
(4)内容改变事件：
change->当form元素的内容、选择的内容等发生改变时发生的事件
(5)页面或图像载入事件：
load->在对象已加载时发生的事件->浏览器已经完成了页面加载
(6)键盘事件：
keydown->当用户正在按下键时发生的事件
keyup->当用户松开键时发生的事件
(7)表单提交事件：
submit->提交表单时发生的事件
案例演示
单击事件(重点)
<!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>
<input id="myBtn" type="button" value="普通按钮" onclick="myFun1()" />
<p id="content">越努力越幸运</p>
<div id="myDiv">
</div>
</body>
<script type="text/javascript">
function myFun1() {
document.getElementById('myDiv').style.backgroundColor = 'green';
}
</script>
</html>
鼠标移入移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myDiv {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDiv" onmouseover="myFun1(this,'green')" onmouseout="myFun1(this,'pink')">
</div>
</body>
<script type="text/javascript">
function myFun1(myObj, myColor) {
myObj.style.backgroundColor = myColor;
}
</script>
</html>
焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="myText" value="tom" onfocus="myFun1()" onblur="myFun2()" />
<p id="content">焦点事件</p>
</body>
<script type="text/javascript">
function myFun1() {
document.getElementById('myText').style.color = 'green';
}
function myFun2() {
console.log(document.getElementById('content').innerHTML);
}
</script>
</html>
内容改变事件(重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<select id="city" onchange="getCity()">
<option disabled selected>请选择</option>
<option value="wh">武汉</option>
<option value="hz">杭州</option>
<option value="nj">南京</option>
</select>
<hr >
<select id="color" onchange="setColor()">
<option disabled selected>请选择</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
</select>
<div id="myDiv">
</div>
</body>
<script type="text/javascript">
function getCity() {
console.log(document.getElementById('city').value);
}
function setColor() {
var colorVal = document.getElementById('color').value;
document.getElementById('myDiv').style.backgroundColor = colorVal;
}
</script>
</html>
页面或图像载入事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
console.log(document.getElementById('btn').value);
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="input" type="text" onkeydown="getVal()" onkeyup="getVal2()" />
</body>
<script type="text/javascript">
function getVal(){
}
function getVal2(){
console.log(document.getElementById('input').value);
}
</script>
</html>
表单提交事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 28px;
vertical-align: top;
display: none;
}
</style>
</head>
<body>
<form action="1 JS使用方式.html" method="get" onsubmit="return checkAll()">
手机号码：
<input id="phone" type="text" onkeyup="getPhoneVal()" />
<span id="phoneMsg"></span>
<br>
邮政编码：
<input id="code" type="text" onkeyup="getCodeVal()" />
<span id="codeMsg">
<img id="codeImg" src="img/false.png">
</span>
<br>
<input type="submit" />
</form>
</body>
<script type="text/javascript">
function checkAll() {
return getCodeVal() && getPhoneVal();
}
function getCodeVal() {
var codeVal = document.getElementById('code').value;
var codeRules = /^\d{5,12}$/;
var codeImgEle = document.getElementById('codeImg');
codeImgEle.style.display = 'inline-block';
var myBol = false;
if (codeRules.test(codeVal)) {
codeImgEle.src = 'img/true.png';
myBol = true;
} else {
codeImgEle.src = 'img/false.png';
}
return myBol;
}
function getPhoneVal() {
var phoneVal = document.getElementById('phone').value;
var phoneRules = /^1(3|4|5|7|8)\d{9}$/;
console.log(phoneRules.test(phoneVal));
var phoneMsg = document.getElementById('phoneMsg');
var myBol = false;
if (phoneRules.test(phoneVal)) {
phoneMsg.innerHTML = '手机号合法';
phoneMsg.style.color = 'green';
myBol = true;
} else {
phoneMsg.innerHTML = '手机号不合法';
phoneMsg.style.color = 'red';
}
return myBol;
}
</script>
</html>
BOM
基础介绍
(1)Browser Object Model，浏览器对象模型
(2)浏览器对象模型->把浏览器看作一个对象
(3)提供了一系列对象，对于浏览器窗口操作
(4)浏览器对象：
核心对象window对象：
JS访问浏览器窗口的接口
全局变量、函数，都变成了window对象的属性和方法
history对象
location对象
document对象
...
(5)提供了很多属性和方法
window对象
了解方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="打开" onclick="openWin()">
<input type="button" value="关闭" onclick="closeWin()">
</body>
<script>
var myWin;
function openWin() {
myWin = window.open('http://www.baidu.com', '百度', '');
}
function closeWin() {
myWin.close();
}
</script>
</html>
定时器(重点)
基础介绍
(1)周期性定时器：
按照一定的周期执行任务
开启：
var task;
task=setInterval(function(){},1000);
关闭：
clearInterval(task);
(2)一次性定时器：
只执行一次任务
开启：
var task2;
task2=setTimeout(function(){},1000);
关闭：
clearTimeout(task2);
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>周期性定时器</p>
<input type="button" value="开始" onclick="startTask()">
<input type="button" value="结束" onclick="endTask()">
<p>一次性定时器</p>
<input type="button" value="开始2" onclick="startTask2()">
<input type="button" value="结束2" onclick="endTask2()">
</body>
<script>
var task;
var task2;
function startTask() {
task = setInterval(function() {
console.log('匿名函数');
}, 1000);
}
function myFun(myNum) {
console.log('执行周期性定时器任务 ' + myNum);
}
function endTask() {
clearInterval(task);
}
function startTask2() {
task2 = setTimeout(function() {
console.log('执行一次性定时器');
}, 500);
}
function endTask2() {
clearTimeout(task2);
}
</script>
</html>
history对象
基础介绍
(1)back()：加载上一个浏览过的文档
(2)forward()：加载下一个浏览过的文档
(3)go(num)：跳转到第num个浏览过的文档
正数
负数
0：刷新
案例
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="17-2 history对象-2.html">17-2</a>
<br>
<input type="button" value="前进" onclick="myForward()" />
</body>
<script>
function myForward(){
history.go(0);
}
</script>
</html>
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="后退" onclick="myBack()" />
</body>
<script type="text/javascript">
function myBack(){
history.go(-1);
}
</script>
</html>
location对象
基础介绍
(1)href：标签具备超链接效果 ***
(2)reload()：重新加载|刷新
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="淘宝" onclick="toTaoBao()" />
<input type="button" value="刷新" onclick="reload()" />
</body>
<script>
function toTaoBao() {
location.href = 'http://www.taobao.com';
}
function reload() {
location.reload();
}
</script>
</html>
DOM
基础介绍
(1)Document Object Model，文档对象模型
(2)每个网页都可看作一个文档 document
(3)每个页面中的全部内容都可看作对应的节点：
文档节点
元素节点
属性节点
文本节点
注释节点
(4)DOM树：
html包含head和body
head和body，也可以包含其他标签
(5)提供一系列属性和方法，修改网页的内容、结构、样式
document对象(重点)
基础介绍
(1)title：设置文档名称 了解
(2)innerHTML：获取标签体内容
(3)value：获取value属性
(4)style.xx：设置样式
(5)checked：是否选中
(6)disabled：是否可用
(7)src：控制显示哪张图片
(8)getElementById()：根据ID属性值获取元素
(9)getElementsByTagName()：根据标签名称获取元素的集合
(10)getElementsByName()：根据name属性值获取元素集合
(11)getElementsByClassName()：根据class属性值获取元素集合
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<p id="sal" class="content">月薪过万</p>
<p class="content">付出可能有收获</p>
<input id="full" type="checkbox" onclick="fullCheck()">全选
<input type="checkbox" onclick="disCheck()">反选
<br>
<input type="checkbox" name="subject" checked>Java
<input type="checkbox" name="subject" checked>Web
<input type="checkbox" name="subject" checked>大数据
<input type="checkbox" name="subject">UI
<br>
<input id="btn" type="button" value="普通按钮" disabled />
<br>
<div id="myDiv">
</div>
</body>
<script>
console.log(document.getElementsByTagName('p'));
var eles = document.getElementsByTagName('p');
for (var i = 0; i < eles.length; i++) {
eles[i].style.color = 'green';
}
console.log(document.getElementsByName('subject'));
var boxEles = document.getElementsByName('subject');
function fullCheck() {
for (var i = 0; i < boxEles.length; i++) {
boxEles[i].checked = document.getElementById('full').checked;
}
}
function disCheck() {
for (var i = 0; i < boxEles.length; i++) {
boxEles[i].checked = !boxEles[i].checked;
}
}
console.log(document.getElementsByClassName('content'));
document.getElementById('btn').disabled = false;
document.getElementById('myDiv').style.display = 'block';
</script>
</html>
dom操作
基础介绍
创建新元素：createElement()
末尾追加元素：appendChild()
设置属性值：setAttribute(key,val)
插入元素：insertBefore(新元素,在...元素之前)
最后一个子元素：lastElementChild
第一个子元素：firstElementChild
复制元素：cloneNode(true) 参数为true时，复制元素内容
删除子元素：removeChild()
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="增加" onclick="addContent()">
<input type="button" value="插入" onclick="insertContent()">
<input type="button" value="复制" onclick="cloneContent()">
<input type="button" value="删除" onclick="removeContent()">
<!-- 无序列表 -->
<ul id="city">
<li>杭州</li>
<li id="nj">南京</li>
<li id="sz">深圳</li>
<li>广州</li>
</ul>
<ul id="city2">
<li id="sh">上海</li>
</ul>
</body>
<script>
function removeContent() {
var ulEle = document.getElementById('city');
var lastEle = ulEle.lastElementChild;
ulEle.removeChild(lastEle);
}
function cloneContent() {
var cloneEle = document.getElementById('sz').cloneNode(true);
var ulEle = document.getElementById('city');
var njEle = document.getElementById('nj');
ulEle.insertBefore(cloneEle, njEle);
}
function insertContent() {
var newLi = document.createElement('li');
newLi.innerHTML = '郑州';
var ulEle = document.getElementById('city');
var njEle = document.getElementById('nj');
var lastEle = ulEle.lastElementChild;
var firstEle = ulEle.firstElementChild;
var szEle = document.getElementById('sz');
ulEle.insertBefore(firstEle, szEle);
}
function addContent() {
var newLi = document.createElement('li');
var ulEle = document.getElementById('city');
var newInput = document.createElement('input');
newInput.setAttribute('type', 'password');
newLi.appendChild(newInput);
var shEle = document.getElementById('sh');
ulEle.appendChild(shEle);
}
</script>
</html>
简化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="替换" onclick="replaceContent()">
<input type="button" value="追加" onclick="addContent()">
<ul id="city">
<li>杭州</li>
<li id="nj">南京</li>
<li id="sz">深圳</li>
<li>广州</li>
</ul>
<div id="myDiv">
</div>
</body>
<script>
function replaceContent() {
document.getElementById('city').innerHTML = '<li>上海</li>';
}
function addContent() {
document.getElementById('city').innerHTML += '<li>上海</li>';
}
document.getElementById('myDiv').innerHTML = '<p>dom简化操作</p>';
</script>
</html>
dom操作表格
基础介绍
(1)insertRow(idx)：插入行
(2)insertCell(idx)：插入列
(3)deleteRow(idx)：删除行
(4)rows：行
(5)cells：列 单元格
(6)length：行数
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" value="末尾增加" onclick="addTr()">
<input type="button" value="末尾删除" onclick="delTr()">
<table id="empData">
<caption>员工信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>薪资</th>
<th>兴趣</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>10000</td>
<td>唱歌</td>
</tr>
<tr>
<td>2</td>
<td>jack</td>
<td>13000</td>
<td>玩游戏</td>
</tr>
<tr>
<td>3</td>
<td>maria</td>
<td>11000</td>
<td>唱歌</td>
</tr>
<tr>
<td>4</td>
<td>lucy</td>
<td>15000</td>
<td>唱歌</td>
</tr>
</tbody>
</table>
</body>
<script>
console.log(document.getElementById('empData'));
console.log(document.getElementById('empData').rows);
console.log(document.getElementById('empData').rows.length);
console.log(document.getElementById('empData').rows[2].cells[2].innerHTML);
function addTr() {
var tableCon = document.getElementById('empData');
var newTr = tableCon.insertRow(tableCon.rows.length);
newTr.insertCell(0).innerHTML = 5;
newTr.insertCell(1).innerHTML = '张三';
newTr.insertCell(2).innerHTML = 20000;
newTr.insertCell(3).innerHTML = '钓鱼';
}
function delTr(){
var tableCon = document.getElementById('empData');
tableCon.deleteRow(tableCon.rows.length-1);
}
</script>
</html>
简化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" value="末尾增加" onclick="addTr()">
<input type="button" value="替换" onclick="repTr()">
<table id="empData">
<caption>员工信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>薪资</th>
<th>兴趣</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>10000</td>
<td>唱歌</td>
</tr>
<tr>
<td>2</td>
<td>jack</td>
<td>13000</td>
<td>玩游戏</td>
</tr>
<tr>
<td>3</td>
<td>maria</td>
<td>11000</td>
<td>唱歌</td>
</tr>
<tr>
<td>4</td>
<td>lucy</td>
<td>15000</td>
<td>唱歌</td>
</tr>
</tbody>
</table>
</body>
<script>
function addTr() {
var tableCon = document.getElementById('empData');
tableCon.innerHTML += '<tr>' +
'<td>4</td>' +
'<td>lucy</td>' +
'<td>15000</td>' +
'<td>唱歌</td>' +
'</tr>';
}
function repTr() {
var tableCon = document.getElementById('empData');
tableCon.innerHTML = '<tr>' +
'<td>4</td>' +
'<td>lucy</td>' +
'<td>15000</td>' +
'<td>唱歌</td>' +
'</tr>';
}
</script>
</html>
这篇博客主要复习了JavaScript中的事件处理，包括事件的使用方式和常见事件类型，如单击、鼠标移入移出等。同时，详细探讨了浏览器对象模型(BOM)中的window对象、history和location对象，尤其是定时器的使用。此外，还深入讲解了DOM（文档对象模型），特别是document对象的使用以及DOM操作技巧，包括对表格的操作。
扫一扫
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
