Day34（4）-F:\硕士阶段\Java\课程资料\2025最新版JavaWeb+AI\资料\02. 前端Web基础(JS+Vue+Ajax)\资料\03. 基础代码\JS-Vue-01~12
JavaScript
数据类型
//3.JSON - JS对象标记法
let person ={
name: 'itcast',
age: 18,
gender:'男'
}
alert(JSON.stringify(person));//js对象-->字符串
//{"name":"itcast","age":18,"gender":"男"}
let personJson = '{"name":"heima","age":"18"}';
alert(JSON.parse(personJson).name);
DOM
11111
22222
33333
查询文档
https://www.w3school.com.cn/index.html
事件监听
<table width="800px" border="1" cellspacing="0" align="center">
<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" id="last">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
优化
模块化JS抽取出来，简便化
<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> <form action="" style="text-align: center;"> <input type="text" name="username" id="username"> <input type="text" name="age" id="age"> <input id="b1" type="submit" value="提交"> <input id="b2" type="button" value="单击事件"> </form>
<table width="800px" border="1" cellspacing="0" align="center">
<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" id="last">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
模块化JS
eventDemo.js
import{printLog}from"./utils.js"//导包
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
printLog("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
printLog("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
printLog("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
printLog("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
printLog("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
printLog("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
printLog("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
printLog("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
utils.js
export function printLog(msg){//有了export才能被其他的import
console.log(msg)
}
Vue
Vue.js - The Progressive JavaScript Framework | Vue.js
浙公网安备 33010602011771号