文章目录
JS介绍、引入方式
一、什么是JavaScript？
- Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。
三个组成部分：- HTML：负责网页的基本结构（页面元素和内容）。
- CSS：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。
- JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
- JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
- JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
- ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。
ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。
二、JavaScript引入方式
方式一：
-
内部脚本：将JS代码定义在HTML页面中
-
JavaScript代码必须位于
<script></script>标签之间
-
在HTML文档中，可以在任意地方，放置任意数量的
<script>
-
一般会把脚本置于
<body>元素的底部，可改善显示快速
-
方式二：
-
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
-
外部JS文件中，只包含JS代码，不包含
<script>标签
-
<script>标签不能自闭合-
正确写法：
-
错误写法：
-
-
小结
- JS引入方式
- 内部脚本：将JS代码定义在html页面的
<script></script>中
建议：将<script></script>放在<body>的底部 - 外部脚本：将JS代码定义在js文件中，通过
<script></script>标签引入
注意：通过<script>标签引入外部js文件时，标签不可以自闭合
- 内部脚本：将JS代码定义在html页面的
JavaScirpt基础语法
一、JS书写语法
-
区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
-
注释：
-
单行注释：
// 注释内容
-
多行注释：
/*
注释内容1
注释内容2
*/
-
-
大括号表示代码块
二、JS输出语句
-
使用
window.alert()写入警告框
-
使用
document.write()写入HTML输出
-
使用
console.log()写入浏览器控制台
三、JS变量
1、var关键字
- JavaScript 中用
var关键字（variable的缩写）来声明变量。 - JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
- 变量名命名规则：
- 组成字符可以是任何字母、数字、下划线
_或 美元符合$ - 数字不能开头
- 建议使用驼峰命名
- 组成字符可以是任何字母、数字、下划线
-
var关键字定义变量的特点：- 作用域为全局
- 可以重复定义（但会覆盖前面同名变量的值）
2、let关键字
- ECMAScript 6 新增了
let关键字来定义变量。 - 它的用法类似于
var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
3、const关键字
- ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。
- 一旦声明，常量的值就不能改变。
小结
- 变量
- 特点：JS是弱类型语言，变量可以存放不同类型的值
- 声明：
① var：声明变量，全局作用域 / 函数作用域，允许重复声明
② let：声明变量，块级作用域，不允许重复声明
③ const：声明常量，一旦声明，常量的值不能改变
四、JS数据类型
-
JavaScript中分为：原始类型、引用类型
var a = 20; a = "张三"; -
number：数字（整数、小数、NaN(Not a Number: 不是一个数字)） -
string：字符串（单双引号皆可） -
boolean：布尔（true、false） -
null：对象为空 -
undefined：当声明的变量未初始化时，该变量的默认值是undefined -
**使用
typeof**运算符可以获取数据的类型：var a = 20; alert(typeof a);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-数据类型</title>
</head>
<body>
</body>
<script>
alert(typeof 10); //number
alert(typeof 3.14); //number
alert(typeof NaN); //number
alert(typeof ""); //string
alert(typeof "A"); //string
alert(typeof '我爱'); //string
alert(typeof true); //boolean
alert(typeof false); //boolean
/*
为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，
然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，
但从技术上来说，它仍然是原始值。
*/
alert(typeof null); //object
var a;
alert(typeof a); //undefined
</script>
</html>
五、JS运算符
- JS运算符与Java语言的运算符一样：
- 算术运算符：+ , - , * , / , % , ++ , –
- 赋值运算符：= , += , -= , *= , /= , %=
- 比较运算符：> , < , >= , <= , != , == ,
=== - 逻辑运算符：&& , || , !
- 三元运算符：条件表达式 ? true_value : false_value
- 唯独
===不一样：==：- 当比较时，会进行将两个值的数据类型转换成一样的，才进行比较
- 如果值一样，则返回true
===（全等）：- 当比较时，不会进行将两个值的数据类型转换成一样的
- 如果类型一样，值一样，则返回true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-运算符</title>
</head>
<body>
</body>
<script>
alert(20 == "20"); //true
alert(20 === "20"); //false
alert(20 === 20); //true
</script>
</html>
- 字符串类型转为数字：
- 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。
- 其他类型转为boolean：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-运算符</title>
</head>
<body>
</body>
<script>
alert(20 == "20"); //true
alert(20 === "20"); //false
alert(20 === 20); //true
// 类型转换 - 其他类型转换为数字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45")); //NaN
// 类型转换 - 其他类型转换为boolean
if(0){
alert("0 转换为false");
}
if(NaN){
alert("NaN 转换为false");
}
if(-1){
alert("除0和NaN为false，其他均转为true");
}
if(""){
alert("空字符串转换为false");
}
if(" "){
alert("空字符串为false，其他都是true");
}
if(null){
alert("null 转换为 false");
}
if(undefined){
alert("undefined 转换为 false");
}
</script>
</html>
六、JS流程控制语句
- JS的流程控制语句也与Java的一样，因此不细讲了，因为后面用到的时候会细讲：
- if…else if …else…
- switch
- for
- while
- do … while
函数
1、介绍
- 函数（方法）是被设计为执行特定任务的代码块。
2、定义
-
JavaScript函数通过
function关键字进行定义，语法为： -
方式1：
function functionName(参数1,参数2..){ //要执行的代码程序 } -
方式2：
var functionName = function(参数1,参数2..){ //要执行的代码程序 }
3、注意事项
- 形参参数不需要类型。因为JavaScript是弱类型语言。
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可。
- 函数调用可以传递任意个数的参数。
4、调用
-
格式：
函数名称(实际参数列表); //无返回值调用 var 变量名 = 函数名称(实际参数列表); //有返回值调用时需接收返回值
5、范例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
</body>
<script>
//定义函数-1
function add(a,b){
alert(a+b);
}
//定义函数-2
var minus = function(a,b){
return a-b;
}
//调用函数
add(15, 5); //20
var result = minus(15, 5); //10
alert(result);
</script>
</html>
JS对象
1、Array
定义、访问
-
JavaScript中
Array对象用于定义数组。 -
定义：
-
方式一
var 变量名 = new Array(元素列表);
-
方式二
var 变量名 = [元素列表];
-
-
访问：
arr[索引] = 值;
-
注意事项：
-
JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-Array</title>
</head>
<body>
</body>
<script>
//1.定义数组
//方式一
var arr1 = new Array(1,2,3,4);
//输出数组到浏览器控制台
console.log(arr1);
//方式二
var arr2 = [1,2,3,4];
console.log(arr2);
//2.访问
console.log(arr2[2]);
//3.特点：
//数组的长度是可变的
arr2[8] = 23;
console.log(arr2);
//可以存储任意类型的数据
arr2[9] = 'hello';
console.log(arr2);
</script>
</html>
属性、方法
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量 |
| 方法 | 描述 |
|---|---|
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度 |
| splice() | 从数组中删除元素 |
-
箭头函数(ES6)：
是用来简化函数定义语法的。
-
具体形式为：
(...) => {...} -
如果需要给箭头函数起名字：
var xxx = (...) => {...}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-Array</title>
</head>
<body>
</body>
<script>
//1.定义数组
//方式一
var arr1 = new Array(1,2,3,4);
//输出数组到浏览器控制台
console.log(arr1);
//方式二
var arr2 = [1,2,3,4];
console.log(arr2);
//2.访问
console.log(arr2[2]);
//3.特点：
//数组的长度是可变的
arr2[8] = 23;
console.log(arr2);
//可以存储任意类型的数据
arr2[9] = 'hello';
console.log(arr2);
//for循环：遍历数组中的每个元素
for (let i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
console.log('-----------------------------');
//forEach：遍历数组中的每个有值的元素，并调用一次传入的函数
arr2.forEach(function(e) {
console.log(e);
});
//箭头函数(ES6)：是用来简化函数定义语法的。
arr2.forEach(e => {
console.log(e);
});
console.log('-----------------------------');
//push()：将新元素添加到数组的末尾，并返回新的长度
arr2.push('a',60);
console.log(arr2);
//splice()：从数组中删除元素
arr2.splice(1,2);
console.log(arr2);
</script>
</html>
2、String
定义
-
方式一：
var 变量名 = new String("...");
-
方式二：
var 变量名 = "...";
属性
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串 |
| trim() | 去除字符串两边的空格 |
| substring() | 截取字符串中开始索引到结束索引之间的字符(包头不包尾) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-String</title>
</head>
<body>
</body>
<script>
//1.定义字符串
//方式一
var str1 = new String("Hello String!");
console.log(str1);
//方式二
var str = " Hello String! ";
console.log(str);
//2.属性：length
console.log(str.length);
//3.方法
//返回字符串中索引为2的字符
var a = str.charAt(2);
console.log(a);
//返回字符串中字符为'o'的索引位置
var b = str.indexOf('o');
console.log(b);
//去除字符串两边所有的空格
var newStr = str.trim();
console.log(newStr);
//截取字符串中2到7索引之间的字符
console.log(str.substring(2,7));
</script>
</html>
3、JSON
（1）JS自定义对象
定义
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
//函数原格式
函数名称: function(形参列表){...}
//函数简化格式
函数名称(形参列表){...}
};
调用
对象名.属性名;
对象名.函数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-自定义对象</title>
</head>
<body>
</body>
<script>
//自定义对象
var student = {
name: "张飞",
age: 38,
gender: "男",
eat: function(){
console.log(student.name + "正在用膳~");
},
//函数简化格式
pk() {
console.log(student.name + "正在与敌人打架~");
}
};
//调用对象属性
console.log("学生信息：姓名-" + student.name + "，年龄-" + student.age
+ "，性别-" + student.gender);
//调用对象函数
student.eat();
student.pk();
</script>
</html>
（2）介绍
-
概念：
JavaScriptObjectNotation，JavaScript对象标记法。 -
JSON是通过 JavaScript 对象标记法书写的文本。 -
JSON与JS对象的书写格式差不多，都是以键值对(key: value)的形式书写，只不过
JSON的键(key)是用双引号引起来的：-
JS对象
{ name: "张飞", age: 38, gender: "男" }; -
JSON
{ "name": "张飞", "age": 38, "gender": "男" };
-
（3）基础语法
定义
var 变量名 = '{"key1": value1, "key2": value2}';
- value的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
JS对象与JSON字符串类型互转
-
JSON字符串——>JS对象
var jsObject = JSON.parse(JSON字符串); -
JS对象——>JSON字符串
var jsonStr = JSON.stringify(JS对象);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-JSON</title>
</head>
<body>
</body>
<script>
//定义JSON
var userStr = '{"name": "张飞", "age": 38, "addr": ["广西", "广东"]}';
//JSON字符串——>JS对象
var jsObject = JSON.parse(userStr);
console.log(jsObject);
//JS对象——>JSON字符串
var jsonStr = JSON.stringify(jsObject);
console.log(jsonStr);
</script>
</html>
4、BOM
概念
-
BrowserObjectModel（浏览器对象模型），允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。 -
组成：
-
Windwo：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
-
Window
-
浏览器窗口对象。
-
获取：直接使用
window，其中window.可以省略：window.alert("Hello BOM Window"); alert("Hello BOM"); -
属性：
history：对History对象的只读引用。location：用于窗口或框架的Location对象。navigator：对Navigator对象的只读引用。
-
方法：
alert()：显示带有一段消息和一个确认按钮的警告框。confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout()：在指定的毫秒数后调用函数或计算表达式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-BOM</title>
</head>
<body>
</body>
<script>
//BOM：
//1.Window
//方法
//显示带有一段消息和一个确认按钮的警告框
window.alert("Hello BOM Window");
alert("Hello BOM");
//显示带有一个段消息以及确认按钮和取消按钮的对话框
//点击确定返回true，点击取消返回false
var flag = confirm("您确定要删除当前选中数据吗？");
alert(flag);
//定时器：延迟指定时间后执行一次
setTimeout(function(){
alert("JS!")
}, 3000);
//定时器：周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了" + i + "次");
}, 2000);
</script>
</html>
Location
-
地址栏对象
-
获取：使用
window.location获取，其中window.可以省略：window.location.属性; location.属性; -
属性：
href：设置或返回完整的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-BOM</title>
</head>
<body>
</body>
<script>
//BOM：
//2.Location
//获取地址栏对象
alert(location.href);
//设置地址并自动跳转
location.href = "http://www.baidu.com";
</script>
</html>
5、DOM
概念
-
DocumentObjectModel（文档对象模型）。 -
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
- Core DOM – 所有文档类型的标准模型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM – XML文档的标准模型
- HTML DOM – HTML文档的标准模型
- Image：
<img> - Button：
<input type='button'>
- Image：
- Core DOM – 所有文档类型的标准模型
对象获取
-
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
-
Document对象中提供了以下获取Element元素对象的函数：
-
根据
id获取，返回单个Element对象var h1 = document.getElementById('h1'); -
根据
标签名称获取，返回Element对象数组var divs = document.getElementsByTagName('div'); -
根据
name获取，返回Element对象数组var hobbys = document.getElementsByName('hobby'); -
根据
class属性值获取，返回Element对象数组var clss = document.getElementsByClassName('cls');
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-DOM</title>
</head>
<body>
<img id="img1" src="img/off.gif"> <br>
<div class="cls">B站大学</div> <br>
<div class="cls">等你来战！</div> <br>
<input type="checkbox" name="hobby"> 跑步
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 游泳
<script>
//1.根据id获取，返回单个Element对象
var img1 = document.getElementById('img1');
alert(img1);
//2.根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//3.根据name获取，返回Element对象数组
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const hobby = ins[i];
alert(hobby);
}
//4.根据class获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
</script>
</body>
</html>
案例
-
通过DOM操作，完成如下效果实现：
- 点亮灯泡
- 将所有的div标签的标签体内容后面加上：
very good（红色字体） - 使所有的复选框呈现被选中的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-DOM案例</title>
</head>
<body>
<img id="myImg" src="img/off.gif"> <br>
<div class="cls">B站大学</div> <br>
<div class="cls">等你来战！</div> <br>
<input type="checkbox" name="hobby"> 跑步
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 游泳
<script>
//1.点亮灯泡
var myImg = document.getElementById('myImg');
myImg.src = "img/on.gif";
//2.将所有的div标签体内容后面加上: very good(红色字体)
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 checkbox = ins[i];
checkbox.checked = true; //true: 选中状态
}
</script>
</body>
</html>
查询官方文档
-
点亮电灯：其实就是更新图片的src属性
-
将所有的div标签的标签体内容后面加上：
very good（红色字体）
-
使所有的复选框呈现被选中的状态
事件监听
1、概念
- 事件：HTML事件是发生在HTML元素上的“事情”。例如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘的按键
- 事件监听：JavaScript可以在事件被侦测到时
执行代码。
2、事件绑定
方式一
-
通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1"> <script> function on(){ alert('我被点击了!'); } </script>
方式二
-
通过DOM元素属性绑定
<input type="button" id="btn" value="按钮2"> <script> document.getElementById('btn').onclick=function(){ alert('我被点击了!'); } </script>
3、常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 键盘的某个键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件</title>
</head>
<!-- onload: 页面或图像被完成加载 -->
<body onload="load()">
<!-- 表单： -->
<!-- onsubmit: 当表单提交时触发该事件 -->
<form action="" style="text-align: center;" onsubmit="sfn()">
<!--
onblur: 元素失去焦点
onfocus: 元素获得焦点
onkeydown: 键盘的某个键被按下
-->
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<!-- onclick: 鼠标单击事件 -->
<input id="b2" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<!-- 表格： -->
<!--
onmouseover: 鼠标被移到元素之上
onmouseout: 鼠标从某元素移开
-->
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr>
<td>001</td>
<td>关羽</td>
<td>87</td>
<td>良好</td>
</tr>
<tr>
<td>002</td>
<td>张飞</td>
<td>99</td>
<td>优秀</td>
</tr>
</table>
<script>
// 事件监听：
// 页面加载完成
function load(){
console.log("页面加载完成~");
}
// 元素失去焦点
function bfn(){
console.log("失去焦点~");
}
// 元素获得焦点
function ffn(){
console.log("获得焦点~");
}
// 键盘的某个键被按下
function kfn(){
console.log("键盘的键被按下了!");
}
// 鼠标单击事件
function fn1(){
console.log("单击事件按钮被点击了!");
}
// 鼠标被移到某元素之上
function over(){
console.log("鼠标移入了~");
}
// 鼠标从某元素移开
function out(){
console.log("鼠标移出了~");
}
// 当表单提交时触发
function sfn(){
//为啥不用console.log()？因为表单提交后，页面都会自动刷新
// console.log("表单提交成功！！");
alert("表单提交成功！！");
}
</script>
</body>
</html>
4、案例
-
通过事件监听及DOM操作，完成如下效果实现：
① 点击 “点亮” 按钮则灯泡亮起来，点击 “熄灭” 按钮则灯泡熄灭。
② 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
③点击 “全选” 按钮使所有的复选框呈现被选中的状态；点击 “反选” 按钮使所有的复选框呈现取消勾选的状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-案例</title>
</head>
<body onload="load()">
<!-- 灯泡 -->
<img id="myImg" src="img/off.gif"> <br>
<!-- 点亮、熄灭按钮 -->
<input id="lighten" type="button" value="点亮">
<input id="dead" type="button" value="熄灭">
<br><br>
<!-- 输入框 -->
<input id="name" type="text" value="ITCAST" onfocus="lower()" onblur="upper()">
<br><br>
<!-- 复选框 -->
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<!-- 全选、反选按钮 -->
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="反选" onclick="reverseSelect()">
</body>
<!-- 事件监听： -->
<script>
//页面加载完成
function load(){
console.log("页面加载完成~");
}
//点击 “点亮” 按钮则灯泡亮起来
document.getElementById('lighten').onclick = function(){
console.log("点亮灯泡");
//根据id获取Element对象
var myImg = document.getElementById('myImg');
myImg.src = "img/on.gif";
}
//点击 “熄灭” 按钮则灯泡熄灭。
document.getElementById('dead').onclick = function(){
console.log("熄灭灯泡");
//根据id获取Element对象
var myImg = document.getElementById('myImg');
myImg.src = "img/off.gif";
}
//输入框鼠标聚焦后，展示小写；
function lower(){
console.log("输入框聚焦中..");
//根据id获取输入框元素对象
var input = document.getElementById('name');
//将name的value值转为小写
input.value = input.value.toLowerCase();
}
//输入框鼠标离焦后，展示大写。
function upper(){
console.log("输入框已离焦!");
//根据id获取输入框元素对象
var input = document.getElementById('name');
//将name的value值转为大写
input.value = input.value.toUpperCase();
}
//点击 “全选” 按钮使所有的复选框呈现被选中的状态；
function selectAll(){
console.log("全选按钮被点击了");
//根据name属性值获取复选框元素对象
var hobbys = document.getElementsByName('hobby');
for (let i = 0; i < hobbys.length; i++) {
const hobby = hobbys[i];
hobby.checked = true; //true: 选中状态
}
}
//点击 “反选” 按钮使所有的复选框呈现取消勾选的状态。
function reverseSelect(){
console.log("反选按钮被点击了");
//根据name属性值获取复选框元素对象
var hobbys = document.getElementsByName('hobby');
for (let i = 0; i < hobbys.length; i++) {
const hobby = hobbys[i];
hobby.checked = false; //false: 未选中状态
}
}
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
