变量
本质
程序在内存中申请的一块用来存放数据的小空间
基本函数:
//prompt('附带文本提示') 弹出输入框
//输出字符:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。//document.write("字符");
- 使用 innerHTML 写入到 HTML 元素。 解析HTML标签
- 使用innerText写入到文本中 不解析HTML标签
- 使用 console.log() 写入到浏览器的控制台。//console.log(变量);
函数(特别的):
间歇器函数:
- setInterval("执行操作",时间); 表示每隔时间(单位为毫秒)执行一次操作,其中,执行操作要用引号括起来
- setTimeOut("执行操作",时间); 表示隔时间(单位为毫秒,一次性)执行操作,其中,执行操作要用引号括起来
执行操作有两种:
- setInterval("函数名()",时间)
- setInterval(函数名,时间)
引用方式:
1. 行内式
<input type="button" value=" 值 " οnclick="alert('弹出内容')" >
(其中onclick绑定一个事件 鼠标点击时,alert()是js内置的弹出警示框的方法)
2. 内嵌式
<script>
alert('内嵌式 ');
</script>
(在script标签内部编写js代码即可)
3. 外链式
<script src= " js文件的地址 " ></script>
(注意:使用外链式引入 js 时,不可以再向 引入js文件的那个 script 标签中再写 js 代码;但在其他的script标签中写js代码是完全可以的!)
属性:
属性 | 说明 | 语法格式 |
language | 设置使用的脚本语言及版本 | language="JavaScript1.5" 其中引号内的表示版本 |
src | 设置一个外部脚本文件的位置 | src="文件名.js" 指定外部文件的脚本位置 |
type | 设置所使用的脚本语言,此属性已代替language属性 | type="text/javascript" |
defer | 此属性表示当HTML文档加载完毕后再执行脚本语言 | defer 没有属性值 |
变量
命名规则:
由字母、下划线、$、或数字组成,并且第一个字母必须是字母、下划线或$,变量不能是保留字或者系统关键字。
变量的声明(所有变量的命名):
1.var 变量名 = 值 ;
缺点:
- 可以先使用后声明
- 可以重复声明
- 比如变量提升、全局变量、没有块级作用域等
2.let 变量名 = 值;
常量:
const 常量名 = 值;
声明时必须赋值
一般变量名是全大写表示
数据类型(基本数据类型:数字、字符串、布尔值、未定义值、空值;常见的引用数据类型为:对象):
注意:
1.用单引号括起来的字符不能含有单引号,双引号括起来的字符不能含有双引号,因为JavaScript分辨不清楚哪两个双引号是一对
2.数字如果被引号括起来了那么其为字符串,一般情况下不能进行运算
3.未定义值是该变量定义了没有赋值,此时,其输出结果为undefined
4.空值表示该值=null且为给该变量分配空间
5.数值型的特殊值:Infinity(超出了JavaScript能表示的数值最大值时,表示无穷大),NaN表示非数字
变量引用
模板字符串:反引号包含数据,输出时在要引用部分改为${变量名}即可
一般方法:直接使用加法原则
变量检测:
typeof 变量名
类型转换:
- 单+号:转换成数字型
- 类型(变量名)
运算符(与其他语言类似)
1.算数运算符:
加法:
- 数字+数字=数字 var num = 10 + 5 //num的值是15
- 字符串+字符串=字符串 var str = "hello" + "world" //str的值为“helloworld”
- 字符串+数字=字符串 var str = "今年是" + 2023 //str的值为“今年是2023”(这是一个字符串)
//因为被引号括起来的数字也是字符串,所以按以上第3种情况进行运算
自增运算符:
i++:
指的是使用之后再自增
++i:
指的是先自增再使用
自减运算符同上
2.赋值运算符:
运算符 | 展开式 |
a+=b | a=a+b |
a-=b | a=a-b |
a*=b | a=a*b |
a/=b | a=a/b |
a%=b | a=a%b |
3.比较运算符
4.逻辑运算符
5.条件运算符
a = 条件 ? 表达式1:表达式2;
表示条件成立时执行a = 表达式1,不成立时执行表达式2
//分号为语句结束的标志
= 赋值
== 判断,只求值相等
=== 全等,包括数据类型和值
!= 判断,只求值不相等
!== 全不等,包括数据类型和值
类型转换:
1.字符串转换为数字
- Number() 可以将任何数字型字符串(引号内只有数字的字符串)转换成数字
- parselnt()和parseFloat() 准确的说,其可以提取首字母为数字的任意字符串中的数字,parselnt()只能提取整数部分,parseFloat()可以提取整数和小数部分,其作用原理为,判断第一个字符是否为数字或者正(+)负(-)号,如果不是,直接退出返回NaN(No a Number),(小数点也是非数字,parseFloat()中不能出现在第一位)
2.数字转换为字符串
- 与空字符串相加 (较多使用)
- toString() 用法为 变量.toString(); 表示将变量转换成字符串
转义字符:
转义字符 | 说明 | 转义字符 | 说明 |
\' | 英文单引号 | \b | 退格 |
\" | 英文双引号 | \t | 水平制表符,Tab空格 |
\n | 换行符 | \f | 换页 |
\v | 垂直制表符 | \r | 回车符 |
\\ | 反斜杠 | \OOO | 八进制整数,范围为000~777 |
\xHH | 十六进制整数,范围为00~FF | \uhhhh | 十六进制编码的Unicode字符 |
注意:
如果在document.write()中换行应该用<br/>
如果是在alert()中换行时,使用\n
//document.write()中的内容是显示在网页中的,alert()中的内容是显示在弹窗中的
JavaScript注释:
单行注释://注释内容
多行注释(在*号之间即可):/*注释内容*/
//HTML的注释:<--内容-->
//CSS注释:/*内容*/
流程控制
1.顺序结构
2.选择结构
if
- 单向选择: if(条件){语句}若条件成立,执行大括号内的语句
- 双向选择:if(条件){语句块1}else{语句块2}若条件成立,执行if后面大括号的语句块1,不成立执行else后的大括号内的语句块2
- 多向选择:if(条件){语句块1}else if(条件2){语句块2}···else{语句块n} 先判断第一个if条件,若条件成立,执行if后面大括号的语句块1,不成立判断第二个if后的语句,成立执行,不成立继续下一个if,如果没有if了,执行else后的大括号内的语句块n
switch
switch(判断值)
{
case 取值1:语句块1
break;
case 取值2:语句块2
break;
case 取值3:语句块3
break;
·
·
·
case 取值n:语句块n
break;
}
从上依次判断,哪个取值成立则执行哪个后面的语句块(判断值的形式为全等:===)
3.循环结构
1.while(){}
2.do{}while();
3.for(;;){}
异常处理语句:
try{
somestatements;
}catch(exception){
somestatements;
}finally{
somestatements;
}
//try 尝试执行代码关键字
//catch 捕捉异常的关键字
//finally 最终一定会被处理的区块关键字,该关键字和后面大括号中的语句可以省略
Error对象:
name:表示异常类型的字符串
message:实际的异常信息
throw语句:
语法:
throw new Error("somestatements");
示例:
if(num==0)
{
throw new Error("除数不能为0");
}
此时,catch中的异常信息可表示为exception.message
函数:
函数定义:function 变量名(参数1,参数2,···,参数n){···}
有无返回值都是以上定义的方法,但是如果有返回值,函数需要在函数体内最后一行加上return 返回值;
函数的形参可以规定值,意思是如果没有参数传入即执行,如:
function (a = 1){} 如果没有参数传入则a=1,如果有,则a=传入的参数 即默认值
函数调用:
- 直接调用(一般用于无返回值的函数)
- 表达式中调用(一般用于有返回值的函数)
- 在超链接中调用 语法为:<a href="javascript:函数名"></a>
- 在事件中调用
嵌套函数:
函数内部定义函数,但是该函数只能在内部使用
内置函数(内部定义好的函数):
函数 | 说明 |
parselnt() | 提取字符串中的数字,只提取整数 |
parseFloat() | 提取字符串中的数字,可以提取小数 |
isFinite() | 判断某一个数是否有一个有限数值 |
isNaN() | 判断一个数是否为NaN值 |
escape() | 对字符串进行编码 |
unescape() | 对字符串进行解码 |
eval() | 把一个字符串当做表达式来执行 |
encodeURI() | 对URI字符串进行编码 |
decodeURI() | 对已编码URI字符串进行解码 |
protostype属性(每个对象都具有的属性):
该属性可以向对象中添加属性或方法
语法格式:
object.prototype.name = value;(object 构造函数名,name 要添加的属性名或方法名,value 添加属性值或执行方法的函数
for ··· in···语句
作用:遍历对象的每一个属性
注意:输出时使用数组的格式;如:
for(var example in 对象名)
{
document.write("属性:"+example+"+object[example]+"<br>");
}
with函数:
with(对象名称){
}
//{}内可以直接引用对象的属性和方法
对象
说明:
调用对象属性时,用“.”
内置对象
1.字符串对象:String
字符串对象名.length 表示该字符串对象的字符串长度
字符串对象名.toLowerCase()或toLocalLowerCase() 表示将字符串中的大写字符转换成小写(后一种不常用)
字符串对象名.toUpperCase()或toLocalUpperCase() 表示将字符串中的小写字符转换成大写(后一种不常用)
字符串对象名.charAt(n) 获取第n+1个字符(因为第一个字符下标为0)
字符串对象名.substring(start, end) 表示截取[start,end)范围的字符串,如果end省略,表示从start截到结尾
字符串对象名.replace(原字符串,替换字符串) 表示替换所有原字符串为替换字符串
字符串对象名.replace(正则表达式,替换字符串) 正则表达式为/字符串/g,表示替换第一个正则表达式中的字符串
字符串对象名.split("分隔符") 表示用选中的分隔符为剪刀,将字符串分割为若干部分,若引号内无内容,则分割每一个字符
字符串对象名.indexOf(指定字符串) 表示找出指定字符串目标字符串首次出现的位置,返回值为其下标
字符串对象名.lastIndexOf(指定字符串) 表示找出指定字符串目标字符串最后一次出现的位置,返回值为其下标
indexOf(指定字符串)与lastIndexOf(指定字符串)在没有找到指定字符串时均返回-1
方法 | 说明 |
anchor() | 创建HTML锚 |
big() | 使用大号字体显示字符串 |
small() | 使用小号字体显示字符串 |
fontsize() | 使用指定的字体大小来显示字符串 |
bold() | 使用粗体来显示字符串 |
italics() | 使用斜体显示字符串 |
link() | 将字符串显示为链接 |
strike() | 使用删除线来显示字符串 |
blink() | 使用闪动字符串,此方法不支持IE游览器 |
fixed() | 以打字机文本显示字符串,相当于在字符串两边增加<tt>标签 |
fontcolor() | 以指定的颜色显示字符串 |
sub() | 将字符串显示为下标 |
sup() | 将字符串显示为下标 |
trim() | 去除字符串两边的空格 |
将一个字符串倒序:
split("")将字符串按特定的方式分割重组为一个数组
reverse()用于颠倒数组中元素的顺序
join("")将数组按特定的方式重组为一个字符串
2.数组对象:Array
创建:
var 数组名 = new Array(元素1,元素2,···,元素n); 完整形式
var 数组名 = [元素1,元素2,···,元素n]; 简写形式
//数组的下标从0开始
数组名.slice(start, end); 获取数组[start,end)部分,获取的为start开始到end-1的元素
数组名.unshift(新元素1,新元素2,···,新元素n); 表示在数组开头添加新元素
数组名.push(新元素1,新元素2,···,新元素n); 表示在数组结尾添加新元素
数组名.shift() 表示删除数组中一个元素
数组名.pop() 表示删除数组中最后一个元素
数组名.splice(start, length,element1,element2,···) 表示删除数组中start(下标,包括start)开始之后的length长度的元素,并在数组后添加element1,element2···
数组名.sort(函数名) 表示对数组中所有元素进行大小比较,其中,函数名为定义数组排序的函数名称
升序降序函数定义:
升序 | 降序 |
function up(a,b) { return a - b; } | function down(a,b) { return b - a; } |
数组名.reverse() 表示实现数组中所有元素的反向排列(即:颠倒数组元素的顺序)
数组名.map(回调函数); 返回值为新数组
实例:arr.map(function (ele,index) {retrun 字符串})
数组名.join("连接符"); 表示将数组中的元素通过连接符连接成字符串 若没有连接符,则默认为逗号
3.日期对象:Date
实例化(new):
- 得到当前的时间
-
- const date = new Date();
- 得到固定的时间
-
- const date = new Date("固定时间");
-
-
- 固定的时间格式可为:年-月-日 时: 分: 秒
- 固定的时间格式可为:年,月,日,时,分,秒
-
日期对象的方法:
方法 | 说明 |
getFullYear() | 获取年份,取值为四位数字 |
getMonth() | 获取月份,取值为0~11之间的整数,所以,在定义时,一般写为 var 变量名 = d.getMonth() + 1 即表示1~12之间的整数 |
getDate() | 获取日数,取值为1~31之间的整数 |
getDay() | 获取星期数,其返回值为0~6,0表示星期天,1~6分别表示星期一到星期六,可以先定义一个数组对应下标即可 |
getHours() | 获取小时数,取值为0~23 之间的整数 |
getMinutes() | 获取分钟数,取值为0~59 之间的整数 |
getSeconds() | 获取秒数,取值为0~59 之间的整数 |
toLocaleString() | 获取年月日时分秒 |
toLocaleDateString() | 获取年月日 |
toLocaleTimeString() | 获取时分秒 |
setFullYear(year,month,day) | 可以设置年(必选参数)、月、日 |
setMonth(month,day) | 可以设置月(必选参数)、日 |
setDate(day) | 可以设置日(必选参数) |
setHours(hour,min,sec,millisec) | 可以设置时(必选参数)、分、秒、毫秒 |
setMinutes(min,sec,millisec) | 可以设置分(必选参数)、秒、毫秒 |
setSeconds(sec,millisec) | 可以设置秒(必选参数)、毫秒 |
时间戳(毫秒数):
使用场景:
计算倒计时的效果,需要借助时间戳来完成
算法:
- 将来的时间戳-现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换成剩余的年月日时分秒就是倒计时的时间
转换(先转换成秒数,即初以1000)
天数 | parseInt(总秒数/60/60/24) |
小时 | parseInt(总秒数/60/60%24) |
分钟 | parseInt(总秒数/60%60) |
秒数 | parseInt(总秒数%60) |
方法:
- 使用getTime()方法(必须实例化)
如:const date = new Date();console.log(date.getTime());
- 简写: +new Date()(字符串转换成数字型)
如:console.log(+new Date());
- 使用Date.now()方法(无须实例化,但是只能得到当前的时间戳)
如:console.log(Date.now());
4.数学对象:Math
属性 | 说明 |
PI | 圆周率//度数可以写为:度数*Math.PI/180 |
LN2 | 2的自然对数 |
LN10 | 10的自然对数 |
LOG2E | 以2为底e的对数 |
LOG10E | 以10为底e的对数 |
SORT2 | 2的平方根 |
SORT1_2 | 2的平方根的倒数 |
方法 | 说明 |
max(a,b,c,···,n) | 返回一组数的最大值 |
min(a,b,c,···,n) | 返回一组数的最小值 |
sin(x) | 正弦 |
cos(x) | 余弦 |
tan(x) | 正切 |
asin(x) | 反正弦 |
acos(x) | 反余弦 |
atan(x) | 反正切 |
atan2(x) | 反正切(常用,因为其可以精确返回哪一个角,而atan(x)不行) |
floor(x) | 向下取整(返回小于或等于x最近的整数) |
ceil(x) | 向上取整(返回大于或等于x最近的整数) |
round(x) | 返回最接近x的整数 |
random() | 生成随机数 左闭右开 即[x,y) |
abs(x) | 返回x的绝对值 |
sqrt(x) | 返回x的平方根 |
log(x) | 返回x的自然对数(以e为底) |
pow(x,y) | 返回x的y次幂 |
exp(x) | 返回e的指数 |
random生成随机数的技巧(一般嵌套在取整的方法内,表示生成该范围内的整数)
- Math.random()*m 生成0~m的随机数 [0,m)
- Math.random()*m+n 生成n~m+n的随机数
- Math.random()*m-n 生成-n~m-n
- Math.random()*m-m 生成-m~0的随机数
5.文档对象
介绍:
代表游览器的窗口中的文档,该对象是Window对象的子对象,DOM默认对象是Window,所以Window对象中的方法和子对象不需要使用window来引用,通过Document对象可以访问HTML文档中包含的任何标记,并且可以动态的更改文档中的某些内容。
属性:
属性 | 说明 |
alinkColor | 链接文字被单击时的颜色,对应于<body>标记中的alink属性 |
all[] | 储存HTML标记的一个数组(该属性本身也是一个对象) |
bgColor | 文档的背景颜色,对应<body>标签中的bgcolor属性 |
fgColor | 文档的文本颜色(不包含超链接的文字),对应<body>标签中的text属性值 |
forms[] | 储存窗体对象的一个数组(该属性本身也是一个对象) |
images[] | 储存图像对象的一个数组(该属性本身也是一个对象) |
linkColor | 未被访问的链接的文字的颜色,对应<body>标签中的link属性 |
links[] | 储存link对象的一个数组(该属性本身也是一个对象) |
vlinkColor | 表示已访问的链接的文字颜色,对应<body>标签中vlink属性 |
title | 当前文档标题对象 |
body | 当前文档主体对象 |
readyState | 获取某个对象的当前状态 |
URL | 获取或设置URL |
文档对象的常用方法:
方法 | 说明 |
close | 关闭文档的输出流 |
open | 打开一个文档的输出流并接收write和writeln方法创建页面内容 |
write | 向文档写入HTML或JavaScript语句 |
writeln | 向文档写入HTML或JavaScript语句,并以换行结束 |
createElement | 创建一个HTML标记 |
//只有获取了该元素的元素节点才可以对其进行操作
方法 | 说明 |
document.getElementByld("id") | 通过id来选择元素节点(不需要在id前加#) |
document.getElementsByTagName("标签名") | 通过标签名来选择元素节点 |
document.getElementsByClassName("类名") | 通过类名来选择元素节点 |
querySelector()和querySelectorAll() | |
document.getElementsByName() | |
document.title和document.body |
6.表单对象
原理:
HTML文档中可能会包含多个<form>标签,JavaScript会为每一个<form>标签创建一个Form对象,并将这些对象存放于forms[]数组中,所以JavaScript总共有三种方式访问表单
方式:
- 通过编号进行访问,如document.forms[0] 访问第一个表单
- 通过document.formname(名称)访问,如document.formname1
- 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单
访问表单元素:
- 通过编号进行访问,如document.form1.elements[0] 访问第一个表单元素
- 通过document.form1.textname(名称)访问 访问form1中的名称为textname的
- 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单
表单对象的属性:
属性 | 说明 |
name | 返回或设置表单的名称 |
action | 返回或设置表单提交的URL |
method | 返回或设置表单提交的方式,可取值为get或post |
encoding | 返回或设置表单信息提交的编码方式 |
id | 返回或设置表单的id |
length | 返回表单对象中元素的个数 |
target | 返回或设置提交表单时目标窗口的打开方式 |
elements | 返回表单对象中的元素构成的表单数组,数组中的元素也是对象 |
表单对象的方法:
reset() 将所有的表单元素重置为初始值,相当于单击了重置按钮
submit() 提交表单数据,相当于单击了提交按钮
表单元素:
文本框:
属性 | 说明 |
id | 返回或设置文本框的id属性值 |
name | 返回文本框的名称 |
type | 返回文本框的类型 |
value | 返回或设置文本框内的文本,即文本框的值 |
rows | 返回或设置多行文本框的高度 |
cols | 返回或设置多行文本框的宽度 |
disabled | 返回或设置文本框是否被禁用,该属性值为true时禁用文本框,为false时启用文本框 |
方法 | 说明 |
blur() | 该方法用于将焦点从文本框中移开 |
focus() | 该焦点用于将焦点赋给文本框 |
click() | 该方法可以模拟文本框被鼠标单击 |
select() | 该方法可以选中文本框中的文字 |
按钮:
属性 | 说明 |
id | 返回或设置按钮的id属性值 |
name | 返回按钮的名称 |
type | 返回按钮的类型 |
value | 返回或设置显示在按钮上的值 |
disabled | 返回或设置按钮是否被禁用,该属性值为true时禁用按钮,为false时启用按钮 |
方法 | 说明 |
blur() | 该方法用于将焦点从按钮中移开 |
focus() | 该焦点用于将焦点赋给按钮 |
click() | 该方法可以模拟按钮被鼠标单击 |
单选按钮和复选框:
属性 | 说明 |
id | 返回或设置单选按钮或复选框的id属性值 |
name | 返回单选按钮或复选框的名称 |
type | 返回单选按钮或复选框的类型 |
value | 返回或设置单选按钮或复选框的值 |
length | 返回一组单选按钮或复选框中包含元素的个数 |
checked | 返回或设置一个单选按钮或复选框是否处于被选中状态,该属性值为true时,单选按钮或复选框处于被选中状态,该属性值为false时,单选按钮或复选框处于未被选中状态 |
disabled | 返回或设置单选按钮或复选框是否被禁用,该属性值为true时禁用单选按钮或复选框,为false时启用单选按钮或复选框 |
方法 | 说明 |
blur() | 该方法用于将焦点从单选按钮或复选框中移开 |
focus() | 该焦点用于将焦点赋给单选按钮或复选框 |
click() | 该方法可以模拟单选按钮或复选框被鼠标单击 |
下拉菜单:
属性 | 说明 |
id | 返回或设置下拉菜单的id属性值 |
name | 返回下拉菜单的名称 |
type | 返回下拉菜单的类型 |
value | 返回或设置下拉菜单的值 |
multiple | 该值设置为true时,下拉菜单中的选项会以列表的方式显示,此时可以进行多选,该值设置为false时,只能进行单选 |
length | 返回下拉菜单中的选项个数 |
options | 返回一个数组,数组中的元素为下拉菜单中的选项 |
selectedIndex | 返回或设置下拉菜单中当前选中的选项在options[]数组中的下标 |
disabled | 返回或设置下拉菜单是否被禁用,该属性值为true时禁用下拉菜单,为false时启用下拉菜单 |
方法 | 说明 |
blur() | 该方法用于将焦点从下拉菜单移开 |
focus() | 该焦点用于将焦点赋给下拉菜单 |
click() | 该方法可以模拟下拉菜单被鼠标单击 |
remove(i) | 该方法可以删除下拉菜单中的选项,其中,参数i为options[]数组的下标 |
Option对象
属性 | 说明 |
defaultSelected | 该属性值为一个布尔值,用于声明在创建Option对象时,该选项是否为默认选项 |
index | 返回当前Option对象在options[]数组中的下标 |
selected | 返回或设置当前Option对象是否被选中,返回值true时被选中,返回值为false时为未被选中状态 |
text | 返回或设置选项中的文字 |
value | 返回或设置选项中的值 |
图像对象:
介绍:
HTML文档中可能会包含多个<img>标签,JavaScript会为每一个<img>标签创建一个Image对象,并将这些对象存放于images[]数组中,所以JavaScript总共有三种方式访问图像
方式:
- 通过编号进行访问,如document.images[0] 访问第一个图像
- 通过document.images["name"]访问 访问名称为name的图像
- 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单
属性:
属性 | 说明 |
border | 返回或设置图片的边框宽度,以像素为单位 |
heigeht | 返回或设置图像高度,以像素为单位 |
hspace | 返回或设置图片左边和右边的文字与图片之间的距离,以像素为单位 |
lowsrc | 返回或设置替代图片的低分辨率图片的URL |
name | 返回或设置图片的名称 |
src | 返回或设置图片的URL |
vspace | 返回或设置图片上面和下面的文字与图片之间的距离,以像素为单位 |
width | 返回或设置图片的宽度,以像素为单位 |
alt | 返回或设置鼠标经过图片时显示的文字 |
complete | 判断图像是否完全被加载,如果完全被加载,返回true值 |
图片对象的事件:
事件 | 说明 |
abort | 当用户放弃加载图片时触发该事件 |
load | 成功加载图片时触发该事件 |
error | 在加载图片过程中产生错误时触发该事件 |
click | 在图片上单击鼠标时触发该事件 |
dblclick | 在图片上双击鼠标时触发该事件 |
mouseover | 当鼠标移动到图片上时触发该事件 |
mouseout | 当鼠标从图片上离开时触发该事件 |
mousedown | 在图片上按下鼠标键时触发该事件(还未松开时) |
mouseup | 在图片上释放鼠标键时触发该事件 |
mousemove | 在图片上移动鼠标时触发该事件 |