🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：JavaWeb开发
🌠 首发时间：2024年2月1日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
js介绍
- JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互
- JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，但是基础语法类似
- JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准
- ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)
- ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript 的标准的
js引入方式
JS 有两种引入方式
-
内部脚本：将 JS 代码定义在 HTML 页面中
- JavaScript 代码必须位于
<script></script>标签之间 - 在HTML文档中，可以在任意地方，放置任意数量的
<script> - 一般会把脚本置于
<body>元素的底部，可改善显示速度
- JavaScript 代码必须位于
-
外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中
- 外部 JS 文件中，只包含 JS 代码，不包含
<script>标签 <script>标签不能自闭合，自闭合就是<script src="js/demo.js"/>这种形式，末尾存在/
- 外部 JS 文件中，只包含 JS 代码，不包含
代码演示
01. JS-引入方式.html
<!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>
<!-- <script>
alert("Hello JS");//定义弹出框
</script> -->
</head>
<body>
<!-- 内部脚本 -->
<!-- <script>
alert("Hello JS");//定义弹出框
</script> -->
<!-- 外部脚本 -->
<script src="js/demo.js"></script>
</body>
</html>
<!-- <script>
alert("Hello JS");//定义弹出框
</script> -->
外部脚本需要在外部定义一个JS文件，内容如下
效果图
js基础语法
书写语法
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
-
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
-
大括号表示代码块
//判断 if(count == 3){ alert(count); }
JS 中的三种输出语句
- 使用
window.alert()写入警告框 - 使用
document.write()写入 HTML 输出 - 使用
console.log()写入浏览器控制台
代码演示
02. JS-基础语法-输出语句.html
<!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>
<script>
window.alert("Hello JS"); //弹出框
document.write("Hello JS"); //写入HTML页面
console.log("Hello JS"); //浏览器控制台
</script>
</body>
</html>
效果图
-
弹出框
-
写入 HTML 页面
-
写入浏览器控制台
变量
- JavaScript 中用
var关键字（variable 的缩写）来声明变量 - JavaScript 是一门弱类型语言，变量可以存放不同类型的值
- 变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
注意事项
- ECMAScript 6 新增了
let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明 - ECMAScript 6 新增了
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
代码演示
03. JS-基础语法-变量.html
<!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>
<script>
//定义变量
// var a = 0;
// a = "A";
// alert(a);
// var 定义的是一个全局变量， 还可以重复声明
// {
// var a = 0;
// var a = "A";
// }
// alert(a);
// let 定义的是一个局部变量， 不可以重复声明
// {
// let a = 0;
// a = "A";
// alert(a);
// }
//const 定义的是一个常量
const pi = 3.14;
//pi = 3.15;
alert(pi);
</script>
</body>
</html>
数据类型、运算符、流程控制语句
数据类型
JavaScript中分为：原始类型和引用类型
原始类型
- number：数字（整数、小数、NaN (Not a Number)）
- string：字符串，单双引皆可
- boolean：布尔，true 或 false
- null：对象为空
- undefined：当声明的变量未初始化时，该变量的默认值是 undefined
注意：使用 typeof 运算符可以获取变量的数据类型
运算符
- 算术运算符：+ , - , * , / , % , ++ , –
- 赋值运算符：= , += , -= , *= , /= , %=
- 比较运算符：> , < , >= , <= , != , == , ===
- 逻辑运算符：&& , || , !
- 三元运算符：条件表达式 ? true_value: false_value
== 与 === 的区别
== 会进行类型转换，=== 不会进行类型转换
类型转换
- 字符串类型转为数字：
- 将字符串字面值转为数字。 如果字面值不是数字，则转为NaN
- 其他类型转为boolean：
- Number：0 和 NaN 为 false，其他均转为 true
- String：空字符串为 false，其他均转为 true
- Null 和 undefined ：均转为false
流程控制语句
- if…else if …else…
- switch
- for
- while
- do … while
代码演示
04. JS-基础语法-数据类型.html
<!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 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>
05. JS-基础语法-运算符.html
<!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 age = 20;
// var _age = "20";
// var $age = 20;
// alert(age == _age); //true
// alert(age === _age); //false
// alert(age === $age); //true
// 类型转换 - 其他类型转为数字
// alert(parseInt("12")); //12
// alert(parseInt("1222A45")); //1222
// alert(parseInt("A45")); //NaN
// if(0){
// alert("If");
// }
// 类型转换 - 其他类型转为boolean
// if(0){ //false
// alert("0 转换为false");
// }
// if(NaN){ //false
// alert("NaN 转换为false");
// }
// if(-1){ //true
// alert("除0和NaN其他数字都转为 true");
// }
// if(""){ //false
// alert("空字符串为 false, 其他都是true");
// }
// if(null){ //false
// alert("null 转化为false");
// }
// if(undefined){ //false
// alert("undefined 转化为false");
// }
/*
false：
0 NaN
""
null
undefined
*/
</script>
</html>
js函数
-
介绍：函数（方法）是被设计为执行特定任务的代码块
-
定义：JavaScript 函数通过 function 关键字进行定义，语法为：
function functionName(参数1,参数2..){ //要执行的代码 } -
示例
function add(a , b){ return a + b; } -
注意：
- 形式参数不需要类型，因为 JavaScript 是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用 return 返回即可
- 调用：函数名称(实际参数列表)
函数的另一种定义方式
- 语法
var functionName = function (参数1,参数2..){ //要执行的代码 } - 示例
var add = function(a , b){ return a + b; }
注意：JS中，函数调用可以传递任意个数的参数。
代码演示
06. JS-函数.html
<!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){
// return a + b;
// }
//定义函数方式2
var add = function (a, b) {
return a + b;
}
//函数调用
var result = add(10, 20);
alert(result);
</script>
</html>
js对象
Array
-
JavaScript 中 Array 对象用于定义数组
-
定义：
var 变量名 = new Array(元素列表); //方式一var 变量名 = [ 元素列表 ]; //方式二 -
访问：
arr[ 索引 ] = 值; -
注意：JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
-
属性
-
方法
-
箭头函数 (ES6)：是用来简化函数定义语法的。具体形式为:
(…) => { … }，如果需要给箭头函数起名字：var xxx = (…) => { … }，可以用来简化 forEach() 遍历数组 -
代码演示
07. JS-对象-Array.html
<!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> //定义数组 // 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[10]); // console.log(arr[9]); // console.log(arr[8]); // 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); console.log(arr); </script> </html>
String
-
String字符串对象创建方式有两种：
var 变量名 = new String("…") ; //方式一var 变量名 = "…" ; //方式二 -
属性
-
方法
-
代码演示
08. JS-对象-String.html
<!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> //创建字符串对象 //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> -
效果图
JSON
在学习 JSON 之前，我们需要了解一下 JavaScript 的自定义对象
JavaScript自定义对象
- 定义格式：
- 调用格式：
JSON
- 概念：JavaScript Object Notation，JavaScript对象标记法
- JSON 是通过 JavaScript 对象标记法书写的文本
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
JSON基础语法
-
定义：
-
value的数据类型：
-
示例
-
将JSON字符串转为JS对象
-
将JS对象转为JSON字符串
代码演示
09. JS-对象-JSON.html
<!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 jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
//将json字符串转为js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);
//将js对象-转为json字符串
alert(JSON.stringify(obj));
</script>
</html>
效果图
BOM
- 概念：Browser Object Model，浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象
- 组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
对于 Java 开发人员来说，我们只需要了解 Window 和 Location 两个对象即可
Window
- 介绍：浏览器窗口对象
- 获取：直接使用window，其中 window. 可以省略
- 属性
- history：对 History 对象的只读引用。请参阅 History 对象
- location：用于窗口或框架的 Location 对象。请参阅 Location 对象
- navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象
- 方法
- alert()：显示带有一段消息和一个确认按钮的警告框
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
- setTimeout()：在指定的毫秒数后调用函数或计算表达式
Location
-
介绍：地址栏对象
-
获取：使用 window.location 获取，其中 window. 可以省略
-
属性：
- href：设置或返回完整的URL
-
设置属性的方法：
location.href = "https://www.itcast.cn";
代码演示
10. JS-对象-BOM.html
<!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>
// alert("Hello BOM Window");
// 方法
// confirm - 对话框，有返回值 -- 确认返回值: true , 取消返回值: false
// var flag = confirm("您确认删除该记录吗?");
//定时器 - setInterval -- 周期性的执行某一个函数
// var i = 0;
// setInterval(function () {
// i++;
// console.log("定时器执行了" + i + "次");
// }, 2000);
//定时器 - setTimeout -- 延迟指定时间执行一次
// setTimeout(function () {
// alert("JS");
// }, 3000);
//location
alert(location.href);
location.href = "https://www.baidu.com";
</script>
</html>
效果图
-
对话框
-
定时器
-
获取当前 href
-
将 href 设置完，会自动跳转到对应的网页：
DOM
- 概念：Document Object Model ，文档对象模型
- DOM 可以将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象，每个标签都可以封装为一个元素对象
- Attribute：属性对象，标签里面的属性可以封装为属性对象
- Text：文本对象
- Comment：注释对象
- JavaScript 通过DOM，就能够对 HTML（超文本标记语言）进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
这里，我们准备了一个简单的程序，可以更加直观地感受 DOM 的作用：
11. JS-对象-DOM-演示.html
<!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>
<div style="font-size: 30px; text-align: center;" id="tb1">课程表</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="b1" 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 fn1() {
document.getElementById('tb1').innerHTML = "学员成绩表";
}
function fn2() {
document.getElementById('tb1').style = "font-size: 30px; text-align: center; color: red;"
}
function fn3() {
var trs = document.getElementsByClassName('data');
trs[trs.length - 1].remove();
}
</script>
</html>
可以自己运行并点击相应的按钮感受一下
DOM 的组成
DOM是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：
- Core DOM
→
\rightarrow
→ 所有文档类型的标准模型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM → \rightarrow → XML 文档的标准模型
- HTML DOM
→
\rightarrow
→ HTML 文档的标准模型
- Image：
<img> - Button ：
<input type='button'> - 点击此处可以查看 HTML 所有对象
- Image：
通过 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');
-
获取元素对象
12. JS-对象-DOM-获取元素.html
<!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="h1" src="img/off.gif"> <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 获取元素-根据标签获取 - div
// 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 divs = document.getElementsByClassName('cls');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//2. 查询参考手册, 属性、方法
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "读书破万卷";
</script>
</html>
效果图如下：
DOM 案例
通过DOM操作，完成如下效果实现
- 点亮灯泡
- 将所有的div标签的标签体内容后面加上：very good
- 使所有的复选框呈现被选中的状态
完整代码如下：
13. JS-对象-DOM-案例.html
<!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="h1" src="img/off.gif"> <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 = "img/on.gif";
//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>
效果图如下：
js事件监听
事件监听
- 事件：HTML事件是发生在HTML元素上的 “事情”，比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听：JavaScript 可以在事件被侦测到时执行代码
事件绑定
方式一：通过 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>
常见事件
案例
通过事件监听及 DOM 操作，完成如下效果实现：
- 点击 “点亮” 按钮点亮灯泡，点击 “熄灭” 按钮熄灭灯泡
- 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写
- 点击 “全选” 按钮使所有的复选框呈现被选中的状态，点击 “反选” 按钮使所有的复选框呈现取消勾选的状态
代码演示
14. JS-事件-案例.html
<!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>
<img id="light" src="img/off.gif"> <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br> <br>
<input type="text" id="name" 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="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
function on() {
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/on.gif";
}
function off() {
//a. 获取img元素对象
var img = document.getElementById("light");
//b. 设置src属性
img.src = "img/off.gif";
}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower() {//小写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为小写
input.value = input.value.toLowerCase();
}
function upper() {//大写
//a. 获取输入框元素对象
var input = document.getElementById("name");
//b. 将值转为大写
input.value = input.value.toUpperCase();
}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function checkAll() {
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = true;
}
}
function reverse() {
//a. 获取所有复选框元素对象
var hobbys = document.getElementsByName("hobby");
//b. 设置未选中状态
for (let i = 0; i < hobbys.length; i++) {
const element = hobbys[i];
element.checked = false;
}
}
</script>
</html>
效果图
扫一扫
5294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
