JavaScript

weixin_55136170

已于 2022-12-02 14:53:45 修改

阅读量314

点赞数 1

文章标签：前端

于 2022-11-26 20:35:34 首次发布

本文链接：https://blog.csdn.net/weixin_55136170/article/details/128056726

版权

JavaScript简介

1. js也是一门编程语言它也是可以写后端代码的

用js一统天下前后端都可以写

nodejs支持js代码跑在后端服务器上

然而并不能想得太天真了

2. js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度

ECMAScript和JavaScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

js的注释

"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

两种引入方式

1.script标签内部直接书写js代码
2.script标签src属性引入外部js代码

js语法结构

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

变量

js变量的命名规范

1. 变量名只能是

                数字字母下划线 $

2. 变量名命名规范（不遵循也可以）

1. js中推荐使用驼峰式命名

        userName

        dataOfDatabase

2. python推荐使用下划线的方式

user_name

data_of_db

3. 不能用关键字作为变量名

不需要记忆后面遇到几个就稍微记几个

js代码的书写位置

1. 可以单独开设js文件书写

2. 还可以直接在浏览器提供的console界面书写

在用浏览器书写js的时候左上角的清空按钮只是清空当前页面代码其实还在

如果你想要重新来最好重新开设一个页面

(在使用浏览器书写你自己的js代码的时候推荐你在你自己的html页面打开)

数据类型

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

js也是一门面向对象的编程语言即一切皆对象
name = 'jason'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型
# 但是有一些语言中。变量名只能指向一种 后续不能更改

数值类型(number)

var a = 11;
var b = 11.11
// 如何查看当前数据类型
typeof a;

var a =11;
var b = 11.11;
typeof a;
typeof b;

// 特殊的 NaN: 数值类型 表示的意思是"不是一个数字" Not a Number

// 类型转换

parseInt()
parseFloat()

parseInt('21323')
21323
parseFloat('11.11');
11.11
parseInt('11.11')
11
parseInt('NaN')
NaN
parseInt('sadf2323sdf')
NaN
parseInt('333sadf2323sdf')
333

字符类型（string）

var s = 'jason';
undefined
typeof s
'string'
var s1 = "jason";
undefined
typeof s1;
'string'
var s2 = '''egon'''; //不支持三引号
VM247:1 Uncaught SyntaxError: Unexpected string

# 模板字符串

var s3 = `
asdsf
sdfsf
asdfsdf
`
typeof s3
"string"
//模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作
//书写${}会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错

var name = 'jason'
var age = 19;
var sss = `
my name is ${name} and my age is ${age}
`
sss
'\nmy name is jason and my age is 19\n'

var s4 = `my name is ${name1}`;
VM371:1 Uncaught ReferenceError: name1 is not defined
    at <anonymous>:1:24
//在写js代码的时候不要取管左侧箭头的内容

//字符串的拼接
//在python中不推荐你使用 + 做拼接 推荐 join
// 在js中推荐你直接使用+做拼接

字符类型常用方法

.length 返回长度

.trim() 移出首尾空白

.trimLeft() 移除左边空白

.trimRight() 移除右边空白

.charAt(n) 第n个字母是什么

.indexOf('as') 返回as的首字母在第几位

.substring(0,n); 切片，不支持 -1

.slice(0,-1) 切片，支持-1

.toLowerCase(); 转小写
.toUpperCase(); 转大写
.split() 按元素切割

.concat(value,...) 拼接

联想记忆

mysql

concat

concat_ws

group_concat

var name = 'egondsb';
undefined
name.length
7
var name1= '  egonDSB  '
undefined
name1;
'  egonDSB  '
name1.trim
ƒ trim() { [native code] }
name1;
'  egonDSB  '
name1.trim();
'egonDSB'
name1;
'  egonDSB  '
name.trimleft();
VM648:1 Uncaught TypeError: name.trimleft is not a function
    at <anonymous>:1:6
(anonymous) @ VM648:1
name1.trimLeft()
'egonDSB  '
name1.trimright();
VM735:1 Uncaught TypeError: name1.trimright is not a function
    at <anonymous>:1:7
(anonymous) @ VM735:1
name1.trimRight;
ƒ trimEnd() { [native code] }
name1.trimRight();
'  egonDSB'
name1.trim('e')
'egonDSB'
name1.charAt(3);
'g'
name1;
'  egonDSB  '
name1.indexOf('D')
6
name1.indexOf('n');
5
name1.charAt(5);
'n'
name1.indexOf('nD');
5
name1.substring(0,5);
'  ego'
name1.slice(0,5);
'  ego'
name1.substring(0,-1);
''
name1.slice(0,-1);
'  egonDSB '
name1;
'  egonDSB  '
p = 333;
333
name1.concat(p); #js是弱类型（内部会自动转换成相同的数据类型做操作）
'  egonDSB  333'
name1;
'  egonDSB  '

布尔值(boolean)

1. 在python中布尔值是首字母大写的

True

False

2. 但是在js中布尔值是全小写的

true

false

# 布尔值是false的有哪些

空字符串

0

null

undefined

NaN

null与undefined

null

表示值为空一般都是指定或者清空一个变量时使用

name = 'jason';

name = null;

undefined

表示声明了一个变量但是没有做初始化操作（没有给值）

函数没有指定返回值的时候返回的也是 undefined

对象

一切皆对象

数组 (类似于python里面的列表) []

var l = [11,22,33,44,55]
undefined
l
(5) [11, 22, 33, 44, 55]
typeof l
'object'
var li = [11,'sdsd',11,11,true]
undefined
li
(5) [11, 'sdsd', 11, 11, true]
li[1]
'sdsd'
li[-1] #不支持负数索引
undefined

var l = [111,222,333,444,555,666]
undefined
l.length
6
l.push(777)
7
l
(7) [111, 222, 333, 444, 555, 666, 777]
l.pop()
777
l
(6) [111, 222, 333, 444, 555, 666]
l.unshift(123)
7
l
(7) [123, 111, 222, 333, 444, 555, 666]
l.shift()
123
l
(6) [111, 222, 333, 444, 555, 666]
l.slice(0,3)
(3) [111, 222, 333]
l
(6) [111, 222, 333, 444, 555, 666]
l.reverse()
(6) [666, 555, 444, 333, 222, 111]
l.join('$') #跟python刚好相反
'666$555$444$333$222$111'
l.concat([111,222,333]) # python里的extend
(9) [666, 555, 444, 333, 222, 111, 111, 222, 333]
l
(6) [666, 555, 444, 333, 222, 111]
l.sort()
(6) [111, 222, 333, 444, 555, 666]
l
(6) [111, 222, 333, 444, 555, 666]

三个重要的方法

var ll = [111,222,333,444,555,666];
undefined
ll.forEach(function(value){console.log(value)},ll)
VM758:1 111 #一个参数就是数组里面每一个元素对象
VM758:1 222
VM758:1 333
VM758:1 444
VM758:1 555
VM758:1 666
undefined
ll.forEach(function(value,index){console.log(value,index)},ll)
VM867:1 111 0 # 两个参数就是 元素+元素索引
VM867:1 222 1
VM867:1 333 2
VM867:1 444 3
VM867:1 555 4
VM867:1 666 5
undefined
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll) 
VM965:1 111 0 (6) [111, 222, 333, 444, 555, 666] #元素 + 元素索引 + 元素的数据来源
VM965:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM965:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM965:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM965:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM965:1 666 5 (6) [111, 222, 333, 444, 555, 666]
undefined
ll.forEach(function(v,ix,ar){console.log(v,ix,ar)},ll)
VM1106:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM1106:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM1106:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM1106:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM1106:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM1106:1 666 5 (6) [111, 222, 333, 444, 555, 666]
undefined
ll.forEach(function(v,ix,ar,xxx){console.log(v,ix,ar,xxx)},ll)
VM1200:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined #最多三个
VM1200:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
VM1200:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
VM1200:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
VM1200:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
VM1200:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined


ll =  [111,222,333,444]
(4) [111, 222, 333, 444]
ll.splice(0,1,[3,4])
(4) [Array(2), 222, 333, 444]0: (2) [3, 4]1: 2222: 3333: 444length: 4[[Prototype]]: Array(0)

自定义对象 (类似于python里面的字典) {}

运算符

算数运算符

var x = 10;
var res1 = x++; //加号在后面 先做赋值后自增 ++ 自增1
var res2 = ++x;   //加号在前面 先自增再赋值
undefined
res1
10
res2
12

比较运算符

1 == '1' //弱等于
true //内部自动转换成相同的数据类型比较了

1 === '1' //强等于 内部不做类型转换
false

1 != '1'
false
1 !== '1'
true

逻辑运算符

python中 and or not

js中 && || !

赋值运算符

= += -= *=

流程控制

if 判断

var age = 28;
//if(条件){条件成立之后执行的代码块};
if (age>18){
    console.log('来啊 来啊');
}
//if-else
if (age>18){
    console.log('来啊 来啊');
}else{
    console.log('没钱 滚蛋')
}
//if- else if

if (age < 18){
    console.log('培养一下')
}else if(age<24){
    console.log('小姐姐你好，我是你的粉丝')    
}
else{
    console.log('你是个好人')
}

在js中代码是没有缩进的

()条件

()代码块

switch语法

提前列举好可能出现的条件和解决方式

var num = 2;
switch(num){
    case 0:
    console.log('喝酒');
    break; //不加break 匹配到一个之后 就一直往下执行
    case 1:
    console.log('吃饭');
    break;
    case 2:
    console.log('大保健');
    default:
    console.log('条件都没有匹配上 默认走的流程')
}

for 循环

for (let i =0; i<10; i++){
    console.log(i);
}

题目循环打印出数组里的每一个元素

var l1= [111,222,333,444,555,666]
for (let i=0; i<l1.length; i++){
    console.log(l1[i])
}

while 循环

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

三元运算符

python中的三元运算符

 res =1 if  >2 else 3

js中的三元运算符

 res= 1>2?1:3

条件成立取问号侯曼的值，不成立取冒号后面的值

var res = 2>5?8:10;
var res1 = 2>5?8:(8>5?666:444)

三元运算符不要写的过于复杂

函数

在python中定义函数需要用到关键字 def

在js中定义函数需要用到关键字 function

格式

function 函数名(形参1,形参2,形参3...){函数体代码}

无参函数
function fund1(){

        console.log('hello world')

}
func1() //调用 加括号调用 跟python是一样的
有参函数
function func2(a,b){
    console.log(a,b)
}

function func2(a,b){
    console.log(a,b)
}
undefined
func2(1,2)
VM576:2 1 2
undefined
func2(1,2,3,4,5,6,7,8,9) //多了没关系 只要对应的数据
VM576:2 1 2
undefined
func2(1) //少了也没关系
VM576:2 1 undefined

自定义对象

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

创建自定义对象 {}

//第一种创建自定义对象的方式
var d1 = {'name':'jason','age':17}


var d = {'name':'jason',age:16};
undefined
d
{name: 'jason', age: 16}
typeof d
'object'
d['name']
'jason'
d['age']
16
d.name //比python从字典获取值更加的方便
'jason'
d.age
16

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

//第二种创建自定义对象的方式 需要使用关键字new
var d2 = new Object() //空字典，里面什么都没有 {}
d2.name = 'jason'
d2.password = 123

Date对象

let d3 = new Date();

undefined
d3;
Tue Nov 29 2022 21:19:06 GMT+0800 (China Standard Time)

d3.toLocaleString();
'11/29/2022, 9:19:06 PM'

#也支持自己手动输入对象
let d4 = new Date('2018/11/11 11:11:11')
d4.toLocaleString();

let d5 = new Date(1111,11,11,11,11,11)
undefined
d5.toLocaleString();  #月份从0开始 0-11月
'12/11/1111, 11:11:11 AM'

//时间对象具体方法
let d6 = new Date();
d6.getDate()  //获取日
d6.getDay()  //获取星期
d6.getMonth()    //获取月份(0-11)
d6.getFullYear()    //获取完整的年份
d6.getHours()    //获取小时
d6.getMinutes()    //获取分钟
d6.getSeconds()    //获取秒
d6.getMilliseconds()  //获取毫秒
d6.getTime() //时间戳

JSON对象

在python中序列化反序列化

dumps 序列化

loads 反序列化

在js中也有序列化反序列化

JSON.stringify() dumps

JSON.parse() loads
let d7 ={'name':'jason','age':18}
undefined
JSON.stringify(d7)
'{"name":"jason","age":18}'
res = JSON.stringify(d7);
'{"name":"jason","age":18}'
typeof res;
'string'
res2 = JSON.parse(res);
{name: 'jason', age: 18}
typeof res2;
'object'

RegExp对象

在python中如果需要使用正则，那么需要借助于re模块

在js中需要你创建正则对象

第一种有点麻烦
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
匹配内容
reg1.test('egondsb')
reg2.test('egondsb')
题目：获取字符串里面所有的字母s
ondsb dsb dsb'
sss.match(/s/)
['s', index: 5, input: 'egondsb dsb dsb', groups: undefined] //拿到一个就停止了
sss.match(/s/g);
(3) ['s', 's', 's']0: "s"1: "s"2: "s"length: 3 //全局模式
全局匹配模式吐槽点1
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g

reg3.test('egondsb') //全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
全局匹配模式吐槽点2
let reg5 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg5.test(); //什么都不传 默认传的是undefined
true
reg5.test();
true
reg5.test();
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test();
true
总结在使用js书写正则的时候有一定要注意上述问题

一般情况下后续也不会接触到

Math对象

BOM和DOM操作

截止到目前为止我们已经学会了js语法但是你会发现跟浏览器和html文还是一点关系都没有

BOM

浏览器对象模型 Browser Object Model

js代码操作浏览器

DOM

文档对象模型 Document Object Model

js代码操作标签

BOM操作

window对象

window对象指代的就是浏览器窗口

window.innerHeight //浏览器窗口的高度
260 
window.innerWidth //浏览器窗口的宽度
1404
window.open('https://www.baidu.com','','height=400px,width=400px,top=400px,left=400px') 
// 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口大小和位置
// 扩展：父子页面通信 window.opener() 了解
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
window.close() 关闭当前页面

window子对象

window.navigator.appName
'Netscape'
window.navigator.appVersion
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
window.navigator.userAgent; //掌握 用来标识当前是否是一个浏览器
'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
扩展：防爬措施

1. 最简单那最常用的一个就是校验当前请求的发起者是否是一个浏览器

userAgent

User-Agent:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

如何破解该措施

在你的代码中加上上面的User-Agent配置即可
window.navigator.platform;
'Win32'
如果是window的子对象那么window可以省略不写

history对象

window.history.back() //回退到上一页
window.history.forward() //前进到下一页
对应的就是浏览器左上方的两个箭头

location对象（掌握）

window.location.href //获取当前页面的url
window.location.href = url //页面跳转到指定的url
window.location.reload() //刷新页面 浏览器左上方的刷新按钮

弹出框

警告框

确认框

提示框

window.alert('你不要过来啊')
window.confirm('你确定真的要这么做吗')
window.prompt('手牌给我看一下')

计时器相关

过一段时间之后触发（一次触发）

每隔一段时间触发一次（循环触发）

    /*
    function func1(){
        window.alert(123)
    }
    let t = setTimeout(func1,3000) //毫秒为单位 3秒钟之后自动执行func1函数
    clearTimeout(t) //取消定时任务 如果你想要清除定时任务 需要提前用变量指代定时任务
    */
    function func2(){
        window.alert('来啊来啊')
    }
    function show(){
        let t = window.setInterval(func2,3000) //每隔3秒执行一次
        function inner(){
            window.clearInterval(t) //清除定时器
        }
        setTimeout(inner,9000) //9秒钟之后触发
    }
    show()

DOM操作

DOM树的概念

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

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

能够改变页面中的所有HMTL元素

能够改变页面中的所有HTML属性

能够改变页面中的所有CSS样式

能够对页面中的所有事件做出反应

DOM 操作的是标签而一个HTML页面上的标签有很多

1. 先学如何查找标签

2. 再学DOM操作标签

DOM 操作需要用关键字document起手

查找标签

直接查找（必须要掌握）

/*
id查找
类查找
标签查找
*/
// 注意三个方法的返回值是不一样
document.getElementById('d1')
<div id="d1">div>div</div>
document.getElementsByClassName('c1')

document.getElementsByTagName('div')
HTMLCollection(3) [div, div#d1, div, d1: div#d1]

/* 当你用变量名指代标签对象的时候 一般情况下都推荐你书写成xxxEle 如

divEle
aEle

*/

间接查找（熟悉）

let pEle = document.getElementsByClassName('c1')[0] //注意是否需要索引取值
undefined
pEle.parentElement //拿父节点
<div>…</div>
pEle.parentElement.parentElement
<body>…</body>
pEle.parentElement.parentElement.parentElement
<html lang="en"><head>…</head><body>…</body></html>
pEle.parentElement.parentElement.parentElement.parentElement
null
let divEle = document.getElementById('d1')
undefined
divEle.children; //获取所有的字标签
divEle.children[0];
<p>p1</p>

divEle.firstElementChild;
<p>p1</p>

divEle.lastElementChild;
<span>span1</span>

divEle.nextElementSibling; //同级别下面第一个
<p class="c1">…</p>
divEle.previousElementSibling; //同级别上面第一个
null
divEle
<div id="d1">…</div>
pEle.previousElementSibling;
<div id="d1">…</div>

节点操作

通过DOM操作动态的创建img标签

并且给标签加属性

最后经标签添加到文本中

let imgEle = document.createElement('img'); //创建标签
undefined
imgEle
<img>
imgEle.src = '111.png' //给标签设置默认的属性
'111.png'
imgEle.setAttribute('title','一张图片'); //自定义的额属性没办法用点的方式直接设置，只能使用setAttribute方法设置。当然，setAttribute也可以设置默认属性
undefined
imgEle.setAttribute('username','jason');
undefined
imgEle
<img src="111.png" title="一张图片" username="jason">
let divEle = document.getElementById('d1');
undefined
divEle.append(imgEle); //标签内部添加元素（尾部追加）
undefined

创建a标签

给a标签设置属性

给a标签设置文本

添加到标签内部

添加到指定的标签上面

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

额外补充

appendChild()
removeChild()
replaceChild()

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

innerText与innerHTML

divEle.innerText; //获取标签内部的所有文本
'div>div\n\np1\n\nspan1 点我有你好看'
    divEle.innerHTML; //内部文本和标签都拿到
'div&gt;div\n            <p>p1</p>\n            <span>span1</span>\n        <a href="https://www.baidu.com">点我有你好看</a>'
divEle.innerText = 'heiheihei'
'heiheihei'
divEle.innerHTML = 'HAHAHA' 
'HAHAHA'
divEle.innerText =  '<h1><heiheihei</h1>' //不识别html标签
'<h1><heiheihei</h1>'
divEle.innerHTML = '<h1>hahaha</h1>' //识别html标签
'<h1>hahaha</h1>'

获取值操作

获取用户数据标签内部的数据

let seEle = document.getElementById('d2');
undefined
seEle.value;
'111'
seEle.value;
'222'
seEle.value;
'333'
let inputEle = document.getElementById('d1')
undefined
inputEle.value;
'sdf'

如何获取用户上传的文件

let fileEle = document.getElementById('d3');
undefined
fileEle.value;
'C:\\fakepath\\WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx'
fileEle.files;
FileList {0: File, length: 1}0: File {name: 'WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx', lastModified: 1669809033773, lastModifiedDate: Wed Nov 30 2022 19:50:33 GMT+0800 (China Standard Time), webkitRelativePath: '', size: 10259, …}length: 1[[Prototype]]: FileList
fileEle.files[0]; //获取文件数据
File {name: 'WebTracker_Squad_fb_allocation_NSB_MN_RAN_BOAM_RD_O&M_UI_CM&SPEC_HAZ_SG.xlsx', lastModified: 1669809033773, lastModifiedDate: Wed Nov 30 2022 19:50:33 GMT+0800 (China Standard Time), webkitRelativePath: '', size: 10259, …}

class,css操作

let divEle = document.getElementById('d1');
undefined
divEle.classList; //获取标签所有的类属性
DOMTokenList(3) ['c1', 'bg_yellow', 'bg_red', value: 'c1 bg_yellow bg_red']0: "c1"1: "bg_yellow"2: "bg_red"length: 3value: "c1 bg_yellow bg_red"[[Prototype]]: DOMTokenList
divEle.classList.remove('bg_red'); //移除某个类属性
undefined
divEle.classList.add('bg_red'); //添加类属性
undefined
divEle.classList.contains('c1'); //验证是否包换某个类属性
true
divEle.classList.contains('c2');
false
divEle.classList.toggle('bg_red'); //有则删除，无则添加
false
divEle.classList.toggle('bg_red');
true
divEle.classList.toggle('bg_red');
false
divEle.classList.toggle('bg_red');
true

DOM操作操作标签样式统一先用style起手时间

et pEle = document.getElementsByTagName('p')
undefined
let pEle = document.getElementsByTagName('p')[0];
undefined
pEle.style.color = 'red';
'red'
pEle.style.fontSize = '28px';
'28px'
let divEle = document.getElementById('d1');
undefined
divEle.style.backgroundColor = 'gray';
'gray'
pEle.style.backgroundColor = 'yellow';
'yellow'
pEle.style.border = '3px solid red';
'3px solid red'

事件

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

绑定事件的两种方式
<body>
    <button onclick="func1()">点我</button>
    <button id="d1">点我</button>
    <script>
        //第一种绑定事件的方式
        function func1(){
            alert(111)
        }
        //第二种绑定事件的方式
        let btnEle = document.getElementById('d1')
        btnEle.onclick = function (){
            alert(222)
        }
    </script>
</body>
script标签既可以放在head内也可以放在body内

但是通常情况下都是放在body的最底部

原生js事件绑定

我们直接写几个案例，看懂即可

开关灯案例

    <div id="d1" class="c1 bg_red bg_yellow"></div>
    <button id="d2">变色</button>
    <script>
        let buttonEle = document.getElementById('d2')
        buttonEle.onclick = function (){document.getElementById('d1').classList.toggle('bg_yellow')}

    </script>

input框获取焦点失去焦点案例

    <input type="text" value="老板 去吗？" id="d1">
    <script>
        let inputEle = document.getElementById('d1')
        // 获取焦点失去
        inputEle.onfocus = function (){
            // 将input框内部的值去除
            inputEle.value = ''
            // .value就是获取 等号赋值就是设置
        }
        // 失去焦点事件
        inputEle.onblur = function (){
            // 给input标签重写赋值
            inputEle.value = '没钱 不去'
        }

    </script>

实时展示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<input type="text" id="d1" style="display:block;height:20px;width:150px  ">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个技术
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString();
    }

    //setInterval(showTime,1000)
    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if (!t) {
            t = setInterval(showTime, 1000)
        }//每点击一次就会开设一个定时器 而t只指代最后一个
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2">
</select>
<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北省": ["廊坊", "邯郸", '唐山'],
        "北京": ["朝阳区", "海淀区", "昌平区"],
        "山东": ["威海市", "烟台市", '临沂市'],
        "上海": ['浦东区', '静安区', '黄浦区'],
        "深圳": ['南山区', '罗湖区', '宝安区']
    };
    // for循环获取省
    for (let key in data) {
        // 将省信息做成一个个option标签添加到第一个select框中
        // 1. 创建option标签
        let opEle = document.createElement('option')
        // 2. 设置文本
        opEle.innerText = key
        // 3. 设置value
        opEle.value = key // <option value="省">省</option>
        // 4. 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件 select框 change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        //console.log(currentPro)
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的opiton
        cityEle.innerHTML = ''
        // 自己加一个选择
        //let ss = '<option disabled selected>--请选择--<option>'
        //cityEle.innerHTML= ss
        /*
        let oppEle = document.createElement('option')
        oppEle.innerText = '--请选择--'
        oppEle.setAttribute('selected','selected')

         */
        //oppEle.setAttribute('disbeld')
        // 自己加一个请选择
        //console.log(currentCityList)
        // for循环所有的市 渲染到第二个select中
        // 1. 创建option标签
        for (let i=0;i<currentCityList.length;i++) {
            let opcityEle = document.createElement('option')
            opcityEle.innerText = currentCityList[i]
            opcityEle.value = currentCityList[i]
            cityEle.appendChild(opcityEle)
        }
    }
</script>
</body>
</html>