大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。
Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。
现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。
当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。
就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。
Java 和 Javascript 的关系就像雷锋和雷峰塔的关系,像老婆和老婆饼的关系.javascript有点蹭热度的意思,因为当时java是当时最流行的编程语言,带有 “Java” 的名字有助于这门新生语言的传播与发展.当然他们也有相同之处:
1.它们的语法和 C 语言都很相似;
2.它们都是面向对象的(虽然实现的方式略有不同);
3.JavaScript 在设计时参照了 Java 的命名规则;
不同之处在于:
1.JavaScript 是动态类型语言,而 Java 是静态类型语言;
2.JavaScript 是弱类型的,Java 属于强类型;
3.JavaScript 的面向对象是基于原型的(prototype-based)实现的,Java 是基于类(class-based)的. 4.JavaScript 除了长得和 Java 比较像之外,语言风格相去甚远。JavaScript 在设计时所参考的对象不包括 Java,而包括了像 Self 和 Scheme 这样的语言。
ECMAScript是JavaScript的规格,JavaScript是ECMAScript的实现。
JavaScript 由 Brendan Eich 于 1995 年发明,并于 1997 年成为 ECMA 标准。
ECMAScript 是该语言的官方名称。ECMAScript 通常缩写为 ES。
从 2015 年起,ECMAScript 按年命名(ECMAScript 2015)。
所有浏览器都完全支持 ECMAScript 3,所有现代浏览器都完全支持 ECMAScript 5。
基本和Java相似,都是;号结尾,大括号包裹语句块,算术运算符,赋值运算符,逻辑运算符,比较运算符,条件运算符,按位操作符都基本一样.
//:单行注释
/**/:多行注释
ps:和java一样.哈哈
不管是命名变量还是使用关键字的时候,区分大小写,变量名、函数等比较敏感.
通过HTML标记的触发事件属性实现,比如通过onclick事件直接调用JavaScript代码。在HTML中有很多这样的事件属性,通常都是配合JavaScript这样的前端脚本语言来使用,示例代码如下:
本地定义:
通过下面的
<Script>Script>
标记嵌入JavaScript,这是最常用也是最简便的一种引用方式,可以在HTML代码的任何位置嵌入
<head>
<script type="text/javascript">
document.write("Hello world!");
script>head>
远程定义:
通过引用HTML文件的方式加载JavaScript文件,这种方式可以使HTML代码更简洁,方便代码复用。
<head>
<script type="text/javascript" src="路径"> script>
head>
可以放在标签内,如果是非关键javascript代码可以放在后面.
javaScript只有一个数字类型,它在内部被表示为64位的浮点数,类似于java的double浮点类型,在javaScript中1和1.0的值相同,在java等语言中是不等价的,是两种数字类型。
实例为:
var count =10;
var price = 10.0;
var price =10.00;
在javaScript中所有字符是16位的,使用的是Unicode字符编码集。可以使用单引号或双引号来表示,它可能包含0个或多个字符。
在javaScript中没有字符类型的概念,若需要转义字符则使用/(斜杠)+符号或相关的字母来表示。
实例为:
var longString ="Here's the story , of a man " + " named Brady.";
布尔(逻辑)只能有两个值:true或者false.
实例:
var x = true;
var y = false;
js中,任何引用数据类型都属于object,两种创建对象方式:1,使用new关键字.2,用字面量创建空对象.
ps:访问对象的属性值:
方式一:对象名.属性名
方式二:对象名[ “属性名” ]
Array:
javascript的数组可以存放任意类型的数据;
javascript数组的大小可以随着数据的大小而改变;
javascript数组是特殊的对象object;
javascript数组中元素存放的下标只能是整数数字。如果是其他类型,只会被当作对象来处理。
1)数组定义方式:
方式一:
var array = new Array( );
方式二:
var array = [ ];
2)数组的数据存放和获取:
存放:array.name=“zhangsan”;
获取:
alert(array[0]);
3)数组操作:
a、往数组的首尾存入新的元素:
头部添加:array.unshift(“hello”);
尾部添加:array.push(“world”);
b、删除数组的首尾元素:
头部删除:array.shift( );
尾部删除:array.pop( );
Function:
Function实际上是对象,与其他引用类型一样具有属性和方法。Function可以通过三种方法进行定义,分别是函数声明语法定义,函数表达式定义和Function构造函数定义。
1.函数声明语法定义
function functionName(value1...){
//函数体
}
2.函数表达式定义
var functionName = function(value1...){
//函数体
}
3.Function构造函数定义
通过Function构造函数创建函数,可向构造函数中传入任意数量的参数,但值得注意的是传入的最后一个参数会作为函数体,而其他参数则作为参数传入函数中。用该方法去定义函数是不推荐使用的,因为该语法会导致解析两次代码,第一次解析常规ECMAScript代码,第二次解析传入构造函数的字符串,影响性能。
var functionName = new Function("value",...,"函数体");
**注:**函数是引入值类型,所以函数名仅仅是指向函数的指针,当使用函数名去赋值给另一个变量名时,仅仅复制的是一个指针。即在下列a设置为null时,仅将a存的指针消除而已,不会影响b调用函数。
var a = b = function(value1){
return value1;
}
a = null;
b(1);
RegExp:
RegExp 是正则表达式的缩写。
当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置,以及要检索的字符类型,等等。
定义RegExp: RegExp 对象用于存储检索模式,通过 new 关键词来定义 RegExp 对象。
var patt1=new RegExp("e");
RegExp对象的方法(三种):test()、exec() 以及 compile()
Date:
Data对象用于处理日期和时间,创建Data对象的语法:
var myDate=new Date()
ps:Date 对象会自动把当前日期和时间保存为其初始值。
Data对象的属性:
constructor :返回对创建此对象的 Date 函数的引用。
prototype : 向对象添加属性和方法。
JSON:
JSON 英文全称 JavaScript Object Notation,是一种轻量级的数据交换格式,是独立的语言,易于理解,用于存储和传输数据的格式,用于服务端向网页传递数据.
ps : JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JOSN实例:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON语法规则:
1.数据为 键/值 对。
2.数据由逗号分隔。
3.大括号保存对象
4.方括号保存数组
JSON 格式化后为 JavaScript 对象:
JSON 格式在语法上与创建 JavaScript 对象代码是相同的,由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
JSON 字符串转换为 JavaScript 对象:
首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后,在页面中使用新的 JavaScript 对象:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相关的函数:JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
undefined是一个特殊值,那些没被变量初始化的变量都有一个初始值,即undefined,表示这个变量等待被赋值.
var person =null;
console.log(person=== null);
用来初始化一个变量,这个变量可能赋值为一个对象。
用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
当函数的参数期望是对象时,用作参数传入。
当函数的返回值期望是对象时,用作返回值传出
不要使用null来检测是否传入了某个参数。
不要使用null来检测一个未初始化的变量
作返回值传出的实例为:
function getperson () {
if (condition){
return new person ("Nicholas");
} else {
return null;
}
}
用来初始化一个变量,这个变量可能赋值为一个对象的实例为:
var person = getPerson ();
if(person != null ){
dosomething();
}
ps.最好把null理解为占位符
和java中的类似,不需要声明什么类型,都用var声明
例如:
var person = getPerson ();
var age = 18;
有if语句,有if-else语句,有if-else-if语句,switch-case语句
跟java类似
常规for循环:
for(var i = 0; i < 10; i++) {
// 循环10次
}
for in
for(var idx in arr) {
// console.log(arr[idx]);
}
1,定义function,使用new关键字创建对象
2,{}的方式
1,window:
是所有其它对象的“祖先”,对一个window对象的引用方法取决于它与当前位置的关系。这个对象最常用的地方在于从一个窗口中新开一个窗口。基本语法如下:
[new window=]window.open(url,windowName[,windowPros]);
2,document:
document对象包含当前文档的信息,例如:标题、背景、颜色、表格等。
方法:(1) 通过write()/writeln()方法在浏览器中显示内容。
(2) 获得当前文档中的元素、属性和节点信息(例如:通过“document.formName”来获得表示页面中的表单名称为fromName的表单对象)。
(3) getElementById()和getElementByTagName()。这两个方法会忽略文档的结构,可查找整个HTML文档中的任何元素(不论它们在文档中所处的位置,例如通过getElementByTagName()可以把文档中所有的
元素找到)
<html>
<head>
<script type="text/javascript">
function message() {
var label = document.getElementById("test")
label.innerText = "kobe bryant"
}
script>
head>
<body>
<input id="test" type="text" style="border-color:Red"/><br />
<input type="button" value="确定" onclick="message()"/>
body>
html>
cookie:
格式为::name=value
Cookie是什么?
借助document的cookie属性,Javascript程序就可
以实现与www服务器一样的cookie功能,即获取当前的
cookie信息和产生一个新的cookie。
cookie的工作原理和过程:
在浏览器中,有一个cookie存储区,这个cookie存储区可以是硬
盘上的一个目录,也可以是浏览器进程中的一片内存,它里面存储
着各个服务器发送过来的状态信息。当浏览器每次访问某个服务器
的时候 ,它都会来检查是否存在与那个服务器相关的状态信息,
如果有,它就会将这些状态信息连同访问请求一起发给服务器。
3,screen:
作用:用于获取用户的屏幕信息。
语法:window.screen.属性
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽
ps:
1.单位以像素计。
window.screen 对象在编写时可以不使用 window 这个前缀
4,location:
作用:用于获取或设置窗体的URL,并且可以用于解析URL。
语法:location.[属性|方法]
location:对象属性:
hash:设置或返回从#号开始的URL
host:设置或返回主机名与当前URL的端口号
hostname:设置或返回当前URL的主机名
href:设置或返回完整的URL
pathname:设置或返回当前URL的路径部分
port:设置或返回当前URL的端口号
protocol设置或返回当前URL的协议
search:设置或返回从问号?还是得URL
location对象的方法:
assign() 加载新的文档
reload() 重新加载当前的文档
replace()用新的文档替换当前的文档
5,history:
作用:记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
ps:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
语法:
window.history.[属性|方法]
ps,window可以省略
history对象的属性:
length:返回浏览器历史列表中的URL数量
history对象的方法:
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个具体的页面
使用length属性,当前窗口的浏览历史总长度为
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
script>
1,常规方法:用function获取函数参数
2,通过内置arguments对象获取:
定义:函数在页面载入后或者之前就自行调用,无需借助其他函数或方法来启动;自己调用自己的函数:
//函数的自调用
//一次性函数
(function (){
``console.log("一次性");
})();
(function(win){
``var num=20;
``win.num=num;
})(window);
//把局部变量给父类就可以了
console.log(num);
jQuery对原生JS API进行了封装, 使用起来非常方便。 可以极大的提高我们的开发效率。
jQuery本质上就是一段普通的JavaScript代码, 通常使用引入外部JS的方式来使用jQuery
<script type="text/javascript" src="js/jquery.js"></script>
实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏所有 id=“test” 的元素
语法:
$(slector)
selector就是选择器表达式,语法基本和CSS选择器一致。
示例:
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
语法:
读取属性
$(selector).attr(attrName);
示例:
var href = $("a").attr("href");
var id = $("div").attr("id");
修改属性
$(selector).attr(attrName, "属性值");
示例:
var href = $("a").attr("href", "http://www.jd.com");
属性名不仅支持标准属性,还支持自定义属性
三个相同的方法来设置内容:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:
例子:
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
1 $("#div").addClass("divClass") //为id为div的对象追加样式divClass
2 $("#div").removeClass("divClass") //移除id为div的对象的class名为divClass的样式
3 $("#div").removeClass("divClass01 divClass02") //移除多个样式
4 $("#div").toggleClass("anotherClass") //重复切换anotherClass样式
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
实例:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery 拥有下面四种 fade 方法:
fadeIn() 语法:
$(selector).fadeIn(speed,callback);
fadeOut() 语法:
$(selector).fadeOut(speed,callback);
fadeToggle() 语法:
$(selector).fadeToggle(speed,callback);
fadeTo() 语法:
$(selector).fadeTo(speed,opacity,callback);
jQuery 拥有以下滑动方法:
slideDown() 语法
$(selector).slideDown(speed,callback);
slideUp() 语法:
$(selector).slideUp(speed,callback);
slideToggle() 语法:
$(selector).slideToggle(speed,callback);
animate() 方法:
语法:
$(selector).animate({params},speed,callback);
实例:
$("button").click(function(){
$("div").animate({left:'250px'});
});
方法:child()
定义和用法:children() 方法返回被选元素的所有直接子元素。
语法:
.children(selector)
参数:selector,字符串值,包含匹配元素的选择器表达式。
实例:找到类名为 “selected” 的所有 div 的子元素,并将其设置为蓝色:
$("div").children(".selected").css("color", "blue");
Ajax 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
下面是ajax的方法:
$.ajax() | 执行异步 AJAX 请求 |
---|---|
$.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 |
$.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
$.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.param() | 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串) |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
ajaxError() | 规定 AJAX 请求失败时运行的函数 |
ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
serialize() | 编码表单元素集为字符串以便提交 |
serializeArray() | 编码表单元素集为 names 和 values 的数组 |
EasyUI是一套前端框架。 它封装jQuery、Vue等前端JS框架,另外它还提供了一套完善的UI组件,比如窗体、表单、表格、树、进度条、手风琴菜单…
主要用来做一些公司内部使用的管理系统, 因为它提供了丰富的组件,可以直接拿来使用, 降低了后台系统开发的时间。但是它的UI不是特别美观,不建议用来做和客户交互的系统界面。
https://www.jeasyui.com/download/v18.php
<head>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js">script>
<script type="text/javascript" src="js/jquery.easyui.min.js">script>
<script src="js/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8">script>
head>
比如说:
使用datagrid组件需要添加:
或者创建标签时一并指定样式:
<table id="xxx" class="easyui-datagrid"></table>
比如:
EasyUI按钮
<div class="easyui-window" title="EasyUI窗口"></div>
5,调用EasyUI相关的JS方法来初始化,设置组件参数(可选)
语法:
// 无参数初始化一个组件
$(selector).组件();
//比如初始化一个日期选择控件
$("#calendar").calendar();
// 有参数初始化一个组件
$(selector).组件({参数key/value形式});
// 示例参见下面的数据表格使用方法
// 调用组件的某个方法
$(selector).组件('组件的方法名');
// 例如:调用窗口的打开方法
$("#win").window('open');
使用示例:
比如:
html代码:
js代码:
$("#dynamic_table").datagrid({
title: "学生信息-动态表格",
columns:[[
{field:'sname',title:'学生姓名',width:80,sortable:true},
{field:'age',title:'年龄',width:80,sortable:true},
{field:'gender', title:'性别'},
{field:'hobby', title:'爱好'}
]],
// url: 'xxxx.php', // 远程加载数据
// 加载本地数据
data: [
{sname:"好金磊", age: 23, gender: '男', hobby: "抽烟"},
{sname:"坏金磊", age: 25, gender: '男', hobby: "抽烟"},
{sname:"哈银磊", age: 27, gender: '男', hobby: "抽烟"},
{sname:"去银磊", age: 29, gender: '男', hobby: "抽烟"},
{sname:"ui金磊", age: 33, gender: '男', hobby: "抽烟"}
]
});
创建窗口:
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
详情参考EasyUI,上面很详细.
详情参考EasyUI,上面很详细.
详情参考EasyUI,上面很详细.
layUI与EasyUI类似,都封装了JQuery和一套完整的组件样式,是国产的一个前端框架,使用起来更容易上手
类似Bootstrap的栅格布局,支持响应式
一共两个文件
LayUI中的组件分为两种:
需要引入layUI相关的模块才能使用的
只添加class样式就可以使用的
表格组件,Tab标签页,面板,弹出层,树形组件,轮播图,导航菜单,表单相关组件,面包屑导航条
添加交互事件,操作DOM元素,操作样式,验证表单,异步请求Ajax,正则匹配
JSON:仅仅是一种数据格式,可以跨平台数据传输,速度快,
表现上:1.键值对方式,键必须加双引号.
2.值不能是方法函数,不能是undefined/NaN,
相互转换:
Json转换Js对象
1.JSON.parse(JsonStr);(不兼容IE7)
2.eval("("+jsonStr+")");(兼容所有浏览器,但不安全,会执行json里面的表达式?)
JavaScript:表示类的实例,不能传输.
表现上:1.键值对方式,键不加引号
2.值可以是函数、对象、字符串、数字、boolean 等
相互转换:js对象转换Json
JSON.stringify(jsObj);
按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
参数:code 必须,要调用的函数或要执行的代码串
millisec 必须,周期性执行或调用code之间的时间间隔,以毫秒计
lang 可选, JScript | VBScript | JavaScript
语法:
setInterval(code,millisec,lang)
实例:每 1000 毫秒执行 clock() 函数,也包含了停止执行的按钮
<html>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>
在指定的毫秒数后调用函数或计算表达式。
语法:
setTimeout(code,millisec,lang)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>
onchange: HTML元素已被改变
onclick: 用户点击了 HTML 元素
onblur: 元素失去焦点
onmouseout: 用户把鼠标移开 HTML 元素
onload: 浏览器已经完成页面加载
onkeydown: 用户按下键盘按键