javaScript

参考：javaScript学习资料

前言-

前端三要素

• 结构层
• 表现层
• 行为层

css预处理器


jacaScript

开发规范ESx

前端三大主流框架

• AngularJS
• ReactJS
• Vue.js

JS框架

UI框架

js构建工具

拓展

前端人员适合使用的后端技术：

eslinc：js语法格式规范的检查

正文-第一部分

1.script的内部使用和外部引入

打开浏览器http://localhost:8080/ajax_war_exploded/js.html

注意：这里的外部引入如果<script src="/static/js/HanYJ.js"></script>，则会失败，不能加/；

2.浏览器中Source源码调试

3.javaScrip数据类型

number

字符串及布尔值

逻辑运算

比较

浮点数

空和未定义

数组

对象

4.JavaScript的严格检查模式

写在第一行:'use strict';

5.1 javaScript数据类型详解—字符串

5.2 javaScript数据类型详解—数组

length

indexOf()


slice()


pop()、push()

数组排序和反转

concat(）


join()


多维数组


通过下表取出数组中的元素

5.3 javaScript数据类型详解—对象



delete()

添加属性


“属性” in 对象


注意：'age'

对象继承了Object类的toString方法:'toString()' in person

方法hasOwnProperty()

6.分支和循环
if()

while()循环

do-while()循环

for循环

forEach()循环

for-in

Map和Set

通过map.get('键')获取map中某个元素的值

通过map.set('键','值')为map中增加一个新的元素


map通过键删除元素map.delete("键")


set

去除重复的元素（只显示一个）



通过add()增加一个元素，如果增加的元素在set中已存在，则相当于没有增加

通过delete()删除set中的元素，如果该元素存在多个，则会都被删除


通过has()判断set中是否包含某个元素

MAP和SET总结：

遍历：for-of

遍历：for-in

将of换成in，将x换成arr[x]
如果console.log(x)则输出下标0、1、2

遍历map和set


注意下面：如果数组中存在普通数据类型和键值对，此时for-in也会打印出name(键)


但for-of依旧只打印出普通类型数据，过滤了键值对的值。

正文-第二部分

1.javaScript中函数的定义和参数的获取

定义一个绝对值函数

调用函数

形式：函数名（参数...）


通过typeof agr!=='number'判断参数是否为number数字类型


arguments

传入多个参数：

当传入多个参数时，只能接收第一个参数，如果需要多个参数，需要通过if判断进行后续操作：

但一般使用es6的新特性...rest()

2.变量的作用域、let、const

变量的作用域：
（1）

（2）

（3）

（4）

注意：图中的注释写反了！

（5）


（6）

（7）

（8）重点：避免项目中多个js文件变量名和方法名的冲突

3.let和var

4.const定义常量

使用const定义的变量只具有可读性，不可以修改它的值；

5.方法的调用和定义、apply

方法getFullYear()

这里的this代表什么：

通过apply()将函数指向一个对象

输出20，但单独调用getAge()是不允许的，因为this没有具体的指向，所以就无法获得birth属性的值。

6.javaScript的内置对象-Date

通过typeof()获取数据对应类型

6.javaScript的内置对象-JSON

map：{}

list:[ ]

7.js请求前言

8.js的面向对象

【了解即可】早期javaScript中，通过_proto_原型


ES6之后：

类class

继承extends

构造器中的this指向实例对象


本质proto

原型链

第三部分-操作BOM对象

浏览器内外高度、宽度

浏览器的信息

获取浏览器屏幕尺寸

浏览器当前页面内容的信息

当前页面对象document，动态更改网页

通过document对象可以获取浏览器的cookie，可能会造安全问题

第四部分—操作D(document)OM节点

1.前言

DOM树形结构

案例：

原生方式：

2.更新DOM

3.删除DOM节点

通过父节点father删除children节点：当删除一个节点后，下标会减一。
即chilren[0]被删除后，chilren[1]就变成了children[0],chilren[2]就变成了children[1].如果删除children[2],则前面两个children节点不受影响。


4.创建和插入DOM节点

appendChild()



createElement()

setAttribute()


css:创建style标签

insertBefore()

5.获取和设置表单的值

通过value获取表单的值


给value赋一个新的值来修改表单的值

Radio

通过修改checked可以改变选中状态及根据返回值判断是否被选中。

6.提交表单验证及前端MD5加密

https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

隐藏域：用户输入的是input-password，真正提交的是md5-password。后者是前者的md5加密，所以提交表单时，密码已经被加密了。
方法onsubmit()是点击提交按钮(不能是普通按钮，必须是submit类型的提交按钮才有这个方法)时触发的函数，可以对表单设置校验判断，决定返回true或者false。为true则会发起action中的url请求，反之不会。

7.jquery

（1）引入

参考：jquery官网

参考：CDN引入jquery

参考：CDN引入jquery

参考：jquery使用大全

（2）公式：


（3）选择器：原生方式和jquery选择器对比

（4）jquery事件：

ready()

可以简写为：

此外还有window.onload=function(){}页面加载时就执行

参考博客：jQuery的 $(document).ready()和window.onload

鼠标移动事件：


（5）jquery操作DOM

CSS的操作

宽度和高度：document就代表当前浏览器，所以通过window和document获得的尺寸相同。

$(document).width()
$(document).height()

toggle()：切换元素的隐藏与显示

写在最后：

参考：源码之家

完！