JavaScript归纳

程序员正正

已于 2022-04-04 10:30:10 修改

阅读量1.1k

点赞数 3

分类专栏： JavaScript 文章标签： javascript jquery

于 2022-03-22 17:05:30 首次发布

本文链接：https://blog.csdn.net/WXxz0/article/details/123665128

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端三要素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

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

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

程序员正正

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript归纳

前端三要素1. JavaScript框架2. JavaScript快速入门2.1引入JavaScript测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <!-- &lt
复制链接

扫一扫