这里写目录标题
JavaScript
-
JavaScript 是一门弱类型脚本语言，其源代码在发往客户端运行之前不需要进行编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
-
TypeScript 微软的标准。这是一种由微软开发的自由和开源的编程语言。他是JS 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。该语言的特点就是除了具备 ES 的特性之外还纳入了许多ES 不具备的新特性，所以导致很多浏览器不能直接支持 TS 的语法，需要编译为 JS 后才能正确执行。
-
JS 框架
- jQuery：其实是个库，提供很多的方法供我们调用，Ajax 就是其中之一。
- Angualar：将后台的 MVC 模式搬到了前台并增加了模块化开发的理念，采用 TS 开发，对后台程序员友好。版本迭代不合理，一代到二代，除了名字，实际就是两个东西。
- React：提出了新概念虚拟DOM用于减少真实的DOM操作，。缺点是要额外学习一门语言 JSX。
- Vue：综合了模块化的虚拟DOM的优点。
- Axios：前端通信框架，与服务器交互，也可以直接使用 jQuery提供的 Ajax 通信功能。
-
UI 框架
- Ant - Design
- ElementUI iview ice
- Bootstrap：推特推出的用于前端开发的开源工具包
- AmazeUI
-
JS 构建工具
-
Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性 ，比如用于编译 TypeScript。
-
WebPack：模块打包器，主要用于打包、压缩、合并和按序加载。之前浏览器支支持 ES5 的时候，webpack 可以将ES6 的语法打包为ES5的语法。
-
-
IDEA 中可以改变ES 的版本
-
ES lint 检测ES 语法
学会在浏览器中中调式 JS
- console
- console.log();
- 可以直接在console 中写 JS 的代码
- sources
- 可以查看源码，然后可以给 JS 代码打断点调试
- application
- 相当于web 前端的一个数据库，可以将一些信息保存在这里，例如cookies等
- network
- 网络请求
- performance && memory
- 内存性能相关
快速入门
引入JS的两种方法
-
内部定义
-
一般定义在header 中
-
<script> // </script> -
注意不能使用自闭和标签，必须一个开标签一个闭标签
-
-
外部引入
-
<script src=""> </script>
-
基本语法入门
数据类型
-
number：JS 不区分小数和整数
-
字符串：单引号和双引号都可以
-
反斜杠是转义字符 \t ’
-
多行字符串编写以及模板字符串
let name = 'xxx'; let str = `你好呀,${name}`; -
字符串是不可变的。如果str的第一个赋值，在输出str，str不变
-
substring 方法与java一样，包含前面不包含后面
-
-
布尔值
-
逻辑运算
-
比较运算符（重要）
-
== ：等于，类型不一样，值一样也会判断为true，例如数字1和字符串“1”判断，会返回true。
-
===：绝对等于，只有类型一样并且值一样才会返回true
-
NaN（Not a number）与所有的数值都不相等，包括自己。
-
isNaN() 判断是否是数字
-
1/3 === 1-2/3 ，返回false，存在精度的损失
-
-
null 和 undefined
- null 空
- undefined 未定义
-
数组
- JS 的数组中可以有不同的数据类型
- var arr = [1,2,‘hello’,true]
- new Array(1,2,‘hello’,true)
- 数组用中括号，对象用大括号
- 数组下标如果越界了，就会报undefined，不会像java 一样报异常
- slice（）方法与数组的substring 是一样的
- push 方法 和 pop 方法，push 返回数组长度，pop 返回弹出元素
- unshift 方法 和 shift 方法，是在头部插入元素和删除元素
- sort方法排序
- reverse 元素反转
- concat 数组拼接，参数是另外一个数组。这个方法并没有修改原来的数组，只是会返回一个新的数组
- 连接符 join，打印数组，并使用特定的字符串连接。arr.join(’-’)，参数是特定的字符串
- 多维数组
-
对象
-
所有的键都是字符串，值可以是任意对象
-
数组是中括号，对象是大括号
-
var person = { name: "qq", age:3, tags:[1,2,3] } -
每个属性之间使用逗号隔开，最后一个不需要添加
-
取值时，person.name person.age
-
若干个键值对
-
使用一个不存在的对象属性，不会报错，返回undefined
-
可以动态的删减属性 delete 方法 person.name，返回true false
-
可以动态添加属性，person.haha = “haha”，就会给person 附上haha这个属性。
-
判断属性值是否在这个对象中，‘age’ in person，返回 true，age 必须加单引号，因为键都是字符串
-
foreach 需要传入一个方法，方法的参数就是数组的每一个值。这个在 JS 中叫做函数，而不是方法
-
forin ，let index in arr ，打印的时候打印arr[index]，这里面的index 是索引
-
-
Map 和 Set
-
Map 是一个键值对
-
let map = new map([['jack',100],['tom',99]]); map.get('jack'); map.set('admin',123456); map.delete("tom") -
set 是一个无序的不重复的集合
-
let set = new Set([3,1,1,1]) 打印出来只有3和1，set 会自动去重 set.add(2) set.delete(1) set.has(2) //是否包含某个元素 -
iterator 迭代器访问元素
for(let x of arr) { console.log(x) }与for in 相区分，for in打印的是下标
-
严格检查模式
-
ES 6 语法
-
use strict 代表严格检查模式，定义这个之后就不能使用 i=1的这种定义方式了，预防其随意性导致产生的问题。必须写在第一行
-
<script> 'use strict'; </script> -
JS 中变量的声明分为显示声明和隐式声明，使用var ，let 等显示声明变量。在 JS 中，访问一个没有定义的变量不会报错，但是如果给一个没有定义的变量赋值则系统会认为你想要隐士定义一个全局对象的属性，如windows 对象的属性。即如果你在当前windows中声明了很多不同的js文件，而每个文件中又都有相同的全局属性，那就会报错。
-
局部变量现在建议使用let 定义
函数
- 这个函数可以想象成java 里面的方法
- 方法与函数的区别：
- 方法：放在类中的那种叫方法，类的方法
- 函数：没有放在类中
- 两者其实长得是一样的，只是看起来不同
函数的定义
第一种方法
function abs(x) {
if(typeof x !== 'number') {
throw 'Not a Number';
}
console.log(x); //只会打印1
for(let i=0;i<arguments.length;i++) {
console.log(arguments[i]); // 打印出来所有传递进来的参数
}
}
第二种方法
var abs = function(x) {
//匿名函数
}
两种方式等价
abs(1,2,3,4,5)
-
调用的时候可以传递很多个参数也可以不传递参数
-
不传或者传的不是所期望的类型时，手动抛出异常
-
传入多个时：
arguments代表传递进来的所有参数，他是js 赠送的关键字，是一个数组传入多个可以实现类似java重载的特性，在函数体里面判断arguments的长度，长度为几就执行什么功能
ES 6 新特性如下
function abs(a,b,...rest) { //新特性 只能写在最后面 }
-
变量作用域
-
函数体内部的变量，在函数外面时不能使用的，非要使用的话，可以使用·闭包·
-
内部函数可以访问外部函数的成员，反之则不行
-
重名时，从内向外查找
-
js 执行引擎，会自动提升所有变量的声明，但不会提升赋值
-
养成规范，所有变量声明放在最开始
-
默认所有的全局变量，都会绑定在windows 对象上成为window 的一个属性
-
window 就代表浏览器
-
不同 js 文件声明的全局变量如果在同一个window 中被引用，就会出现命名冲突，所以一般自己写的全局变量都给自己放在一个自己声明的对象中
//用来存在自己声明的全局变量 let z = { } z.name = 'zzz' //全局变量Jquery 也是这么做的
-
for 循环，var i除了作用域还可以使用，为了解决这个问题，在es6中出现 let，所以建议大家使用 let 定义局部变量
-
es6 const 关键字是常量 readonly 只读变量
方法
function getAge() {
let now = new Date().getFullYear();
return now-this.birth; //this 指向调用者
}
var person {
name :'aaa',
birth:2020,
age :getAge
}
person.age(); //调用person 的birth
getAge(); //window 调用它，winsdow没有birth属性，报错NaN;
getAge.apply(person,[]); //this 指向了person 对象，并且参数为空。
- this 是无法指向的，是默认指向调用它的那个对象
- apply 在 js 中可以指定this 的指向，所有的 function 都会有这个方法
内部对象
Date
let now = new Date();
now.getFullYear(); 年
now.getMonth(); 月 0-11
now.getDate();日
now.getDay();星期
now.getTime(); //1970.1.1 0:00:00 毫秒数
...时分秒
new Date(timestamp); 时间戳转换为时间
now.to... 可以转化为中国标准时间GMT+0800 东八区，还可以转化为ISO时间 toLocaleString 本地时区
JSON
- 轻量级的数据交换格式
- 有简洁和清晰的数据格式
- 易于人阅读和理解，也易于机器解析和生成，有效提升了网络传输效率
- 在 JS 中一切皆为对象，任何 JS 支持的类型都可以转化 JSon
- 格式：数组[]，对象{}，键：值
- 有两个方法：JSON.stringify() 将任意类型转化为 JSON 字符串（用大括号包起来的字符串），JSON.parse（）：解析json字符串
面向对象编程
var student {
};
var xiaoming {
};
原型对象，父类
xiaoming.__proto__ = student //就相当于小明继承了student
这是之前的写法
class 继承
-
这个关键字是在ES6 引入的，还有extends 关键字
-
class Student { constructor(name) { this.name = name; } hello() { alert("hello"); } } var xiaoming = new Student('xiaoming'); xiaoming.hello(); -
本质还是原型
-
原型链：自己定义类一定会指向老祖宗object 类，然后就进入一个环
操作 BOM 对象（浏览器对象模型）
-
浏览器内核有：
- IE
- Chrome
- Safari
- Fairefox
-
QQ 浏览器和 360 浏览器等都是第三方的，他们是可以换内核的
-
window 对象: 浏览器窗口
- window.innerheight
- window.outerheight
-
navigator 对象，封装了浏览器信息，可以人为修改，不建议使用
-
screen 代表屏幕
-
location 代表当前页面的 URL 信息：
-
host
-
href
-
protocol
-
reload（）刷新网页
-
location.assign('http://www.baidu.com')执行此方法会直接跳转到百度
-
-
document 代表当前页面
- document.title();
- document.cookies()
- 可以劫持cookie，所以在服务器端设置cookie： httpOnly ，使得cookie只读
-
淘宝和天猫是单点登录
- 获取具体的文档树节点：var dl = document.getElementById(‘app’);
-
history：
- 网页前进和后退就是通过 history 实现的
- history.back()
- history.forward()
操作DOM对象
- DOM ：文档对象模型
- 整个浏览器网页就是一个DOM 树形结构
获取DOM节点
对应css 选择器
document.getElementsByTagName(''); //标签选择
document.getElementsById(''); // id选择器
var father = document.getElementsByClassName(''); //类选择器
father.children
firstchild
这些是原生代码，之后我们都会使用其他框架
更新DOM节点
id.innerText(''); // 就是一段文本
id.innerHTML(''); //可以解析html标签
id.style.color = 'red';
id.style.fontSize='20px';
id.style.padding='2em'; //操作css
删除DOM节点
- 删除节点的步骤：先获取父节点，再通过父节点删除自己
- father.removeChild(father.children[0]); father.removeChild(father.children[1]); 删除时动态的，不能通过for循环删除，删除完零之后，之前1的位置就成了0
创建和插入DOM节点
-
我们获得了某个DOM 节点，如果这个节点里面是空的，可以直接通过innerHTML插入元素，但如果这个DOM节点里面已经有元素了，就无法通过此方法插入，因为会产生覆盖
-
追加 append
- list.appendChild(js); //list 和 js 都是一个DOM 节点
-
var newp = document.createElement('p'); newp.id='newp'; newp.innerText=''; newp.setAttribute('id','newp'); //万能的方法
操作表单
<html>
<head>
</head>
<body>
<form>
<span>用户名：</span> <input type = "text",id ="username">
</form>
<script>
var input_text = document.getElementById('username');
var input = input_text.value; //获取输入框的值
input_text.value = "xiaoming"; //修改输入框的值
</script>
</body>
</html>
判断单选框或者多选框是不是被选中，使用checked 属性
<html>
<head>
</head>
<body>
<form action="提交成功后跳转到的网页" method="post" onsubmit="return aaa()">
<span>用户名：</span> <input type = "text",id ="username" name = "username">
<span>密码：</span> <input type = "password",id ="inout_password">
<input type="hidden" id="md5-password" name = "password">
</form>
<script>
function aaa() {
var username = document.getElementById('username');
var pwd = document.getElementById('inout_password');
var mdpwd = document.getElementById('password');
var input = input_text.value; //获取输入框的值
input_text.value = "xiaoming"; //修改输入框的值
return false; //则提交不通过
}
</script>
</body>
</html>
- 很多网站在提交的时候会发现密码突然变长，那就是几条的时候将密码通过md5加密并赋值给了pwd.value，这样提交的pwd就是加密后的结果，这样对用户体验其实是不好的。最好的方法是设置一个隐藏的md5_pwd，将输入的密码md5加密后赋值给md5_pwd提交。
jQuery
- 使用公式：$(selector).action()
- selector 就是css 选择器 ，#id，.class
- 还有很多选择器，很多action 都可以去网站上去查 cuishifeng
- 事件：
- 鼠标：mouseLeave。mousedown e.pageX,e.pageY 获取鼠标坐标
- 键盘
扫一扫
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
