开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript归纳 -> 正文阅读

[JavaScript知识库]JavaScript归纳

前端三要素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suYHsgLB-1647938956822)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321085135909.png)]$

1. JavaScript框架

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2F8KgalV-1647938956823)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321085445932.png)]$

2. JavaScript快速入门

2.1引入JavaScript

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3qy1YuC-1647938956823)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321091842633.png)]$

测试代码

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

    <!--    script标签内,写JavaScript代码-->
    <!--    <script>-->
    <!--        alert('hello world!');-->
    <!--    </script>-->

    <!--    外部引入-->
    <!--    script标签必须成对出现!!!-->
    <script src="js/xz.js"></script>

    <!--不用显示定义Type,也默认就是javascript-->
    <script type="javascript"></script>

</head>
<body>


<!--这里也可以存放JavaScript代码-->
</body>
</html>

2.2 基本语法入门

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtqPL1tA-1647938956824)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321092939285.png)]$

浏览器必备调试须知

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wpPAtiTJ-1647938956824)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321093133439.png)]$

2.3 数据类型

数值,文本,图形,音频,视频…

变量

var a;

number

js不区分小数和整数,Number

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEnHWAwp-1647938956826)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321093813644.png)]$

字符串

‘abc’ “abc”

布尔值

true, false

逻辑运算

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnGeKBCJ-1647938956826)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321094202262.png)]$

比较运算符 重点!!!

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-toYDnJnv-1647938956827)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321094347397.png)]$

? 坚持不要使用==进行比较

须知

NaN===NaN, 这个与所有的数值都不相等,包括自己
只能通过 isNaN(NaN) 来判断这个数是否为 NaN

浮点数问题

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2Gkau2o-1647938956827)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321095029139.png)]$

null 和 undefined

null 空
undefined 未定义

数组

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SRK0Ad66-1647938956827)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321095440343.png)]$

对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wgA0MOvA-1647938956829)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321095632442.png)]$

2.4 严格检查模式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TA9OF70b-1647938956829)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321100700587.png)]$

3. 数据类型

3.1 字符串

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hM0rT2Du-1647938956830)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321120315815.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4t1xAPW2-1647938956830)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321121004163.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKxtFIlk-1647938956831)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321121058349.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VfyzrAHd-1647938956831)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321121336901.png)]$

3.2 数组

Array可以包含任意数据类型

var arr = [1, 2, 3, 4, 5, 6];//通过下表取值和赋值
arr[0] 
arr[0] = 1

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBWk1TtZ-1647938956832)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321121956806.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NtQWmfyg-1647938956832)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321122311340.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LpG1bgGM-1647938956833)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321122501017.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMPaSuqr-1647938956833)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321122758351.png)]$

3.3 对象

若干个键值对

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LR4bKndc-1647938956834)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321201159503.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mH7Emmvz-1647938956834)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321201502255.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4t1ZU82T-1647938956835)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321201519762.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OnsNaS8V-1647938956835)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321201527071.png)]$

3.4 流程控制

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTZOWDgv-1647938956836)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321201812516.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eL0WnQzc-1647938956836)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321202458743.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HYktE8OT-1647938956837)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321202548649.png)]$

3.5 Map 和 Set

ES6 的新特性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZpTU1OF9-1647938956838)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321203702446.png)]$

3.6 iterator

Es6 新特性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKeanKRd-1647938956838)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321203945211.png)]$

4. 函数

4.1 定义函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFlQY9Vz-1647938956838)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321205057123.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WvBgM9b-1647938956838)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321205239707.png)]$

方式一和方式二等价

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ut5iiqn1-1647938956839)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321205839635.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvTYQ93z-1647938956839)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321210341200.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ksLW8tdK-1647938956840)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321210625929.png)]$

4.2 变量的作用域

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYGiEK0n-1647938956840)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321211619096.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zP4eFoxJ-1647938956841)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321211735561.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kpPgJ4tN-1647938956841)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321211837104.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jU6I93J6-1647938956841)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321212440061.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mAwhTfa7-1647938956842)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321212701459.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rmd4RPzb-1647938956842)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321212745209.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bI3Df4ns-1647938956844)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321213433539.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PWPVaRT4-1647938956844)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321213501466.png)]$

Javascript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceEr ror

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o5UyjPIT-1647938956844)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220321213903025.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVFdmFjW-1647938956844)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322070810454.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPAnhN4j-1647938956844)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322070959762.png)]$

4.3 方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvOeNLNY-1647938956845)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322071437605.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dvsHyaoc-1647938956845)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322071617881.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TbYJ4yvc-1647938956846)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322071802026.png)]$

5. 内部对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R57EuhVA-1647938956846)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322072000265.png)]$

5.1 Date

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7qXWk8q-1647939449201)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322073737138.png)]$

5.2 JSON

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ssittpq3-1647938956847)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322074109093.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAdy1uhz-1647938956848)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322074446673.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XfrMAL4K-1647938956848)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322074504112.png)]$

JSON 和 JS对象的区别

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uh389MDX-1647938956848)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322074651501.png)]$

5.3 Ajax

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VBCADejO-1647938956849)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322074831419.png)]$

6. 面向对象编程

原型对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4mV2kX0n-1647938956849)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322075621902.png)]$

原型:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sbpHvH5m-1647938956849)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322101715226.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqM8wF1f-1647938956849)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322101938140.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ohNmuGjs-1647938956850)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322102127583.png)]$

2.继承

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4BwS25oF-1647938956850)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322102332230.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVpwTH9q-1647938956850)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322102450818.png)]$

原型链:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3JH3GuBH-1647938956851)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322102720667.png)]$

7. 操作BOM对象(重点)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wv4xkWLL-1647938956851)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322103109713.png)]$

第三方

QQ浏览器
360浏览器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewPOVBty-1647938956851)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322103518878.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T3VrPJd6-1647938956852)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322104335075.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x3FLODSv-1647938956852)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322104428406.png)]$

在这里插入图片描述
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AhuhGWR4-1647938956852)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322104710617.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bc6EacuS-1647938956853)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322104850534.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8YEDIkU-1647938956853)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322110201351.png)]$

8. 操作DOM对象(重点)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUqEuimU-1647938956855)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322111024350.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dm5Ds4wU-1647938956855)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322110958277.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WNRc8q1-1647938956856)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322111602137.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1fNsboN0-1647938956856)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322111929397.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29mPHMEi-1647938956856)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322113556536.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrZ1YNd4-1647938956856)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322114427180.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SgWUYtZk-1647938956856)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322115040561.png)]$

9. 操作表单(验证)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GZpv8bfL-1647938956857)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322115217668.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEFk0pZX-1647938956857)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322115742171.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gr0naG3l-1647938956857)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322115900630.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FaIiQ9pI-1647938956859)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322121844048.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kly9dTMw-1647938956859)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322121854936.png)]$

10. jQuery

jQuery库,里面存有大量的JavaScript函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWeKnKRf-1647938956859)(C:\Users\许正\AppData\Roaming\Typora\typora-user-images\image-20220322153116204.png)]$

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

<!--    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>-->
    <script src="jquery-3.6.0.js"></script>
</head>
<body>

<a href="" id="test-jQuery">点我</a>

<script>
    //选择就是css的选择器
    $('#test-jQuery').click(function () {
        alert('hello');
    })
</script>
</body>
</html>

选择器

<script>
    //原生js,选择器少,麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery css 中的选择器他都可以用
    $('p').click();//标签选择器器
    $('#id').click();//id选择器
    $('.class').click();//class选择器

</script>

文档工具站

https://jquery.cuishifeng.cn/

事件

例如:操作鼠标

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

    <script src="jquery-3.6.0.js"></script>

    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    鼠标在这里移动试试
</div>

<script>
    //当网页元素加载完毕之后,响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x : ' + e.pageX + 'y : ' + e.pageY);
        })
    });
</script>

</body>
</html>