本文详细介绍了JavaScript的基础知识，包括内部和外部引入JS、事件处理、数据类型、运算符、循环语句（如while、for、do...while）、函数定义和内置函数的使用，以及数组的操作和DOM对象的获取与操作。此外，还讲解了不同类型的事件处理，如点击、焦点等。
编程基础—JavaScript—学习笔记
引入JS的方式
内部JS
内部 JS 需要一个特殊的标签：
<script>
// js代码
</script>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部引入JS</title>
<script>
alert("内部JS");
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
外部JS
需要一个单独的 JS 文件，然后通过Script标签引入进来
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部引入JS</title>
<script src="./js/index.js"></script>
</head>
<body>
</body>
</html>
事件
事件引入的方式，需要事件做支撑：单击事件，双击事件，获取焦点事件，失去焦点的事件…
事件通常是标签的一个属性，这个属性值就是 JS 的代码
事件通常是以on开头：onclick，ondoubleclick，onfocus，onbulr…
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件引入JS</title>
</head>
<body>
<button onclick="alert('这是一个按钮！')">点我</button>
<button onclick="window.location.href='http://www.baidu.com'">百度一下</button>
</body>
</html>
伪协议
伪协议通常用在a标签上面，通常将伪协议写在href属性中
通常伪协议是以：javascript: 开头
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪协议引入JS</title>
</head>
<body>
<a href="javascript:alert('伪协议方式')">点我</a>
<a href="javascript:void(0)">点我</a>
</body>
</html>
语法基础
标识符
就是一个名字。通常指的是:变量名，类名，对象名，函数名…
重点掌握命名规则:
- 数字，字母，下划线，$符号组成(尽量不要使用$)
- 不能以数字开头
- 不能包含空格
- 见名知意(英语基础好的:直接用单词，基础差的:用拼音也行)
- 驼峰命名法: userName, userAge, userInfo
关键字
JavaScript内置的一些特殊的名字，如：if, while, switch, break, continue…
如果在写代码的时候，取得名字报错了，这个名字多半就是一个关键字
关键字不用特意去记忆
数据类型
数值型：
- 字符串(String)： "我是一个好学生”， “哈哈哈”，“123”
- 数值型(Number)： 123, 456, 3.14
- 布尔型(Boolean)： true/false 只有两个值
- 空(Null)：什么都没有
- 未定义(Undefined)：通常是使用了未定义得变量会出现这个
引用类型：
- 对象(Object); dom对象
- 数组(Array)
- 函数(function)
为什么有数据类型得划分?
为了更好得利用内存空间。内存越大，程序得运行速度越快
变量
变量是可以变化得量。变量得作用是用来存储数据。
变量有三要素:
- 数据类型(JavaScript是弱数据类型语言，通常程序员不用关心数据类型)
- 变量名(标识符)
- 变量值(实际存放得值)
变量名得规范：
- 和标识符命名规范一致
- 不能使用关键字作为变量名
- var num= 1;
声明变量的语法
// 通常的写法
var 变量名 = 变量值;
var num1 = 100;
// 只声明不赋值
var num1, num2, num3;
// 声明并赋值
var num1 = 1, num2 = 2, num3 = 3;
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量的声明</title>
</head>
<body>
<script>
//声明一个变量
var userName = "阿坤";
var isActive = true ;
//同时声明多个变量
var num1, num2, num3;
//同时声明并赋值
var name1="貂蝉",name2="凯皇", name3="程咬 金";
alert(userName);
</script>
</body>
</html>
不同数据类型的定义
<script>
//字符串String:变量需要用单引号/双引号包裹起来
var str = "我今天很开心!";
//alert(str); //弹窗
//打印到控制台，通常用来做调试
//console.log(str);
//输出到页面
document.write(str);
</script>
<script>
//数值型Number
var num1 = 100;
var num2 = 3.14;
console.log(num1);
console.log(num2);
</script>
<script>
//布尔型Boolean: true/false
var bool1 = true;
var bool2 = false;
if (bool1){
console.log("哈哈哈,你对了!!");
}
</script>
<script>
//空Null
//JavaScript对数据类型要求不严格，弱数据类型语詞
var flag = null;
console.log(flag);
//赋值
flag = true;
console.log(flag);
flag = "你好漂亮!!";
console .log(flag)
</script>
<script>
//未定义undefined
//console.log(aaa);
//数组
var nums = [1,2,3,4,5];
console.log(nums);
</script>
<script>
//接收用户的输入
var name = prompt("请输 入你的名字:");
//将输入的名字输出到页面上
//document.write("你输入的名字是: "+name);
var pwd = prompt("请输入你的密码: ");
document.write("你输入的名字是: "+name+",输入密码是:"+pwd);
</script>
运算符
算数运算符
| 算数运算符 | 含义 |
|---|---|
| +，-，*，/ | 加减乘除 |
| % | 取模，求余数 |
| ++ | 自增1 |
| – | 自减1 |
赋值运算符
=：赋值，右边的值赋给左边
| 赋值运算符 | 含义 |
|---|---|
| += | 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; |
比较运算符
比较运算符运算的结果：true / false => boolean
| 比较运算符 | 含义 |
|---|---|
| == | 比较是否相等 |
| === | 比较值和类型 |
| != | 不等 |
| !== | 不等值不等类型 |
| >，<，>=，<= | 大于，小雨，大于等于，小于等于 |
布尔表达式 ? 返回值1 : 返回值2;
示例：
<script>
//三目运算
var age = 2;
var result = (age >= 2.5 ? "出道了" : "还得再练");
console.log(result);
</script>
逻辑运算符
| 逻辑运算符 | 含义 |
|---|---|
| && | 与：运算符两边的表达式必须都是true的时候结果才是true |
| || | 或：运算符两边的表达式只要有一边是true，结果就是true |
| ! | 非：true变成false，false变成true |
布尔表达式 && 布尔表达式
布尔表达式 || 布尔表达式
!布尔表达式
类型运算符
typeof：计算变量的类型
<script>
//判断变量的类型
var num = "100";
console.log(typeof num);
num = true;
console.log(typeof num);
num = null;
console.log(typeof num);
num = [1,2,3,4];
console.log(typeof num);
</script>
连接运算符
+：两边都是number类型， 这个+是算术的+；两边有任意一边是String，这个+就是连接
分支语句
程序是从上到下，从左到右依次执行。
分支语句可以改变程序的执行顺序。
if分支
语法:
//单分支
if(条件){
//分支体
当条件运行的结果是true的时候，执行分支体
}
//双分支
//当条件运行的结果是true的时候执行分支体1
//当条件运行的结果是false的时候执行分支体2
if(条件){
//分支体1
}else{
//分支体2
}
//多分支
//哪个分支条件 运行结果为true，就执行哪个分支
//注意:多分支最终只会执行一个分支
if(条件1){
//分支体1
}else if(条件2){
//分支体2
}else if(条件3){
//分支体3
}else if(条件n){
//分支体n
}else{
else分支体
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if分支</title>
<style>
.weekDay{
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 600;
background: red;
color: white;
margin: 0 auto;
}
</style>
</head>
<body>
<script>
//1.先获取当前日期
var date = new Date();
console.log(date);
//2.获取星期几
var weekDay = date.getDay();
console.log(weekDay);
//周日是0，周一到周六是1~6
var result;
if (weekDay === 0){
result = "星期天";
}else if (weekDay === 1){
result = "星期一";
}else if (weekDay === 2){
result = "星期二";
}else if (weekDay === 3){
result = "星期三";
}else if (weekDay === 4){
result = "星期四";
}else if (weekDay === 5){
result = "星期五";
}else if (weekDay === 6){
result = "星期六";
}else {
result = "日期有错! ";
}
document.write("<div class='weekDay'>"+result+"</div>")
</script>
</body>
</html>
switch分支
语法:
// 当变量的值等于对应case之后的变量值，这个时候就会进入对应的分支
// break不是必须的，可以省略
// break省略之后，代码可能就会执行多个分支
switch(变量){
case变量值1:
分支体1
break;
case变量值2:
分支体2
break;
......
case变量值n:
分支体n
break;
default:
默认分支体
break;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch分支</title>
</head>
<body>
<script>
var num1 = parseInt(prompt("请输入第一 个数字 : "));
var num2 = parseInt(prompt("请输 入第二个数字: "));
var ysf = prompt("请输入运算符: ");
var result;
switch (ysf) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
if (num2 != 0){
result = num1 / num2;
}else {
result = "0不能作为除数";
}
break;
default:
result = "运算符有错误! ";
break;
}
document.write(num1+ysf+num2+"="+result);
</script>
</body>
</html>
循环语句
循环语句也是可以改变程序顺序执行流程
循环就是在满足条件的情况下做一件重复/类似的事情
while循环
先验循环：先验证条件是否满足，再执行循环体
语法:
//条件表达式为true，执行循环体
//条件表达式为false，结束循环
while(条件表达式){
循环体
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while循环</title>
</head>
<body>
<script>
//求1+2+3+4+...+100的和
var num = 1;
var sum = 0;
while (num <= 100){
//sum=sum+num
sum += num;
num++;
}
document.write("1+2+3+4+. .. .+100="+sum)
</script>
</body>
</html>
do…while循环
后验循环：先执行一-循环体， 再验证条件
语法:
// 1.先执行循环体
// 2.再判断条件是否满足
// 3.满足条件再依次执行1,2步骤
do{
循环体
}while(条件表达式);
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>do...while循环</title>
</head>
<body>
<script>
var i = 6;
do{
i++;
}while (i <= 5);
document.write(i)
</script>
</body>
</html>
for循环
语法：
// 1.执行初始化
// 2.条件表达式
// 3.循环体
// 4.迭代表达式
// 5.重复的执行2，3，4步骤，直到步骤2结果为false循环就结束
for(初始化; 条件表达式; 迭代表达式){
循环体
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<script>
//求100以内，所有能被7整除的数字之和，并输出这些数字
var sum = 0;
for (var i=0; i<=100; i++){
if (i%7 == 0){
sum += i;
console.log(i);
}
}
console.log(sum);
</script>
</body>
</html>
双层循环
循环套循环
语法:
for(var i=0; i<= 10; i++){
for(var j=0; j<=10; j++){
循环体
}
}
结合99乘法表来理解：
有行和列:
有固定的9行
列是动态的，列数和行数是相等的
在双层循环中，什么表示行，什么表示列?
外层可以理解为行数，内层循环可以理解为列数
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双层循环</title>
</head>
<body>
<script>
document.write("<table border='1px' align='center'>");
for (var i=1; i<=9; i++){//行
document. write("<tr>");
// 为什么<=i? 列数和行数是相等 的
for(var j=1; j<=i; j++){//列
document. write("<td>"+(i+"*"+j+"="+(i*j))+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
循环的跳出
continue
结束本次循环，继续下一次循环
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>continue跳出循环</title>
</head>
<body>
<script>
for(var i=0; i<10; i++){
if (i === 5){
continue;
}
console.log(i);
}
</script>
</body>
</html>
break
直接结束循环
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break跳出循环</title>
</head>
<body>
<script>
// 双层循环的跳出需要 用到一个标记
flag:for (var i=0; i<10; i++){//行
for (var j=0; j<10; j++){//列
//如果j == 5的时候结束整个循环
if (j === 5){
break flag;
}
document. write(i+"~~"+j+ " ");
}
document.write("<br/>");
}
</script>
</body>
</html>
函数
自定义函数
定义的语法：
function函数名(形参1,形参2,...形参n){
函数体
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义函数</title>
</head>
<body>
<script>
/**
* 求和函数
* @param {Object} a
* @param {Object} b
*/
function sum(a, b) {
var c = a+b;
return c;
}
//调用
var s = sum(10,10);
alert(s);
var s2 = sum(5,6);
alert(s2);
</script>
</body>
</html>
函数的分类：
1.无参无返回值
function func1() {
alert("He11o World!!");
}
func1();
2.无参有返回值
function func2() {
return "无参有返回值 ";
}
alert(func2());
3.有参无返回值
//形参的名字:命名规则同标识符
function func3(a) {
document.write("<div class='show'>");
document.write(a);
document.write("</div>");
}
func3("有参无返回值")
4.有参有返回值
function func4(a,b,c) {
return a*b*c;
}
alert(func4(1,2,3));
5.匿名函数
内置函数
JavaScript自己已经封装好的函数/方法，我们直接拿来使用即可。
String内置函数
concat：连接字符串charAt：根据下标获取字符indexOf、lastIndexOf语法是一样的：返回某个指定的字符串值在字符串中首次出现的位置，但查找的顺序相反，indexOf是从前往后查，而lastIndexOf是从后往前查。substr和substring都是用来从某个“母字符串”中提取“子字符串’的函数，subString(start, end)（包前不包后）提取字符串中介于两个指定下标之间的子字符串，subStr(start, length)用于返回一个从指定位置开始的指定长度的子字符串。replace：替换字符串
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
// charAt(n)
//n是字符的下标
var str = "我喜欢打王者荣耀! ! ";
console.log(str.charAt(0));
// 求某个字符的位置( 下标)
// indexOf 求某个字符的下标
var index = str.indexOf("打");
console.log(index);
//如果找不到对应的字符,返回-1 ;
var msg = "fuck you!!!";
if (msg.indexOf("fuck") != -1) {
console.log("你的消息涉黄。。。。");
}
// lastIndexOf("字符")
// indexOf: 是从左到右去找这个字符串的位置
// lastIndex0f:是从右到左去找字符串的位置
str = "I love china! I love JavaScript too! I Love You!";
console.log(str.indexOf("I"));// 0
console.log(str.lastIndexOf("I"));
</script>
</body>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
str = "I love rose and jack!";
//求字符串的长度: length
console.log(str.length);
//截取字符串
//字符和下标有关系:通过下标来截取
//包前不包后
// substring(start, end) start, end都是下标
console.log(str.substring(0,1));
console.log(str.substring(0,3));
console.log(str.substring(7,11));
// substr(start, Length) start是 下标Length 是截取的长度
console.log(str.substr(7,4));
</script>
</body>
</html>
示例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
//我们上传文件的时候，需要对文件的后缀进行判断
//文件的名字是: jack.png rose. jack. jpeg xxx. lucy. tom. jpg
// 自定义一 个函数getExt 来获取文件名的后缀
/**
*获取文件名里面的后缀
* @param fileName
* @returns {string/null}
*/
function getExt(fileName) {
if (typeof fileName != 'string'){
console.log("参数类型不对!");
return null;
}
if (fileName.length === 0) {
console.log("参数不能为空字符串!");
return null ;
}
if (fileName.lastIndexOf(".") === -1){
console.log("文件名不正确! ");
return null ;
}
//求出 . 的位置
var index = fileName.lastIndexOf(".");
//截取
return fileName.substring(index + 1);
}
console.log(getExt("yyyy"));
</script>
</body>
</html>
示例4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
//字符串替换:
str="fuckfuckyou!";
console.log(str.replace("fuck", "***"));
//连接字符串: concat
str = "我";
console.log(str.concat("喜欢","JavaScript!"));
</script>
</body>
</html>
Date内置函数
主要用来计算时间
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
<style>
* {
margin: 0;
padding: 0;
}
.date-box {
width: 500px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: 600;
background-color: red;
color: white;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="date-box" id="date">
2022-01-06 11:11:11
</div>
<script>
/**
* 展示时间的函数
*/
function showDate(){
//先获取日期对象
var date = new Date();
//获取年
var year = date.getFullYear();
console.log(year);
//获取月份0~11，所以月份要加1
var month = date.getMonth();
console.log(month + 1);
//获取日
var day = date.getDate();
console.log(day);
//获取小时
var hour = date.getHours();
// 分钟
var min = date.getMinutes();
//秒
var sec = date.getSeconds();
var datestr = year+"-"+ bl(month+1)+"-"+day+" "+hour+":"+min+":"+sec;
console.log(datestr) ;
//先获取div的对象
var div = document.getElementById("date");
//再将日期字符串,放到div里面去
div.innerText = datestr;
}
/**
*时间补雾的函数
* @param num
* @returns {string/*}
*/
function bl(num) {
if (num < 10) {
return "0" + num;
}
return num;
}
showDate();
//定时器
setInterval(function () {
showDate();
}, 1000);
</script>
</body>
</html>
Math内置函数
- Math.ceil()：向上取整
- Math.floor()：向下取整
- Math.round()：四舍五入
- Math.random()：伪随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
//向上取整
var num=1.001;
console.log(Math.ceil(num));
//向下取整
num = 1.99999999;
console.log(Math.floor (num));
//四舍五人
num = 1.51111;
console.log(Math.round(num));
//随机数
//伪随机数
console.log(Math.random());
</script>
</body>
</html>
数组
数组是复杂的数据类型，可以同时存放多个值。
语法：
// 静态初始化的方式
// 只要看到中括号 => 数组
var arr = [1,2,3,4,5];
// 动态的方式
var arr1 = new Array(1,2,3,4,5);
数组的长度
数组的长度由数组的length提供
数组的下标
数组的每一个元素，都有一个对应的下标(索引)
这个下标是从0开始
下标的作用用来给数组赋值，获取数组中的元素
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
var arr = new Array(1,2,3,4,5);
console.log(arr);
//数组的长度
console.log(arr.length);
//获取数组中的元素
//通过下标来获取元素
console.log(arr[2]);
//通过下标来给数组中的元素赋值
arr[2] = 100;
console.log(arr);
</script>
</body>
</html>
数组的遍历
利用for循环来获取每一个元素
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置函数</title>
</head>
<body>
<script>
var arr = new Array(1,2,3,4,5)
// 遍历
for (var i = 0; i < arr.length; i++) {
// i相当于就是下标
console.log(arr[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
//增强for
for (index in arr){
console.log(arr[index]);
}
</script>
</body>
</html>
DOM对象
dom => document：文档对象 => 网页任何标签在浏览器上都是一个DOM对象
如何找DOM对象
主要掌握三种找对象的方式：
- 通过ID
- 通过ClassName
- 通过tagName
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
</head>
<body>
<div class="box">这是一个盒子1</div>
<div class="box">这是一个盒子2</div>
<div class="box1">这是一个盒子3</div>
<span>这是一个span1</span>
<span>这是一个span2</span>
<p id="p1" >我好开心啊,今天周五了!!</p>
<script>
//找对像
// 1.通过ID找对象, id是唯一的，所以只会找到一个唯一的对象
var p1 = document.getElementById("p1");
console.log(p1);
// 2.通过cLassName找对象，因为className可以重复，所以找到的对象一定是一个数组
var boxes = document.getElementsByClassName("box");
console.log(boxes);
var boxes1 = document.getElementsByClassName("box1");
console.log(boxes1);
//3.通过标签名字来找对象，标签名找到的也是-个数组
var span = document.getElementsByTagName("span");
console.log(span) ;
</script>
</body>
</html>
如何去操作对象
操作对象核心点就是操作属性
属性有两种:
1.标签自带属性
大部分情况都是直接Obj.属性名=“属性值"
class属性 => className
2.CSS属性
CSS属性会从中划线变成驼峰命名法: background-color => backgroundColor
CSS属性修改方式：Obj.style.CSS属性 =“值”
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
<style>
.box{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
}
.change{
width: 400px ;
background-color: blue ;
color: white ;
font-weight: 900;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">这是一个盒子1</div>
<div class="box">这是一个盒子2</div>
<button onclick="changeDiv();">改变</button>
<script>
// 2.通过cLassName找对象，因为className可以重复，所以找到的对象一定是一个数组
var boxes = document.getElementsByClassName("box");
console.log(boxes);
var boxes1 = document.getElementsByClassName("box1");
console.log(boxes1);
//当点击按钮的时候,改变div的样式
function changeDiv() {
//修改样式
boxes[0].className = "box change" ;
}
</script>
</body>
</html>
也可以修改对象里的文本
function changeDiv() {
//修改样式
boxes[0].className = "box change" ;
//修改内容
// innerText 修改普通文本
boxes[0].innerText = "<span>Hello JACK!</span>";
// innerHTML修改的是超文本，会解析标签
boxes[0].innerHTML = "<span>Hello JACK!</span>";
}
绑定事件有多种方式：
1.在标签上绑定
<button onclick="changeDiv();">改变</button>
2.在JS中绑定
// 1.找对象
var btn2 = document.getElementById("btn2");
// 2.给按钮绑定事件
btn2.onclick = function() {
changeDiv();
};
如何动态的去创建对象
网页上没有相关的对象，然后通过JS去动态的创建一个对象出来，并放在网页上。
相关方法：
1.创建对象
document.createElement("标签名");
2.追加对象 => 父级追加子级
parent.appendChild(child)
JS相关事件
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
#box {
min-width: 800px;
height: 200px;
background-color: red;
}
.small-box {
width: 200px;
height: 200px;
background-color: blue;
float: left;
margin-left: 2px;
}
</style>
</head>
<body>
<form action="#" >
<label>姓名: </label>
<input id="userName" type= "text" name="userName">
</form>
<script>
//当整个页面加载完成之后执行的方法
window.onload = function (){
//当我们在文本框中输入值的时候,将输入的值答应在控制台中
// 找对象
var userName = document.getElementById("userName");
//绑定按键抬起事件
userName.onkeyup = function () {
//获取输入框的值
var value = userName . value;
console.log(value);
};
//绑定获取焦点的事件.
userName.onfocus = function () {
console.log("获取焦点啦!")
};
//失去焦点的事件
userName.onblur = function () {
//对这个数据进行校验
var value = userName.value;
if (value.length === 0) {
alert("用户名不能为空! ")
}
};
};
</script>
</body>
</html>
| 鼠标、键盘事件 | 描述 |
|---|---|
| onclick | 点击鼠标时触发此事件 |
| ondblclick | 双击鼠标时触发此事件 |
| onmousedown | 按下鼠标时触发此事件 |
| onmouseup | 鼠标按下后又松开时触发此事件 |
| onmouseover | 当鼠标移动到某个元素上方时触发此事件 |
| onmousemove | 移动鼠标时触发此事件 |
| onmouseout | 当鼠标离开某个元素范围时触发此事件 |
| onkeypress | 当按下并松开键盘上的某个键时触发此事件 |
| onkeydown | 当按下键盘上的某个按键时触发此事件 |
| onkeyup | 当放开键盘上的某个按键时触发此事件 |
| 窗口事件 | 描述 |
|---|---|
| onabort | 图片在下载过程中被用户中断时触发此事件 |
| onbeforeunload | 当前页面的内容将要被改变时触发此事件 |
| onerror | 出现错误时触发此事件 |
| onload | 页面内容加载完成时触发此事件 |
| onmove | 当移动浏览器的窗口时触发此事件 |
| onresize | 当改变浏览器的窗口大小时触发此事件 |
| onscroll | 当滚动浏览器的滚动条时触发此事件 |
| onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 |
| oncontextmenu | 当弹出右键上下文菜单时触发此事件 |
| onunload | 改变当前页面时触发此事件 |
| 表单事件 | 描述 |
|---|---|
| onblur | 当前元素失去焦点时触发此事件 |
| onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 |
| onfocus | 当某个元素获得焦点时触发此事件 |
| onreset | 当点击表单中的重置按钮时触发此事件 |
| onsubmit | 当提交表单时触发此事件 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
