2--Web前端开发-JavaScript

灯火不休ᝰ

已于 2024-09-03 12:24:16 修改

阅读量1.2k

点赞数 42

分类专栏： JavaWeb 文章标签：前端 javascript

于 2024-08-04 19:24:37 首次发布

本文链接：https://blog.csdn.net/2301_77946674/article/details/140905222

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

引入方式

1、内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可以改善显示速度

<script>
alert("hello javascript");
</script>

可放在代码中任意位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-引入方式</title>
    <!-- 内部脚本 -->
   <script>
       alert("hello javascript");
   </script>
    
</head>
<body>
    
</body>
</html>

得到

2、外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签

<script src="js/demo.js"></script>

alert("hello javascript")

将JS代码定义在外部JS文件中

在代码中引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-引入方式</title>
    <!-- 内部脚本 -->
     <!-- <script>
       alert("hello javascript");
     </script> -->
    <!--  外部脚本 -->
      <script src="js/demo.js"></script>
</head>
<body>
    
   



</body>
</html>

得到

基础语法

区分大小写：与java一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释：单行注释：//注释内容

多行注释：/*注释内容*/

大括号代表代码块

输出语句

使用window.alert()写入警告、window可省略

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

<script>
window.alert("HelloJavaScript");//浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML, 在浏览器展示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
/*  alert("JS"); */

//方式一：弹出警告框
window.alert("Hello JavaScript");

//方式二：写入html页面中
document.write("Hello JavaScript");

//方式三：控制台输出
console.log("Hello JavaScript"); 

</script>
</html>

方式一：

方式二：

方式三：

变量：Javascript中用var关键字（variable的缩写）来声明变量

Javascript是一门弱类型语言，变量可以存放不同类型的值

var a=20;
a="小明";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
//var定义变量
// var a =10;
// a="小明";

// alert(a);

//特点1：作用域比较大，全局变量
{
    var x=1;
}
alert(x);
//特点2：可以重复定义
{
    var x=1;
    var x="A";//覆盖原来的定义
}
alert(x);

</script>
</html>

let关键字定义变量，用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

变量名需要遵守以下规则：

组成字符可以是任何字母、数字、下划线_或美元符号$
数字不能开头
建议使用驼峰命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-基础语法</title>
   
</head>
<body>
    
</body>
<script>
//var定义变量
// var a =10;
// a="小明";

// alert(a);

//特点1：作用域比较大，全局变量
//特点2：可以重复定义
/* {
    var x=1;
    var x="A";//覆盖原来的定义
}
alert(x); */

//let：局部变量、不能重复定义
/* {
    let x=1;
    alert(x);
} */
//alert(x);

//const：常量，不能改变
const pi=3.14;
//pi=3.15;
alert(pi);


</script>
</html>

数据类型

JavaScript中分为：原始类型和引用类型

原始数据

number：数字（整数、小数、NaN（Not a Number））
string：字符串，单双引皆可
boolean：布尔，ture false
null：对象为空
undefined：方声明的变量为初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatibale" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-数据类型</title>
   
</head>
<body>
    
</body>
<script>

//原始数据类型
alert (typeof 3);//number
alert(typeof 3.14) ;//number

alert (typeof "A");//string
alert (typeof 'Hello');//string

alert (typeof true);//boolean
alert (typeof false);//boolean

alert(typeof null);//object

var a
alert (typeof a)//undefined

</script>
</html>

运行得到

运算符

算数运算符：+，-，*，/，%，++，--
赋值运算符：=，+=，-=，*=，/=，%=
比较运算符：>，<，>=，<=，！=，==，===
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value:false_value

==与===

==会进行类型转换，===不会进行类型转换

var a=10;
alert(a=="10");//true，进行类型转换，类型相同；且数值相同
alert(a==="10");//false，类型相等
alert(a===10）;//true，类型和值相等

字符串类型转为数字：

将字符串字面值转为数字，如果字面不是数字，则转为NaN

// 类型转换 - 其他类型转为数字
alert (parseInt ("12"));//12
alert (parseInt ("12A45") ) ;//12，当遇到的不是数字就停止
alert (parseInt ("A45"));//NaN

其他类型转为boolean

Number：0和NaN为False，其他均转为true
String：空字符串为false，其他均转为true
Null和undefined：均转为false

if(0){
    alert("0 转换为false");
}
if (NaN) {
alert("NaN 转换为false");
}
if(-1){
alert("除0和NaN其他数字都转为 true");
}

if(""){
alert("空字符串为 false，其他都是true");
}

if("s"){
alert("空字符串为 false，其他都是true");
}

if(null) {
alert("null 转化为false");
}
if (undefined) {
alert("undefined 转化为false");
}

流程控制语句

if...else if...else
switch
for
while
do...while

函数

介绍：函数（方法）是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字进行定义

注意：

形式参数不需要类型，因为JavaScript是弱语言类型；
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称（实际参数列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

    //定义函数

    //方式一
    // function add(a,b){
    //     return a+b;
    // }


     //方式二
    var sdd=function(a,b){
        return a+b;
    }

    // 函数调用
    var result=add(10,20);
    alert(result);

    // var result=add(10,20,30,40);
    // alert(result);
    //结果相同，JS中，函数调用可以传递任意个数的参数

</script>
</html>

对象

Array数组

定义

方式一：var 变量名=new Array（元素列表）；

方式二：var 变量名=[元素列表]；

var arr=new Array(1,2,3,4);//方式一
var arr=[1,2,3,4];//方式二

访问

arr[索引]=值；

arr[10]="hello";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

 //定义数组
 //var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];

// console.log(arr[0]);
// console.log(arr[1]);

//特点：长度可变、类型可变
var arr=[1,2,3,4];
arr[10]=50;

console.log(arr[8]);
console.log(arr[9]);
console.log(arr[10]);

arr[9]="A";
arr[8]=true;

console.log(arr);

</script>
</html>

属性

length 设置或返回数组中元素的数量

方法

forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素

var arr=[1,2,3,4];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 var arr=[1,2,3,4];
 arr[10]=50;
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

console.log("-------------------------------");


//forEach:遍历数组中有值的元素
arr.forEach(function(e){
    console.log(e);
})

for循环遍历数组中所有元素，而forEach遍历有值的元素

//forEach:遍历数组中有值的元素
arr.forEach(function(e){
    console.log(e);
})
//ES6 箭头函数：（...）=>（...）   简化函数定义
arr.forEach((e)=>{
    console.log(e);
})

//push：添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

//splice：删除元素
arr.splice(2,2);//删除索引位2开始，2个元素
console.log(arr);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>
<body>
    
</body>
<script>

 //定义数组
 //var arr=new Array(1,2,3,4);
//var arr=[1,2,3,4];

// console.log(arr[0]);
// console.log(arr[1]);

//特点：长度可变、类型可变
// var arr=[1,2,3,4];
// arr[10]=50;

// console.log(arr[8]);
// console.log(arr[9]);
// console.log(arr[10]);

// arr[9]="A";
// arr[8]=true;

// console.log(arr);

 var arr=[1,2,3,4];
 arr[10]=50;
// for (let i = 0; i < arr.length; i++) {
//     console.log(arr[i]);
// }

// console.log("-------------------------------");


// //forEach:遍历数组中有值的元素
// arr.forEach(function(e){
//     console.log(e);
// })
// //ES6 箭头函数：（...）=>（...）   简化函数定义
// arr.forEach((e)=>{
//     console.log(e);
// })

//push：添加元素到数组末尾
// arr.push(7,8,9);
// console.log(arr);

//splice：删除元素
arr.splice(2,2);//删除索引位2开始，2个元素
console.log(arr);

</script>
</html>

String字符串

定义

方法一：var 变量名=new String("...");

方法二：var 变量名="...";

属性

length 字符串的长度

方法

charAt() 返回在指定位置的字符
indexOf() 检索字符串
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引之间的字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    
</body>
<script>

//创建字符串对象
//var str=new String("hello string");
var str=" hello string  ";

console.log(str);

//length
console.log(str.length);

//charAt
console.log(str.charAt(4));

//indexOf
console.log(str.indexOf("lo"));

//trim
var s=str.trim();
console.log(s);

//substring(start,end)----------开始索引，结束索引（含头不含尾）
console.log(s.substring(0,5));

</script>
</html>

JavaScript自定义对象

定义格式：

var 对象名={

属性名1：属性值1，

属性名2：属性值2，

函数名称：function(形参列表）{}

}；

var user ={
name:"Tom",
age:20,
gender:"male",
eat:function(){
alert("用膳");
}
};

调用格式

对象名.属性名；

console.log(user.name);

对象名.函数名（）；

user.eat();

JSON

JavaScript Object Notation ，JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本，由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

与自定义对象类似，但属性名用双引号

value 的数据类型

数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true或 false)
数组(在方括号中)
对象(在花括号中)
null

定义

var 变量名='{"key1":value1,"key2":value2}';

var userStr='{"name":"jerry","age":18,"addr":["北京","上海","西安"]}';

JSON字符串转为JS对象

var jsObject =JSON.parse(useStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    
</body>
<script>

//自定义对象
// var user ={
// name:"Tom",
// age:20,
// gender:"male",
// // eat:function(){
// // alert("用膳");
// // }

// //也可简化写为以下形式
// eat(){
// alert("用膳");
// }

// };

// alert(user.name);
// user.eat();

//定义JSON
var jsonstr='{"name":"tom","age":18,"addr":["北京","上海","西安"]}';
alert(jsonstr.name);

//json字符串--js对象
var obj=JSON.parse(jsonstr);
alert(obj.name);

//js对象--json字符串
alert(JSON.stringify(obj));

</script>
</html>

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器的各个组成部分封装为对象

组成

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史浏览对象
Location：地址栏对象

Window

介绍：浏览器窗口对象。
获取：直接使用window，其中window.可以省略。 window.alert("Hello Window"); alert("Hello Window");
属性

history：对History对象的只读引用。
location：用于窗口或框架的Location对象。
navigator：对Navigator对象的只读引用。

方法

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setlnterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

介绍：地址栏对象

获取：使用window.Location获取，其中window.可省略

window.Location.属性

Location.属性

属性

href:设置或返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    
</body>
<script>
// //获取
// window.alert("hello BOM");
// alert("hello BOM");

// //方法
// //confirm--对话框--确认：true 取消：false
// var flag=confirm("您确认删除该记录吗？");
// alert(flag);

// //定时器-setInterval--周期性的执行某一个函数
// var i=0;
// setInterval(function(){
//     i++
//     console.log("定时器执行了"+i+"次");
    
// },2000);//2秒

// //定时器-setTimeout--延迟指定时间执行一次
// setTimeout(function(){
//     alert("js");
// },3000);//3秒

//location
alert(location.href);

location.href="https://www.itcast.cn";
//更改域名，并跳转到更改后

</script>
</html>

DOM

概念：Document Object Model 文档对象模型

将标记语言的各个组成部分封装为对应的对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作

改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和删除HTML元素

演示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <div style="font-size: 30px; text-align: center;" id="tbl">课程表</div>
    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
        <th>评语</th>
        </tr>
        <tr align="center" class="data">
        <td>001</td>
        <td>张三</td>
        <td>90</td>
        <td>很优秀</td>
        </tr>
        <tr align="center" class="data">
        <td>002</td>
        <td>李四</td>
        <td>92</td>
        <td>优秀</td>
        </tr>
        <tr align="center" class="data">
        <td>003</td>
        <td>王五</td>
        <td>83</td>
        <td>很努力，不错</td>
        </tr>
        <tr align="center" class="data">
        <td>004</td>
        <td>赵六</td>
            <td>98</td>
            <td>666</td>
            </tr>
            </table>
            <br>
            <div style="text-align: center;">
            <input id="bl" type="button" value="改变标题内容"onclick="fn1() ">
            <input id="b2"type="button"value="改变标题颜色"onclick="fn2()">
            <input id="b3" type="button"value="删除最后一个"onclick="fn3()">
        </div>  
</body>
<script>
    function fnl(){
document.getElementById('tb1').innerHTML="学员成绩表";
    }

function fn2(){
document.getElementById('tbl').style="font-size: 30px; text-align: center; color: red;"
}

function fn3(){
var trs = document.getElementsByClassName ('data') ;
trs[trs.length-1].remove () ;
}

</script>

</html>

DOM是W3C(万维网联盟)的标准，定义了访问HTML和XMLT
1. Core DOM-所有文档类型的标准模型

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

2. XML DOM-XML文档的标准模型
3. HTML DOM-HTML文档的标准模型

Image: <img>
Button : <input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2. 根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3. 根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>
<script>
    // //1.获取Element元素
    // //1.1 获取元素-根据ID获取
    // var img=document.getElementById('h1');
    // alert(img);

    // //1.2 获取元素-根据标签获取
    // var divs=document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //    alert(divs[i]);
        
    // }

    // //1.3 获取元素-根据name属性获取
    // var ins=document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //    alert(ins[i]);
        
    // }
    // //1.4 获取元素-根据class属性获取
    // var dis =document.getElementsByClassName('cls');
    // for (let i = 0; i < dis.length; i++) {
    //    alert(dis[i]);
        
    // }


    //2.查询参考手册，属性，方法
    var dis =document.getElementsByClassName('cls');
    var div1=dis[0];

    div1.innerHTML="666";

</script>

</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg" width="20%"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>

</html>

生成：

根据以下要求，更改

1.改变图片
2.将所有div标签的内容后面加上：very good(红色字体)
3.使所有的复选框呈现选中状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <img id="h1" src="./图像/1.jpg" width="20%"> <br><br> 

    <div class="cls">教育</div> <br>
    <div class="cls">程序员</div> <br> 

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
   
    
</body>
<script>
 //1.改变图片：src属性值   获取元素对象-查文档改变属性
 var img=document.getElementById('h1');
 img.src="./图像/2.jpg"

 //2.将所有div标签的内容后面加上：very good(红色字体)--<font color='red'></font>
 var divs=document.getElementsByTagName('div');
 for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML+="<font color='red'>very good</font>";
    
 }
 //3.使所有的复选框呈现选中状态
 var ins=document.getElementsByName('hobby');
 for (let i = 0; i < ins.length; i++) {
    const check= ins[i];
    check.checked=true;
    
 }

</script>

</html>

得到

事件监听

事件：HTML事件是发生在HTML元素上的“事情”。

比如

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

方式二：通过DOM元素属性进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件</title>
</head>
<body>
    <!-- 方式一：通过HTML标签中的事件属性进行绑定 -->
   <input type="button" id="btn1" value="事件绑定1" onclick="on()">
   <!-- 方式二：通过DOM元素属性进行绑定 -->
   <input type="button" id="btn2" value="事件绑定2">
    
</body>
<script>
 function on(){
    alert("按钮1被点击了");
 }
 document.getElementById('btn2').onclick=function(){
    alert("按钮2被点击了");
 }
</script>

</html>

常见事件

onclick 鼠标单击事件
onblyr 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件</title>
</head>
<body>
   <body onload="load()">
      <form action="" style="text-align: center;" onsubmit="subfn()">
      <input type="text"name="username" onblur="bfn()" onfocus="ffn()"onkeydown="kfn() ">

      <input id="bl" type="submit" value="提交">

      <input id="b1" type="button" value="单击事件"onclick="fnl()">
      </form>

      <br><br><br>

      <table width="800px" border="1" cellspacing="0" align="center" onmouseover=over onmouseout="out()">
         <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
      </tr>
      <tr align="center">
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
      </tr>
      <tr align="center">
      <td>002</td>
      <td>李四</td> 
      <td>92</td>
      <td>很优秀</td>
      </tr>
      </table>
      
</body>
<script>
   //onload：页面、元素加载完成后触发
   function load(){
      console.log("页面加载完成");
      
   }

   //onclick：鼠标点击事件
   function fn1() {
      console.log("被点击了");
      
   }

   //onblur：失去焦点事件
   function bfn(){
      console.log("失去焦点");
      
   }

   //onfocus：元素获得焦点
   function ffn(){
      console.log("获得焦点");
      
   }

   //onkeydown：某个键盘的键被按下
   function kfn(){
      console.log("键盘被按下了");
      
   }

   //onmouseover：鼠标移动到元素之上
   function over(){
      console.log("鼠标移入了");
      
   }

   //onmouseout：鼠标移出元素
   function out(){
      console.log("鼠标移出了");
      
   }

   //onsubmit：提交表单事件
   function subfn(){
      alert("表单被提交了");
      
   }
 
</script>

</html>