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