JavaScript基础

最新推荐文章于 2023-02-06 18:09:22 发布

BabyMuu

最新推荐文章于 2023-02-06 18:09:22 发布

阅读量471

点赞数 2

分类专栏：前端文章标签： javascript 前端 html

-------本文为博主Muu原创,未经博主允许禁止转载, 如有问题,欢迎指正-------

本文链接：https://blog.csdn.net/tenyearsWait/article/details/122025645

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS简介

js也是一门编程语言(但是其内部的逻辑有很多bug, 不是很严谨)
js 也是面向对象的语言 一切皆对象
js的发展史 javascript ecmascript
主要版本 
    5.1
    6.0

JS 注释

// 单行注释
/*
多行注释1
多行注释2
*/

JS 两种引入方式

1 script 标签内部直接书写js代码
2 script 标签 src 属性引入外部 js 代码
    标准应该单独开个 js文件

js代码的书写位置

1 单独开设就是文件书写
2 还可以直接在 浏览器提供的 console 界面书写
    在浏览器书写js 的时候 左上方的清空按钮仅仅是清空当前页面
    但是代码其实还在, 最好重新开一个页面
    (推荐使用自己的html页面打开, 别人的页面可能会做一些限制)

js/python 是一门拥有动态类型的语言

name = 'zhangsan';
name = 13;
name = [1,2,3,4];
// name 可以指向任意的数据类型
但是有一些语言中, 变量名 指向一种后  后续不能更改 C Java

JS 语法结构

js 是以分号作为结束符
但是如果不写分号 问题也不大 也能够正常执行, 但是它就相当于没有结束符

变量

在 js 中首次定义个变量名的时候 需要用关键字声明

1 关键字 var
    var name = 'zhangsan'
2 es6 退出的新语法
    let name = 'zhangsan'

如果编辑器支持的版本是 5.1 那么无法使用 let
    如果是6.0 则向下兼容 var let

var 和 let 的区别
    var 在 for 循环里面定义也会影响到全局
    let 在局部定义只会在局部生效

常量

python中没有真正意义上的常量

js 是有真正意义上的常量的

const pi = 3.14

pi = 3.44   // 会报错

变量的命名规范

1 变量名只能是
    数字 字母 下划线 $
2 变量名命名规范
    js 推荐使用驼峰式命名
    python 推荐使用下划线的方式
3 变量名不能用关键字

数据类型

数值类型

var a = 11;
var b = 11.11;
typeof a ;  // 'number'

// 特殊的 NaN: 数值类型, 表示的意思是 '不是一个数字' not a number

类型转换

parseInt()
parseFloat()

parseInt('11.11') // 11     只保留小数点前面的数值
parseInt('132dasdsdasdasd')  // 132  截取数字部分 碰到字符结束转换
parseInt('jflkajd23123')   // NaN       开头就是字母 返回 NaN

字符类型

var s = "zhangsan";
undefined
typeof s    
"string"
var name = """lisi"""    // 不支持三引号
VM165:1 Uncaught SyntaxError: Unexpected string

// 模版字符串
var zhaowu = 
`
zhaowu
`
typeof zhaowu
"string"

// 模版字符串出了可以定义多行文本之外还可以实现格式化字符串的操作
var name = "zhangsan";
var age = 18;

var info = `
my name is ${name} and my age is ${age}
`
info
"my name is zhangsan and my age is 18"

var s4 =`
my name is ${jdlkajfkla}
`
// VM341:2 Uncaught ReferenceError: jdlkajfkla is not defined at <anonymous>:2:18

字符串拼接

在python 中不推荐使用 + 做拼接 join (推荐使用)
在 js 中推荐使用 + 做拼接
name + age // "zhangsan18"

字符串方法

var name = 'zhangsan'
name.length
8

var name = "   lisi  "
name.trim()
"lisi"
name.trimLeft()
"lisi  "
name.trimRight()
"   lisi"
 
name.charAt(3)
"l"
name.indexOf('l')
3

name.substring(3,5)
"li"
name.substring(0, -1)      // 识别不了 负数
""
name.slice(0,-1)            // 后面推荐使用 slice
"   lisi "

name = name.toUpperCase()
"   LISI  "
name = name.toLowerCase()
"   lisi  "

name2 = "zhangsan|lisi|wangwu|zhaoliu"
"zhangsan|lisi|wangwu|zhaoliu"
name2.split("|")
(4) ["zhangsan", "lisi", "wangwu", "zhaoliu"]
name2.split("|",2)  # 第二个参数不是限制切割字符的个数 而是 获取切割之后元素的个数
(2)["zhangsan", "lisi"]

name.concat("zhangsan", 111)    // js 是弱类型(内部会自动转换成相同的数据类型做操作)
"   lisi  zhangsan111"

python
l = [1,2,3,4]
res = "|".join(l)  # 直接报错

布尔值

1 python中布尔值是首字母大写的
    True
    Fasle
2 js 中布尔值是全小写
    true
    false
js中布尔值是 false 的类型
    空字符串, 0, null, undefined, NaN 

null 与 undefined

1 null
    表示值为空 一半都是指定或者清空一个变量的时候使用
    name = "zhangsan"
    name = null
2 undefined
    表示声明了一个变量 但是没有做初始化操作(没有赋值)

运算符

算术运算符

比较运算符

弱等于 内部自动转换成相同的数据类型进行比较
1 == "1"  true
1 != "1"  false
强等于  内部不做类型转换
1 === "1"  false
1 !== "1"  true

逻辑运算符

and     or      not 
&&      ||      !

eg :  
    5 && "5"    // "5"
    0 || 1      // 1
    !5  && "5"  // 5

赋值运算符

+= *= -= /=

对象

1 数组(类似于python里面的列表)  []
2 自定义对象(类似于python中的字典)  {}

数组

var l = [1,2,34]
typeof l
"object"

var l1 = [1,"zhansan", 11.111, true]
l1[1]
"zhansan"
l1[-1]  // 不支持负数索引
undefine

数组方法

var l = [1,2,3,4,5,6]
l.length        // 6
l.push(7)       // [1,2,3,4,5,6,7]
l.pop()         // [1,2,3,4,5,6]
l.unshift(7)    // (7)[7, 1, 2, 3, 4, 5, 6]
l.shift()       // (6)[1, 2, 3, 4, 5, 6]
l.slice(0,3)    // (3)[1, 2, 3]
l.reverse()     // (6)[6, 5, 4, 3, 2, 1]
l.concat(7,8,9) // (9)[6, 5, 4, 3, 2, 1, 7, 8, 9] 需要一个变量接受, 不是在原值上更改
l.sort()        // (6)[1, 2, 3, 4, 5, 6]
l.join("$")     // "1$2$3$4$5$6"  以 "$" 为分隔符 连接成一个字符串 python: print("$".join(l))

forEach方法

var ll = [111,222,333,444,555,666]
ll.forEach(function(value){console.log(value)}, ll)
        // 一个参数 就是数组中 每一个元素对象
VM887:1 111
VM887:1 222
VM887:1 333
VM887:1 444
VM887:1 555
VM887:1 666
ll.forEach(function(value, index){console.log(value, index)}, ll)
        // 两个元素  元素 + 元素索引
VM945:1 111 0
VM945:1 222 1
VM945:1 333 2
VM945:1 444 3
VM945:1 555 4
VM945:1 666 5
ll.forEach(function(value,index, arr){console.log(value,index, arr)}, ll)
        // 三个元素 元素 + 元素索引 + 元素来源
VM1047:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM1047:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM1047:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM1047:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM1047:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM1047:1 666 5 (6) [111, 222, 333, 444, 555, 666]
ll.forEach(function(value,index, arr,xxx){console.log(value,index, arr,xxx)}, ll)
        // 最多加三个元素
VM1147:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined
VM1147:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
VM1147:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
VM1147:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
VM1147:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
VM1147:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined

splice 方法

ll              // (6) [111, 222, 333, 444, 555, 666]
ll.splice(0,3)  // (3) [111, 222, 333]
    // 俩个参数 第一个是起始位置 第二个是删除的个数
ll              // (3) [444, 555, 666]
ll.splice(1,3,777)  // (2) [555, 666]
    // 第三个参数 在删除的位置添加第三个参数
ll              // 
ll.splice(0,1,[11,22,33,44,55,66])  // (2) [444, 777]
ll              // (2) [Array(6), 777]
                        0: (6) [11, 22, 33, 44, 55, 66]
                        1: 777
                        length: 2
                        __proto__: Array(0)

map 方法

var lll = [1,2,3,4,5,6,7]
undefined
lll.map(function(value){console.log(value)}, lll)
VM1630:1 1
VM1630:1 2
VM1630:1 3
VM1630:1 4
VM1630:1 5
VM1630:1 6
VM1630:1 7
(7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]

lll.map(function(value,index){console.log(value, index); return value * index}, lll)
VM1749:1 1 0
VM1749:1 2 1
VM1749:1 3 2
VM1749:1 4 3
VM1749:1 5 4
VM1749:1 6 5
VM1749:1 7 6
(7) [0, 2, 6, 12, 20, 30, 42]

lll.map(function(value,index, arr){console.log(value, index, arr); return value * index}, lll)
VM1838:1 1 0 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 2 1 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 3 2 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 4 3 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 5 4 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 6 5 (7) [1, 2, 3, 4, 5, 6, 7]
VM1838:1 7 6 (7) [1, 2, 3, 4, 5, 6, 7]
(7) [0, 2, 6, 12, 20, 30, 42]

自定义对象

可以看成 python 中的字典
但是 js 中的自定义对象要比 python里面的字典操作起来更加的方便

创建自定义对象

第一种创建的方式
    var d1 = {'name':'zhangsan', 'age':18};
    tpyeof d;   // "object"
    d['name']   // zhangsan
    d.name      // zhagnsan   比 python 从字典里面获取值更加的方便
    d.age       // 18
    
第二种创建的方式 需要使用关键字  new
var d2 = new Object();  // {}
d2.name = "zhangsan";
d2.age = 18
d2          // {name:"zhangsan", age:18}

for (let i in d) {
        console.log(i, d[i]);
    }   # 支持 for 循环 暴露给外界可以直接获取的也是 键
name zhangsan
age 18

流程控制

if 判断

var age = 10;
if (条件) {条件成立的之后指向的代码块}
if (age > 18){
    console.log("join college");
}else if (age > 9){
    console.log("you are too young");
}else{
    console.log("ask for your parents");
}

switch 语法

var num = 2;
switch(num){
    case 0:
        console.log("swim");
        break;
    case 1:
        console.log("sing");
        break;
    case 2:
        console.log("swing");
        break;
    case 3:
        console.log("dance");
        break;
    default:  // 条件都没有匹配 默认走的流程
        console.log("fuck off");
        break;
}

for 循环

for(let a = 0; a < 10 ; a++){
    console.log(a)j
}
for(起始条件; 循环条件; 循环结束操作){
    循环体
}

while 循环

var i = 0j
while(i < 100){
    console.log(i)j
    i++j
}

三元运算符

python 
    res = 1 if 1 > 2 else 3
js
    res = 1>2?1:3

函数

关键字
    python 
        def 
    js 
        function
格式  
    function 函数名 (形参1, 形参2, 形参3...)
        {
            函数体代码
        }
调用
    函数名()

无参函数

function funcTest(){
    console.log("hello world")
}

有参函数

function func(a,b){
    console.log(a,b)
}

func(1,2)

特殊:
    func(1,2,3,4,5,6,7) // 1, 2 传多了, 不报错, 只取需要的个数
    func(1) // 1 undefined 少了也没有关系, 没传的默认 undefined

关键字 arguments 参数列表
function func2(a,b){
    if (argument.length < 2){
        console.log("参数不足");
    else if (argument.length > 2){
        console.log("参数过多");
    }else {
        console.log("正常代码正在执行");
    }
}

函数的返回值

function index(){
    return 666,777,888,999;
}
res = index()  // 999 只获得最后一个

function index(){
    return [666,777,888,999];
}
res = index()   // (4) [666, 777, 888, 999]
// js 不支持解压赋值

匿名函数

function (){
    console.log("hhahah");
}
var res = function(){
    console.log("hahahha");
}

箭头函数

var func1 = v => v;
等价于
var func1 = function(v){
    return v;
}

var func2 = (arg1,arg2) => arg1 + arg2
等价于
var func1 = function(arg1,arg2){
    return arg1 + arg2;
}

JS 对象

date对象

let d3 = new Date()

d3.toLocaleString()

let d4 = new Date("2200/11/11 11:11:11")
d4.toLocaleString()

let d6 = new Date()
d6.getDay()         // 星期
d6.getTime()        // 时间戳
d6.getFullYear()    // 年
d6.getMonth()       // 月份 0-11
d6.getDate()        // 日
d6.getHours()       // 小时
d6.getMinutes()     // 分钟
d6.getSeconds()     // 秒
d6.getMilliseconds()// 毫秒

json对象

在python中序列化反序列化
    dumps 序列化
    loads 反序列化
在js中也有序列化和反序列化
    JSON.stringify()        dumps
    JSON.parse()            loads

let d7 = {'name':'zhangsan', 'age':18}
let res = JSON.stringify(d7)
res    			    // "{"name":"zhagnsan", "age":18}"
JSON.parse(res) 	// {"name":"zhagnsan", "age":18}

RegExp 对象

在 python 中如果需要正则 需要借助 re模块
在js中需要创建正则对象

第一种方法定义正则
let reg1 = new RegExp('[1-5][A-Z]{5,11}')
第二种方法定义正则
let reg2 = /[1-5][A-Z]{5,11}/

eg: 获取字符串里面所有的字母
let ss = "zhangsan dsb dsb"
sss.match(/s/)  // 拿到了第一个s, index=5
sss.match(/s/g)  // 全局匹配 拿到三个 s

全局匹配问题一

let reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}/g
reg.test('zhangsan dsb')        // 全局模式有一个 lastIndex 属性
true      // 当返回结果为 true  lastIndex 会停留在最后一个字符的后面
reg.test('zhangsan dsb')  // 再次test 会从lastindex 后开始匹配
false     // 当返回结果为 false 时 lastIndex 再次清零
reg.test('zhangsan dsb')    // true
reg.test('zhangsan dsb')    // false
reg.lastIndex   // 0
reg.test('zhangsan dsb')    // true
reg.lastIndex   // 8

全局匹配问题二

let reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}/
reg.test()  // 什么都不传 默认传的是 undefined
true
reg.test()
true
reg.test(undefined)
true
let reg2 = /undefined/
reg2.test('zhangsan')
false
reg2.test()
true

BOM操作

# Windows对象
window 对象只带的就是浏览器窗口
	方法

window.innerHeight 	// 浏览器窗口的高度
window.innerWidth 	// 浏览器窗口的宽度

window.open("https://www.baidu.com", "",'height=400px, width=400px,top=200px,left=400px')
// 新建窗口打开页面 第二个参数写空即可, 第三个参数写新建的窗口的大小与位置
// 扩展: 父子页面通信 window.opener() 了解即可
window.close() 关闭当前页面

windows子对象

window.navigator.appName
"Netscape"
window.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36"
window.navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36" 
window.navigator.platform
"Win32"
// 如果是window的子对象, 那么 window 可以不写

扩展: 仿爬(navigator对象)

1 最简单的最常用的一个就是校验当前请求的发起者是否是一个浏览器
	navigator.userAgent
	user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36
	
	如何破解
		在代码中 加上 user_agent 配置即可

History对象

window.history.back()		// 回到上一页 
window.history.forward()	// 返回下一页

location对象

>>>window.location
Location {replace: ƒ, assign: ƒ, href: "https://ai.taobao.com/?pid=mm_12431063_4230865_56758591", ancestorOrigins: DOMStringList, origin: "https://ai.taobao.com", …}
>>>window.location.href		// 获取当前页面的url
"https://ai.taobao.com/?pid=mm_12431063_4230865_ 56758591"
let url = 'https://www.baidu.com'
window.location.href = url // 跳转到指定的url
window.location.reload() // 刷新页面 浏览器左上方的刷新按钮

弹出框

alert("不要这样呀!!!!")  // 警告框
confirm("are you sure to do this?") // 确认框  会返回用户选择的值 true 或者  false
prompt("请输入帐号")  // 提示框, 会在用户界面弹出一个小框, 里面有一个文本框, 和一个确认按钮和取消按钮
"你想的美"  // 提示框返回值, 用户在文本框里面输入什么就返回什么

计时器


<script>
    function func1() {
        alert(123)
    }

    function func2() {
        alert(456)
    }

    setTimeout(func1, 1000) // 毫秒为单位 3秒之后自动执行 func1 函数
    let e = setTimeout(func2, 2000)
    clearTimeout(e)      // 取消定时任务 如果想要清除定时任务 需要定义变量只带定时任务

    function show() {
        let t = setInterval(func2, 1000)  // 每隔1秒执行一次
        function inner() {
            clearInterval(t)     // 清除定时器
        }

        setTimeout(inner, 4000) // 4秒之后触发
    }

    show()	// 出现四次 456 之后就不再出现
</script>

DOM操作

DOM 树的概念

所有的标签都可以称之为是节点

JavaScript 可以通过 DOM 创建动态的 HTML 

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM 操作 操作的是标签 而一个html页面上的标签有很多
1 先学如何查找标签
2 在学 DOM 操作标签
DOM 操作需要用关键字 document 开始

查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <div id="d2"> div>div</div>
        <p id="p1" class="c1">div>p</p>
    </div>
    <div id="d3">div+div</div>
</body>
</html>

直接查找

id 查找 
	document.getElementById('d1')  // 返回对象本身
类查找
	document.getElementsByClassName('c1')  // 返回一个容器类型
通过标签名称查找
	document.getElementsByTagName('div')  // 返回一个容器类型
// 用变量名指代标签对象  (一般推荐变量名书写成 xxxEle)
let divEle = document.getElementsByTagName('div')[1]

间接查找

>>>
let pEle = document.getElementsByClassName("c1")[0]
>>> pEle = pEle[0]
   < p id ="p1" class="c1" > div > p  < /p> 
>>> pEle.parentElement
< div id = "d1" > … </div> 
>>>pEle.parentElement.parentElement
< body >
< div id = "d1" > … </div>
	<div id= "d3" > div + div  < /div>
<script> … </script>
</body> 
>>>pEle.parentElement.parentElement.parentElement
< html lang = "en" >
< script id = "allow-copy_script" > … </script>
<head> … </head>
<body> … </body>
<div id= "photoShowViewer" class= "sb_BingCA photoShow" > … </div>
</html>
>>> pEle.parentElement.parentElement.parentElement.parentElement
null

>>>let divEle = document.getElementById('d1')
undefined
>>>divEle.children			// 获取所有的子标签
HTMLCollection(2) [div#d2, p#p1.c1, d2: div#d2, p1: p#p1.c1]
     0: div#d2
     1: p#p1.c1
     length: 2
     d2: div#d2
     p1: p#p1.c1
     __proto__: HTMLCollection
>>>divEle.children[0]	// 获取第一个子标签
<div id= "d2">  div>div </div> 
>>>divEle.firstElementChild	// 获取第一个子标签
<div id= "d2">  div>div </div> 
>>>divEle.lastElementChild	// 获取最后一个子标签
<p id= "p1" class= "c1"> div>p </p> 
>>>divEle.nextElementSibling	// 获取同级别下面的第一个标签
<div id= "d3"> div+div </div> 
>>>divEle.previousElementSibling //  
<div> div上面的div </div>

节点操作

通过
DOM
操作动态的创建img标签
并且给标签添加属性
最后将标签添加到文本中

img标签操作

let imgEle = document.createElement('img') 	// 创建标签
imgELe.src = 'img.png'	// 设置 img 默认属性   '.' 只能设置默认属性
imgEle.setAttribute(username)  // 设置自定义属性  (可以设置默认属性也可以设置自定义属性)
imgEle.setAttribute('title', "a photo")  // 设置默认属性
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)		// 标签内部添加元素(尾部追加)

a标签操作

let aEle = document.createElement('a')
aEle.href = "https://www.baidu.com"
aEle.innerText = '点我有你好看'		// 给标签设置文本内容
let divEle = document.getElementById('d1')
let pEle = document.getElementById('p1')
divEle.insertBefore(aEle, pEle)		// 指定位置添加标签

额外补充

appendChild()	// 添加标签
removeChild()	// 删除标签
replaceChild()	// 替换标签

setAttribute()  // 设置属性
getAttribute()  // 获取属性
removeAttribute()  // 移除属性

let divEle = document.getElementById('d1')
>>> divEle.innerText		// 获取标签内部所有文本
"div
div>p
div>span"
>>> divEle.innerHTML		// 内部文本和标签都可以拿得到
" div
        <p id="p1">div&gt;p</p>
        <span>div&gt;span</span>
    "
>>> divEle.innerText = "<h1>hello world</h1>"  // 不识别标签 打什么浏览器就给什么
>>> divEle.innerHtml = "<h1>hello world</h1>"	// 识别标签 给一个 h1 标题样式的 hello world

获取值操作

// 获取用户数据标签内部的数据
let seEle = document.getElementById('d1')
seEle.value  获取用户选择的option 的 value
// 获取用户上传的文件数据
let fileEle = document.getElementById('f1')
fileEle.value	// 获取到文件的路径
"C:\fakepath\Crossfire20210812_0000.bmp"
fileEle.files	// 获取到文件字典
FileList {0: File, length: 1}
fileEle.files[0]	// 获取文件数据
File {name: "Crossfire20210812_0000.bmp", lastModified: 1628773896321, lastModifiedDate: Thu Aug 12 2021 21:11:36 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 1440054, …}

cklss, css 操作

let divEle = document.getElementById('d1')
divEle.classList 	// 获取标签所有属性
DOMTokenList(3) ["c", "bg_red", "bg_green", value:"c1 bg_red bg_green"]

divEle.classList.remove("bg_red")  // 移除某个属性
divEle.classList.add("bg_red") 	// 添加某个属性
divEle.classList.contains("c1")	// 验证是否存在某个属性
true
divEle.classList.contains("c2")	// 验证是否存在某个属性
false
divEle.classList.toggle('bg_red')	// 如果有此属性 则删除 如果没有此属性 则添加
flase
divEle.classList.toggle('bg_red')	// 如果有此属性 则删除 如果没有此属性 则添加
true

DOM操作 操作标签样式 统一用 style起手
let pEle = document.getElementById('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px bolder red'

事件

# 达到某个事先设定的条件 自动触发的动作

 <!--  绑定事件的两种方式  -->
<body>
    <!--  第一种绑定方式(有可能出现代码冗余)  -->
    <button onclick="func1()">click me</button>	
    <button id="d1">click me</button>
    
    <script>
        function func1(){
            alert(111)
        }
        let btnEle = document.getElementById('d1');	// 第二种绑定事件的方式 (推荐使用)
        btnEle.onclick = function (){
            alert(222)
        }
    </script>
</body>

# script 标签 既可以放在 head 里面 也可以放在 body里面
# 但是由于 html 页面是从上往下加载的有的对象没有创建就调用会报错
# 故最好推荐 将 script 标签放在body的最后面
# 如果必须想要在 head 里面写 script 可以用 window.onload 方法

<script>
    // 等待浏览器窗口加载完毕之后在
    window.onload = function () {
        function func1() {
            alert(111)
        }

        let btnEle = document.getElementById('d1');
        btnEle.onclick = function () {
            alert(222)
        }
    }
</script>

原生事件绑定

案例1 : 模拟红绿灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
        .bg_green {
            background-color: green;
        }
        .bg_red {
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="b1">change the color</button>

<script>
    let btnEle = document.getElementById('b1')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function func1() {   // 绑定点击事件
        divEle.classList.toggle("bg_red")
    }
</script>
</body>
</html>

案例2: input 框获取焦点及失去焦点

<body>
<input type="text" value="请输入账号" id="i1">

<script>
    let iEle = document.getElementById('i1')
    iEle.onfocus = function (){
        iEle.value = ""
    }
    iEle.onblur = function (){
        iEle.value = "请输入账号!!!"
    }
</script>

案例3: 计时器

<body>
<input type="text" id="t1">
<button id="b1">开始计时</button>
<button id="b2">停止计时</button>
<script>
    let iEle = document.getElementById("t1")
    let btn1Ele = document.getElementById("b1")
    let btn2Ele = document.getElementById("b2")

    function showTime(){
        let currentTime = new Date()
        iEle.value = currentTime.toLocaleString()
    }
    t = setInterval(showTime, 10)

    btn1Ele.onclick = function (){
        if (!t) {
            t = setInterval(showTime, 10)
        }
    }
    btn2Ele.onclick = function (){
        clearTimeout(t)
        t = null
    }
</script>
</body>

案例4: 省市选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="s1">
    <option selected disabled value="">---请选择---</option>
</select>
<select name="" id="s2"></select>


<script>
    let s1ELe = document.getElementById('s1')
    let s2ELe = document.getElementById('s2')
    data = {
        '辽宁': ['沈阳', '大连', '葫芦岛'],
        '上海': ['静安', '黄埔', '浦东'],
        '北京': ['朝阳', '海淀', '昌平'],
        '山东': ['临沂', '烟台', '威海']
    }
    for(let key in data){
        let opEle = document.createElement('option')
        opEle.value = key

        opEle.innerText = key

        s1ELe.appendChild(opEle)
    }
    s1ELe.onchange = function (){
        let city = data[s1ELe.value]
        let opd = '<option selected disabled>---请选择---</option>'
        s2ELe.innerHTML = opd

        for (let i = 0; i < city.length; i++){
            let value = city[i]
            let opEle = document.createElement('option')
            opEle.value = value
            opEle.innerText = value
            s2ELe.appendChild(opEle)
        }
    }
</script>
</body>
</html>