JavaWeb - 3 - JavaScript(JS)
JavaScript(JS)官方参考文档：JavaScript 教程
· JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互（脚本语言就不需要编译，直接通过浏览器解析）
· JavaScript和Java是完全不同的语言，无论是概念还是设计。但是基础语法类似
· JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准（ECMA：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。JavaScript是遵守ECMAScript的标准的）
· ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）
一. JS引入方式
· 内部脚本：将JS代码定义在HTML页面中
· JavaScript代码必须位于<script></script>标签之间
· 在HTML文档中，可以在任意地方，放置任意数量的<script></script>
· 一般会把脚本置于<body>元素的底部，可改善显示速度
· 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
· 外部JS文件中，只包含JS代码，不包含<script>标签
· <script>标签不能自闭合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS引入方式</title><!-- 内部脚本 --><!-- <script>alert('Hello JS')</script> --><!-- 外部脚本 --><script src="js/demo.js"></script><!-- <script src="js/demo.js" /> --> <!-- 不能自闭合 --><!-- js/demo.js的内容 --><!-- alert('Hello js'); -->
</head>
<body></body>
</html><!-- 在HTML文档中，可以在任意地方，放置任意数量的<script></script> -->
<!-- <script>alert('Hello JS')
</script> -->二. JS基础语法
2.1 书写语法
· 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
· 每行结尾的分号可有可无
· 注释：
· 单行注释：//注释内容
· 多行注释：/* 注释内容 */
· 大括号代表代码块
2.2 输出语句
· 使用window.alert()写入警告框
· 使用document.write()写入HTML输出
· 使用console.log()写入浏览器控制台
<script>
window.alert("Hello JavaScript"); //浏览器弹出警告框
document.write("Hello JavaScript"); //写入HTML，在浏览器显示
console.log("Hello JavaScript"); //写入浏览器控制台
</script>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>// 单行注释快捷键：ctrl + / // alert('Hello JS'); //单行注释// 多行注释快捷键：ctrl + shift + //* alert('Hello JS')多行注释*/alert('Hello JS'); /* js代码每行结尾的分号可有可无，建议加上 */window.alert("Hello JavaScript"); //浏览器弹出警告框document.write("Hello JavaScript"); //写入HTML，在浏览器显示console.log("Hello JavaScript"); //写入浏览器控制台
</script>
</html>2.3 变量
· JavaScript中用var关键字（variable的缩写）来声明变量
· JavaScript是一门弱类型语言，变量可以存放不同类型的值
· 变量名需要遵循如下规则：
· 组成字符可以是任意字母、数字、下划线（_）或美元符号（$）
· 数字不能开头
· 建议使用驼峰命名
注意事项：
· ECMAScript 6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
· ECMAScript 6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//JavaScript是一门弱类型语言，变量可以存放不同类型的值var a = 20;a = "张三";alert(a); //张三/* var关键字var特点1：作用域比较大，是全局变量var特点2：可以重复定义的 */{var x = 1;alert(x); //1var x = "A"; //重复定义，后面定义的会把前面定义的覆盖掉}alert(x); //A/* let关键字let关键字定义的是局部变量，只在let关键字所在的代码块内有效，且不允许重复定义 */{let x = 1;alert(x); //1// let x = "A"; //let关键字不允许重复定义，因此加了这行会直接标红}alert(x); //let关键字定义的是局部变量，只在let关键字所在的代码块内有效。因此这里会显示A（上面var定义的x）//const：常量，不能被改变的const pi = 3.14;pi = 3.15;alert(pi); //这里不会显示
</script>
</html>2.4 数据类型
JavaScript中分为：原始类型 和 引用类型
原始类型
Number：数字（整数、小数、NaN（Not a Number））
String：字符串，单双引皆可
Boolean：布尔。true，false
Null：对象为空
Undefined：当声明的变量未初始化时，该变量的默认值是undefined
注：使用typeof运算符可以获取数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//原始数据类型alert(typeof 3); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'hello'); //stringalert(typeof true); //booleanalert(typeof false); //booleanalert(typeof null); //objectvar a;alert(typeof a); //undefined
</script>
</html>
2.5 运算符
算术运算符：+ ，- ，* ，/ ，% ，++ ，--
赋值运算符：= ，+= ，-= ，*= ，/= ，%=
比较运算符：> ，< ，>= ，<= ，!= ，== ，===
逻辑运算符：&& ，|| ，!
三元运算符：条件表达式 ? true_value : false_value
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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); //truealert(age === _age); //falsealert(age === $age); //true
</script>
</html>
2.6 类型转换
· 字符串String类型转为数字Number：
将字符串字面值转为数字，如果字面值不是数字，则转为NaN
· 其他类型转为Boolean：
Number：0和NaN为false，其他均转为true
String：空字符串("")为false，其他均转为true
Null和Undefined：均转为false
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS基础语法</title>
</head>
<body></body>
<script>//类型转换 - 字符串类型转为数字alert(parseInt("12")); //12alert(parseInt("12A45")); //12（转换到不是数字前的部分）alert(parseInt("A45")); //NaN//类型转换 - Number类型转为Booleanif(0){ //falsealert("0 转换为false");}if(NaN){ //falsealert("NaN 转换为false");}if(1){ //true(因此这里会执行)alert("除了0和NaN，其他数字都转换为true");}//类型转换 - String类型转为Booleanif(""){ //falsealert("空字符串为false，其他都是true");}if(" "){ //true(因此这里会执行)alert("空字符串为false，其他都是true");}//类型转换 - Null和Undefined转为booleanif(null){ //falsealert("null转化为false");}if(undefined){ //falsealert("undefined转化为false");}
</script>
</html>
2.7 流程控制语句
· if…else if…else…
· switch
· for
· while
· do…while
三. JS函数
介绍：函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键字进行定义，语法为：
function functionName(参数1,参数2…){
//要执行的代码
}
定义方式二：
var functionName = function(参数1,参数2…){
//要执行的代码
}
注意：
· 形式参数不需要类型，因为JavaScript是弱类型语言
· 返回值也不需要定义类型，可以再函数内部直接使用return返回即可
注意事项：JS中，函数调用可以传递任意个数的参数
调用：函数名称(实际参数列表)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS函数</title>
</head>
<body></body>
<script>//定义函数方式1//通过function关键字进行定义 function 函数名(形参列表){}//这种方式定义函数,调用的位置可以在函数前面也可以在函数后面var rs = add(1,2);alert(rs);function add(a,b){return a+b;}var rs = add(1,2);alert(rs);//定义函数方式2//通过var关键字进行定义 var 函数名 = function(形参列表){}//这种方式定义函数，调用的位置一定要在函数前面，否则失败var add1 = function(a,b){return a+b;}var rs1 = add1(3,4);alert(rs1);
</script>
</html>四. JS对象
js对象可以分为三类：基础对象（Array、String、JSON等……），BOM对象（浏览器对象模型）、DOM对象（文档对象模型）
4.1 Array数组
JavaScript中Array对象用来定义数组
定义
var 变量名 = new Array(元素列表); //方式一
var arr = new Array(1,2,3,4);
var 变量名 = [元素列表]; //方式二
var arr = [1,2,3,4];
访问
arr[索引] = 值;
arr[10] = "hello";
注意事项：JS中的数组相当于Java中的集合，数组的长度是可变的，而JS是弱类型，所以可以存储任意的类型的数据
Array常见的属性和方法
| 属性 | 描述 |
| length | 设置或返回数组中元素的数量 |
| 方法 | 描述 |
| forEach() | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度 |
| splice() | 从数组中删除元素 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-Array</title>
</head>
<body></body>
<script>//定义数组var arr1 = new Array(1,2,3,4);var arr2 = [5,6,7,8];//length属性(获取数组长度)for (let index = 0; index < arr1.length; index++) {//console.log 快捷输入方式 直接输入logconsole.log(arr1[index]);}for (let index = 0; index < arr2.length; index++) {console.log(arr2[index]);}//JS中的数组类似于Java中的集合//JS中的数组的特点:长度可变,类型可变//长度可变arr1[10] = 50; //索引值10位置有元素后,数组长度变成了11,此时索引值4-9的位置中输出的会是undefined(相当于声明了但是没有初始化)// console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,undefined,undefined,undefined,50])//类型可变arr1[9] = "ABC";arr1[8] = true;arr1[7] = null;// console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,null,true,"ABC",50])//forEach():遍历数组中的每个有值的元素，并调用一次传入的函数arr1.forEach(function(e){document.write(e); //1234nulltrueABC50 (只遍历有值的元素)console.log(e);})//在ES6中提供了箭头函数,可以简化上面的代码//箭头函数: (…) => {…} 简化函数定义arr2.forEach((e) => {console.log(e);})//push():将新元素添加到数组的末尾，并返回新的长度arr1.push(11,12,13); // console.log(arr1); //直接输出数组([1,2,3,4,undefined,undefined,undefined,null,true,"ABC",50,11,12,13])//splice():从数组中删除元素arr1.splice(2,5); //从索引为2的位置开始删除,删除5个元素console.log(arr1); //直接输出数组([1,2,null,true,"ABC",50,11,12,13])
</script>
</html>4.2 String字符串
String字符串对象创建方式有两种
var 变量名 = new String("…"); //方式一
var str = new String("hello world");
var 变量名 = "…"; //方式二
var str = "hello world";
var str = 'hello world'; //双引号和单引号都可以
String字符串常见的属性和方法
| 属性 | 描述 |
| length | 字符串的长度 |
| 方法 | 描述 |
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串 |
| trim() | 去除字符串两边的空格 |
| substring() | 提取字符串中两个指定的索引号之间的字符（截取字符串） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-String</title>
</head>
<body></body>
<script>//创建字符串对象var str1 = new String("Hello World");console.log(str1); //输出的是String {'Hello World'}（每个索引位置保存一个字符）//var str2 = " hello world ";console.log(str2); //直接输出hello world//length属性：字符串的长度console.log(str2.length);//charAt():返回在指定位置的字符console.log(str2.charAt(2)); //h 返回索引2位置的字符//indexOf():检索字符串console.log(str2.indexOf("lo")); //5（从索引5开始）//trim():去除字符串两边的空格var s = str2.trim();console.log(s);console.log(str2);//substring():提取字符串中两个指定的索引号之间的字符（截取字符串）//substring(start,end) --开始索引，结束索引，含头不含尾console.log(str2.substring(2,7));
</script>
</html>4.3 JSON
4.3.1 JavaScript自定义对象
定义格式：
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
调用格式：
对象名.属性名;
console.log(user.name);
对象名.函数名();
user.eat();
4.3.2 JSON
· 概念：JavaScript Object Notation，JavaScript对象标记法
· JSON是通过JavaScript对象标记书写的文本
· 由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输
· 定义
var 变量名 = '{"key1":value1,"key2":value2}';
var userStr = '{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';
key一定要用双引号包裹，不写或者单引号都是错的
value的数据类型为：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号[]中）、对象（在花括号{}中）、null
JSON字符串转为JS对象
var jsObject = JSON.parse(jsonStr);
JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-JSON</title>
</head>
<body></body>
<script>//自定义对象var user = {name:"Tom",age:19,gender:'男',// eat:function(){// alert("Tom在吃饭");// }//自定义对象中函数的写法可以简化eat(){alert("Tom在吃饭");}}alert(user.name);user.eat();//定义JSONvar jsonStr = '{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';alert(jsonStr.name); //undefined(因为这里的jsonStr其实就是字符串)//JSON字符串转js对象var obj = JSON.parse(jsonStr);alert(obj.name); //Jerry//js对象转JSON字符串var jsonstring = JSON.stringify(obj);alert(jsonstring); //{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}
</script>
</html>4.4 BOM
· 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
· 组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
4.4.1 Window
· 介绍：浏览器窗口对象
· 获取：直接使用window，其中window可以省略
window.alert("hello");
alert("hello");
· 属性：
· history：对History对象的只读引用
· location：用于窗口或框架的Location对象
· navigator：对Navigator对象的只读引用
· 方法：
· alert()：显示带有一段消息和一个确认按钮的警告框
· confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
· setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
· setTimeout()：在指定的毫秒数后调用函数或计算表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-BOM-window</title>
</head>
<body></body>
<script>//获取window.alert("hello1");alert("hello2");//方法//confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框var flag = confirm("确认删除吗？");console.log(flag); //确认返回true 取消返回false//定时器setTimeout()：在指定的毫秒数后调用函数或计算表达式（延迟指定时间后执行一次）setTimeout(function(){alert("定时器执行了！");},3000);//定时器setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式（周期性的执行某一个函数）var count = 0;setInterval(function(){count++;console.log("定时器执行了"+count+"次");},2000); //2000代表2秒（即2000毫秒）
</script>
</html>4.4.2 Location
· 介绍：地址栏对象
· 获取：使用window.location获取，其中window可以省略
window.location.属性;
location.属性;
· 属性：
· href：设置或返回完整的URL
location.href = "百度一下，你就知道";
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-BOM-location</title>
</head>
<body></body>
<script>//locationalert(location.href);location.href = "https://www.baidu.com";
</script>
</html>4.5 DOM
· 概念：Document Object Model，文档对象模型
· 将标记语言的各个组成部分封装为对应的对象：
· Document：整个文档对象
· Element：元素对象
· Attribute：属性对象
· Text：文本对象
· Comment：注释对象
· JavaScript通过DOM，就能够对HTML进行操作：
· 改变HTML元素的内容
· 改变HTML元素的样式（CSS）
· 对HTML 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是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1. Core DOM - 所有文档类型的标准模型
· Document：整个文档对象
· Element：元素对象
· Attribute：属性对象
· Text：文本对象
· Comment：注释对象
2. XML DOM - XML文档的标准模型
3. HTML DOM - HTML文档的标准模型
· Image：<img>
· Button：<input type='button'>
· HTML中的Element对象可以通过Document对象获取，而Document对象是通过windows对象获取的
· Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
2. 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
3. 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
4. 根据class属性值获取，返回Element对象数组
var class = document.getElementsByClassName('cls');
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg"> <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对象//获取元素-根据id获取var img = document.getElementById("h1");alert(img); //[object HTMLImageElement]//获取元素-根据标签获取var divs = document.getElementsByTagName("div");for (let index = 0; index < divs.length; index++) {alert(divs[index]); //[object HTMLDivElement]}//获取元素-根据name属性获取var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {alert(hobbys[index]); //[object HTMLInputElement]}//获取元素-根据class属性获取var divs_2 = document.getElementsByClassName("cls");for (let index = 0; index < divs_2.length; index++) {alert(divs_2[index]); //[object HTMLDivElement]}//2.查询参考手册，属性、方法var div2 = divs_2[0];div2.innerHTML = "你好前端你好前端";
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg"> <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对象//获取元素-根据id获取var img = document.getElementById("h1");//点亮图片的效果其实就是切换图片（改变src的属性值）img.src = "./img/2.jpg";//获取元素-根据标签获取var divs = document.getElementsByTagName("div"); for (let index = 0; index < divs.length; index++) {//在所有文本后面加very good(红色字体) --<font color='red'></font>divs[index].innerHTML += "<font color='red'>very good</font>";}//获取元素-根据name属性获取var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {//使所有的复选框呈现选中的状态hobbys[index].checked = true; //选中}
</script>
</html>五. JS事件监听
事件：HTML事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移动到元素上、按下键盘按键等
事件监听：JavaScript可以在事件被侦测到时执行代码
5.1 事件绑定
方式一：通过HTML标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件绑定</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>//事件绑定方式1function on(){alert("事件绑定1按钮被点击");}//事件绑定方式2var btn2 = document.getElementById("btn2");btn2.onclick = function(){alert("事件绑定2按钮被点击");}
</script>
</html>5.2 常见事件
| 事件名 | 说明 |
| 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><body onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="b1" type="button" value="单击事件" onclick="fn1()"></form> <br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table></body><script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>
</html>5.3 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS对象-DOM</title>
</head>
<body><img id="h1" src="./img/1.jpg" width="300px"> <br><br><input type="button" id="btn1" value="点亮" onclick="fc1()"><input type="button" id="btn2" value="熄灭" onclick="fc2()"><br><br><input type="text" id="textbox" value="ABC" onfocus="fc3()" onblur="fc4()"><br><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">游戏<input type="checkbox" name="hobby">旅游<br><br><input type="button" id="btn3" value="全选" onclick="fc5()"><input type="button" id="btn4" value="反选" onclick="fc6()">
</body>
<script>//fc1和fc2实现切换图片function fc1(){var img = document.getElementById("h1");img.src = "./img/2.jpg";console.log("点击点亮按钮切换到图片2");}function fc2(){var img = document.getElementById("h1");img.src = "./img/1.jpg";console.log("点击熄灭按钮切换到图片1");}//fc3获得焦点的时候文本变成小写 fc4失去焦点的时候文本变成大写function fc3(){var text = document.getElementById("textbox");text.value = text.value.toLowerCase(); //字符串的toLowerCase()方法console.log("获得焦点的时候文本变成小写");}function fc4(){var text = document.getElementById("textbox");text.value = text.value.toUpperCase(); //字符串的toUpperCase()方法console.log("失去焦点的时候文本变成大写");}//fc5点击按钮全选，fc点击按钮全不选function fc5(){var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {hobbys[index].checked = true;}console.log("已经全选");}function fc6(){var hobbys = document.getElementsByName("hobby");for (let index = 0; index < hobbys.length; index++) {hobbys[index].checked = false;}console.log("已经全不选");}
</script>
</html>相关文章：
JavaWeb - 3 - JavaScript(JS)
JavaScript(JS)官方参考文档：JavaScript 教程 JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互（脚本语言就不需要编译，直接通过浏览器…...
基于springboot+vue的美食烹饪互动平台
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作 主要内容：毕业设计(Javaweb项目|小程序|Pyt…...
linux中操作服务器常用命令
在Linux中操作服务器时，常用的命令包括： ls：列出目录内容。 cd：切换目录。 pwd：显示当前所在的目录路径。 mkdir：创建一个新的目录。 rmdir：删除一个空的目录。 cp：复制文件或目录。…...
最简k8s部署（AWS Load Balancer Controller使用）
问题 我需要在k8s集群里面部署springboot服务，通过k8s ingress访问集群内部的springboot服务，应该怎么做？ 这里假设已经准备好k8s集群，而且也准备好springboot服务的运行镜像了。这里我们将精力放在k8s服务编排上面。 一图胜千言…...
差距拉开了！量化大厂最新业绩排行曝光！
经历了一月份的失落和二月份绝地反攻，量化大厂们的整体业绩备受关注。 而今年2月份的量化战绩，甚为关键！ 毕竟市场指数“前低后高”，基金经理与投资人开年以来，共同经历了“惊心动魄”的考验。 量化大厂，…...
【Web前端】Vue核心基础
文章目录 1. Vue简介2. Vue官网使用指南3. 初识Vue3.1 搭建Vue开发环境3.2 HelloWorld案例3.3 el与data的两种写法3.4 MVVM模型3.5 模板语法 4. 数据绑定4.1 v-bind单向数据绑定4.2 v-model双向数据绑定 5. 事件处理5.1 v-on绑定事件5.2 事件修饰符5.3 键盘事件 6. 计算属性6.1…...
Linux操作系统项目上传Github代码仓库指南
文章目录 1 创建SSH key2.本地git的用户名和邮箱设置3.测试连接4.创建仓库5.终端项目上传 1 创建SSH key 1.登录github官网,点击个人头像,点击Settings,然后点击SSH and GPG keys,再点击New SSH key。 Title 可以随便取，但是 key 需要通过终端生成。 Linux终端执行…...
机器学习--循环神经网路（RNN）2
在这篇文章中，我们介绍一下其他的RNN。 一.深层RNN 循环神经网络的架构是可以任意设计的，之前提到的 RNN 只有一个隐藏层，但 RNN 也可以是深层的。比如把 xt 丢进去之后，它可以通过一个隐藏层，再通过第二个隐藏层&am…...
sheng的学习笔记-AI-多分类学习:ECOC,softmax
目录：sheng的学习笔记-AI目录-CSDN博客 基本术语： 若我们欲预测的是离散值，例如“好瓜”“坏瓜”，此类学习任务称为“分类”(classification)； 若欲预测的是连续值，例如西瓜成熟度0.95、0.37，…...
ChatGPT Plus 支付出现「您的银行卡被拒绝/your card has been declined」怎么办？
ChatGPT Plus 支付出现「您的银行卡被拒绝/your card has been declined」怎么办？ 在订阅 ChatGPT Plus 或者 OpenAI API 时，有时候会出现已下报错 ： Your card has been declined. 您的银行卡被拒绝 出现这种错误，有以下几个解…...
typescript学习(更新中)
目录 开发环境搭建类型如何声明有哪些类型编译配置文件 开发环境搭建 npm i -g typescripttsc检查是否安装成功 类型如何声明 // 先声明再赋值 let a: number a 1// 直接赋值 let b 1function sum(a: number, b: number): number {return a b } console.log(sum(1, 2))有…...
T2 小美的平衡矩阵(25分) - 美团编程题 题解
考试平台： 牛客网 题目类型： 30道单选题（60分） 2 道编程题 （15分 25分） 考试时间： 2024-03-09 （两小时） 题目描述 小美拿到了一个n*n的矩阵，其中每个元素是…...
13:大数据与Hadoop｜分布式文件系统｜分布式Hadoop集群
大数据与Hadoop｜分布式文件系统｜分布式Hadoop集群 Hadoop部署Hadoop HDFS分布式文件系统HDFS部署步骤一：环境准备HDFS配置文件 查官方手册配置Hadoop集群 日志与排错 mapreduce 分布式离线计算框架YARN集群资源管理系统步骤一：安装…...
前端知识点、技巧、webpack、性能优化（持续更新~）
1、 请求太多 页面加载慢 （webpack性能优化） 可以把 图片转换成 base64 放在src里面 减少服务器请求 但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack 进行 性能优化 （官网有详细描述）...
红队专题-开源漏扫-巡风xunfeng源码剖析与应用
开源漏扫-巡风xunfeng 介绍主体两部分：网络资产识别引擎，漏洞检测引擎。代码赏析插件编写JSON标示符Python脚本此外系统内嵌了辅助验证功能文件结构功能 模块添加IP三. 进行扫描在这里插入图片描述 
统计接口调用耗时情况设计思路（大厂面试题）
gateway统计接口调用耗时情况设计思路（大厂面试题） 详情视频可以去看尚硅谷2024周阳老师的springCloud P86 知识出处自定义全局过滤器官网https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#gateway-combined-global-filter-…...
Elasticsearch：什么是 DevOps？
DevOps 定义 DevOps 是一种现代软件开发方法，它将公司软件开发 (Dev) 和 IT 运营 (Ops) 团队的工作结合起来并实现自动化。 DevOps 提倡这样一种理念：这些传统上独立的团队在协作方面比在孤岛中更有效。 理想情况下，DevOps 团队共同努力改进…...
C语言基础练习——Day03
目录 选择题 编程题 记负均正 旋转数组的最小数字 选择题 1、已知函数的原型是：int fun(char b[10], int *a);，设定义：char c[10];int d;，正确的调用语句是 A fun(c,&d);B fun(c,d);C fun(&c,&d);D fun(&c,d); 答…...
膜厚测量仪在半导体应用中及其重要
随着科技的不断发展，半导体行业已成为当今世界的核心产业之一。在这个领域中，半导体膜厚测量仪作为关键设备，其精度和可靠性对于产品质量和生产效率具有至关重要的作用。本文将详细介绍半导体膜厚测量仪的工作原理、应用领域以及其在半导体制…...
【前端】-初始前端以及html的学习
💖作者：小树苗渴望变成参天大树🎈 🎉作者宣言：认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏：C语言,数据结构初阶,Linux,C 动态规划算法🎄 如 果 你 …...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...