Javascript学习

守灯者

已于 2023-12-06 14:48:55 修改

阅读量1.5k

点赞数 4

分类专栏：笔记前端找工作之路文章标签： javascript 学习前端

于 2023-03-04 17:19:53 首次发布

本文链接：https://blog.csdn.net/m0_64715294/article/details/129333362

版权

前端找工作之路同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

笔记

3 篇文章 0 订阅

订阅专栏

第一章初识JavaScript

第二章 JavaScript基础

第三章 JavaScript函数

第四章对象

第五章数组

第六章常用方法

第七章 JavaScript的基本操作

文章目录

系列文章目录
前言
一、初识JavaScript
二、JavaScript基础
三、JavaScript函数
四、对象
五、数组
六、常用方法
七、JavaScript的基本操作
总结

前言

JavaScript 学习、记录。

一、初识JavaScript

1.网页组成

HTML：定义网页的内容；
CSS：规定网页的布局；
JavaScript：对网页进行编程。

2.JavaScript的发展历史

布兰登·艾奇（Brendan Eich，1961~）；
在1995年10天完成JavaScript设计；
网景公司最初命名为LiveScript，与Sun公司合作后改为JavaScript；

3.关于JavaScript

JavaScript：是一种运行在客户端的脚本语言；
脚本语言：不用编译，运行过程中由js 引擎逐行来进行解释并执行；
可以基于Node.js技术进行服务器端编程。

4.JavaScript三大核心组成

BOM： Browser Object Model - JS 操作浏览器的内容；
DOM：Document Object Model - JS 操作文档流的内容；
ECMAScript：JS 代码的书写规则。

5.JS 的作用

JS 的作用：就是利用ECMAScript语法去操作浏览器发生一些变化，用ECMAScript语法去操作文档流去发生一些变化。
表单动态校验（密码强度检测）——JS 产生最初的目的；
网页特效；
服务端开发（如Node.js）；
桌面程序（Electrom）；
App
游戏开发（cocos2d-js）

6.浏览器执行JavaScript的原理

渲染引擎：用来解析HTML和CSS,俗称内核
JS引擎：也称js 解释器。用来读取网页中的JavaScript代码，对其处理后运行。

7.JS 注释

单行注释：// 快捷键：ctrl+/
多行注释：/* */ 快捷键：shift+alt+a(可修改)

8.JS 三个输入输出语句

alert() 浏览器弹出警示框：在浏览器弹窗显示这个内容；
document.write() 直接在浏览器页面输出
console.log() 浏览器控制台打印出信息；
promp（）浏览器弹出输入框，用户输入

二、JavaScript基础

1.Javascript 变量

定义：在程序运行过程中，通过变量获取数据 var n = 100；一个变量只能保存一个值。
变量的规则：

变量只能由数字、字母、下划线、美元符组成；
变量不能由数字开头；
严格区分大小写；
不能使用关键字；
尽可能使用一些有意义的单词或者拼音。

2.JavaScript 数据类型

基本数据类型

数值类型：number 不同进制的数值、科学计数法
字符串类型：string 单引号、双引号内的内容
布尔类型：boolean true、false
空类型：（1）Undefined：表示没有值 var n 1；（2） null：表示有值，有一个空值 var n2 = null 。

引用数据类型
使用 typeof 关键字来进行数据类型检测

数据类型转换

1.转数值：Number（要转换的内容); parseInt(); parseFloat();

<script>
    //准备一个变量，赋值为字符串类型内容
    var s1 = '100'
    console.log(s1)
    console.log(typeof s1)

    //使用Number（）方法进行转换
    var n1 = Number(s1)
    console.log(n1)
    console.log(typeof n1)
</script>

2.转字符串：String()

<script>
    //准备一个变量，赋值为布尔型内容 
    var boo = true
    console.log(boo)
    console.log(typeof boo)

    //使用String() 方法进行转换
    var s= String(boo)
    console.log(s)
    console.log(typeof s)
</script>

3.转布尔:Boolean()

3.运算符

算术运算符：+ - * / %
赋值运算符：= += -= * = /= %=
比较运算符：> < >= <= == === != !==
逻辑运算符：&& || !
自增自减运算符：++ --

4.条件分支语句

<script>
    //if 语句案例-判断平年还是闰年
    var year = 2023

    //if语句判断
    if(year % 4 === 0 && year % 100 !== 0 || year % 400 ===0 ){
        console.log(year + '是闰年')
    }else{
        console.log(year + '不是闰年')
    }
</script>

//while语句求10的阶乘
<script>
    //准备变量接收阶乘结果
    var sum = 1
    //开始
   var n = 10
    //结束n>=1
    while (n >= 1){
        sum *= n
        n--
    }
    //输出查看数字
    console.log( sum )
</script>

三、JavaScript函数

1.函数的定义

语法

function fn(){
代码
}

2.函数的调用

语法

函数名（）

完整代码

//定义一个函数
function fn() {
   console.log('名为 fn 的函数')
}
//调用一个函数
fn()

()里的内容
定义阶段（）内容叫形参：只能在函数内部使用。
值：函数调用的时候，由实参确定。
调用阶段（）内容叫实参：给形参进行赋值。

<script>
//定义一个函数，添加两个形参
function fn(a,b){
    console.log(a)
    console.log(a)
}
//调用一个函数，添加两个实参
fn(3,4)
</script>

3.函数的返回值

给函数调用添加一个结果 return 结果。

小结

//定义一个函数
function fn( 形参) {
代码
...
return 返回值
}
//调用一个函数
fn( 实参 )

函数就是 JS中的一个数据类型。
函数定义阶段，函数体内代码不执行，调用一次执行一次。
形参：定义在函数内部使用的变量。
实参：函数调用时给形参赋值的内容。
在函数内使用 return 给函数添加一个结果作为函数的一个返回值。

4.递归函数

调用函数时把问题逐层解决。

例题：斐波那契数列

数列： 1 1 2 3 5 8 13 21 34 55...

规则：第一位和第二位是1，第三位开始每一位是前两位的和，求数列第n位是多少？

function fn(n){
    if (n == 1 || n == 2) return 1;
    return fn(n-1)+(n-2);
}

5.作用域

1.定义：一个变量可以在什么范围内使用。

范围：

全局作用域：一个页面就是一个作用域。
私有作用域：只有函数生成私有作用域。

2.使用

定义：声明在什么位置的变量是哪一个作用域的变量。
访问：自己有的用自己的，自己没有的用父级的，到全局没有就报错。
赋值：自己给自己赋值，自己没有给父级的赋值，到全局没有定义为全局再赋值。

四、对象

1.创建一个对象

对象（Object）：键值对的集合。
var obj = {键key:'值value'}

2.对象的操作

对象内键值对的操作

增：向对象内添加一个键值对

<script>
    var obj = { }
    console.log(obj)
    //增加一个键值对
    obj.name = '语法一'
    obj['age']=18
    console.log(obj)
</script>

删：delete 对象名.键
改：对象名.键=值 OR 对象名['键']=值
查：console.log(obj.name) console.log(obj['age'])

五、数组

1.基本概念

数组（array）：有序的数据集合。
创建一个数组可以直接给变量赋值一个中括号[ ] ，中括号表示一个空数组。数组中存写数据时，直接书写数据，中间用逗号分隔，数组中可以存储任何类型数据类型。
var arr=[100,true,'hello']
序号 0 1 2

2.数组的操作

长度操作

获取长度：数组名.length

<script>
    var arr = [100,200,300,400,500];
    console.log(arr.length)
</script>

设置长度：数组名.length = 数字

数据操作

获取数据：数组名[索引]

<script>
    var arr = [100,200,300,400,500];
    console.log(arr[2])
</script>

设置数据：数组名[索引] = 值

3.数组的遍历

获取一个数据叫访问，从头到尾一次访问每一个数据叫遍历
利用循环进行遍历，开始为0，结束为小于长度，步长为1

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    for(var i=0;i<arr.length;i++){
        console.log(i)
    }
</script>

循环过程
i= 0    console.log( arr[0] )
i= 1    console.log( arr[1] )
i= 2    console.log( arr[2] )
i= 3    console.log( arr[3] )
i= 4    console.log( arr[4] )

4.数组的常用方法

1.push()

语法：数组.push(数据)
作用：将数据追加到数组的末尾
返回值：追加数据后数组最新的长度

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.push('追加的')
    console.log(arr)
    console.log(res)
</script>

//结果
[100, 200, 300, 400, 500]
[100, 200, 300, 400, 500, '追加的']

2.pop()

语法：数组.pop()
作用：删除数组的最后一个数据
返回值：被删除的数据

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.pop ()
    console.log(arr)
    console.log(res)
</script>
//结果数组的最后一项被删除了
 [100, 200, 300, 400, 500]
 [100, 200, 300, 400]

3.unshift()

语法：数组.unshift(数据)
作用：将数据添加到数组的最前面
返回值：添加数据后数组的最新长度

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.unshift('加的')
    console.log(arr)
    console.log(res)
</script>
//结果
[100, 200, 300, 400, 500]
['加的', 100, 200, 300, 400, 500]

4.shift()

语法：数组.shift()
作用：删除数组最前一个数据
返回值：被删除的数据

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.shift()
    console.log(arr)
    console.log(res)
</script>
//结果
[100, 200, 300, 400, 500]
[200, 300, 400, 500]
100

5.reverse()

语法：数组.reverse()
作用：将数组反转
返回值：反转后的数组


<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.reverse()
    console.log(arr)
    console.log(res)
</script>
//结果
[100, 200, 300, 400, 500]
[500, 400, 300, 200, 100]
[500, 400, 300, 200, 100]

6.splice()

语法：数组.splice(开始索引，多少个，要插入的数据)；默认值0
作用：删除数组中若干数据，并选择是否插入新的数据；
返回值：以新数组的形式返回被删除的数据

<script>
    var arr = [100,200,300,400,500];
    console.log(arr)
    var res = arr.splice(1,1,'插入')
    console.log(arr)
    console.log(res)
</script>

//结果
[100, 200, 300, 400, 500]
[100, '插入', 300, 400, 500]
[200]

//表示从索引1开始删除一个数据，并把新来的字符串插入到数组里面，
//从哪删除，从哪插入

7.sort()

语法：数组.sort()
数组.sort(function(a,b){return a-b}) //从小到大
数组.sort(function(a,b){return b-a}) //从大到小
作用：将数组进行排序
返回值：排序好的新数组

<script>
    var arr = [ 11, 1, 3, 9, 7, 5 ];
    console.log(arr)
    //执行sort方法,从小到大排列
    var res = arr.sort(function (a,b) {return a-b} )
    //输出数组
    console.log(arr)
    //输出返回值
    console.log(res)
</script>

//结果：
 [11, 1, 3, 9, 7, 5]
 [1, 3, 5, 7, 9, 11]
 [1, 3, 5, 7, 9, 11]

8.join()

语法：数组.join(连接符)
作用：将数组用连接符连接成为一个字符串
返回值：连接好的字符串

9.concat()

语法：数组.concat(其他数组)
作用：将其他数组和数组拼接在一起
返回值：拼接好的新数组

10.slice()

语法：数组.slice(开始索引,结束索引)
开始索引：默认值：0
结束索引：默认是数组长度
作用：截取数组中的某些数据
返回值：以新数组的形式返回截取出来的数据

11.indexOf()

语法：数组.indexOf(数据)
作用：查找数据在数组中的索引位置
返回值：有该数据，返回第一次出现的索引位置；没有该数据就是-1；

<script>
    var arr = [100,200,300,400,300];
    console.log(arr)
    var res = arr.indexOf(300)//查找300这个数据
    console.log(arr)
    console.log(res)
</script>

//结果：
[100, 200, 300, 400, 300]
[100, 200, 300, 400, 300]
2
//返回值2；表示300这个数据在数组中第一次出现的位置是索引2的位置

12.forEach()

语法：数组.forEach(function( item,index,arr ) {})
作用：遍历数组
返回值：无

13.map

语法：数组.map( function( item,index,arr ) {})
作用：映射数组
返回值：映射后的新数组

14.filter()

语法：数组.filter( function( item,index,arr ) {})
作用：过滤数组
返回值：过滤后的新数组

15.every（）

语法：数组.every( function( item,index,arr ) {})
作用：判断数组是不是每一项都满足条件
返回值：一个布尔值

16.some（）

语法：数组.some( function( item,index,arr ) {})
作用：判断数组是不是有某一项满足条件
返回值：一个布尔值

总结

六、常用方法

1.字符串常用方法

1.charAt ()

语法：字符串.charAt(索引)
作用：获取对应位置的字符
返回值：对应索引位置的字符

<script>
    var str = '你好!这里是charAt方法'
    console.log(str)
    var res = str.charAt(3)
    //输出返回值
    console.log(res)
</script>
//结果
你好!这里是charAt方法
!

2.toLowerCase()

语法：字符串.toLowerCase()
作用：把字符串内的字母全部转换为小写
返回值：转换好的字符串

<script>
    var str = 'Nice To Meet You !'
    console.log(str)
    var res = str.toLowerCase()
    console.log(res)
</script>
//结果
Nice To Meet You !
nice to meet you !

3.toUpperCase()

语法：字符串.toUpperCase()
作用：把字符串内的字母全部转换为大写
返回值：转换好的字符串

<script>
    var str = 'Nice To Meet You !'
    console.log(str)
    var res = str.toUpperCase()
    console.log(res)
</script>
//结果
Nice To Meet You !
NICE TO MEET YOU !

4.replace()

语法：字符串.replace(换下内容,换上内容)
作用：把字符串内第一个满足换下内容的片段替换成换上内容
返回值：替换好的字符串

<script>
    var str = '你好!这里是charAt方法'
    console.log(str)
    var res = str.replace('charAt','replace')
   //输出返回值
    console.log(res)
</script>
//结果
你好!这里是charAt方法
你好!这里是replace方法

5.trim()

语法：字符串.trim()
作用：去掉字符串收尾的空格
返回值：去除空格后的字符串

<script>
    var str = '    你好!这里是trim方法  '
    console.log(str)
    var res = str.trim()
    console.log(res)
</script>
//结果
    你好!这里是trim方法  
你好!这里是trim方法

6.split()

语法：字符串.split(分隔符)
作用：按照分隔符将字符串切割成为一个数组
返回值：切割后的数组

<script>
    var str = '2023-4-18'
    console.log(str)
    var res = str.split('-')
    console.log(res)
</script>
//结果
2023-4-18
['2023', '4', '18']

7.substr()、substring()、slice()

substr()
语法：字符串.substr(开始索引,多少个)
substring()
语法：字符串.substring(开始索引,结束索引)
slice()
语法：字符串.slice(开始索引,结束索引)
作用：截取字符串
返回值：截取出来的字符串

<script>
    var str = 'Nice To Meet You !'
    console.log(str)
    var res1 = str.substr(1,5)//从索引1开始截取5个字符
    console.log(res1)
    var res2 = str.substring(1,5)//从索引1开始到索引5，包前不包后
    console.log(res2)
    var res3 = str.slice(1,5)//从索引1到索引5
    console.log(res3)
</script>
//结果：
Nice To Meet You !
ice T
ice 
ice 
//注意空格也算一个索引

总结：

2.数字常用方法

1.random()

语法：Math.random()
作用：获取 0-1 之间的随机小数，包含0，不包含1
返回值： 0-1 之间的随机小数

2.round()

语法：Math.round(数字)
作用：对数字进行四舍五入取整
返回值：四舍五入取整后的整数

3.ceil()

语法：Math.ceil(数字)
作用：对数字进行向上取整
返回值：向上取整后的整数

<script>
    var res1 = Math.round(7.4)  //7
    console.log(res1)
    var res2 = Math.round(7.5)  //8
    console.log(res2)
</script>

4.floor()

语法：Math.floor()(数字)
作用：对数字进行向下取整
返回值：向下取整后的整数

<script>
    var res1 = Math.ceil(7.5) //8
    console.log(res1)
    var res2 = Math.floor(7.5) //7
    console.log(res2)
</script>

5.pow()

语法：Math.pow(底数,指数)
作用：对数字进行取幂运算
返回值：取幂运算后的结果

<script>
    var res = Math.pow(2,5) //32  2的5次方
    console.log(res)
</script>

6.sqr()

语法：Math.sqr(数字)
作用：对数字进行二次方根（只能取正）运算
返回值：二次方根运算后的结果

<script>
    var res = Math.sqrt(4) //2 相当于算术平方根
    console.log(res)
</script>

7.abs()

语法：Math.abs(数字)
作用：对数字进行绝对值运算
返回值：绝对值运算运算后的结果

<script>
    var res = Math.abs(-5) //5
    console.log(res)
</script>

8.max()

语法：Math.max(数字1,数字2，数字3，...)
作用：获取若干数字的最大值
返回值：若干数字中的最大值

<script>
    var res = Math.max (-5, -7, 0, 3, 12, -1) //12
    console.log(res)
</script>

9.min()

语法：Math.min(数字1,数字2，数字3，...)
作用：获取若干数字的最小值
返回值：若干数字中的最小值

10.PI()

语法：Math.PI
作用：得到一个近似Π的值

案例

3.时间常用方法

在网页上有时候需要显示一些时间信息，JS中的一种引用数据类型时间(Date)。

创建方式：定义变量，赋值一个new Date()：var time = new Date()

传递参数 var time = new Date(年,月,日,时,分,秒)

<script>
    var time = new Date(2023,1,5,12,13,14)//Sun Feb 05 2023 12:13:14 GMT+0800 (中国标准时间)
    console.log(time)
</script>

1.获取

时间对象.getFullYear()
作用：获取到对象中的年份信息

var year = time.getFullYear()

console.log(year)

时间对象.getMonth()
作用：获取到对象中的月份信息（0表示1月，11表示12月）

var month = time.getMonth()

console.log(month)

时间对象.getDate()
作用：获取到对象中的日期信息

时间对象.getHours()
作用：获取到对象中的小时信息

时间对象.getMinutes()
作用：获取到对象中的分钟信息

时间对象.getSeconds()
作用：获取到对象中的秒钟信息

时间对象.getDay()
作用：获取到对象中的星期信息

时间对象.getTime()
作用：获取到对象中的时间戳信息

<script>
    //创建一个时间对象
    var time = new Date() 
    console.log(time) // //Fri Apr 21 2023 19:02:14 GMT+0800 (中国标准时间)
    //获取时间对象中的时间戳信息
    var ms = time.getTime()
    console.log(ms)  // 1682074934357
</script>

2.设置

<script>
    var time = new Date()
    console.log(time)  //Fri Apr 21 2023 19:15:09 GMT+0800 (中国标准时间)
    time.setFullYear(2020)
    time.setMonth(5)
    time.setDate(21)
    time.setHours(11)
    time.setMinutes(13)
    time.setSeconds(14)
    console.log(time)  //Sun Jun 21 2020 11:13:14 GMT+0800 (中国标准时间)
</script>

3.案例

封装函数，获取两个时间节点之间的时间差

<script>
    //1.准备两个时间节点
    var time1 = new Date(2023,3,20,12,13,14)
    var time2 = new Date(2023,3,25,14,35,5)
    //2.获取两个时间节点的时间戳
    var ms1 = time1.getTime()
    var ms2 = time2.getTime()

    //准备一个函数，接受两个参数
    function getDiff( time1,time2){
        //3两个时间戳相减的到相差的毫秒数
        var sub = Math.ceil((ms2 - ms1)/1000)//时间戳是mm  获取S
        console.log( sub )
        //4.换算
        //4-1.换算天,使用差值除以一天的秒数
        var day = Math.floor(sub / (60*60*24))//一天需要的秒数
        //4-2.换算小时，差值取余一天的秒数
        var hours = Math.floor(sub % (60*60*24) / (60*60))//多少个整天还有多少个小时
        //4-3换算分钟
        var minutes = Math.floor(sub % ( 60*60) / 60 )//结果，除了整小时以外，还有多少分钟
        //4-4换算秒钟 ，差值取余一秒钟的秒数
        var seconds =sub % 60
        return{day:day,hours:hours,minutes:minutes,seconds,seconds}

}
var res  = getDiff(time1,time2)
console.log(res)
</script>

//结果
{day: 5, hours: 2, minutes: 21, seconds: 51}
day: 5
hours: 2
minutes: 21
seconds: 51
[[Prototype]]: Object

七、JavaScript的基本操作

1.JavaScript的BOM操作

1.获取浏览器窗口尺寸

获取可视窗口宽度：window.innerWidth
获取可视窗口高度：window.innerHeight

2.浏览器的弹出层

提示框：window.alert("提示信息")

window.alert("提示信息")

询问框：window.confirm("提示信息")

<script>
   var res = window.confirm("提示信息")
    console.log(res)
</script>

默认框：window.prompt("提示信息")

<script>
    var res = window.prompt("请输入密码")
    console.log(res)
</script>

3.开启和关闭标签页

开启：window.open( '地址' )
关闭：window.close( )

<body>
    <button id="on">开启</button>
    <button id="off">关闭</button>
    <script>
        //开启按钮的点击事件
        on.onclick = function(){
            //开启标签页
            window.open('https://www.baidu.com/')
        }
        //关闭
          off.onclick = function(){
            //开启标签页
            window.close()
        }
    </script>
</body>

4.浏览器常见事件

资源加载完毕：window.onload = function() {}
可视尺寸改变：window.onresize = function() {}
滚动条位置改变：window.onscroll = function() {}

5.浏览器的历史记录操作

回退页面：window.history.back() //相当于浏览器的 $\leftarrow$
前进页面：window.history.forward() //相当于浏览器的 $\rightarrow$

6.浏览卷去的尺寸

卷去的高度：
document.documentElement.scrollTop //有<!DOCTYPE html>时使用
document.body.scrollTop //无DOCTYPE标签使用

<style>
    body{
        width: 3000px;
        height: 3000px;
    }
</style>
<body>
    <script>
        //滚动条位置变化
        window.onscroll = function(){
            console.log(document.body.scrollTop)
        }
    </script>
</body>

卷去的宽度：
document.documentElement.scrollLeft
document.body.scrollLeft

<style>
    body{
        width: 3000px;
        height: 3000px;
    }
</style>
<body>
    <script>
        //滚动条位置变化兼容写法
        window.onscroll = function(){
            console.log(document.documentElement.scrollLeft ||document.body.scrollLeft )
        }
    </script>
</body>

7.设置浏览器滚动条的位置

滚动到：window.scrollTo()
参数方式1：window.scrollTo( left, top )// 瞬间定位 left表示浏览器宽度
参数方式2：
window.scrollTo({
left: xx, //卷去宽度定位
top:yy,
behavior: 'smooth' //定位方式：平滑滚动
} )

2.JavaScript的DOM操作

1.获取元素操作方式

根据 id 名称获取

语法：document.getElementById( 'id 名称' )

作用：获取文档流中 id 名对应的一个元素

返回值：如果有id对应的元素，就是这个元素；没有i，null

根据元素类名获取

语法：document.getElementByClassName( '元素类名' )

作用：获取文档流中所有类名对应的元素

返回值：必然是一个伪数组，有类名对应元素，获取全部；无，空的伪数组

根据元素标签名获取

语法：document.getElementByTagName( '标签名' )

作用：获取文档流中所有标签对应的元素

返回值：必然是一个伪数组，有标签名对应元素，获取全部；无，空的伪数组

根据元素选择器获取一个

语法：document.querySelector( '选择器' )

作用：获取文档流满足选择器规则的第一个元素

返回值：有选择器对应元素，获取第一个；无，null

根据元素选择器获取一组

语法：document.querySelectorAll( '选择器' )

作用：获取文档流满足选择器规则的所有元素

返回值：必然是一个伪数组，有选择器对应元素，获取全部；无，空的伪数组

2.操作元素内容

操作元素文本内容

获取：元素.innerText

设置：元素.innerText = '新内容'

操作元素超文本内容

获取：元素.innerHTML

设置：元素.innerHTML = '新内容'

3.操作元素属性

原生属性：标签本身自带属性，如id 、src 、type 等

获取：元素.属性名

设置：元素.属性名 = '属性值'

自定义属性：自己定义的属性

获取：元素.getAttribute('属性名')

设置：元素.setAttribute('属性名','属性值')

删除：元素.removeAttribute('属性名')

4.操作元素行内样式

获取：元素.style.样式名

设置：元素.style.样式名 = '样式值'

注意：只能获取和和设置元素的行内样式

5.获取元素非行内样式

获取：window.getComputedStyle(元素).样式名

注意：可以获取元素的行内样式，也可以获取元素的非行内样式

3.JavaScript案例

<!DOCTYPE html>
<html lang="en">
<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>回到顶部</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            height: 3000px;
        }

        .header{
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
            background-color: skyblue;

            transition: top .5s linear;

            position: fixed;
            top: -80px;
            left: 0;
        }

        .goTop{
            width: 50px;
            height: 50px;
            background-color: pink;
            font-size: 20px;
            text-align: center;
            line-height: 25px;
            color: #fff;

            position: fixed;
            bottom: 50px;
            right: 50px;
            
            display: none;
        }
    </style>
</head>
<body>
    <div class="header">顶部通栏</div>
    <div class="goTop">回到顶部</div>

    <script>
        //1.获取元素
        var header = document.querySelector('.header')
        var goTop = document.querySelector('.goTop')

        //2.绑定滚动事件
        window.onscroll = function() {
            //2-1.获取浏览器卷去的高度
            var height = document.documentElement.scrollTop || document.body.scrollTop
            //2-2.判断卷去高度
            if(height >= 300){
                //显示
                header.style.top = "0px"
                goTop.style.display = 'block'
            }else{
                header.style.top = "-80px"
                goTop.style.display = 'none'
            }
        }
        //3.绑定点击事件
        goTop.onclick = function(){
            //3-1让页面滚动到顶部
            window.scrollTo({
                top:0,
                behavior:'smooth'
            })
        }
    </script>
</body>
</html>

案例2：全选按钮

<!DOCTYPE html>
<html lang="en">
<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>全选</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            padding: 20px;
            border: 1px solid palevioletred;
            margin: 30px auto;
            border-radius: 5px;
        }
        .hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选 : <input type="checkbox"><br>
        <hr>
        <input type="checkbox">选项一<br>
        <input type="checkbox">选项二<br>
        <input type="checkbox">选项三<br>
        <input type="checkbox">选项四<br>
    </div>

    <script>
        //1.获取元素
        var allBtn = document.querySelector('input')
        var items = document.querySelectorAll('input:nth-child(n + 2)')
        //2.给全选按钮绑定事件
        allBtn.onclick = function () {
            //2-1.拿到自己的选中状态
            var type = allBtn.checked

            //2-2.把自己的选中状态设置给每一个选项按钮
            for(var i = 0; i < items.length; i++){
                items[i].checked = type
            }
        }
        //3.循环给每一个选项按钮绑定点击事件
        for(var i = 0; i < items.length; i++){
            //3-1.给每一个选项按钮绑定点击事件
            items[i].onclick = function(){
                //3-2.首先定义假设变量，假设所有按钮都是选中的
                var flag = ture 
                //3-3.通过循环来验证假设
                for (var  j = 0; j <items.length;j++){
                    flag = false
                    break
                }
                //3-4.把我们得到的结果设置给全选按钮
                 allBtn.checked = flag
            }
        }
        
    </script>
</body>
</html>