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>
表单校验