javascript基础笔记

js笔记

js的引入方式

• 外部引入:通过script标签的src属性来引入一个外部的.js文件

  	
  	<script src="test.js"></script>
  

• 内部引入

  	<script>
  		// js代码
  		
  	</script>
  
  

• 行内引入:在HTML标签里当前某个HTML的属性的存在。

  	<div onclick="alert(1)" style="300px;height:300px;background-color:#f99;"></div>
  

变量：存储数据的容器。

```javascript

	//有了一个变量，这个变量里面存的是5
	var a1 = 5

	a1  -> 5

	a1 = 100

	a1 -> 100

```

暂且需要记住的测试方法：

	alert(exp)       在警告框中输出
	confirm(exp)     在警告框中输出，含有取消按钮并且根据用户按的按钮返回true或false
	console.log(exp) 在控制台输出
	document.write(exp) 在页面中输出

标识符:一种起名字（变量，对象的属性，函数）的语法规范。

	1.保证由字母，数字,_和$构成。
	2.数字不能作为开头。
	3.对大小写严格区分。

表达式:一切拥有返回值的js代码段都是表达式，反之亦是如此。

表达式的副作用(小重点)：如果有某句话它的存在与否会对整个js代码程序带来影响，那么这个表达式我们称之为有副作用的表达式。

• 变量，常量都是最简单的表达式。
• 1 + 1 a + 1 复杂表达式。

运算符(小重点):将简单表达式组合成复杂表达式的方法。

```
	+ - * / %

	++ 自增
	// ++：自增运算符
	// 操作数只能用变量，不能用常量。
	// 变量名++
	// 先将变量所存储的值作为整个表达式的计算结果。
	// 这个运算是一个具有副作用的运算，经过这句话之后，以后再访问变量就会自增1。

	// ++变量名
	// 先将变量自增1，然后将变量的返回值作为整个表达式的返回值返回。
```

数据类型

* Number(数字): 1,2,3,4,3.14,0,-1,-2,NaN(非数字),Infinity,-Infinity
* Boolean(布尔值):true(真)  false(假)
* String(字符串): "王大伟","王1大2伟","!@#$%^&*()_}{:><","123","true","false",""
* undefined(空值): undefined
* function(函数)
* null(空对象)
* Object(对象)

	一切变量当没有进行赋值的时候，里面存放的值都是undefined
	如果尝试去访问一个未被声明的变量，将会报错。（xxx is not defined）

数据类型的强制转换

转换方法和规则（小重点）

* Number(exp) 返回表达式的返回值强制转换为Number类型 
	* String转Number：除了纯数字的字符串以外全部都是NaN
	* Boolean转Number:true为1，false为0

* Boolean(exp) 返回表达式的返回值强制转换为Boolean类型 
	* String转Boolean 除了空字符串其余结果都是true
	* Number转Boolean 除了0和NaN其余结果都是true

* String(exp)  返回表达式的返回值强制转换为String类型：一律按照字面量的形式来进行转换

* parseInt(exp)： 对标Number()方法，但是砍掉非数字部分，留下数字部分再转换为Number类型。留整数部分，去掉小数部分。
* parseFloat(exp)： 对标Number()方法，但是砍掉非数字部分，留下数字部分再转换为Number类型。

运算符

	
	=== 判断恒等只要运算符左右两端的操作数数据类型不一致，直接返回false。

	== 判断如果发现运算符左右两端的操作数数据类型不一致，首先先进行数据类型转换，转换为一致的数据类型后再进行比较。

		2 == true -> false 
		NaN == NaN -> false

	以后以后需要比较两个值它们是否相同，一律使用判断恒等或者判断非恒等。

if,if else 逻辑语句，分支语句，判断语句。

	if(exp){
		语句/分支1
		.....
		....		
	}

	if(exp){
		分支1....
		...
		...
	}
	else{
		分支2...
		.....
		...
	}

	switch(变量){
		case 常量1:{
			分支1
			break;
		}
		case 常量2:{
			分支2
			break;
		}
		case 常量3:{
			分支3
			break;
		}
		//可选的一条路
		default:{
			默认分支
		}
		........
	}



	判断一个值是否是NaN用：isNaN(exp)

给元素绑定点击事件

	

	元素的id.onclick = function(){
		// 点击完元素后执行的代码
		.....
	}

循环语句

while语句

	while(exp){
		循环体 
	}

do while语句:完全没用，只需要知道有这么个东西。

	do{
		console.log(n)
		n++;
	}

	while(n < 100){
		console.log(n)
		n++;
	}

for语句

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

循环语句中的关键字(了解)

break:如果程序运行到break语句了，那么程序会跳出最近的一层循环。

continue:结束本次循环，继续执行下一次循环

函数与函数的参数（重点）

定义：一段可以被高度复用的代码段。

	//声明函数
	function 函数名(形参1,形参2,形参3.....){
		//函数体
	}

	//声明函数
	var 函数名 = function(形参1,形参2,形参3.....){

	}

	
	//调用函数
	函数名(实参1,实参2,实参3.....)
	

形参：就是在函数体内部声明的变量。

实参：给形参变量赋的值。

任何调用函数的语句，如果该函数的函数体内部没有return语句，那么调用函数表达式的返回值就是undefined。

return的作用：

1. 控制调用该函数表达式的返回值（return后面表达式的返回值）
2. 流程控制：当函数运行到return语句时，整个函数停止执行。

arguments:当不确认调用函数时传入的实参个数，要用arguments来代替形参；

本质：类数组，拥有数组下标和.length的特性。

	arguments[0] -> 返回arguments集合中第0位是啥  
	arguments.length -> 返回arguments到底有几个成员  Number
	

变量作用域

变量的种类

* 局部变量:在函数体内部声明的变量，这种变量只能在该函数内部被访问到。
* 全局变量：在函数体外部声明的变量，在任何地方都能被访问到。
* 注：当局部变量与全局变量发生冲突的时候，以局部变量为准。
* 再注：在JS中只有函数作用域的概念， 没有块级作用域的概念。

如果在函数体内部声明的变量去掉了var关键字，那么此时声明的就是一个全局变量，并且该变量不参与变量提升的操作。

变量提升:js解释器的一种执行机制，当某个函数执行时，JS解释器会首先过滤一遍这个函数体内所有的局部变量，然后放置到函数的最顶端先声明但不赋值，此时该变量的返回值是undefined

数组:数据的有序集合。

	// 声明数组
	var arr = [1,2,true,"王大伟"];
	//提取成员
	arr[下标] 
	// 修改
	arr[下标] = 新值

	//循环，枚举，遍历数组
	for(var i = 0; i < arr.length;i++){
		console.log(arr[i])
	}


	
	//随机生成0-1之间的数字
 	Math.random()

String对象的全局方法（11个，记住）

• charAt() 根据下标返回字符
• concat() 字符串拼接
• indexOf() 根据字符找下标
• lastIndexof()
• replace() 替换字符
• substring() 根据下标截取字符串
• slice()
• substr() 根据下标和数量截取字符串
• split() 根据某个字符切割为一个数组
• toLowerCase() 转小写
• toUpperCase() 转大写

数组的全局方法(10个，记住)

• push(新值) 往后插
• pop() 删掉最后一个
• unshift(新值) 往前插
• shift() 删掉第一个
• splice(删除下标,1) 从中间扣一个元素出来
• splice(插入新元素的下标,0,新元素) 从中间塞入一个元素进去
• concat() 数组拼接
• join() 将数组转换为字符串
• slice() 通过下标来截取数组
• toString() 将数组转换为字符串 可以被join完全代替
• forEach()
• map()
• filter()
• reduce()
• indexOf()

	// 字符串.String对象的全局方法("参数"...)
	var str = "abc^dec^fc";
	// console.log(str.length) 	        //-> 字符串的长度
	// console.log(str[0]) 			// -> 返回字符串中的某一位
	// 枚举字符串
	// for(var i = 0; i < str.length;i++){
	// 	console.log(str[i])
	// }
	// for(var item of str){
	// 	console.log(item)
	// }
	
	// 将字符串以某个字符做分割切割为长度若干的数组
	// console.log(str.split("^"))

	
	// substr通过下标和数量来截取字符串
	// console.log(str.substr(2))
	// 通过下标截取字符串
	// 结果中包含开始位但不包含结束位
	
	// console.log(str.slice(-4,5))
	// console.log(str.substring(-4,5))
	// 如果省掉第二个参数则代表一直截取到结束为止.
	// console.log(str.slice(2))
	// 可以倒着数
	// console.log(str.slice(-5,7))
	
	// 通过下标截取字符串
	// 结果中包含开始位但不包含结束位
	
	// console.log(str.slice(2,5))
	// 如果省掉第二个参数则代表一直截取到结束为止.
	// console.log(str.slice(2))
	// 可以倒着数
	// console.log(str.slice(-5,7))

	// 
	// 惰性匹配
	// console.log(str.replace("c","m"))
	// 全局匹配
	// console.log(str.replace(/c/g,"m"))

	// 通过下标获取字符
	// console.log(str.charAt(1))
	// 拼接字符串，平时我们会用+运算代替
	// str = str.concat("mmmmmmm")


	// indexOf() 从一个字符串中检索某个字符的下标，
	// 如果没有找到对应的字符，则返回-1
	// 如果要寻找的字符有多个，则默认返回第一个的下标
	// console.log(str.indexOf("c"))
	// console.log(str.lastIndexOf("c"))

对象：数据的无序集合。由若干条属性构成的，每一条属性都有属性名和属性值。

	 对象的声明
		
	 空对象
	{}

	var o = {
		name:"王大伟",
		age:18,
		sex:"male",
		city:"朝阳",
		married:false,
		students:["姚立峰","许佩"],
	 	//方法
	 	sayHello:function(){
	 		alert("王大伟对说了个hello");
	 		return 1;
	 	}
	}
	
	 对象的查询
	 找o对象的sex属性
	 console.log(o.sex)
	 先从js执行环境上下文中找sex变量，看它等于什么(m),然后再去o对象中找名字叫m的属性
	 console.log(o[sex])
	 等价于第一种写法，直接去o对象中寻找sex属性
	 console.log(o["sex"])
	 对象的修改
	 o.age = 19;
	 o.age++;
	 o["city"] = "西安";
	 console.log(o)
	 对象的添加
	 o.height = 180;
	 对象的删除
	 delete o.students
	 对象的枚举
	
	 循环次数取决于对象属性的条数，每次进来的时候变量都代表属性名
	 for(var i in o){
	 	 试图从对象中去找属性名叫i的属性
	 	 console.log(o.i)
	 	console.log(o[i])
	 }
	

如果某条属性的属性值是一个函数，那么我们一般称这条属性为方法。

试图调用某个对象中一个不存在的方法是时，程序会报错：xxx.xxx is not a function

试图查找某个对象中不存在的属性时，程序不会报错，表达式返回undefined

对象的种类

* 自定义对象
* 内置对象

Math对象

* PI 返回圆周率
* abs() 取绝对值
* ceil() 向上取整
* floor() 向下取整
* round() 四舍五入
* max()  从实参列表中返回最大值
* min()  从实参列表中返回最小值
* random() 返回0-1（不包含1）的随机小数

Date对象

* getFullYear()
* getMonth() + 1
* getDate()
* getHours()
* getMinutes()
* getSeconds()
* getDay()
* getTime() 返回时间戳，1970年1月1月00:00:00到日期对象所经过的毫秒数

	
	var date = new Date();

	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var ri = date.getDate();
	var hours = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();
	var week = date.getDay();

	设置目标时间的简便方式
	var target = new Date("2020/08/18 00:00:00");

计时器:每隔一段时间执行一段逻辑（函数）

```
	每个间隔时间就会执行一次函数
	setInterval(函数引用,间隔时间)

```

作业

	1. 实时在页面中刷新的时间 比如：您好，今天是：2020年8月18日14:55:54星期二
	2. 封装将日期对象转换为字符串xxxx年xx月xx日 xx:xx:xx
	3. 封装倒计时函数
		* 接收一个日期对象或者日期对象格式的字符串
		* 该函数返回系统当前时间相对于目标时间相差的小时:分数:秒数
		* 如果当前时间已经大于目标时间该函数不会返回负数，而返回字符串"活动已结束"、
	4.100%还原京东秒杀
		* 提示：如果想改变一个元素里面的内容，那么用 元素的id.innerHTML = exp

DOM（文档对象模型 document object Model）

DOM的作用：就是通过JS和HTML标签通信的方式。

document对象下的属性和方法

* getElementById("id") 通过ID获取元素，返回值一定是一个Node节点
* getElementsByTagName("标签名") 通过标签名获取元素，返回值一定是一个NodeList
* querySelectorAll("css选择器") 返回与css选择器相匹配的NodeList
* getElementsByClassName("类名") 通过类名获取元素 
* createElement("标签名") 创造一个Node节点

Node节点:Object数据类型，代表着页面中的一个元素。

* innerHTML 设置/返回这个元素的开始标签与结束标签的内容
* className 设置/返回元素的类名
* id 设置/返回元素的id
* getAttribute("属性名") 返回该元素得到某个属性的属性值
* setAttribute("属性名",属性值) 设置某个元素的某个属性所对应的属性值
* parentNode 返回父级元素 Node
* children   找儿子 NodeList
* nextElementSibling 下一个兄弟节点
* previousElementSibling 上一个兄弟节点
* removeChild(Node) 删除某个元素
* cloneNode(true) 返回一个被克隆节点的副本
* appendChild(Node) 在调用该方法的元素内部的结束标签之前插入参数节点
* insertBefore(Node1,Node2) 在调用该方法的元素内部的Node2元素之前插入Node1
* tagName 返回元素的标签名 大写 
* nodeType  返回节点类型:元素节点：1  文本节点：3  注释节点：8  document节点：9
* value 设置/获取input文本框/密码框里面的内容
* getElementsByTagName()
* getElementsByClassName()
* querySelectorAll()
* style 设置/获取一个元素的行内样式

NodeList:类数组，若干的Node节点组成的类数组。代表很多标签的集合。NodeList和Node节点它们各自的属性和方法独立。

DOM事件

	// 绑定事件
	node.事件名 = function(){
		//事件处理函数/事件句柄

		this 永远都是指向当前触发事件的那个Node节点

	}

	//帮助用户触发某个元素的某个事件
 	node.去on的事件名()

写交互效果的套路

1. 明确要操作的元素
2. 获取要操作的元素(有可能是Node,也有可能是NodeList)
3. 明确需要绑定事件的元素，并且为其绑定事件（可能会需要循环）。
4. 检测一下事件有没有绑定成功。
	4.1) 检查绑定事件的元素，是不是一个Node节点
	4.2) 绑定事件的事件名写错了。
	4.3) 没有把js代码放在body结束之前
5.思考当用户触发了事件之后你需要操作哪些元素哪些属性。

JavaScript的组成部分

1. ECMAScript JS的核心
2. DOM（文档对象模型 document） js和页面中元素通信的接口
3. BOM（浏览器对象模型 window） 浏览器给开发者的一个接口

BOM

设置地址栏的位置 window.location.href = "http://www.baidu.com";

* location 位置
	* href 设置/返回当前地址栏上的位置
	* reload() 刷新页面 

* history 历史记录
	* back() 返回到上一级
	* forward() 前进
	* go(1) 等价于前进
	* go(-1) 等价于后退
	* go(0) 等价于后退

* navigator 浏览器信息
	* cookieEnabled 浏览器是否开启cookie存储功能
	* language 返回操作系统的语言

计时器

* setInterval(function,间隔时间)
* setTimeout(function,间隔时间)
* clearInterval(计时器id)
* clearTimeout(计时器id)

计时器事件锁

	var isStart = false;	//计时器是否开启着
	intervalStart.onclick = function(){
		if(!isStart){
			isStart = true;
			autoAdd = setInterval(function(){
				number.innerHTML = Number(number.innerHTML) + 1;
			},100)
		}
	}
	intervalStop.onclick = function(){
		isStart = false;
		// 清除计时器
		clearInterval(autoAdd)
	}

null == undefined -> true

事件

鼠标事件

* onclick 单击事件
* onmouseover 鼠标经过
* onmouseout  鼠标离开
* onmouseenter 鼠标经过
* onmouseleave 鼠标离开
* onfocus 获取焦点时
* onblur 失去焦点时
* onmousemove 鼠标移动
* onmouseup   鼠标抬起
* onmousedown 鼠标按下
* oncontextmenu 呼出浏览器右键菜单栏事件

```
	node.鼠标事件 = function(){

	}

	window.鼠标事件 = function(){
		
	}

	document.鼠标事件 = function(){
		
	}

```

键盘事件

* onkeydown 键盘按下事件
* onkeyup  键盘抬起事件
* onkeypress 忽略功能键的onkeydown

如果希望在事件处理函数中阻止浏览器的默认行为return false。

鼠标事件对象

* offsetX 相对于触发事件元素的左上顶点相对位置
* offsetY
* clientX 相对于浏览器的左上顶点相对位置 
* clientY 
* screenX 相对于整个屏幕的左上定点的相对位置
* screenY
* which   左键返回1，右键返回3，中键返回2，侧键不一定，从4开始。
* target  返回Node节点，该事件触发时捕获阶段和冒泡阶段的交汇点（目标阶段）
* stopPropagation() 阻止事件冒泡

键盘事件的事件对象

* keyCode 键码

浏览器事件的传播机制：当某一个元素触发了单击事件时，这个区域其实属于多个元素的，那么浏览器会从外向内进行第一阶段的执行事件处理函数的过程（捕获阶段），然后再从内向外依次执行事件处理函数，这个阶段我们成为冒泡阶段。元素绑定的事件在不做设置的情况下默认是在冒泡阶段触发（IE8以下除外），如果想手动的调整某一个事件的触发时机，则可以使用事件监听的绑定方式，并且在第三个参数中传true。

	node.addEventListener("去on事件的名",function(){

	},true)

事件委托：将子元素的事件委托给祖先级元素来办，然后根据事件对象的target属性来确认最深层次的元素时哪个元素。

* 解决动态元素无法绑定事件。
* 在极端情况下节省客户端性能。

this出现的场景

* 出现在事件处理函数时，指向就是触发事件的node节点。
* 出现在一般函数内或者是全局作用域内的话，指向的就是window对象。
* 出现在对象的方法中，指向的就是该对象。
* 出现在构造函数中，指向的就是实例化对象。

正则表达式：描述一种字符串的模式（逻辑）。

* regExp.test("abcdef")  从参数字符串中匹配正则对应的模式，true || false。
* String.replace(regExp,"*") 

ES5，ES6

let和const

* let有块级作用域概念的变量
* const 声明的是常量，一旦声明不能修改，有块级作用域的概念。
* let和const都没有变量提升的操作
* let有暂时性死区，主要用在循环NodeList绑定事件，在处理函数里下标不再循环完毕的下标了。

箭头函数：破坏函数体内部的this指向，this的指向会穿透本层函数到达上层作用域。

	
	// 以下两种写法完全等价
	function(a,b){
		console.log(a+b)
	}

	(a,b)=>{
		console.log(a+b)
	}

模板字符串：用反引号代替双引号的字符串书写形式，在做字符串拼接工作时很简便。

	`2006班老师：${a} 班长：${b} 学委：${c} 副班长:${d}。`

数组新增的全局方法

* forEach(function(item,index,array){}) 循环数组，该方法的返回值全是undefined
* map(function(item,index,array){}) 循环数组，根据数组的长度和参数函数中的return语句来返回一个新的数组
* reduce(function(total,currentValue){}) 将数组成员每一个元素组成一个新值
* filter(function(item,index,array){})  过滤，根据参数函数中是否return了true来决定在新数组中是否包含该元素
* indexOf(查找的元素) 根据要查找的元素返回其下标，如果没找到返回-1。

String对象的新增全局方法

* trim() 去掉所有空格

获取各种尺寸

* 可见区域宽：document.body.clientWidth 
* 可见区域高：document.body.clientHeight
* 可见区域宽：document.body.offsetWidth 
* 可见区域高：document.body.offsetHeight
* 浏览器工作区域（不包含滚动条的区域）:window.screen.availHeight
* 浏览器工作区域（不包含滚动条的区域）:window.screen.availWidth
* 被卷去的高：document.documentElement.scrollTop， html中body向下滚动过的距离
* 被卷去的宽：document.documentElement.scrollLeft
* 元素的宽：node.offsetWidth
* 元素的高：node.offsetHeight

页面滚动事件

	// 每当滚动条的位置发生变化时触发事件
	window.onscroll = function(){

	}

构造函数，原型和实例化对象之间的关系。

构造函数：就是生产对象的模具。

	function Person(name,age,sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	
	// 实例化对象:生产一个对象
	new Person("王大伟",18,"男")

new关键字都做了哪些事情

1. 在构造函数顶端声明一个空对象
2. 将构造函数内部的this指向重定向到刚刚的那个空对象上
3. 在函数体最底端return了这个对象

原型prototype在实际工作中的用途

1.将构造函数共用的属性或方法从私有方法中提取到构造函数的原型对象中，节省性能。
2.为本地对象扩展方法。

引用类型和原始类型之间的区别：原始类型在赋值的时候是将值的拷贝副本赋值给另外的一个变量，而引用则是将一个指向原对象的一个指针存储起来，但真实对象只有一个，无论改变哪一个变量都会影响到另外的一个变量。（另外一种解释方法：堆和栈的角度来解释）

JSON：前后端数据的交换的数据格式，类似于JS中的数组，对象或它们之间的嵌套。需要注意的是，JSON不允许有注释，对象中的属性必须用双引号包起来。

JSON对象与JSON字符串之间的互相转换事件

* 正解析：JSON.parse(JSON字符串)
* 反解析：JSON.stringify(JSON对象)

select的Node节点的特殊性

	var province = document.getElementById("province");
	// 下拉选择菜单的值发生改变的时候
	province.onchange = function(){
		// select标签的value属性与当前选中的option标签的value属性时一致的。
		// 如果当前选中的option标签没有value属性，那么当选中这个option时select的value属性是该标签的开始标签与结束标签之间的内容
		// console.log(this.value)
		// 返回当前选中的option标签相对于其他option标签的索引值也就是下标
		// console.log(this.selectedIndex)
	}

windows shell命令

* cd..  退出当前文件夹返回上一层
* cd <文件夹名> 进入某个文件夹
* dir 列出当前目录中所有的文件夹
* 盘符:
* mkdir <文件夹名> 创建一个文件夹
* rm <文件夹名> 移除一个文件夹
* <文件名> 用本机默认程序打开这个文件

从浏览器输出地址栏到看到页面都发生哪些事情

1. DNS解析(将域名转换为IP地址)
2. 客户端向远程服务器的某一个端口发送一个请求
3. 服务器会经过内部处理之后，向客户机返回一个文件或一段内容（.html文件，img图片,css文件,JS文件或者是一段JSON）
4. 客户端将接受到来自服务器端返回的文件或JSON（.html）
5. 客户端的浏览器将按照HTML,CSS,JS的标准来解析来自服务器端给客户端的文件。

Ajax：HTTP脚本化（使用JS来控制HTTP请求）

	// 1.实例化XMLHTTPRequest对象
	let http = new XMLHttpRequest();
	// 2.规划一个请求
	// 2.1异步请求：从发送请求之后所有代码都不会等待服务器端的回执就会继续执行下文的操作。
	http.open("get","http://10.35.165.28/message.txt?key=value")
	// 3.真正地发送请求
	http.send()
	// 4.接收来自服务器端的响应
	http.onreadystatechange = function(){
		// 如果readyState为4了，说明客户端已经拿到了来自服务器端返回的内容
		if(http.readyState === 4){
			console.log(http.responseText);
		}
	}

PHP

集成套件

* Apache：web server 用来把本机的第80号端口向外开放，为别人提供Web服务的一款软件。
* PHP：后端编程语言。
* MySQL：数据库

数据库

库是表的集合

表是存数据的地方（类似于Excel）

Excel的第一行就是表头：在数据库中叫字段

在数据库表中，无论什么表都应该有一个叫做id不能为空并且自增要为主键的字段。

数据库中的数据类型

* int 整数
* float 浮点数(小数)
* varchar 字符串
* date yyyy-mm-dd
* datetime yyyy-mm-dd hh-mm-ss

SQL语句

	//从某表中查询所有的数据
	SELECT * FROM 表名;
	SELECT * FROM 表名 WHERE 字段名="某值";
	SELECT * FROM 表名 WHERE 字段名="某值" AND 字段名="某值";
	SELECT * FROM 表名 WHERE 字段名="某值" OR 字段名="某值";

	// 插入
	INSERT INTO 表名 (字段名,字段名,字段名.....) VALUES (值,值,值......)

	
	// 更新
	UPDATE 表名 SET 列名=新值 WHERE 列名=某值

	// 删除

	DELETE FROM 表名 WHERE 列表=某值

同源组策略：浏览器为了安全起见，只允许客户端向同主机，同协议，同端口的服务器发送Ajax请求。如果某一个页面的来源地址与要发送请求的地址端口号主机名协议名有任意一项不相等，则阻止该请求的发送。

	 协议名    主机名     端口  路径  
	http://www.baidu.com:80/aaa.html?age=18

JSONP的工作机制：JSONP不是一种技术，是解决跨域问题的一种方式。使用script标签向后端发端一次HTTP请求，这次请求返回过来的结果，前端会当做JS代码段来被解析。在发送请求时前端在请求地址上使用参数的形式发送callback的参数，这个参数代表回调函数的函数名。后端接到前端的请求后首先拆解callback请求参数的参数值 ，然后拼接成一段执行函数的JS代码段，并把需要返回给前端的数据当做实参存在。此时前端会自动调用回调函数，形参也就代表了后端返回的数据。

本地存储

* cookie `document.cookie = `key=value;expires=date对象`

```javascript

	// 读取cookie的通用函数
	function getCookie(k){
		let result = {}
		let arr = document.cookie.split("; ");
		arr.forEach(item=>{
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})

		if(!k){
			return result;
		}
		return result[k];
	}

	// 设置cookie的通用函数
	function setCookie(key,value,expires){
		if(typeof expires === "object"){
			document.cookie = `${key}=${value};expires=${expires}`
		}
		if(typeof expires === "number"){
			let date = new Date();
			date.setDate(date.getDate() + expires);
			document.cookie = `${key}=${value};expires=${date}`
		}
	}

	// 删除cookie
	function removeCookie(key){
		let date = new Date("1970-01-01");
		document.cookie = `${key}=1;expires=${date}`
	}

```



* localStorage

	* localStorage.setItem(key,value)
	* localStorage.getItem(key)
	* localStorage.remove(key)
	* localStorage.clear()

```javascript

	// 如果存数组，会转换成字符串，每个成员以,分隔
	localStorage.setItem("list",arr)
	// 如果存对象，虽然不报错，但是里面存的一律都是[Object Object]
	localStorage.setItem("o",obj)
	// 最外层是数组的这种json也不要往localStorage里面存储
	let json = [
		{
			"name":"王大伟",
			"age":18
		},
		{
			"name":"姚立峰",
			"age":10
		}
	]
	// 但是可以先反解析成字符串再进行存储.
	localStorage.setItem("j",JSON.stringify(json))


```


* sessionStorage

	* sessionStorage.setItem(key,value)
	* sessionStorage.getItem(key)
	* sessionStorage.remove(key)
	* sessionStorage.clear()

cookie和localStorage和sessionStorage的区别。

* cookie兼容性好，但是设置获取都很麻烦，可以灵活的设置数据的生命周期。
* localStorage,新方法IE8以下不认识，存储周期是永久性存储，操作方便。
* sessionStorage,新方法IE8以下不认识，存储生命周期是会话（当前标签页不关闭的情况下只在当前标签页中能获取到数据）。

jQuery:类库，帮助我们快速实现页面效果的一个工具。

jQuery的核心方法的传参形式和作用

* $("css选择器") 返回的是与css选择器相匹配的jQuery对象
* $(Node节点) 返回Node节点的jQuery对象形式
* $("HTML代码段") : `$("<h2>哈喽呀</h2>")` 类似于document.createElement，凭空创造一个页面中不存在但在内存中存在的jQuery对象。
* $(function(){}): 等价于`$(document).ready()`，可代替window.onload

jQuery对象本质：类数组，包含若干的Node节点的集合，如果我们使用数组下标的形式提取出来某一个元素，那么这个元素就是Node节点。不同于Node或NodeList，拥有独立的方法和属性。

jQuery对象和Node节点的属性和方法互相不通用。

jQuery对象下的方法

* attr(key,value) 操作元素的行内自定义属性 如果只传一个参数是做获取，如果传两个参数是做设置。
* html() 获取/设置元素的开始标签与结束标签之间的内容
* val() 获取/设置元素的value属性的属性值
* addClass("类名") 追加类名
* removeClass("类名") 删除类名
* toggleClass("类名") 追加/删除类名
* hasClass("类名") 检测元素是否含有class，返回Boolean
* eq(下标) 返回jQuery对象集合中的某一个元素的jQuery对象形式
* css() 设置/获取一个元素的行内样式
* animate({},时间,回调函数) 设置/获取一个元素的行内样式，动态改变。
* clone(true) 克隆一个jQuery对象，参数传true代表是否连同事件一块儿克隆
* append(): 对标appendChild方法。 父.append(被插的元素)
* prepend() 插入到开始标签之后
* before()
* after()
* remove(): jQuery对象.remove() 
* each(function(index,node){}):能枚举被调用each方法的jQuery对象
* show()
* hide()
* toggle()
* fadeIn(时间(Number, "slow" || "normal" || "fast"),回调函数)
* fadeOut()
* fadeToggle()
* slideDown()
* slideUp()
* slideToggle()
* width()  返回元素在页面中所在的宽度,等价于去掉padding区域的offsetWidth
* height()
* closest() 根据css选择器逐层向上寻找祖先级元素，直到找到一个与参数css选择器相匹配的元素停止寻找，并将其返回。
* find() 根据css选择器逐层向内寻找子孙级元素，并把符合条件得到所有子孙级元素都返回。

jQuery获取页面的尺寸

	// 获取页面中可视区域（包含滚动条没有滚到的区域）
		$(document).width()
		$(document).height()
	// 获取页面中可视区域（不包含滚动条没有滚到的区域）
		$(window).width()
		$(window).height()

为jQuery对象绑定事件

jQuery对象.去on的事件名(function(){
	// 事件处理函数	
	this
})

jQuery的链式调用：jQuery调用一切不关心返回值的方法的表达式的返回值都是调用方法对象的本身；

jQuery Ajax

	// 发送一个ajax请求
	// 1.地址 2.方式 3.同步异步 4.回调
	$.ajax({
		// 同步/异步：默认值就是true异步
		async:true,
		// 请求方式:默认值GET
		type:"get",
		// 当发送请求时，会将data对象里面的参数和url进行拼接。
		// data代表请求参数。
		data:{
			username:$("#username").val(),
			age:$("#age").val()
		},
		url:`http://127.0.0.1/allStudent.php`,
		// 成功后的回调函数
		success(data){
			console.log(data)
		},
		// 发送请求之前执行的函数，往往都是操作加载动画。
		beforeSend(){
			console.log(1)
		}
	})

jQuery jsonp

	$.ajax({
		// 发送jsonp请求
		dataType:"jsonp",
		data:{
			wd:$("#city").val()
		},
		// 控制回调函数名字的参数属性名的，碰到憨批接口的时候会用到。
		jsonp:"cb",
		// 控制回调函数的函数名
		jsonpCallback:"fn",
		url:`http://suggestion.baidu.com/su`,
		// 成功后的回调函数
		success(data){
			console.log(data)
		}
	})

js的闭包

闭包的本质：外层函数套内层函数，内层函数作为外层函数的return语句的返回值。在外层函数里声明一个局部变量，在内层函数里操作并返回这个局部变量。外层函数自调用将返回值也就是内层函数的引用赋值给一个变量（内层函数）。此时调用该变量就等价于调用内层函数，也就可以操作原本外层函数的局部变量了。并且想要获取或操作刚刚那个局部变量，执行内层函数将是唯一的一个途径。

闭包缺陷:因为该局部变量不会被JS的垃圾回收机制所自动回收，所以当大量使用闭包并且闭包内得的局部变量足够多时，就容易爆掉用户的内存（内存泄漏）。

使用场景：

1.如果希望一个局部变量可以在函数体外部操作访问到。
2.如果希望某一个变量只能通过调用某一个函数的形式进行修改。

js的继承在面试题中的问法：

	* 如果在js中实现面向对象中的继承。
	* call和apply这两个方法有什么不同点。

js继承的实现机制：在子类中继承父类的私有属性和私有方法使用call或apply的方法来在子类函数中调用父类函数并改变this指向。如果想在子类中继承父类的原型属性和原型方法的话，这种需求方法有很多种，问题最少的是使用原型链的方式进行进行继承，具体的操作就是将父类的实例化对象赋值给子类的原型对象，此时子类的实例化对象在调用父类的原型方法或原型属性时，虽然在子类的原型对象中找不到对应的属性或方法，但是在子类的原型对象中的原型对象中可以找到这些方法。并且子类独有的原型属性和原型方法不会影响到父类。

	// Person类 父类
	function Person(name,age,sex){
		// 私有属性和私有方法
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	// 原型属性和原型方法
	Person.prototype = {
		type:"灵长类",
		sayName(){
			alert(this.name)
		}
	}

	let wdw = new Person("王大伟",18,"男");


	// // SuperMan类  子类
	function SuperMan(name,age,sex,skill){
		// 继承了父类Person里面所有的特征（属性）
		// 此时只继承了私有属性和私有方法
		Person.apply(this,[name,age,sex]);

		this.skill = skill;
	}
	
	// 将父类的实例化对象赋值给子类的原型对象
	// 原型链继承
	SuperMan.prototype = new Person();
	// 子类的原型中独有的一个方法，父类的原型里应该没有。
	SuperMan.prototype.showSkill = function(){
		alert(this.skill)
	}



	let spiderMan = new SuperMan("蜘蛛侠",18,"男","爬墙");

	// 修复实例化对象的constructor指向问题
	spiderMan.constructor = SuperMan;

	console.log(spiderMan)

ES6实现继承

	class Person{
		constructor(name,age,sex){
			this.name = name;
			this.age = age;
			this.sex = sex;
		}

		sayName(){
			alert(this.name)
		}
	}
	let wdw = new Person("王大伟","18","男")
	console.log(wdw)

	class SuperMan extends Person{
		constructor(name,age,sex,skill){
			// 从父类中继承过来的
			super(name,age,sex)

			this.skill = skill
		}

		skill(){
			alert(this.skill)
		}
	}

	let cr = new SuperMan("超人",18,"女","飞")
	console.log(cr)

jQuery插件

$.extend()与$.fn.extend()有什么不同点：$.extend相当于为$对象去扩展属性或方法，这个情况很少用。$.fn.extend方法相当于给所有jQuery实例化对象扩展属性或方法，一般来说jQuery的插件都是在$.fn.extend中添加了某一个方法。

Nodejs：它是一种服务器端语言，将JavaScript的ECMAScript部分剥离出来，可以脱离浏览器执行的一种运行环境。

如何使用Nodejs环境运行一个js文件：node 文件名

模块：需要引入的对象，这个对象中包含一些功能。

模块的引入方式：let o = require("模块名")

切换NPM下载源(下载第三方模块的速度加速)：npm config set registry https://registry.npm.taobao.org --global

第三方模块安装命令(shell)：npm install 模块名 --save

内置模块

* fs:文件系统
* url:处理url格式字符串  `url.parse(request.url,true).query` 序列化前端发送的请求参数.

第三方模块

* express:对外开放一个端口，为其他用户提供web服务的。

```javascript

	let express = require("express")();


	// 计划一个服务于客户端的接口
	express.get("/",(request,response)=>{
		// 这个回调函数是只有我们后端接收到来自前端的请求时会执行的。
		// 作为后端 向 前端返回一段内容
		response.end(`success!!!!`)
	})

	// 开始监听来自前端的请求，也叫启动服务
	// 这个操作不会停止
	express.listen(port)


```


* mysql:让Nodejs可以与本机的Mysql服务进行通信。

```javascript

	let mysql = require('mysql');
	// 数据库的配置，做计划
	var sql = mysql.createConnection({
		// 别改 
		host     : 'localhost',
		user     : 'root',
		password : '123456',
		database : 'school'
	});

	// 尝试链接
	sql.connect();

	// 查库
	sql.query(`SELECT * FROM students`,(error,data)=>{
		if(error){
			response.end("database error");
			console.log("数据库查找失败了")
		}
		else{
			// 反解析后向前端返回JSON字符串
			response.end(JSON.stringify(data))
		}
	})
```

* express-static:让NodeJs可以处理来自前端的静态请求

```javascript


	let expressStatic = require('express-static');

	// 如果接收到来自前端的静态请求了，我应该去哪里（文件夹）找对应文件 注：这句话一定要放在所有路由请求的最下面
	express.use(expressStatic(`${__dirname}/static`))


```

如何在后端接收到来自前端的请求参数

```javascript

	let url = require('url');

	express.get("/delete",(request,response)=>{
		//获取的来自前端请求的id参数
		let id = url.parse(request.url,true).query.id;
		//获取的来自前端请求的callback参数
		let callbackfn = url.parse(request.url,true).query.callback;

	})
```

SQL多表联查语句：

	
	select * from students,score WHERE students.id=score.studentId AND score
.studentId = 122 AND score.subject = "语文"