本文详细介绍了JavaScript的核心组成部分ECMAScript、DOM和BOM，包括它们的概念、方法、属性和常见用例。讲解了如何操作HTML元素、控制页面样式、处理事件，以及动态创建和更新表格等。还展示了使用JavaScript进行表单验证和页面元素交互的实例，深入探讨了DOM节点操作、事件监听和页面加载事件。通过对JavaScript的深入理解，开发者可以更好地实现网页的动态交互和功能增强。
JavaScript组成详解
1.JavaScript的组成图解
ECMAScript：它是javascript的核心(语法、变量、数据类型、语句、函数……)。
DOM：document object model 整个文档对象。
BOM：浏览器对象。
2. BOM+DOM物理图解
以BOM为主
3. BOM+DOM逻辑图解
BOM
1. BOM概念
Browser Object Model 浏览器对象模型。
将浏览器的各个组成部分封装成对象。
2. 组成
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
3. Window：窗口对象
3.1 创建
3.2 方法
3.2.1 与弹出框有关的方法
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮，则方法返回true。
如果用户点击取消按钮，则方法返回false。
prompt()：显示可提示用户输入的对话框。
返回值：获取用户输入的值。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//警告框
//window.alert("hello window1");
alert("hello window2");
//确认框
//var conf1 = window.confirm("您确定删除吗?")
var conf2 = confirm("您确定删除吗?");
if(conf2){
alert("删除了");
}else {
alert("不删除");
}
//输入框
//window.prompt("请输入用户名");
//返回输入的值
var inp = prompt("请输入用户名");
alert(inp);
</script>
<body>
</body>
</html>
警告框
确认框：返回值boolean
输入框：返回值是输入值
3.2.2 与打开关闭有关的方法
open() 打开一个新的浏览器窗口。
返回新的Window对象。
close() 关闭浏览器窗口。
谁调用我 ，我关谁。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="openbut" type="button" value="打开新窗口">
<input id="closebut" type="button" value="关闭新窗口">
</body>
<script>
//打开一个新的浏览器窗口,返回新的窗口window对象。
document.getElementById("openbut").onclick = function () {
//var newwindow = window.open();
var newwindow = open();
}
document.getElementById("closebut").onclick = function () {
//关闭当前浏览器窗口,谁调用我我就关闭谁。
window.close();//火狐浏览器,不能关闭一个非脚本打开的窗口。google演示是可以的。
//关闭新打开的窗口,谁调用我我就关闭谁。
//newwindow.close();
}
</script>
</html>
打开和关闭
3.2.3 与定时器有关的方式
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout() 方法设置的timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由setInterval()设置的timeout。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//一次性定时器
//var id1 = window.setTimeout("func()",2000);
var id1 = window.setTimeout(func,2000);
function func(){
document.write("boom~~~");
}
//销毁一次性定时器
//window.clearTimeout(id1);
//循环定时器
//var id2 = window.setInterval("func()",2000);
var id2 = window.setInterval(func(),2000);
//销毁循环定时器
//window.clearInterval(id2);
</script>
<body>
</body>
</html>
一次和循环定时器
3.3 属性
3.3.1 获取其他BOM对象
window.history = history
window.location = location
window.Navigator = Navigator
window.Screen = Screen
3.3.2 获取DOM对象
window.document = document
3.4 特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
3.5 案例：轮播图
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 1300px;
height: 300px;
margin: auto;
}
</style>
<body>
<div>
<img id="lunbo" width="100%" height="100%" src="img/banner_1.jpg">
</div>
<script>
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//循环调用lunbo()方法
setInterval(lunbo,3000);
var num =1;
//定义替换图片的方法
function lunbo(){
num++;
if(num>3){
num=1;
}
document.getElementById("lunbo").src = "img/banner_"+num+".jpg";
}
</script>
</body>
</html>
lunbo.html
4. Location：地址栏对象
4.1 创建
1. window.location
2. location
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
var l1 = window.location;
var l2 = location;
</script>
<body>
</body>
</html>
4.2 方法
4.2.1 刷新当前页面
reload()：重新加载当前文档，刷新。
该方法没有规定参数，或者参数是false。如果文档没有改变会读缓存中的文档。（和浏览器中的刷新一样）
该方法参数是true,每次会直接绕过缓存,重新下载文档。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="buttonIn" type="button" value="刷新">
</body>
<script>
document.getElementById("buttonIn").onclick = function () {
//刷新当前页面
//window.location.reload();
location.reload();
}
</script>
</html>
刷新
4.3 属性
4.3.1 设置URL
href：设置或返回完整的 URL。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="button" type="button" value="转百度">
</body>
<script>
//获取URL
var hr = location.href;
alert(hr);//http://localhost:63342/basic-code/javascript%E9%AB%98%E7%BA%A7/web/01_%E5%AE%9A%E6%97%B6%E5%92%8C%E5%BE%AA%E7%8E%AF%E8%B0%83%E7%94%A8%E6%96%B9%E6%B3%95.html?_ijt=sdr5n561s4qb7vdnhspgo44p8e
var button = document.getElementById("button").onclick =function () {
//设置URL
location.href="http://www.baidu.com";
}
</script>
</html>
跳转URL到百度
4.4 案例:自动跳转
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
border: 0px solid red;
width: 200px;
height: 100px;
margin: auto;
}
span {
color: red;
}
</style>
<body>
<div>
<span>5</span>秒后跳转到百度....
</div>
</body>
<script>
/*
分析：
1.显示页面效果 <div>
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
2.2 定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<= 0 ，则跳转到首页
*/
// 2.倒计时读秒效果实现
window.setInterval(zidong, 1000);
var num = 5;
function zidong() {
num--;
if(num < 0) {
window.location.href = "http://www.baidu.com";
} else {
//window.document.getElementById("span").innerHTML = num;
window.document.getElementsByTagName("span")[0].innerHTML=num;
}
}
</script>
</html>
zidon.html
5. History：历史记录对象
5.1 创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
var h1 = window.history;
var h2 = history;
</script>
<body>
</body>
</html>
5.2 方法
5.2.1 上一页和下一页方法
back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(参数)：加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
代码演示
01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="button1" type="button" value="跳转到02.html">
<input id="button2" type="button" value="前进">
</body>
<script>
document.getElementById("button1").onclick = function () {
location.href="http://localhost:63342/basic-code/javascript高级/web/02.html";
}
document.getElementById("button2").onclick = function () {
//跳转到下一个页面。
//history.forward();
history.go(1);
}
</script>
</html>
02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="button2" type="button" value="后退">
</body>
<script>
document.getElementById("button2").onclick = function () {
//返回到上一个页面。
//history.back();
history.go(-1);
}
</script>
</html>
01.html
02.html
5.3 属性
5.3.1当前窗口历史列表中的URL数量
length：返回当前窗口历史列表中的URL数量。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="button2" type="button" value="当前页面历史列表中的URL数量">
</body>
<script>
document.getElementById("button2").onclick = function () {
//返回当前窗口历史列表中的URL数量
alert(history.length);
}
</script>
</html>
当前窗口历史列表中的URL数量。
DOM
1. 概念
Document Object Model 文档对象模型。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个的父对象。
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
DOM图解
Document：整个html文件都成为一个Document文档。
Element：所有的标签都是Element元素。
Attribute：标签里面的属性。
Text：标签中间夹着的内容为text文本。
Node：Document、Element、Attribute、Text统称为节点Node。
2. 核心DOM
2.1 Document：文档对象
2.1.1 功能
控制html文档的内容。
获取页面标签(元素)对象：Element。
2.1.2 创建
在html dom模型中可以使用window对象来获取。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
window.document;
document;
</script>
</html>
2.1.3 方法
2.1.3.1 获取Element对象
getElementById()： 根据id属性值获取元素对象。id属性值一般唯一。
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
//根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
//alert(divs.length);数组长度
//根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
//alert(div_cls.length);数组长度
//根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
//alert(ele_username.length);数组长度
</script>
</body>
</html>
2.1.3.2 创建其他DOM对象
createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createComment()：创建注释节点。
以下两个方法很重要，但是在以前的javascript手册中查不到！（在线w3school文档中是是可以找到的）
createTextNode()：创建文本节点。
createElement()：创建元素节点。
2.2 Element：元素对象
2.2.1 功能
操作Element对象：
1. 修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置。
2. 修改标签体内容：
属性：innerHTML
1. 获取元素对象。
2. 使用innerHTML属性修改标签体内容。
注意:开始我对innerHTML属性和value属性不知道他们的区别。
innerHTML属性:设置标签体的中内容 <span>innerHTML属性设置标签体的中内容 </span>
value属性:设置标签里面value属性值 <input value="value属性置标签里面value属性值">
2.2.2 创建
通过document来获取和创建，在Document对象有获取Element对象的方法。获取任何一个标签对象都可以看成一个Element元素对象。
2.2.3 方法
removeAttribute()：删除属性。
setAttribute()：设置属性。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//页面加载完成后
window.onload = function () {
//获取元素
document.getElementById("button1").onclick =function(){
document.getElementsByTagName("a")[0].setAttribute("href","https://www.baidu.com");
}
document.getElementById("button2").onclick =function(){
document.getElementsByTagName("a")[0].removeAttribute("href");
}
}
</script>
<body>
<a>点我跳转到百度.....</a><br>
<input id="button1" type="button" value="设置href属性"><br>
<input id="button2" type="button" value="删除href属性">
</body>
</html>
设置和删除属性
2.3 Node：节点对象其他5个的父对象
2.3.1 方法
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
2.3.2 属性
parentNode：返回节点的父节点。
2.3.3 特点
所有dom对象都可以被认为是一个节点。
2.4 案例:点灯开关
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function () {
var flag = false;//灯关
document.getElementsByTagName("img")[0].onclick = function () {
//注意:标记变量不能放在局部位置,不然每次都是false。
//var flag = false;//灯关
//灯是否开关
if (flag) {//false
//灯开
//换为灯关图片
document.getElementsByTagName("img")[0].src = "img/off.gif";
flag = false;
} else {
//灯关
//换为灯开图片
document.getElementsByTagName("img")[0].src = "img/on.gif";
flag = true;
}
}
}
</script>
<body>
<img src="img/off.gif">
</body>
</html>
点灯开关
2.5 案例:省市二级联动
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");
function changeCity(value){
//获取select1选中的值
//var val = document.getElementById("select1").value;
//获取select2下拉框
var select2 = document.getElementById("select2");
//清除上次下拉框数据
select2.options.length=0;
for (var i = 0; i < 4; i++) {
//判断选中是哪一个省
if (value == i) {
//遍历省中的市
for (var j = 0; j <cities[i].length; j++) {
//创建元素节点
var option = document.createElement("option");
//创建文本节点
var textNode = document.createTextNode(cities[i][j]);
//将文本节点添加到option节点中
option.appendChild(textNode);
//将元素节点添加到select2节点中
select2.appendChild(option);
}
}
}
}
</script>
<body>
<!--下拉框1-->
<select id="select1" name="option" onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<!--下拉框2-->
<select id="select2"></select>
</body>
</html>
省市二级联动
2.6 案例-动态表格
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</style>
</head>
<script>
//首先写一个页面加载事件
window.onload = function () {
/*
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
*/
document.getElementById("btn_add").onclick = function () {
//获取三个输入框的值
//注意:这个三个不能放到外面不然获取不到值。
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table标签对象
var table = document.getElementsByTagName("table")[0];
//创建元素节点
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var a = document.createElement("a");
//设置a标签的属性
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("onclick", "delTr(this);");
//创建个文本框文本节点
var idtn = document.createTextNode(id);
var nameth = document.createTextNode(name);
var gendertn = document.createTextNode(gender);
var delth = document.createTextNode("删除");
//将文本节点添加到元素节点中
td1.appendChild(idtn);
td2.appendChild(nameth);
td3.appendChild(gendertn);
a.appendChild(delth);
td4.appendChild(a);
//将td添加到tr
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//将tr添加到table
table.appendChild(tr);
}
}
function delTr(node) {
var table = node.parentNode.parentNode.parentNode;
var tr = node.parentNode.parentNode;
//删除元素节点
table.removeChild(tr);
}
</script>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
</body>
</html>
动态表格
3. HTML DOM
3.1 标签体的设置和获取：innerHTML
注意:innerHTML属性和value属性不知道他们的区别。
innerHTML属性:设置标签体的中内容 <span><a>innerHTML属性设置标签体的中内容<a></span> span元素.innerHTML --> <a>innerHTML属性设置标签体的中内容<a>。
value属性:设置标签里面value属性值 <input value="value属性置标签里面value属性值"> input.value -->value属性置标签里面value属性值
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function () {
var div = document.getElementById("div1");
//获取标签体的内容
//alert(div.innerHTML);
document.getElementById("button1").onclick = function () {
//把div内容替换为input框
div.innerHTML = "<input type='text'>";
}
document.getElementById("button2").onclick = function () {
//在div中追加input框
div.innerHTML += "<input type='text'>";
}
}
</script>
<body>
<div id="div1">
一库-->
</div>
<input id="button1" type="button" value="把div内容替换为input框">
<input id="button2" type="button" value="在div中追加input框">
</body>
</html>
把div内容替换为input框
在div中追加input框
3.2 设置元素对象的属性1
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function () {
document.getElementById("button1").onclick = function () {
document.getElementsByTagName("a")[0].setAttribute("href","https://www.baidu.com");
}
document.getElementById("button2").onclick = function () {
document.getElementsByTagName("a")[0].removeAttribute("href");
}
}
</script>
<body>
<a>点我去百度.....</a><br>
<input id="button1" type="button" value="设置属性"><br>
<input id="button2" type="button" value="删除属性">
</body>
</html>
设置元素对象的属性
3.3 控制元素样式其实也是设置元素对象属性2
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
</head>
<style>
.div2{
border: 2px solid blue;
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function () {
document.getElementById("button1").onclick = function () {
var div1 = document.getElementById("div1");
//设置边框
div1.style.border="2px solid red";
//设置宽
div1.style.width="100px";
//设置高
div1.style.height="100px";
}
document.getElementById("button2").onclick = function () {
var div2 = document.getElementById("div2");
div2.className = "div2";
}
}
</script>
<body>
<div id="div1">
div1
</div>
<br>
<div id="div2">
div2
</div>
<br>
<input id="button1" type="button" value="设置div1">
<input id="button2" type="button" value="设置div2">
</body>
</html>
控制元素样式
3.4 案例：使用innerHTML完成动态表格
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</style>
</head>
<script>
//首先写一个页面加载事件
window.onload = function () {
/*
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
*/
document.getElementById("btn_add").onclick = function () {
//注意:这个三个不能放到外面不然获取不到值。
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var table = document.getElementsByTagName("table")[0];
//在table追加一个一行四列表格
table.innerHTML +=
"<tr>\n" +
" <td>" + id + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>" + gender + "</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
}
}
function delTr(node) {
var table = node.parentNode.parentNode.parentNode;
var tr = node.parentNode.parentNode;
table.removeChild(tr);
}
</script>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
</body>
</html>
动态表格
事件
1. 概念
某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
事件源：组件。如： 按钮 文本输入框...
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
2. 常见的事件
2.1 点击事件
- onclick：单击事件。
- ondblclick：双击事件。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//单机事件
function click1(){
alert("单击事件");
}
//双击事件
function dbclick1(){
alert("双击单机事件");
}
</script>
<body>
<input type="button" value="单击事件" onclick="click1()">
<input type="button" value="双击事件" ondblclick="dbclick1()">
</body>
</html>
单击事件
双击事件
2.2 焦点事件
- onblur：失去焦点。
- onfocus:元素获得焦点。
焦点事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//离焦事件
function blur1(){
alert("离焦事件");
}
//聚焦事件
function focus1(){
alert("聚焦事件");
}
</script>
<body>
<input type="text" onblur="blur1()" onfocus="focus1()">
</body>
</html>
聚焦事件
离焦事件
2.3 加载事件
- onload：一张页面或一幅图像完成加载。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
/* function init(){
alert("页面加载完成后执行.....");
}*/
window.onload = function() {
alert("页面加载完成后执行");
}
</script>
<!--<body onload="init()">-->
<body>
</body>
</html>
页面加载完成事件
2.4 鼠标事件
- onmousedown：鼠标按钮被按下
- onmouseup：鼠标按键被松开。
- onmousemove：鼠标被移动。
- onmouseover：鼠标移到某元素之上。
- onmouseout：鼠标从某元素移开。
鼠标按下和松开事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//鼠标按钮被按下事件
function mousedown() {
alert("鼠标按钮被按下事件");
}
//鼠标按键被松开事件
function mouseup() {
alert("鼠标按键被松开事件");
}
</script>
<body>
<input type="button" value="鼠标按钮被按下事件" onmousedown="mousedown()">
<input type="button" value="鼠标按键被松开事件" onmouseup="mouseup()">
</body>
</html>
鼠标按下
鼠标松开
鼠标被移动事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//鼠标移动事件
function mousemove() {
alert("鼠标移动事件");
}
</script>
<body>
<input type="text" onmousemove="mousemove()">
</body>
</html>
鼠标被移动
鼠标移到某元素之上和鼠标从某元素移开事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//鼠标移动到某元素上事件
function mouseover() {
alert("鼠标移动到某元素上事件");
}
//鼠标从某元素上移开事件
function mouseout(){
alert("鼠标从某元素上移开事件");
}
</script>
<body>
<input type="text" onmouseover="mouseover()" onmouseout="mouseout()">
</body>
</html>
鼠标移动到某元素上
鼠标从某元素上移开
2.5 键盘事件
- onkeydown：某个键盘按键被按下。
- onkeyup：某个键盘按键被松开。
- onkeypress：某个键盘按键被按下并松开。
键盘按下松开事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//键盘按下事件
function keydown(){
alert("键盘按下事件");
}
//键盘松开事件
function keyup(){
alert("键盘松开事件");
}
</script>
<body>
<input type="text" onkeydown="keydown()" placeholder="键盘按下事件"><br>
<input type="text" onkeyup="keyup()" placeholder="键盘松开事件">
</body>
</html>
键盘按下
键盘松开
键盘按键被按下并松开事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//键盘按下并松开事件
function keypress(){
alert("键盘按下并松开事件");
}
</script>
<body>
<input type="text" onkeypress="keypress()" placeholder="键盘按下并松开事件"><br>
</body>
</html>
键盘按下并松开
2.6 选择和改变
- onchange：域的内容被改变。
- onselect：文本被选中。
域的内容被改变事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//域内容被改变事件
function change() {
alert("域内容改变事件");
}
</script>
<body>
<select onchange="change()">
<option>--请选择--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
域的内容被改变
文本被选中事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//文本被选中事件
function select1(){
alert("文本被选中事件");
}
</script>
<body>
<input type="text" value="Hello world!" onselect="select1()">
</body>
</html>
文本被选中
2.7 表单事件
- onsubmit：确认按钮被点击。
- onreset：重置按钮被点击。
表单提交事件和重置按钮被点击事件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function checkForm(){
//判断表单中的内容是否符合条件
//校验成功 返回true,才能提交表单。
return true;
}
function resetButton() {
alert("重置按钮被点击")
}
</script>
<body>
<form action="/action" method="get" onsubmit="return checkForm()" onreset="resetButton()">
<input type="text" name="username"><br>
<select>
<option>--请选择--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
表单提交
重置按钮被点击事件
3. 案例:表格全选
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.out {
background-color: white;
}
.over {
background-color: pink;
}
</style>
</head>
<body>
<script>
window.onload = function () {
//全选
//为全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//获取所有复选框
var names = document.getElementsByName("cb");
//遍历所有复选框
for (var i = 0; i < names.length; i++) {
names[i].checked = "checked";
//names[i].checked = true;
}
}
//全不选
//全不选按钮绑定单击事件
document.getElementById("unSelectAll").onclick = function () {
//获取所有复选框
var names = document.getElementsByName("cb");
//遍历所有复选框
for (var i = 0; i < names.length; i++) {
names[i].checked = "";
//names[i].checked = false;
}
}
//反选
//为反选按钮绑定单击事件
document.getElementById("selectRev").onclick = function () {
//获取所有复选框
var names = document.getElementsByName("cb");
//遍历所有复选框
for (var i = 0; i < names.length; i++) {
//实现方式1
//判断复选框是否是选中
/*if (names[i].checked) {
//选中
//选中的变为不选中
names[i].checked="";
//names[i].checked= false;
} else {
//不选中
//不选中的变位选中
names[i].checked="checked";
//names[i].checked= true;
}*/
//实现方式2,把该复选框值去反。
names[i].checked = !names[i].checked;
}
}
//根据父选框,全选和全不选。
//为父选框,绑定一个单击事件。
document.getElementById("firstCb").onclick = function () {
//获取父选框的状态
var firstCheck = document.getElementById("firstCb").checked;
//获取所有复选框
var names = document.getElementsByName("cb");
//遍历子复选框
for (var i = 1; i < names.length; i++) {
names[i].checked = firstCheck;
}
}
//表格动态换背景色
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
//
trs[i].onmouseover = function () {
this.className = "over";
}
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
动态表格
4. 案例:表单校验
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
.error {
color: red;
}
</style>
</head>
<script>
//校验表单
function checkForm() {
//验证用户名和密码
//只有用户名和密码校验成功后才提交表单
return checkUsername() && checkPassword();
}
window.onload = function () {
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校验用户名
function checkUsername() {
//获取用户名值
var username_value = document.getElementById("username").value;
//alert(username_value);
//定义正则表达式
var reg_username = /^\w{6,12}$/;
var s_username = document.getElementById("s_username");
var flag = reg_username.test(username_value);
if (flag) {
//符合正则表达式
s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>";
} else {
//不符合正则表达式
s_username.innerHTML = "用户名格式有误!";
}
return flag;
}
//校验密码
function checkPassword() {
//获取用户名值
var password_value = document.getElementById("password").value;
//alert(username_value);
//定义正则表达式
var reg_password = /^\w{6,12}$/;
var s_password = document.getElementById("s_password");
var flag = reg_password.test(password_value);
if (flag) {
//符合正则表达式
s_password.innerHTML = "<img height='25' width='35' src='img/gou.png'>";
} else {
//不符合正则表达式
s_password.innerHTML = "密码格式有误!";
}
return flag;
}
</script>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post" onsubmit="return checkForm()">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" calss="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" calss="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
表单校验
扫一扫
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
