LITREILY

浅学javascript

2022-04-07语言 • javascript

该来的永远跑不掉，该补的早晚要补，诶，好好学javascript，我爱学习！！！！！

[TOC]

历史

image-20220407213804320

image-20220407213723069

javascript的组成部分

html是骨架，css是对页面进行渲染，js绝对这个页面可以做什么

image-20220407213908008

javascript由BOM,DMO,ECMAScript组成

BOM

全名-Browser Object Model,指的是js操作浏览器发送变化的属性和方法

DOM

全名-Document Object Model,指的是操作文档流发生变化的属性和方法

ECMAScript

指的是JS代码的书写语法和书写规则

JavaScript 书写位置

行内式

a标签-书写在href属性上

<a href="javascript: JS代码;">点我一下</a>

image-20220407215348244

非a标签-书写在行为属性上

<div onclick="alert('hello word')">点我一下</div>

image-20220407215601888

内嵌式

把代码书写在一个script标签对里面,不需要依赖任何行为，打开网页就会执行

image-20220407215824582

外链式

把代码书写在一个.js文件内，外链式js代码，不需要依赖任何行为，打开页面就会执行

image-20220407220351326

JavaScript定义变量

var num = 100

image-20220407220943173

image-20220407220903524

三种输出方式

image-20220407221044266

JS的数据类型

image-20220407221242187

image-20220407221932277

image-20220407221440539

image-20220407221511452

image-20220407221817260

JavaScript数据类型转换

image-20220407222131138

image-20220407222415779

当可以合法转换就正常转换，当无法合法转换时，值就变为NAN

image-20220407230433762

当可以合法转换就正常转换，当无法合法转换时，如果原值以字母，则返回值为NAN，如果原值以数字+字符串开头，则返回前面的数字而忽略字符串

image-20220407222543001

image-20220407222630874

运算符

image-20220407230952623

image-20220407231034790

image-20220407231109372

image-20220407231129915

image-20220407231232353

条件分支语句

image-20220407231403054

image-20220407231436373

image-20220407231551013

函数

image-20220407232532028

image-20220407232436701

image-20220407232646209

递归函数

image-20220407232807115

image-20220407232828922

作用域

image-20220407232920259

image-20220407233013700

image-20220407233022496

image-20220407233059818

image-20220407233136738

image-20220407233201625

对象数据类型

image-20220407233307155

image-20220407233549115

image-20220407233644769

image-20220407233455066

image-20220407233504184

image-20220407233523944

image-20220407233615368

数组数据类型

image-20220407233743737

image-20220407233840225

数组常用方法

image-20220408000927943

image-20220407234008850

image-20220407234023183

image-20220407234038569

image-20220407234054841

image-20220407234110601

image-20220407234132600

image-20220407234420968

image-20220407234514112

image-20220407234540680

image-20220407234754392

image-20220407234822279

包前不包后

image-20220408000322543

image-20220408000514401

image-20220408000635298

image-20220408000653869

image-20220408000714136

image-20220408000753278

image-20220408000801246

image-20220408001013869

image-20220408001035076

image-20220408000830365

image-20220408000847454

字符串常用方法

image-20220408001751547

image-20220408001220640

image-20220408001232044

image-20220408001300510

image-20220408001325030

image-20220408001357820

image-20220408001425680

image-20220408001432558

image-20220408001456688

image-20220408001513319

image-20220408001558293

image-20220408001728712

数字常用方法

image-20220408002711294

image-20220408001857190

image-20220408001921068

image-20220408001959789

image-20220408002017326

image-20220408002033918

image-20220408002053540

image-20220408002112036

image-20220408002122229

image-20220408002133196

image-20220408002147147

image-20220408002152859

image-20220408002208364

image-20220408002217762

image-20220408002233052

image-20220408002257196

时间常用方法

image-20220408002836962

image-20220408002855807

image-20220408003002403

image-20220408003019626

image-20220408003107445

JavaScript的BOM操作

image-20220410161902503

1、获取浏览器窗口尺寸

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

image-20220410162216868

2、浏览器的弹出层

提示框: window.alert('提示信息')
询问框: window.confirm('提示信息') 返回 true和false
输入框: window.prompt('提示信息') 点确定，返回输入框中内容，点取消返回null

3、开启和关闭标签页

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

image-20220410162721520

4、浏览器常见事件

资源加载完毕: window.onload = function() {}
可视尺寸改变: window.onresize = function(){}
滚动条位置改变: window.onscroll = function(){}
  1. 在页面资源加载完毕执行

image-20220410163103734

  1. 可视窗口发生变化时执行

    image-20220410163226827

  2. 滚动条位置改变时执行

    image-20220410163327867

5、浏览器历史记录操作

回退页面:window.history.back()
前进页面: window.history.forward

6、浏览器卷去尺寸

image-20220410163708715

  1. 卷去的高度

    document.documentElement.scrollTop #当有<!DOCTYPE html>用这个
document.body.scrollTop #当没有<!DOCTYPE html>用这个

    兼容写法

    image-20220410164045152

  2. 卷去宽度

    document.documentElement.scrollleft #当有<!DOCTYPE html>用这个
document.body.scrollleft #当没有<!DOCTYPE html>用这个

    兼容写法:

    image-20220410164228039

7、浏览器滚动到

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

image-20220410164500900

image-20220410164841389

JavaScript定时器

间隔定时器

按照指定周期(毫秒)去执行指定的代码
语法: setInterval(函数,时间)
函数: 每次要执行的内容
时间: 单位是毫秒

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sakura</title>
    </head>
    <body>
        <script>
            setInterval(function(){
                console.log('执行一次')
            },1000)  # 单位毫秒，这里也就是1秒
        </script>
    </body>
</html>

image-20220411122709604

延时定时器

在固定的时间(毫秒)后指定一次代码
语法: setTimeout(函数,时间)
函数: 时间到达执行的内容
时间: 单位是毫秒

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sakura</title>
    </head>
    <body>
        <script>
            setTimeout(function(){
                console.log('执行一次')
            },1000)
        </script>
    </body>
</html>

image-20220411122948862

定时器返回值

不区分定时器种类
表示是当前页面的第几个定时器

image-20220411123144526

image-20220411123157829

是不区分种类的，只表示是页面第几个定时器

关闭定时器

语法一: clearInterval(要关闭的定时器返回值)
语法二: clearTimeout(要关闭的定时器返回值)
这是不区分定时器种类的可以互相关闭

image-20220411135402168

DOM基本操作

image-20220411135516647

获取元素方式

image-20220411135606813

  1. 根据id名称获取

    语法: document.getElementById('id名称')
作用: 获取文档流中id名对应的一个元素
返回值:
    如果有id对应的元素，就是这个元素
    如果没有id对应的元素，就是null

    image-20220411140343642

  2. 根据元素类名获取

    语法: document.getElementsByClassName('元素类名')
作用: 获取文档流中所有类名对应的元素
返回值: 必定是一个伪数组
    如果有类名对应的元素，有多少获取多少
    如果没用类名对应的元素，空的伪数组

    image-20220411141050751

  3. 根据元素标签名获取

    语法: document.getElementsByTagName('标签名')
作用； 获取文档流中所有标签名对应的元素
返回值；必然是一个伪数组
    如果有标签名对应的元素，有多少获取多少
    如果没用标签名对应的元素，空的伪数组

    image-20220411141947898

  4. 根据选择器获取一个

    语法； document.querySelector('选择器')
作用: 获取文档流中满足选择器规则的第一个元素
返回值:
    如果有选择器对应的元素，获取到第一个
    如果没用选择器对应的元素，返回null

    image-20220411142650050

  5. 根据选择器获取一组

    语法:document.querySelectorAll('选择器')
作用: 获取文档流中所有满足选择器规则的元素
返回值: 必然是一个伪数组
    如果有选择器对应的元素，获取到第一个
    如果没用选择器对应的元素，返回null

    image-20220411143324177

操作元素内容

image-20220411144452327

  1. 操作元素文本内容

    image-20220411144426234

  2. 操作元素超文本内容

image-20220411144816538

操作元素属性

image-20220411145038287

  1. 原生属性

    image-20220411145906291

  2. 自定义属性

    image-20220411150625140

操作元素类名

获取: 元素.className
设置； 元素.className = '新类名'

image-20220411151419501

操作元素行内样式

获取: 元素.style.样式名
设置: 元素.style.样式名 = '样式值'
注意: 只能获取和设置元素的行内样式

image-20220411152231051

image-20220411152308257

获取元素非行内样式

获取:window.getComputedStyle(元素).样式名
注意； 可以获取行内样式，也可以获取非行内样式

image-20220411152807202

本文作者：sakura
本文链接：https://sakurahack-y.github.io/2022/04/07/浅学javascript/
版权声明：本博客所有文章除特殊声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明出处 sakura的博客！
javascript