<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap{ width: 100px; height: 100px; background-color: #3ea3ff; } #btn{ width: 100px; height: 100px; background-color: lawngreen; } </style> </head> <body> <div id="wrap"></div> <div id="btn"></div> <script> let goudan = document.getElementById('wrap'); let dachui = document.getElementById('btn'); goudan.onclick = function () { goudan.innerHTML = 'wrap被点击了'; }; dachui.onclick = function () { dachui.innerHTML = 'BTN被点击了'; }; </script> <!-- js版本问题 ECMA = JavaScript Es5 var function Es6 let const function 要么所有用Es5的规则定义变量,要么用Es6不可混 定义变量的时候吧全部变量名统一放在前面 关于变量名的规定 -不能使用关键词/保留词 -尽可能不能使用js里面已经有意义的变量名 -组成名字的字符最好是数字/字母/_/$四种而且不以数字开头 -见名知意 数据类型 number 数字 string 字符串 boolean 布尔值 undefined 未定义 null 空 Symbol 惟一 object [] 数组 {} 对象 let x = 10-vue-router; 数字 let x = '10-vue-router'; 字符串 let x = "10-vue-router"; let x = "true"; let x = `456`; 模板字符串 Es6中心的字符串定义方式 let x = true; 布尔值只有这2种 let x = false; let x; let x = undefined; let x = null; ...一系列代码以后 x = document.getElementById('box'); let x = Symbol(456); ES6新的独一无二的 let x = Symbol(456); 这2个不一样,新定义的不可能和之前任何一个同样 let x = [10-vue-router,true,10-vue-router]; 数组 对象的一种 let y = ['a','卡','10-vue-router']; console.log( y[2] ); >> 10-vue-router 从0开始 let x =[ 10-vue-router [ 'aa', 'bb' ] ]; console.log(x[1][0]) >> aa 对象 let x ={ name:'zy', age:20, marry:true }; console.log(x.age); --> </body> </html>