JavaScript基础
概念:
一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有Javascript的解析引擎
一、脚本语言:
不需要编译,直接就可以被浏览器解析执行了
二、功能:
可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验
三、JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
ECMAScript:客户端脚本语言的标准
基本语法:
与html结合方式
内部JS:
定义<script>,标签体内容就是js代码
外部JS
定义<script>,通过src属性引入外部的js文件
注意:
<script>可以定义在html页面的任何地方。但是定义的位置会影响执行的顺序
<script>可以定义多个
注释
单行注释://注释类容
多行注释:/*注释内容*/
数据类型
原始数据类型(基本数据类型):
number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
string:字符串。字符/字符串
boolean:true和false
null:一个对象为空的占位符
undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
引用数据类型:对象
变量
一、变量:一小块存储数据的内存空间
Java语言是强类型语言,而JavaScript是弱类型语言。
二、强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定数据类型的数据
三、弱类型:在开辟变量存储空间时不定义空间将来的存储数据类型,可以存放任意类型的数据
语法:
var 变量名 = 初始化值;
运算符
一、注意:
在JS中,如果运算数不是运算符所要求的类型,那么js引亲会自动将运算符转换
二、其他类型转number:
1.string转number:按照字面意思转换。如果字面值不是数字,则转换为NaN(不是数字的数字)
2.boolean转number:true转为1,false转为0
其他类型转boolean:
3.number:0或NaN为假,其他为真
4.string:除了空字符串(""),其他都是true
5.null&undefined:都是false
6.对象:所有对象都是true
流程控制语句
if...else...
while
do...while
for
switch:
在java中,switch语句可以接受的数据类型:byte int short char 枚举(1.5)String(1.7)
switch(变量):
case 值:
在js中,switch语句可以接受任意的原始数据类型
<script>
var a=1;
switch(a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
<script>
//1~100求和5050
var sum= 0;
var num=1;
where(num<=100){
sum+=num;
num++;
}
alert(sum);
</script>
<script>
//1~100求和5050
var sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}
alert(sum);
</script>
<script>
//99乘法表
document.write("<table align='center'>");
//1.完成基本的for循环嵌套,展示乘法表
for (var i = 1; i <=9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>");
}
//输出换行
// document.write("<br>");
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>")
</script>
基本对象:
一、Function:函数对象
定义:
function 方法名称(形参列表){
方法体
}
var 方法名 = function(形参列表){
方法体
}
属性:length:代表形参的个数
特点:
方法定义时形参类型不写。返回值类型不写。
方法是一个对象,如果定义名称相同的方法,会覆盖
在JS中,方法的调用只与方法的名称有关,和参数列表无关
在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
function add() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var sum = add(1,2,3,4);
alert(sum);
调用:
方法名称(实际参数列表);
二、Array:数组对象
创建:
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
方法:
join(参数):将数组中的元素按照指定的分隔符,拼接成字符串
push():向数组的末尾添加一个或更多元素,并返回新的长度
属性:
length:数组的长度
特点:
JS中,数组元素的类型可变的
JS中,数组的长度是可变的
var arr1=new Array(1,2,3);
var arr2=new Array(5);
var arr3=[1,2,3,4];
alert(arr1.length);//3
document.write(arr1.join("--")+"<br>");//1--2--3
arr1.push(4);
document.write(arr1.join("++")+"<br>");//1++2++3++4
三、Date:日期对象
创建:
var date = new Date();
方法:
toLocalString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前时间描述的时间和和1970.1.1零点的毫秒值差
var date=new Date();
document.write(date+"<br>");//Tue Feb 25 2020 10:42:54 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()+"<br>");//2020/2/25 上午10:44:36
document.write(date.getTime()+"<br>");
四、Math:数学对象
创建:
特点:Math 对象不用创建,直接使用。Math.方法名称();
方法:
random():返回0~1之间的随机数。含0不含1
round(x):四舍五入
ceil():向上取整
floor():向下取整
属性:
PI:圆周率
###### 示例:
document.write(Math.PI+"<br>");//3.141592653589793
document.write(Math.random()+"<br>");//0.6868156100119953
document.write(Math.round(3.14)+"<br>");//3
document.write(Math.ceil(3.14)+"<br>");//4
document.write(Math.floor(3.14)+"<br>");//3
//取1~100之间的随机整数
var number = Math.floor((Math.random()*100))+1;
document.write(number);//65
五、RegExp:正则表达式对象
正则表达式:定义字符串的组成规则。
单个字符:[]
如:[a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
量词符号:
*:表示出现0次或多次
?:表示出现0从或1次
+:出现1次或多次
{m,n}:表示 m <= 数量 <= n
m如果缺省:{,n}:最多n次
n如果缺省:{m,}:最少m次
开始结束符号
^:开始
$:结束
正则对象:
创建:
var reg=new RegExp("正则表达式");
var reg= /正则表达式/;
方法:
test(参数):验证指定的字符串是否符合正则定义的规范
示例:
var reg1=new RegExp("\w{6,12}");
var reg2=/^\w{6,12}$/;
alert(reg1);
alert(reg2);
var username="zhangsan";
var flag = reg2.test(username);
alert(flag);//true
六、Global:全局对象
特点:
全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();
方法:
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码。比上面的编码的字符多
decodeURIComponent():url解码
parseInt():将字符串转为数字
isNaN():判断一个值是否是NaN
eval():将JavaScript字符串,作为 脚本代码来执行
示例:
var str="小虎贝";
var encode=encodeURI(str);
document.write(encode+"<br>");//%E5%B0%8F%E8%99%8E%E8%B4%9D
var s = decodeURI("%E5%B0%8F%E8%99%8E%E8%B4%9D");
document.write(s+"<br>");//小虎贝
var str1="小虎贝";
var encode=encodeURIComponent(str1);
document.write(encode+"<br>");//%E5%B0%8F%E8%99%8E%E8%B4%9D
var s1 = decodeURIComponent("%E5%B0%8F%E8%99%8E%E8%B4%9D");
document.write(s1);//小虎贝
var str="123abc";
var number = parseInt(str);
alert(number+1);//124
var str="abc123abc";
var number = parseInt(str);
alert(number+1);//NaN
var a=NaN;
document.write(a==NaN);//false
document.write(isNaN(a));//true
var jscode="alert(123)";
eval(jscode);
BOM
概念:
Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
组成:
Window:窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象
Window:窗口对象
特点:
Window对象不需要创建可以直接使用 window使用。window.方法名称();
window引用可以省略。方法名();
方法:
与弹出框有关的方法:
alert():弹出带有确认按钮的警告框
confirm():弹出带有确认按钮和取消按钮的框
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false
prompt():弹出,可接受用户输入的对话框
返回值:获取用户输入的值
<script>
alert("hello");
window.alert("hello");
var flag = confirm("你想好了吗?");
var result = window.confirm("你想好了吗?");
if(flag){
//退出操作
}else{
//取消操作
}
var name = prompt("请输入你的名字");
</script>
与打开关闭有关的方法:
close():关闭浏览器窗口
谁调用我,我关谁
open():打开一个新的浏览器窗口
返回一个新的Window对象
与定时器有关的方法:
setTimeoout():在指定的毫秒数后调用函数或计算表达式
参数:
js代码或者方法
毫秒值
返回值:
唯一标识,用于取消定时器
clearTimeout():取消定时器
setInterval():按照指定的周期循环调用。循环计时器
clearInterval():取消循环定时器
属性:
获取其他BOM对象:
history
location
Navigator
Screen
获取DOM对象:
document
<script>
var h1=window.history;
var h2=history;
window.document.getElementById("");
document.getElementById("");
</script>
示例:
<script>
//一次性定时器
var id1 = setTimeout("alert('boom~~');",3000);
var id2 = setTimeout("fun()",3000);
var id3 = setTimeout(fun(),3000);
function fun() {
alert('boom~~');
}
//取消指定的一次性定时器
clearTimeout(id1);
//循环定时器
var id4 = setInterval(fun(),3000);
//取消指定的循环定时器
clearInterval(id4);
</script>
轮播图案例
<img id="img" src="img/1.png" width="100%">
<script>
//修改图片src属性
var number=1;
function fun() {
number++;
if(number>3){
number=1;
}
//获取img对象
var img = document.getElementById("img");
img.src="img/"+number+".png";
}
//定义定时器
setInterval(fun,3000);
</script>
Location:地址栏对象
创建(获取):
window.location
location
方法:
reload():重新加载当前文档。刷新
属性:
href :设置或返回完整的 URL
<script>
//reload方法 定义按钮,点击按钮刷新页面
var btn = document.getElementById("btn");
btn.onclick=function () {
//刷新页面
location.reload();
}
//获取href
var href = location.href;
//点击按钮,去访问百度
var goBaidu = document.getElementById("goBaidu");
goBaidu.onclick=function () {
location.href="https://www.baidu.com";
}
</script>
倒计时自动跳转首页案例
<p>
<span id="time">5</span>秒之后自动跳转到首页...
</p>
<script>
var second=5;
var time = document.getElementById("time");
function showTime() {
second--;
if(second<=0){
//跳转
location.href="https://www.baidu.com";
}
time.innerHTML=second+"";
}
//设置定时器,1秒执行一次该方法
setInterval(showTime,1000);
</script>
History:历史记录对象
创建(获取):
window.history
history
方法:
back():后退
forward():前进
go(参数):前进和后退
参数:
正数:前进几个历史记录
负数:后退几个历史记录
属性:
length:返回当前窗口历史列表中url的数量
<input type="button" id="btn" value="获取历史记录个数">
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var length = History.length;
alert(length);
}
</script>
DOM
概念:
Document Object Model 文档对象模型
将标记语言文档的各个部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
功能:控制html文档的内容
代码:获取页面标签(元素)对象 Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
修改属性值:
明确获取的对象是那一个?
查看API文档,找其中有哪些属性可以设置
修改标签体内容:
属性:innerHTML
<body>
<img id="light" src="img/off.png">
<h1 id="title">小奶虎</h1>
<script>
//1.获取img标签对象
var light = document.getElementById("light");
light.src="img/on.png";
//1.获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了");
//2.修改内容
title.innerHTML="大宝贝";
</script>
</body>
W3C DOM 标准被分为3个不同的部分:
核心 DOM - 针对任何 结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node节点对象,其他5个的父对象
XML DOM - 针对XML 文档的标准模型
HTML DOM - 针对HTML 文档的标准模型
核心DOM模型:
Document:文档对象
创建(获取):在html dom模型中可以使用window对象来获取
window.document
document
方法:
获取Element对象:
getElementById():根据ID属性值获取元素对象。ID属性值一般唯一。
getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName():根据class的属性值获取元素对象们。返回值是一个数组
getElementsByName():根据name属性值获取元素对象们。
示例:
<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);
var div_cls = document.getElementsByClassName("cls1");
alert(div_cls.length);
var input = document.getElementsByName("username");
alert(input.length);
</script>
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
示例:
<script>
var table = document.createElement("table");
alert(table);
</script>
属性:
Element:元素对象
获取/创建:
通过document来获取和创建
方法:
removeAttribute():删除属性
setAttribute():设置属性
示例:
<a>点我试一试</a>
<input type="button" id="btn" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
var btn = document.getElementById("btn");
btn.onclick=function () {
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
var btn = document.getElementById("btn_remove");
btn.onclick=function () {
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
Node:节点对象,其他五个的父对象
特点:
所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点
removeChild():删除(并返回)当前节点的指定子节点
replaceChild():用新的节点替换一个子节点
示例:
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<script>
var element_a = document.getElementById("del");
element_a.onclick=function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//删除子节点
div1.removeChild(div2);
}
var element_a = document.getElementById("add");
element_a.onclick=function () {
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
</script>
属性:
parentNode:返回当前节点的父节点
动态表格案例
<!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>
<body>
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="gender" type="text" 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>
<script>
/*
1.添加:
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建tr,td,设置td的文本为文本框的内容
4.创建tr
5.将td添加到tr中
6.获取table,将tr添加到table中
2.删除:
1.确定点击的是哪一个超链接
<a href="javascript:void(0)" οnclick="delTr(this);">删除</a>
2.怎么删除?
removeChild():通过父节点删除子节点
*/
//1.获取按钮
document.getElementById("btn_add").onclick=function () {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td,赋值td的标签体
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a=document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除方法
function delTr(obj) {//obj代表传过来的this是<a>标签本身
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
HTML DOM
标签体的设置和获取:innerHTML
示例:
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
alert(innerHTML);
//div标签中替换一个文本输入框
div.innerHTML="<input type='text'>";
//div标签中追加一个文本输入框
div.innerHTML+="<input type='text'>";
</script>
使用html元素对象的属性
控制元素的样式
使用元素的style属性来设置
如:
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick=function () {
//修改样式方式1
div1.style.border="1px solid red";
div1.style.width="100px";
div1.style.fontSize="20px";
}
</script>
提前定义好类选择器的样式,通过元素的className属性来设置其class属性值达到让是控制
示例:
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
<div id="div2">
div2
</div>
<script>
var div2 = document.getElementById("div2");
div2.onclick=function () {
//修改样式方式2
div2.className="d1";
}
</script>
用 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>
<body>
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="gender" type="text" 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>
<script>
/*
1.添加:
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建tr,td,设置td的文本为文本框的内容
4.创建tr
5.将td添加到tr中
6.获取table,将tr添加到table中
2.删除:
1.确定点击的是哪一个超链接
<a href="javascript:void(0)" οnclick="delTr(this);">删除</a>
2.怎么删除?
removeChild():通过父节点删除子节点
*/
//1.获取按钮
/*document.getElementById("btn_add").οnclick=function () {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td,赋值td的标签体
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a=document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}*/
//使用innerHTML添加
document.getElementById("btn_add").onclick=function () {
//2.获取文本框的内容
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];
//追加一行
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(obj) {//obj代表传过来的this是<a>标签本身
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
事件
概念:
功能 :
某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件:
直接在html标签上,指定事件的属性,属性值就是js代码
<img id="light" src="img/off.png" onclick="alert('我被点了');">
<body>
<img id="light" src="img/off.png" onclick="fun();">
<script>
function fun() {
alert('我被点了');
}
</script>
</body>
通过js获取元素对象,指定事件属性,设置一个函数
<body>
<img id="light" src="img/off.png">
<script>
function fun() {
alert("别点我");
}
//1.获取light对象
var light = document.getElementById("light");
//2.绑定事件
light.onclick =fun;
</script>
</body>
开关灯案例:
<body>
<img id="light" src="img/off.png">
<script>
var light = document.getElementById("light");
var flag=false;//灯灭
if(flag){
light.onclick=function () {
light.src="img/off.png"
flag=false;
}
}else{
light.onclick=function () {
light.src="img/on.png"
flag=true;
}
}
</script>
</body>
常见的事件:
点击事件:
onclick:单击事件
ondblclick:双击事件
焦点事件:
onblur:失去焦点
用于表单校验
onfocus:获得焦点
加载事件:
onload:一张页面或一幅图加载完成后执行
鼠标事件:
onmousedown 鼠标按钮被按下。
定义方法时,定义一个形参,接受event对象。
event对象的button属性可以获取鼠标具体是那个键被点击了
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
键盘事件:
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
选中和改变事件:
onchange 域的内容被改变。
onselect 文本被选中。
表单事件:
onsubmit 确认按钮被点击。
可以阻止表单的提交。用于表单校验。
方法返回false则阻止表单提交
onreset 重置按钮被点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script>
window.onload=function () {
//1.焦点事件:
/*document.getElementById("username").onblur=function () {
alert("失去焦点了。。");
}*/
//2.鼠标事件,鼠标移到元素之上事件
/*document.getElementById("username").onmouseover=function () {
alert("鼠标来了..");
}*/
//3.鼠标点击事件
/*document.getElementById("username").onmousedown=function (event) {
//alert("鼠标点击了..");
alert(event.button);
}*/
/*document.getElementById("username").onkeydown=function (event) {
//alert("鼠标点击了..");
if(event.keyCode==13){
alert("提交表单");
}
}*/
/*document.getElementById("username").onchange=function (event) {
alert("改变了。。")
}
document.getElementById("city").onchange=function (event) {
alert("改变了。。")
}*/
/*document.getElementById("from").onsubmit=function () {
//校验用户名格式是否正确
var flag=false;
return flag;
}*/
}
</script>
</head>
<body>
<!--
onsubmit="return true;"
浏览器解析时会
funcation(){
return true;
}
如果不加return 会达不到效果
-->
<form action="#" id="from" onsubmit="return true;">
<input id="username" name="username">
<select id="city">
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
表格全选案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style>
table{
border: 1px solid;
margin-left: 30%;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-left: 30%;
margin-top: 10px;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
<script>
//1.在页面加载完后绑定事件
window.onload=function () {
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick=function () {
//全选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为选中 checked
cbs[i].checked =true;
}
}
document.getElementById("unSelectAll").onclick=function () {
//全不选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为未选中 checked
cbs[i].checked =false;
}
}
document.getElementById("selectRev").onclick=function () {
//反选选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为相反
cbs[i].checked =!cbs[i].checked;
}
}
document.getElementById("firstCb").onclick=function () {
//第一个cb
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//获取第一个cb 就是this
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为相反
cbs[i].checked =this.checked;
}
}
//1.给所有tr绑定鼠标移到元素之上和移出元素之上事件
var trs = document.getElementsByTagName("tr");
//2.遍历
for (var i = 0; i < trs.length; i++) {
//移到元素之上
trs[i].onmouseover = function () {
this.className="over";
}
//移除元素
trs[i].onmouseout = function () {
this.className="out";
}
}
}
</script>
</head>
<body>
<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)" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</form>
</body>
</html>