js原生-ajax-Mysql-JSON-本地存储-jQuery-node知识点总结

JS的引入方式

* 内部引入:在`<script>`标签内写js代码
* 外部引入：使用`<script src="路径">`引入一个外部的.js文件
* 行内引入：先不看

如果哪一个script标签用于引入了外部文件，那么浏览器会忽略掉该标签内部的js代码段

暂且需要记住的两种测试方式：

	//将括号里面表达式的返回值输出到控制台
	console.log(exp)

	//将括号里面表达式的返回值输出到警告框
	alert(exp)

	//将括号里面表达式的返回值输出到页面
	document.write(exp)

变量：存储数据的容器；利用var关键字来声明

	// 声明了一个变量，里面存放了一个1
	var a = 1;
	// 将变量a里面存放的值从原来的值变成5
	var a = 5;
	// 声明一个变量，但没赋值，此时这个变量里面存放的是一个undefined
	var b;

标识符：变量名，函数名，对象的属性名的起名字的规范。

* 由数字，字母，_和$组成。
* 数字不能作为开头首字符。

!表达式：任何有返回值(计算结果)的语句都是表达式，反之同理。

运算符：将简单表达式组成和表达式的方法。

!数据类型

* Number(数字)：1,2,3,4,0,-1,-2,1.2,-1.2,NaN(非数字),Infinity（无穷大）,-Infinity（无穷小）
* String(字符串)："王大伟","abc","1","true","false","NaN"
* Boolean(布尔值):true false
* undefined(空值):undefined
* Object(对象):
* function
* null

作业

1. 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

2. 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
   它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
   提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)

3. 计算两个文本框的加减乘除

绑定事件

	元素的id.onclick = function(){
		//单击之后执行的js代码
		
		console.log(ipt.value)
	}

!表达式的副作用：如果某个表达式的存在与否会对JS执行环境上下文造成任何的影响，那么我们把这个表达式称之为有副作用的表达式。

数据类型的转换

其他数据类型转Number(exp)

* String转Number:除了纯数字是以字面量形式进行转换的以外，其他情况全为NaN（"Infinity"和"-Infinity"除外）。
* Boolean转Number:true为1，false为0

其他数据类型转String(exp)：以字面量的形式进行转换，外面加一对引号。

其他数据类型转Boolean(exp)

* Number转Boolean:除了0和NaN以外，其他全为true;
* String转Boolean:除了空字符串以外，其他所有情况全为true;、

双等号判断相等数据类型转换的底层逻辑

* !有NAN，一律返回false
* !有布尔类型，布尔类型转换成数字比较
* 有string类型，两种情况：
	1.对象，对象用toString方法转换成string相比。
	2.数字，string类型转换成数字进行比较
* !null和undefined不会相互转换，相等
* 有数字类型，和对象相比，对象用valueof转换成原始值进行比较
* 其他情况，一律返回false

if语句

	
	if(exp){
		// 代码段
	}
	--------------
	if(exp){
		//代码段1
	}
	else{
		//代码段2
	}



	switch(变量){
		case 常量1:{
			
		}
		case 常量2:{
			
		}
		case 常量3:{
			
		}
		case 常量4:{
			
		}
		// 当不满足以上所有条件时，执行这个分支
		default:{

		}
	}

判断表达式的值是否为NaN:isNaN(exp) -> Boolean

作业

1. 判断输入的数是奇数还是偶数，将结果输出到控制台。
2. 判断录入学生的成绩输出对应的等级，大于等于60及格；大于等于85分优秀；小于60不及格。
3. 判断输入的年份是否是闰年（自行百度闰年计算方式）。
4. 输入月份，输出当月的天数。（利用if 与 case穿透特性的两种写法分别实现）
5. （扩展）输入年月日（YYYYMMDD格式）显示这是这一年中的第几天（只考虑年份为四位数的情况）；如20200212，计算后结果为43。
6. （扩展）开发一款软件，根据攻击（身高-108）* 2 = 体重，可以有10斤以内的浮动

。来观察测试者体重是否合适。 偏胖；偏瘦；正常

循环语句

	for(exp1;exp2;exp3){
		//循环体
	}

	// 常见的套路
	for(var i = 0; i < xxx;i++){
		console.log(i)
	}

	while(exp){
		// 循环体
	}

循环语句中流程控制关键字

* break  提前结束整个循环
* continue  结束本次循环

函数：一段可以被高度复用的代码段。

	// 声明函数：做计划。

	function 函数名(){
		// 函数体
	}

	// 调用函数：实施。

	函数名()

函数的参数：在函数体执行阶段临时的变量。

	
	// 形参：声明的变量。
	function sayHello(someone,when){
		console.log("干" + when +"饭~" + someone +"!")
		console.log( when + "安~" + someone +"!");
	}

	// 实参：为变量赋值。
	sayHello("打工人","早")
	

除了构造函数以外任何没有return语句的函数的执行函数表达式的返回值都是undefined。

return

* 控制调用函数表达式的返回值
* 忽略掉本次调用函数return语句下面的代码

函数的引用：当调用函数表达式去掉后面的一对括号时，这个表达式会返回该函数本身（也叫该函数的引用） 这个表达式不会执行函数体内的代码，也不会返回return语句后面表达式的返回值。

IIFE自调用函数

	
	var a = (function(a,b){
		return a + b;
	})(10,5)
	
	console.log(a)  -> 15

变量作用域

* 局部变量：就是在函数体内部声明的变量，这个变量只能在函数体内或函数内部的内层函数中获取到。
* 全局变量：就是函数体外声明的变量，这种变量在任何地方都能被访问到。

在js中没有块级作用域的概念，只有函数作用域的概念。也就每一个函数形成一个封闭作用域，所有其他的东西都没有办法形成封闭作用域。

当局部作用域与全局作用域发生冲突时，在局部作用域内部以局部变量为准。

变量提升：js解释器的一种机制，当调用某个函数时，JS解释器会首先过滤一遍该函数中所有的局部变量，然后会将刚刚找到的局部变量放置在函数体的顶端先声明但不赋值。

如果想从函数体内部声明全局变量，只要去掉var关键字就好了。

函数中的arguments:当形参数量不确定的时候，我们会使用arguments来代替形参表示传入的实参，本质是一个类数组，具备数组下标和.length的特性。

	function(){

		arguments -> 类数组
		arguments[0] -> 返回数组中第0位的值
		arguments.length -> 数组到底有多少个值 

	}

数组:数据的有序集合;

	// 声明了一个空数组
	var arr = []
	// 声明数组并往里面塞值
	var arr = [1,5,6,3,4,1,2,5]
	// 声明数组并往里面塞值
	var arr = [1,5,6,3,4,1,2,5]

	// 利用下标(索引，角标)提取出数组中的成员
	arr[0]
	// 利用.length特性返回长度(有几个成员)




	// 循环(枚举 遍历)数组

数组的全局方法

Array.push(要插入的新元素) 向后插
Array.unshift(要插入的新元素) 向前插
Array.pop() 删掉最后一个
Array.shift() 删掉最前面的一个
Array.splice(index,howmany,item1,item2....) 替换/删除 数组中的成员
Array.concat(Array2) 返回Array和Array2数组拼接之后的值（新的数组）
Array.join("分隔符") 将数组转换为字符串，并将元素之间的分隔符以参数代替。如果参数为空，默认是,
Array.reverse() 用于颠倒数组成员的顺序。有副作用。
Array.slice()  以起始下标和终止下标截取数组中的一部分。 

对象:属性的无序集合；

	
	// 声明了一个空对象
	var o = {}

// 声明空对象
		// var o = {};

		// 声明一个有属性的对象
		var o = {
			name:"王大伟",
			sex:"male",
			age:18,
			married:false,
			// 方法:如果对象中的哪一条属性的属性值存储的是一个函数，那么我们就通常把这条属性叫成方法。
			sayHello:function(){
				alert("你好~！^_^")
				return "空你急哇";
			}
		}

		// 对象属性的查询
		// console.log(o.age)
		// console.log(o["age"])
		// var age = "sex";
		// console.log(o[age])


		

		// 调用o对象下的sayHello方法。
		// o.sayHello()
		

		// 对象属性的添加/修改
		// o.age = 19;
		// o.type = "灵长类";

		// 对象属性的删除
		// delete o.married


		// 对象属性的检测
		// console.log("sex" in o)
		// console.log("type" in o)


		// 对象属性的枚举
		// for(var i in o){
		// 	// 枚举对象的属性值
		// 	console.log(o[i])
		// 	// 枚举对象的属性名
		// 	console.log(i)
		// }

对象的种类：

* 自定义对象:我们自己声明的对象
* 内置对象:不需要我们手动声明，浏览器打开就有的。console   document  .....

字符串全局方法

* charAt(index) 通过下标查找字符
* concat() 拼接字符串
* indexOf(char) 通过字符查找首次出现的位置，没找到返回-1
* split(分隔符) 通过一个字符将原字符串切割成长度若干的数组，没有副作用。
* substr(start,howmuch) 从起始下标开始，切割出来一部分个数的字符串
* slice(start,end) 以起始下标和终止下标切割字符串
* substring(start,end) 等价于slice，不能接受负数。
* replace(被替换的字符串/正则表达式,替换之后的内容) 在字符串中将里面用第二个参数的字符替换第一个参数字符
	* `String.replace(/替换的字符/g,"被替换的字符")` 全局匹配。
* toLowerCase() 转换为小写
* toUpperCase() 转换为大写

数组的ES5全局方法

* Array.forEach(function(item,index,array){})	用于循环遍历数组,返回值undefined
* Array.map(function(item,index,array){ return }) map方法作用类似于forEach,于forEach方法不同点在与它本身是有返回值的，并且返回值是一个数组，这个数组的长度与被循环数组的长度一致。但这个数组中的成员取决于参数函数中的return语句；使用场景：如果我们需要枚举遍历一个数组，并根据一定的计算生成一个与原数组长度相一致，但值不一致的新数组时，这种场景下比较适合使用map方法。

* Array.filter(function(item,index,array){ return })

	1. 循环机制与map和forEach完全一致
	2. 有返回值，返回值是一个数组。
	3. 返回数组的长度小于等于原数组的长度。
	4. 根据参数的函数中return语句表达式的返回值（布尔值类型）来决定结果数组中是否包含该成员。
	5. 使用场景：一般来说，如果我们需要根据某一个表达式条件来决定是否过滤或保留数组中的部分成员的话，这种场景就非常使用使用filter方法。

* Array.reduce(function(a,b){ return })
	1. 不能代替forEach或map语句进行遍历数组
	2. 有返回值
	3. 第一个参数第一次循环时代表数组中第一个成员，从二次开始，这个参数都会代表上次循环函数中return语句后面表达式的返回值。
	4. 第二个参数第一次循环时代表数组中第二个成员，以后每次分别代表第n+1位成员本身。
	5. reduce表达式会有返回值，返回值取决于最后一次循环函数中return语句表达式的返回值。
	6. 使用场景：累加运算

Math:数学对象

* abs() 返回绝对值
* floor() 向下取整
* ceil() 向上取整
* round() 四舍五入
* random() 0-1之间的随机数（包括0，不包括1）
* min() 返回最小值
* max() 返回最大值

Date:日期对象

	// 获取当前时间（实例化一个日期对象）
	new Date()

	// 获取未来的某一个时间点的日期对象
	var target = new Date("2020/12/19 18:00");

* getFullYear() 返回年份
* getMonth() 月 从0开始计数，一般都+1
* getDate()  日
* getHours() 返回小时数
* getMinutes() 返回分钟数
* getSeconds() 返回秒数
* getDay() 返回星期几,如果是周日则返回0
* getTime() 返回时间戳（1970年1月1日00:00:00到现在一共过了多少毫秒）
* setFullYear(2077) 将日期对象中年份字段设置到2077 getFullYear() 返回年份
* setMonth() 
* setDate()  
* setHours() 
* setMinutes() 
* setSeconds() 

DOM:document内置对象

document对象

* getElementById("ID") 通过ID获取页面中的元素(Node节点)
* getElementsByTagName("标签名") 通过标签名获取元素们(NodeList节点列表)
* getElemengsByClassName("类名") 通过类名获取元素(NodeList)
* querySelectorAll("css选择器") 通过css选择器来获取元素(NodeList)
* querySelector("css选择器") 通过css选择器来获取元素(Node)
* createElement("标签名")  创造一个元素节点

Node 节点

* getElementsByTagName("标签名")
* getElemengsByClassName()
* querySelectorAll()
* innerHTML 返回/设置该元素开始标签与结束标签之间的内容
* value 设置/返回元素的value属性
* <!-- <!-- className --> --> ..........元素的类名
* style 设置/获取元素的行内样式
* getAttribute("属性名") 获取Node节点某个自定义属性所对应的属性值
* setAttribute("属性名","属性值") 设置Node节点某个自定义属性所对应的属性值
* parentNode 返回一个节点的父级元素 Node
* childNodes 返回一个元素的所有子元素 NodeList
* nodeType 检测节点类型  如果是元素节点 1 文本节点：3 注释节点：8 document节点返回：9
* children 返回所有子级元素节点
* previousElementSibling 返回上一个兄弟元素节点
* nextElementSibling 返回上一个兄弟元素节点
* remove() 移除节点
* removeChild() 移动节点 `Node.removeChild(Node)`
* appendChild() 插入到另外一个元素的结束标签之前 `父级Node.appendChild(要插入的Node)`
* insertBefore() 把一个元素插入到另外一个元素中间或前面的某个地方 
	`父级Node.insertBefore(要插入的Node,参照物的Node)`
* cloneNode(true) 复制节点,里面的true代表是否连通内容一块克隆。
* checked 只有单选按钮与复选按钮拥有该属性，返回该按钮是否处在被选中状态，返回true || false。

NodeList

节点列表:它是由若干个Node节点组成的一个类数组。它完全独立于Node节点，不存在Node节点下的所有方法。

this出现的场景与它的指向

* this出现在事件处理函数中：它指向的是触发该事件的Node节点
* this如果出现在对象的方法中：它指向的就是该对象。
* this如果出现在一般函数中：它指向的就是window。
* this如果出现在构造函数中：它指向的就是实例化对象。

补布局知识点

1.选择器的优先级
2.浮动原理
3.BFC
4.相对定位和绝对定位
5.单词

标准绑定事件方式：

	
	// 绑定事件
	Node节点.事件名 = function(){
	}
	// 事件解绑
	Node节点.事件名 = null;

	// 帮用户触发某一个元素上的某个事件
	Node.去on的事件名()

事件

* onclick 单击事件
* onmouseover 鼠标移上
* onmouseout  鼠标离开
* onmouseenter 鼠标移上
* onmouseleave 鼠标离开
* onfocus   聚焦事件
* onblur   失焦事件
* onmousemove 鼠标移动事件
* onmousedown 鼠标按下事件
* onmouseup 鼠标抬起事件
* oncontextmenu 呼出菜单栏事件(只可以为document对象或window对象绑定)

键盘事件：只能为文本框，密码框和文本域绑定键盘事件。另外document对象和window代表给整个页面绑定事件。

* onkeyup   键盘抬起
* onkeydown 键盘按下
* onkeypress 键盘按下/忽略功能键

事件对象:事件处理函数的形参，该参数的实参由浏览器为开发者传入，里面存放的是一些触发事件时的信息。

	node.onclick = function(event){
		// 事件对象
		event 
	}

事件对象中的属性：

* clientX 返回相对于浏览器边缘的位置
* clientY
* offsetX 返回相对于触发事件元素的左上顶点的位置
* offsetY 
* screenX 返回相对于屏幕左上顶点的位置
* screenY
* which 返回鼠标按下的键码
* target  返回本次事件的目标阶段元素（最深层次的那个元素Node节点）
* keyCode 返回键码 （在键盘事件中的事件对象中才有的属性）

阻止浏览器的默认行为

* 在事件处理函数中 ` return false `
* 在事件处理函数中 ` event.preventDefault() `

事件的传播机制

1. 捕获阶段：从外向内依次寻找元素。
2. 目标阶段：在最深层次的元素中停留一下。
3. 冒泡阶段：从内向外再依次寻找一遍元素。

事件监听：第三个参数true代表该事件在捕获节点触发，默认false代表在冒泡阶段触发。

	Node.addEventListener("去on的事件名",function(){
		// 事件处理函数
	},true/false)

事件监听和普通绑定事件的不同点：

1. 事件监听可以利用第三个参数改变事件的触发时机，但普通绑定方式不可以改变。（一般浏览器默认是在冒泡阶段触发事件）
2. 重复绑定事件时，事件监听方式是做追加操作而非像普通绑定事件的覆盖一样。

阻止事件继续传播：event.stopPropagation()

事件委托：工作机制：将子元素的事件委托给它们的父级元素来办，然后利用event.target属性来代替this；好处1：在极端情况下可以节省客户端性能。2.解决动态元素无法绑定事件的问题。

计时器

* setInterval(function(){},time) 每过time毫秒数执行一次参数1的函数
* clearInterval(计时器ID) 停止id为参数的Interval的计时器
* setTimeout(function(){},time) 只执行一次的setInterval
* clearTimeout(计时器ID)

	// 每过第二个参数的毫秒数执行一次第一个函数中的函数体
	// 如果想使用计时器做动画，追求高帧率丝滑的效果第二个参数写16，如果追求性能就写32
	setInterval(function(){},3000)


		startInterval.onclick = function(){
			
			// 一般来说我们喜欢把开始计时器的返回值赋值给一个变量，里面存储计时器ID
			// 方便以后停止的时候使用
			move = setInterval(function(){
				console.log("王大伟")
			},1000)

		}

		stopInterval.onclick = function(){
			
			// 接收计时器ID 停止某个Interval计时器
			clearInterval(move)

		}
	

运动原理

	// 1.为执行动画的元素设置css行内属性
	// 2.写计时器，如果追求性能每32毫秒执行一次，追求效果16毫秒执行一次
	// 3.在计时器里，获取元素行内样式的某个属性，然后经过一定的算法计算出来一个新值再重新赋值给这个元素的行内样式。
	// 4.判断结束条件，在结束条件中清除计时器，并做好流程控制防止多执行一次或最后一次冲过头了。

	var fade = setInterval(function(){
		var o =	parseFloat(node.style.opacity);
		if(o <= 0){
			node.style.opacity = 0;
			clearInterval(fade)
			return;
		}
		node.style.opacity = o - 0.02;
	},16)

BOM：浏览器对象模型,window对象。调用window对象下的属性或方法时，可以省掉window。声明的全局的变量事实上就是绑定到window对象下的一个属性，声明的全局函数事实上就是绑定在window对象下的方法。

* alert()
* confirm()
* prompt()  带input框版本的confirm()
* open("url") 在新标签中打开一个新页面 
* close() 关闭该标签页
* innerHeight 浏览器窗口的内部高度
* innerWidth 浏览器窗口的内部高度
* location 位置

	* href 设置/获取当前浏览器地址栏上的内容
	* reload() 刷新页面

* navigator  返回浏览器提供的用户信息(信息存在误导性)
* history 历史

	* forward() 前进
	* back() 后退
	* go(Number) 	前进/后退/刷新

浏览器/元素尺寸相关的属性

		// 返回浏览器可视区域的距离，不包含滚动条不可见部分的区域
		document.documentElement.clientWidth
		document.documentElement.clientHeight

		// 返回浏览器页面中所有内容区域的距离，包含滚动条暂时不可见的区域。
		document.body.clientWidth
		document.body.clientHeight

		// 返回浏览器滚动条卷去的距离
		document.documentElement.scrollTop
		document.documentElement.scrollLeft

		// Node.offsetWidth/offsetHeight 返回元素内容区+内填充区+外边框区一共所占的位置
		document.getElementById("div1").offsetWidth
		document.getElementById("div1").offsetHeight

ES6的相关语法

* let,const与var关键字声明变量有什么区别：
	1. const声明的是常量，一经声明不允许改变。
	2. const和let都有块级作用域的概念，而非函数作用域。
	3. const和let都不存在变量提升的操作。
	4. let有暂时性死区的特性，如果在某个作用域中使用let关键字声明了变量，那么在这个作用域中任何其他作用域都不允许侵入该变量。
	5. for语句枚举使用let关键字可以纠正自增变量的准确性.


* 箭头函数与普通函数的不同点:1.写法不同；2.this指向不同:箭头函数本身不形成封闭的this作用域，也就是在函数体外边this指向哪里，箭头函数的函数体内部的this就指向哪里;

	// 箭头函数
	// var fn2 = (num)=>{
	// 	return num
	// }
	
	// let fn2 = num => num;
	// console.log(fn2(1111))

	// console.log((num => num)(10))
	

	// $("#div1").onclick = ()=>{
	// 	console.log(this)
	// }
	
	
	$("#div1").onclick = function(){
		let type = "灵长类"
		var wangdawei = {
			name:"王大伟",
			age:18,
			sex:"male",
			// 属性的简写
			type,
			sayName:function(){

			}
			// 对象方法的简写
			sayName(){

			}
			sayName:()=>{
				// 这里的this指向了div1
				// 因为箭头函数本身不形成封闭的this作用域，也就是在函数体外边this指向哪里，箭头函数的函数体内部的this就指向哪里。
				console.log(this)
			}
		}
		wangdawei.sayName()

	}

正则表达式

* RegExp.test(str) 检测参数字符串中是否含有与正则模式相匹配的字符片段，返回true或false.
* String.replace(str/RegExp,replacement) 将一个字符串中被匹配到的字符替换为另外一段字符

匹配中文字符: [\u4e00-\u9fa5]

ajax

协议名，主机名，端口号

	http://www.baidu.com:80
	协议名://主机名（域名或IP地址):端口号

当在浏览器上输入完地址后到看到页面这中间网络上都发生了些什么

1. DNS解析(将域名转换为IP地址的过程)
2. 向服务器发送一次HTTP请求（要一个东西）
3. 服务器会在它的磁盘上找个一个对应的文件给到客户端（一般来说是.html,.jpg.png.css.js等等）
4. 浏览器将根据已接收的文件将代码或图片解析成可见的页面。

HTTP协议

1. 无状态(第一次请求和下一次请求之间是没有任何关系的)。
2. 服务器端不允许主动向客户端进行推送。
3. 常常用在Web数据传输。

phpnow开发集成套件

* PHP
* MYSQL
* Apache（WebService类软件） 

Ajax:HTTP脚本化–使用js代码来控制HTTP请求。

	
	// 1.实例化一个XMLHttpReuqest()对象
	let http = new XMLHttpRequest()
	// 2.规划请求open
	http.open("get","http://xxx.xxx.xxx.xxx/xxxx.xxx",true);
	// 3.发送请求send
	http.send()
	// 4.接收服务器端的相应应答
	http.onreadystatechange = function(){
		if(http.readyState === 4){
			http.responseText
		}
	}

含有参数的请求：http://10.35.161.142/xxxx.php?参数名=参数值&参数名=参数值&参数名=参数值...

Mysql

数据库的结构

* 库 - Excel文件
* 表 - 文件内的表
* 列 - 表头
* 行 - 一条数据

数据库中表的设计原则

1.任何表都应该有一个id字段，并且该字段的值是唯一的，并且该字段应是该表中的主键。
2.

SQL语句

	<!-- 查询 -->

	SELECT * FROM 表名
	SELECT * FROM 表名 WHERE 字段名="某值"
	SELECT * FROM 表名 WHERE 字段名="某值" AND 字段名="某值"
	SELECT * FROM 表名 WHERE 字段名="某值" OR 字段名="某值"
	SELECT * FROM 表名 ORDER BY 字段名 根据某个的字段的值进行排序

	<!-- 删 -->

	DELETE FROM 表名 WHERE 字段名="某值";
	DELETE FROM 表名

	<!-- 增 -->

	INSERT INTO 表名 (字段名,字段名,字段名...) VALUES ("值1","值2","值3"...)

	<!-- 改 -->

	UPDATE 表名 SET 字段名="新值" WHERE 字段名="某值"
	UPDATE 表名 SET 字段名="新值",字段名="新值" WHERE 字段名="某值"

JSON:前后端交换数据的一种格式

* JSON字符串:往往都是在后端向前端发送数据时传输的格式。
* JSON对象：往往都是前端希望得到的。数据或对象或它们之间的嵌套。

JSON字符串与JSON对象之间的转换

* JSON.parse(JSON格式的字符串)：正解析，将JSON字符串转换为JSON对象，没有副作用。
* JSON.stringify(JSON对象)：反解析，将JSON对象转换为JSON字符串，没有副作用。 

同源组策略：Ajax请求地址与当前页面的地址必须得是同协议，同主机，同端口才可以正常发送Ajax请求，这三者有任何一个不一样，则判定此次请求是跨域请求，浏览器会阻止这个请求行为。

跨域解决方式

* CORS
* 服务器反向代理
* JSONP

JSONP:一种解决跨域问题的方法。工作机制：利用动态创建一个script标签并利用它的src属性向服务器发送一次HTTP请求,并提前声明好一个回调函数，回调函数的函数名利用callback请求参数传递给后端。后端接收到来自前端的请求后，获取callback请求的请求参数并拼接一个调用函数的JS代码段并将要返回给前端的数据以实参的形式存在。前端接收到来自后端的响应后，会将后端的返回内容当做JS代码来执行即调用一个函数，并用一个形参来接收后端向要传递过来的数据。

本地存储

cookie：document对象下的一个属性

	let cookie = {
	// 写入/修改cookie
	set(key,value,expires){
		let d = new Date(expires);
		document.cookie = key + "=" + value + ";expires="+d;
	},
	// 读取cookie
	get(key){
		let arr = document.cookie.split("; ")
		var result = {}
		arr.forEach(item=>{
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key]=value;
		})
		return key?result[key]:result;
	},
	// 删除cookie
	remove(key){
		if(this.get(key)){
			document.cookie = key + "=18;expires=" + new Date('1999-09-09');
			return true;
		}
		else{
			return false;
		}
	}
}

localStorage

* setItem(key,value) 写入
* getItem(key) 获取
* removeItem(key) 删除
* clear() 清空
* .length 返回有几条数据

sessionStorage

* setItem(key,value) 写入
* getItem(key) 获取
* removeItem(key) 删除
* clear() 清空
* .length 返回有几条数据

cookie,localStorage和sessionStorage它们之间的区别。

* cookie写法麻烦，兼容性好，可灵活设置生命周期。
* localStorage相对于cookie来说写法简单，兼容性一般，是永久性存储并不可设置过期时间。
* sessionStorage相对于localStorage来说只有生命周期不一样，这个生命周期是会话（存活与当前标签页中）。

jQuery

jQuery的核心方法：$(),jQuery()

* $("css选择器")：匹配返回与css选择器相匹配的jQuery对象
* $(Node): 将参数的Node节点转换为jQuery对象的形式
* $("HTML代码片段") 生成一个jQuery对象，类似于document.createElement()
* $(function(){}) : 类似于window.onload事件,代表页面加载完毕之后。

jQuery对象：类数组，由若干个Node节点构成的一个类数组，不同于Node或NodeList，属性和方法互不相通。

jQuery对象下的方法：

* addClass()   追加类名
* removeClass()删除类名
* toggleClass()追加/删除类名
* hasClass() 检测是否含有类名
* html() 设置/获取元素的开始标签与结束标签之间的内容
* val() 设置/获取元素的value属性的属性值
* attr() 设置/获取元素的行内属性
* show()
* hide()
* toggle()
* fadeIn(速率("fast" | "slow" | Number毫秒数),回调)
* fadeOut()
* fadeToggle()
* slideDown()
* slideUp()
* slideToggle()
* css({}) css("css属性名") 设置/获取元素的行内样式
* animate({},执行时间,回调) 设置/获取元素的行内样式并执行动画
* closest("css选择器") 从调用方法的元素为起始位置，逐层向上寻找祖先级元素，直到找到第一个与css选择器相匹配的祖先级元素为止，并将其返回。
* find("css选择器") 从调用方法的元素为起始位置，寻找与css选择器相匹配的所有的子孙级元素.
* clone(true/false) 克隆元素，可以连同事件一块儿克隆
* append()
* appendTo()
* prepend()
* prependTo()
* after()
* before()
* width()   获取宽高
* innerWidth() 获取宽高+内填充
* outerWidth() 获取宽高+内填充+外边框
* each(function(index,node){}) 用于枚举jQuery对象

jQuery对象绑定事件

	
	jQuery对象.去on事件名(function(){
	
		this	//原生js对象
		
	})

jQuery Ajax

	
		$.get("http://10.35.161.142/dataOrigin.php?name=王大伟",data => {
			console.log(data)
		})
		$.post("http://10.35.161.142/dataOrigin.php?name=王大伟",data => {
			console.log(data)
		})
		// ajax方法可代替上面两种方法
		$.ajax({
			// 请求方式
			method:"get",
			url:"http://10.35.161.142/dataOrisdfdfgin.php",
			// 请求参数
			data:{
				name:$("#name").val(),
				age:18
			},
			// 请求成功后触发的回调函数
			success(data){
				console.log(data)
			},
			// 请求失败后触发的回调函数
			error(message){
				console.log("失败啦~")
			},
			// 同步/异步
			async:true,
			// 请求发送之前触发的钩子函数
			beforeSend(xhr){
				// console.log(xhr)
			}
		})

		//使用ajax方法发送jsonp请求
		$.ajax({
			url:"http://xxx.xxx.xxx/xx",
			dataType:"jsonp",
			success(data){
				console.log(data)
			}
		})

Node:就是将chrome浏览器中的负责解析js部分的V8引擎剥离出来，做成了一个软件，以做到让我们写的JS代码脱离浏览器可以执行。这个执行环境中只有ECMAscript部分，没有DOM和BOM。

模块:使用commonJs写法require("模块名")引入一个模块（对象）。

内置模块

fs模块:文件系统

	const fs = require("fs");
	// 异步读取文件
	fs.readFile("data.txt",(error,data)=>{
		if(error){
			console.log(error)
		}
		else{
			console.log(String(data))
		}
	})

	// 同步读取
	console.log(String(fs.readFileSync("data.txt")))
	console.log("hello~")

	// 异步写入文件
	fs.writeFile("data1.txt","王大伟",error=>{
		if(error){console.log(error)}
		else{
			console.log("写入成功,嘿嘿~")
		}
	})
	fs.writeFileSync("data2.txt","刘志祥(好程序员)")

第三方模块: npm install 模块名 --save 或 npm i 模块名 -S

第三方模块网站：https://www.npmjs.org

切换npm下载国内下载源：npm config set registry https://registry.npm.taobao.org

express:类似于Apache软件，对外开放某一个端口提供Web服务。

	let express = require("express")();
	const port = 8080;

	// 监听来自前端的get请求(不是一个静态请求，而是一个路由请求)
	express.get("/list",(request,response)=>{
		// 获取来自前端请求的请求参数name的参数值
		let name = request.query.name;
		// 在后端控制台输出内容
		console.log("接收到来自前端发送的请求");
		// 向前端返回数据
		response.send("success!!!!")
	})

	// 监听来自前端的get请求(不是一个静态请求，而是一个路由请求)
	express.get("/details",(request,response)=>{
		// 在后端控制台输出内容
		console.log("接收到来自前端发送的details路由请求");
		// 向前端返回数据
		response.send("哈哈哈哈哈")
	})


	// 监听在哪一个8080端口上
	express.listen(port)
	console.log("server is running at " + port)

mysql

	
	// 读取数据库数据
	sql.query(`SELECT * FROM user `,(error,data)=>{
		if(error){
			console.log(error);
		}
		else{
			// data为读取之后的结果，JSON对象
			//[{...},{...},{...}]
			console.log(data)
		}
	})



		else{
			console.log("写入成功,嘿嘿~")
		}
	})
	fs.writeFileSync("data2.txt","刘志祥(好程序员)")

第三方模块: npm install 模块名 --save 或 npm i 模块名 -S

第三方模块网站：https://www.npmjs.org

切换npm下载国内下载源：npm config set registry https://registry.npm.taobao.org

express:类似于Apache软件，对外开放某一个端口提供Web服务。

	let express = require("express")();
	const port = 8080;

	// 监听来自前端的get请求(不是一个静态请求，而是一个路由请求)
	express.get("/list",(request,response)=>{
		// 获取来自前端请求的请求参数name的参数值
		let name = request.query.name;
		// 在后端控制台输出内容
		console.log("接收到来自前端发送的请求");
		// 向前端返回数据
		response.send("success!!!!")
	})

	// 监听来自前端的get请求(不是一个静态请求，而是一个路由请求)
	express.get("/details",(request,response)=>{
		// 在后端控制台输出内容
		console.log("接收到来自前端发送的details路由请求");
		// 向前端返回数据
		response.send("哈哈哈哈哈")
	})


	// 监听在哪一个8080端口上
	express.listen(port)
	console.log("server is running at " + port)

mysql

	
	// 读取数据库数据
	sql.query(`SELECT * FROM user `,(error,data)=>{
		if(error){
			console.log(error);
		}
		else{
			// data为读取之后的结果，JSON对象
			//[{...},{...},{...}]
			console.log(data)
		}
	})