# 笔记

**Repository Path**: wangdawei0418/biji

## Basic Information

- **Project Name**: 笔记
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-07-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# html部分

语法：

	单标签
	<标签名 属性名="属性值">

	双标签
	<标签名 属性名="属性值" 属性名="属性值"...>内容</标签名>

特性：
	忽略换行符，连续空格只认一个。


路径：

* 绝对路径：`C:\Users\admin\Desktop\4.jpg`
* 相对路径：`images/4.jpg`
	
路径操作符：

* `文件夹名/`  进入某个文件夹
* `../`       返回上一级


标签：
* head  网页头部
* title 网页标题 
* body  网页主体
* html  网页整体
* h2 - h6    正文标题
* p     段落
* hr    水平线
* a     超链接
	* href 链接地址
	* target 打开方式 (blank 从新标签打开) 
* img 图片
	* src 图片地址
* ul 无序列表
* ol 有序列表
* li 列表项
* div 区域
* input 输入
	* type 类型
		* text 文本框
		* passwrod 密码框 
		* radio  单选按钮
		* checkbox 多选框
		* button 按钮
		* submit 提交按钮
		* reset  重置
* select 下拉选择菜单
* option 选择项
* textarea 文本域 
* button 

`文本框、密码框以及文本域都拥有placeholder文本占位符属性`
`单选按钮与多选按钮都拥有checked属性且该属性可以不写属性值`
`解决单选按钮点击逻辑不互斥的问题只需要使用name属性，将它们分到同一组即可`

## 表格
* table 表格
	* border 边框
	* cellpadding 单元格内填充
	* cellspacing 单元格外边距
	* width 宽度
	* align 对齐方式(left || right || center)
* thead 表头
* tbody 表格主体
* tr 行
* td 单元格
* th 标题单元格

## 元素的种类

### 行内元素
默认并排显示，默认宽度自适应，不可为其设置width,height,padding,margin和border属性。

### 块级元素
默认独占一行，默认宽度100%，可为其设置width,height,padding,margin和border属性。

# CSS部分

## CSS属性

* color(文字颜色)  英文单词 || 16进制颜色值 || rgb模式的10进制颜色值
* font-size(字体大小) 数字+单位(px || em || rem...)
* line-height(行高) 
* letter-spacing(字符间距) 
* text-align(文字水平对齐方式) left || right || center 
* text-indent(首行缩进) 
* background-color(背景颜色)
* width(宽度)
* height(高度)
* padding(内填充)
* border(外边框) 10px solid #000 
* margin(外边距)
* float(浮动) left || right || none
* list-style(列表样式) none
* font-weight(文字粗细) bold || normal || 数字
* text-decoration(文本修饰) underline 下划线 || none
* background-image(背景图片) url(路径)
* background-repeat(背景图片重复方式): repeat || no-repeat || repeat-x || repeat-y
* background-position(背景图片的位置):数字+单位(px,%)
* display(显示方式):block(块级) || inline(行内) || inline-block(行内块) || none(不显示)
* visibility(可见性):visible(可见的) || hidden(隐藏的)
* border-radius(圆角):数字+单位
* opacity(不透明度):0-1之间的数字
* transition(过渡):过渡关键字（属性名 || all) 持续时间（数字+单位 s || ms）速率
* box-shadow(阴影):水平方向偏移量 垂直方向偏移量 模糊半径 阴影颜色
* overflow(溢出处理方式):visible(可见的) || hidden(隐藏的) || scroll(滚动)
* transform(变换):方法名(值)
	translate(移动)
	rotate(旋转) 例子：transform:rotate(60deg)
	scale(缩放)
* position(定位)：relative(相对的) || absolute(绝对的) || fixed(固定的) || static(静态的)
* cursor(光标样式):pointer(手型)
* z-index(调整层级关系):数字
* animation(动画)：动画名 持续时间 执行次数 延迟时间 速率
	* 1.使用keyframes 动画名定义关键帧动画
	* 2.为使用动画的元素添加animation属性

### relative(相对定位)
	* 相对于自身进行定位
	* 作为参照物的存在

### absolute(绝对定位)：元素会被抽离出正常文档流同时会失去块级元素默认宽度100%的特性，该元素会逐层向上寻找position不为static（通常都为relative）的元素，如果找到符合条件的祖先级元素时，会停止寻找并根据匹配到的祖先级元素进行定位。如果直到找到body元素时都没有发现position不为static的元素，那么该绝对定位元素将根据整个页面的左上定点进行定位。

### fixed(固定定位) 相对于整个页面的左上定点进行定位,会被抽出正常文档流同时会失去块级元素默认宽度100%的特性。

### 相对定位和绝对定位的使用场景：当一个元素想要覆盖在另外一个元素上面的时候，会使用相对定位和绝对定位。需要动谁就给谁设置绝对定位，谁是参照物谁就是相对定位。


## CSS的引入方式

* 内部样式  `在<head>结束标签之前使用<style>标签，将css代码放在<style>中`
* 外部样式  css作为一个单独的外部.css文件，在HTML页面中使用<link>标签将css文件引入进来
* 行内样式  在html标签中作为一个属性存在

## 选择器的种类

* 标签选择器 语法：标签名
* 类选择器   语法：.类名
* 包含选择器 语法：选择器 选择器
* 伪类选择器 语法：选择器:hover 鼠标移上之后的状态
* ID选择器 语法：#id名
* 子元素选择器 语法：选择器>选择器

## CSS选择器的优先级
	每个选择器都拥有其对应的权重分值，通配符0分，标签1分，类10分，ID100分，包含选择器则拆分其组成的每一个选择器然后将其分值相加，相加之和为该包含选择器最终的权重分值。当对一个元素进行多次声明相同的属性时，该相同的属性最终取决于分值较大的那个选择器所声明的值。当选择器分值相同的情况下执行就近原则（谁在下面听谁的）。
	如果某条属性使用了!important操作符，那么该属性将无视其所在选择器的优先级。

## CSS盒模型
本质：一套理论，浏览器计算解析每一个元素在页面里所占位置的一个机制。
相关属性：width,height,padding,border,margin
计算方法：
	水平 width + padding + border + margin
	垂直同上

## 高度坍塌

### 触发原因：当父级元素它里面含有非正常文档流内的元素时，它将忽略到该元素所占的高度。

### 解决办法：

* 直接为父级元素设置高度 
* 为父级元素设置overflow:hidden属性
* 在坍塌元素结束标签之前写入空的div元素并为其设置clear:both属性

## 边距传递

### 触发原因：当一个父级元素的第一个子元素(正常文档流内的元素)设置上边距的时候，这个上边距会传递给它的父级元素。

### 解决办法：

* 以父级元素的padding-top来代替子级元素的margin-top
* 给父级元素设置overflow:hidden属性

## 边距重合

### 触发原因：当两个同级元素（正常文档流）垂直方向的边距发生碰撞时，那么最终的解析结果是取两者最大的那个值，而非相加之和。


## PS快捷键

* Alt + del  填充前景色
* Ctrl + del  填充背景色
* M 选取工具 	
* V 移动工具
* Ctrl + R   呼出标尺
* Ctrl + T   自由变化（缩放，旋转，切斜）
* G 渐变工具


### 图片格式的选择

#### jpg:色彩还原度最高，适合真实世界中的图像格式，压缩比相对于其他格式略大。

#### png8:支持透明色 色彩还原度相对于jpg略微有点差，但只要不是写实的图片一般看不出来，压缩比相对于jpg略好。

#### png24:支持半透明,其他等同于png8。(解决输出图片被溶解的问题)

#### gif:支持动画。

## Javascript部分

### 引入方式

* 内部引入
* 外部引入
* 行内引入(完全不用的)

### 暂时需要记得方法

* alert(exp)   在提示框中输出表达式的返回值
* confirm(exp)  
* prompt(exp)

* console.log(exp)  在控制台输出表达式的返回值
* document.write(exp) 在页面中输出表达式的返回值


### 标识符：作为变量名、属性名、函数名的存在

* 由英文字母_$与数字构成
* 第一个字不能是数字
* 不能用关键字或保留字

### 变量:存储数据的容器，利用var关键字来声明的。` var 变量名 = 值 ` 

### 常量(字面量):值本身

### !!返回值：每个表达式都有它的返回值(计算结果)，反之亦然。

### 表达式

* 复杂表达式：`1+2`,`10*5`,`"abc" + "王大伟"`
* 简单表达式：`5`,`"abc"`,`"王大伟"`,`m`

### !!具有副作用的表达式：如果某个表达式执行它之后会对接下来的程序运行结果产生影响的话，那么我们会说这个表达式是含有副作用的。

### 数据类型 

* String(字符串):`"ABC"`,`"王大伟"`,`"123"`,`"true"`
* Number(数字):`1`,`2`,`-1`,`0`,`3.14`,`infinity`,`-infinity`,`NaN`
* Boolean(布尔值):`true` `false`
* undefined(未定义)：undefined
* Object(对象) 
* function(函数)

`typeof(exp)`：返回表达式的返回值的数据类型的字符串。

### 运算符:将简单表达式组成复杂表达式的方法。
* 一元运算符
* 二元运算符
* 三元运算符

### 语句
```
	if(exp)
		语句
```

```
	if(exp)
		语句1
	
	else
		语句2
```

```
	for(exp1;exp2;exp3){
		语句块
	}
```

```
	
	for(var i in obj){

	}

```


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

```
	//声明函数
	function 函数名(参数,参数,参数...){
		函数体
	}

	//调用函数
	函数名(参数,参数,参数....)

```

#### arguments参数对象：当声明函数时不确定调用的时候会传入多少个实参，那么我们不会写形参，而是在函数体内部用arguments参数对象来代表实参。arguments对象时一个类数组，拥有数组下标的特性和.length属性。

#### return:函数体中如果执行到return语句时，那么return语句以下的所有代码都将被忽略，并且return语句后面的表达式的返回值就作为执行函数表达式的返回值。另外如果某个函数体中没有return语句，那么该函数的执行语句的返回值都为undefined.

### 对象

* 对象的声明：`var obj = {name:"王大伟",age:18}`
* 对象的查询：`对象名.属性名` `对象名["属性名"]`
* 对象的设置(添加、修改)：`对象名.属性名 = xxx` `对象名["属性名"] = 属性值`
* 对象的删除: delete 对象名.属性名
* 对象的枚举
```
	for(var i in Object){
		
	}
```


#### 如果对象中的某个属性中存的属性值是一个函数，那么该条属性我们一般都愿意把它称之为`方法`。

* 自定义对象：自己声明的对象
* 宿主对象（本地对象、内置对象）：系统级的对象window,document,console...


## DOM(document object model文档对象模型):

### document

* getElementById()  在页面中查找ID值与参数相匹配元素并返回其的Node节点
* getElementsByTagName() 在页面中查找标签名与参数相匹配元素并返回其的NodeList
* createElement("标签名") 返回一个新的Node节点
* getElementsByClassName()  通过类名获取元素 
* querySelectorAll("CSS选择器") 通过css选择器获取元素


### Node节点

* innerHTML 设置/返回该元素开始标签与结束标签之间的内容
* className 设置/返回该元素的class属性的属性值
* setAttribute("属性名","属性值") 为元素设置一个自定义属性
* getAttribute("属性名") 获取元素行内自定义属性的属性值
* getElementsByTagName("标签")
* appendChild(Node) 把参数的Node节点插入到调用方法的Node节点结束标签之前
* insertBefore(Node1,Node2) 把参数1插入到参数2节点的前面
* parentNode 返回元素的父级元素Node节点
* nextElementSibling 返回下一个兄弟节点
* previosElementSibling 返回上一个兄弟节点
* tagName 返回改元素的标签名(大写) String


* removeChild(Node) 删除参数节点
* value
* id
* style.css属性    设置/获取元素的行内css


### NodeList(类数组):与Node节点互相不通用其属性和方法，自身是由若干个Node节点组成的类数组，如果我们通过数组下标的形式提取出某一个元素，那么该元素就是Node节点。


### 事件:node节点下的方法，用来控制代码在什么时候执行。
```
	Node.事件名 = function(){
		事件处理函数 || 事件句柄
		this -> Node节点  当前触发该事件的元素
	}
```

* onclick 当用户点击时
* onmouseenter 当用户鼠标移动到某个元素上的时候
* onmouseleave 当用户鼠标离开到某个元素上的时候
* onmousemove 当鼠标每移动一像素时
* onmousedown 当鼠标按下时
* onmouseup   当鼠标松开时
* onfocus 当表单元素获得焦点时
* onblur  当表单元素失去焦点时
* onkeyup    当键盘按键被松开时
* onkeydown  当键盘按键被按下时
* onkeypress 过渡掉所有键盘功能键的onkeydown的版本
* onchange 下拉选择菜单独有的事件，当选择项发生改变时


### 键盘事件只能为表单元素或者window对象去绑定，如果为表单元素绑定键盘事件只有当表单元素获得焦点时才能触发其键盘事件，而为window对象绑定键盘事件则是不需要任何元素获取焦点就能捕捉到键盘事件。


#### `node.去掉on的事件名()` 帮助用户触发某个事件

### 变量作用域:在js中没有块级作用域的概念(es6里let除外),有函数作用域的概念即一个函数形成一个封闭的作用域，在函数体里面声明的变量在函数体外无法被访问到。
	局部变量：在函数体中使用var 关键字声明的变量，只能在该函数体内部或者是内部函数里被访问到。
	全局变量：在函数体外声明的变量，在任何地方都可以被访问到的变量。

### 变量提升:js内部解释器的一个机制，当执行js代码时，js解释器会从头到尾的过滤一遍js中所有的使用var关键字声明的变量，然后把这些变量在该作用域中放到最上面先声明但不赋值，此时该变量存储的值为undefined，直到程序运行到真正声明该变量语句时才会对其赋值。


### 数据类型转换
Number()
parseInt()
String()
Boolean()


### 计时器
setInterval(function,number)
setTimeout(function,number)

clearInterval(计时器id)
clearTimeout(计时器id)


### 运动原理：在计时器中操作元素的css属性，间隔之间要在16ms
~32ms之间。


### JS对象的全局对象

### Math

PI     返回圆周率
abs()  求绝对值
ceil() 向上取整
floor() 向下取整
round() 四舍五入
random()  返回0-1之间的随机数

### Date

#### 获得日期对象：``` new Date() ```

* getDate() 返回当前是几号
* getMonth() 返回当前的月份（从0开始计数）
* getFullYear() 返回当前的年份
* getHours() 返回当前小时数
* getMinutes() 返回当前分钟数
* getSeconds() 返回当前秒数
* getDay() 返回当前星期几(0代表星期日)
* setDate() 设置当前是几号
* setMonth() 设置当前的月份（从0开始计数）
* setFullYear() 设置当前的年份
* setHours() 设置当前小时数
* setMinutes() 设置当前分钟数
* setSeconds() 设置当前秒数
* getTime() 从 1970 年 1 月 1 日至今一共所经历的毫秒数


### String 

* replace(a,b) 把a替换为b
* indexOf(需要查找的字符串,首次开始查找的位置[可选的]) 查找某个字符出现的位置,如果找不到则返回-1
* slice(start,end) 根据下标返回切割后的结果，注：end位不带最后一位字符，与substring()、substr()功能一致。
* split(a) 以a作为分界将字符串切割为n个长度的数组
* toLowerCase() 将字符串转换为小写形式
* toUpperCase() 将字符串转换为大写形式
* length 返回字符串的长度

### Array

* push()    向数组尾端添加一个元素
* unshift() 向数组开始添加一个元素
* pop()     删除最后一个元素
* shift()   删除第一个元素
* splice()	从数组中间替换、插入、删除元素
* concat()  拼接多个数组
* join()	将数组转换为字符串，每个成员之间的分隔符默认为,
* reverse() 颠倒数组成员之间的顺序
* slice()	截取一个新的数组
* sort()	从小到大或安照字母表之间的顺序进行正向排序


### 表单元素与JS

select

* value 当前选中的那个选择项option标签的value属性的属性值
* selectedIndex 当前选中的那个选择项在select标签中是第几个（从0开始计数的）
* onchange 事件，当表单元素中的选择项发生改变时会触发的事件

radio

* checked 返回Boolean，代表当前radio元素是否被选中


### 强制类型转换与隐式类型转换 

* 转换为Number的情况
	* Boolean:  true为1，false为0。
	* String:  如果是纯数字的情况，则转换为数字，空字符串为0，其余情况都为NaN。
	* undefined: NaN
	* Object： NaN

* 转换为String类型
	* Number: 直译
	* undefined：直译
	* Boolean:直译
	* Object:"[Object Object]"

* 转换为Boolean类型!!
	* Number:除了0与NaN以外其余结果都为true。
	* String:除了空字符串以外都为true。
	* undefined:false
	* Object:true

#### 在==运算，if或for语句与&& || 运算时回出现隐式类型转换的情况


## this出现的常见场景以及其指向

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


### 构造函数：如果一个函数它的作用是生产某个对象的话，那么我会把这个函数称之为构造函数。

```	
function Person(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}

new Person("王大伟",18,'男')  这个步骤我们称之为实例化
```
		
### new关键字都做了哪些事情：1.在构造函数中生成一个空对象；2.将构造函数中的this指向到空对象；3.当执行完函数体后将刚刚的对象return回来。

## prototype(原型)：每一个构造函数都有一个原型对象，该原型对象是构造函数的一个属性（prototype），当在实例化对象中调用或查找某个属性或方法时，首先JS会先从该实例化对象本身去查找该属性或方法，如果查找不到则会去该实例化对象的构造函数的prototype原型对象中查找该属性或方法。
### protoype的使用场景：1.整合构造函数中所有公用的属性和方法以节省内存的开销；2.可以为本地对象扩展自定义方法。
### constructor:该属性是实例化对象的属性，该属性会指向该实例化对象的构造函数。
### __proto__:该属性是实例化对象的属性，该属性会指向该实例化对象的构造函数的原型对象。


### 1.为Number本地对象扩展countMethod方法，该方法会原数字的科学计数法的技术方式，返回值为String类型。附加需求：另考虑含有小数情况的表现正确性
	
```
	var num = 1234567890;
	num.countMethod()  -> 1,234,567,890
	
	var num1 = 1234567890.12345
	
	num.contMethods() -> 1,234,567,890.12345
	
```

### 2.把URL解析序列化的方法由原来的函数调整为String对象的全局方法。
```
	praseUrl(str)
	
	str.parseUrl() 

```

### 3.为Array对象扩展本地方法，该方法会返回所有Number类型的数组成员累加之和，返回值为Number类型。如果数组中某个成员为非Number类型则忽略掉该成员，如果数组元素中没有任何一个Number类型则返回-1(Number)


### 当输入完地址敲回车到看到网站，这之间都发生了什么事情。

* DNS解析  域名->IP地址
* 向服务器发送一个HTTP请求(一般网站服务器根目录下的index.xxx文件)
* 服务器接收到来自客户端的请求并予以处理（准备好数据给一会儿给客户端，准备拒绝客户端）
* 服务器向客户端发送响应数据（文本，图片，视频....并附带一个HTTP状态码）
* 客户端接收到来自服务器的响应并由浏览器负责解析返回的数据
* 在浏览器解析服务器返回代码的过程中，如果发现需要引入任意的一个外部文件的话则上述流程重新再来一遍。

## Ajax（脚本化HTTP：使用JS代码来控制HTTP请求）
## Ajax异步请求的4个步骤
* 1.实例化一个XMLHttpRequest对象
* 2.规划一个请求open(method,URL,asy)
* 3.发送请求send()
* 4.利用onreadystatechange事件以及readyState属性相配合在接受到来自服务器端的响应的时候再使用responseText属性来操作返回的数据。

## 同步请求与异步请求的区别
* 同步：如果客户端没有接受到来自服务器端的返回的数据的话，整个JS程序将卡死并等待服务器端的响应，当接受来自服务器端的响应数据后再执行以后的代码。
* 异步：发送请求后不等待服务器端的响应，直接执行下面的代码。

## 同源组策略：假设客户端解析的页面来自于服务器A的文件，里面发送的AJAX请求地址必须与服务器A处在同域上（同协议，同主机，同端口），如果是不同域的请求，则浏览器将阻止该HTTP请求的发送与回执。

## JSONP(它是一种非官方的实现跨域请求的一种手段，它不是一项标准的技术)
## 实现机制：由前端利用一个script标签向后端发送一个HTTP请求，并且在发送请求前声明一个回调函数，该函数中有一个参数，这个参数就代表了一会儿后端给前端返回的数据；在这个请求路径中利用callback参数把回调函数的函数名发送给后端；当后端接受到来自前端的请求时，先将请求路径中callback参数的参数值提取出来，并向前端返回一段执行函数的JS代码段，并且将返回给前端的数据装载到执行函数的参数中当做实参存在；前端接受到来自后端的回执则会自动执行前端预先声明好的回调函数，并且此次执行的函数的实参就是后端向前端返回的数据。 


### 事件对象:记录事件触发时在浏览器中所存在的一些信息。
#### 鼠标事件对象下的属性
* clientX   距离浏览器边缘的位置
* clientY   距离浏览器边缘的位置
* offsetX   距离元素边缘的位置
* offsetY	距离元素边缘的位置
* screenX	距离屏幕边缘的位置
* screenY	距离屏幕边缘的位置
* target    触发事件时在浏览器事件传播机制中的目标阶段元素(最深层的元素) Node


### 事件传播机制：两个阶段：第一阶段是捕获阶段，从外向内依次查找元素；第二阶段是冒泡阶段，从内向外依次查找元素；
 
### 事件委托：将元素的事件委托给它们的祖先级元素来办
####好处：1):解决动态元素无法绑定事件的问题；2):在极端情况下可以节省客户端性能；
####坏处：破坏this的指向；


#### 绑定事件的两种方式的不同点：
* 1) addEventListener可以指定事件处理函数的触发时机，true为捕获阶段,false为冒泡阶段（除低版本IE外所有浏览器默认为冒泡）
* 2) addEventListener重复绑定最终效果为事件处理函数叠加而非覆盖。
 
``` 
node.事件 = function(){
		、、处理函数
} 
```

```
node.addEventListener(去on事件名,function(){},boolean)

```

## BOM(browse object model) window
* alert()
* confirm()
* setInterval()
* setTimeout()
* clearInerval()
* clearTimeout()
* location  返回一个记录当前URL中的信息的对象
	* hostname
	* href
	* origin
	* pathname
	* port
	* protocol
* navigator 返回一个浏览器标识信息的对象(所有东西都存在误导性)
* history
	* back()
	* forward()

* onload事件: 当页面加载完成后触发的事件

#### 全局变量或函数事实上就是绑定到window对象下的一个属性或方法。

## jQuery

### jQuery对象：
* jQuery对象下的所有属性和方法和源生js节点下的属性方法**互不相同**；
* 类数组，数组中每一个成员都是一个源生Node节点，如果通过数组下标从jQuery对象中提取出来某一个元素，那么该元素就是源生Node节点。

### jQuery对象的方法：
* addClass(className) 为jQuery对象追加类名
* removeClass(className) 为jQuery对象删除一个类名
* toggleClass(className) 为jQuery对象删除/追加一个类名
* hasClass(className)  返回一个Boolean  检测一个jQuery对象是否拥有某个类名
* html(content)	 设置/获取元素开始标签与结束标签之间的内容
* text()        获取元素开始标签与结束标签之间的内容并过滤掉子孙级标签
* .去on事件名(function(){})	为jQuery对象绑定事件
* hide()   为元素设置行内属性display=none;
* show()   为元素设置行内属性display=block || inline
* toggle()  显示/隐藏元素
* fadeIn()  渐显
* fadeOut() 渐隐
* fadeToggle() 渐隐/渐显
* slideUp()  收起隐藏
* slideDown() 下拉显示
* slideToggle() 
* css({css属性名:css属性值,css属性名:css属性值})  改变元素的行内样式
* animate({},speed,callback)
* append()  插入到元素的结束标签之前
* appendTo()  同上，但是逻辑相反
* prepend() 插入到元素的开始标签之后
* prependTo() 同上，但是逻辑相反
* index() 返回某个jQuery对象在其父级元素中与其他兄弟节点的相对位置,返回Number类型
* remove() 删除元素
* clone(boolean)   true代表连同事件一起克隆，默认false则不会。
* after() 在被选元素之后插入内容
* before() 在被选元素之前插入内容
* val()    与html()方法相同，可以设置、获取一个元素的value属性 
* attr()
* each(function(){}) 为jQuery对象结果集中每一个元素执行一个函数，其中函数体中的this代表当前循环的源生Node节点
* find(selector)  返回jQuery对象下所有与css选择器相匹配的子孙级节点(jQuery)
* closest() 根据CSS选择器来寻找相匹配的祖先级元素
* eq()   从jQuery对象结果集中提取某一个元素，结果依然是jQuery对象。
* prev()	前一个兄弟元素
* prevAll() 前面所有的兄弟元素
* next()	后一个兄弟元素
* nextAll() 后面所有的兄弟元素
* siblings()所有的兄弟元素
* not()     从匹配的元素删除掉与css选择器相匹配的元素


getAttribute()
setAttribute()


## 在jQuery事件处理函数中，this的指向依旧是**源生node节点**;


### jQuery核心方法的使用场景
1.$(selector):String,css选择器的格式，返回一个jQuery对象;
2.$(Node): Object, 返回一个与node节点相匹配的jQuery对象;
3.$(function(){}) 类似于window.onload事件
4.$(HTMLCode)  String  html代码段； 根据HTML代码段生成一个jQuery对象，类似于document.createElement()方法。


### jQuery发送请求

$.ajax({
	url:"",			//请求地址,
	data:{},		//请求参数
	async:true		//同步异步
	method:"",	    //请求方式 "GET" || "POST"
	dataType:"",	//当值为jsonp时，前端则以JSONP的工作形式向后端发送请求
	beforeSend:function(){
		//在请求发送之前触发的函数
	}
	success:function(data){
		//成功的毁掉函数  其中函数的参数则代表后端返回的数据
	},
	error:function(){
		//当请求发生错误时
	}
})


## cookie
```
	var date = new Date();
	date.setDate(date.getDate() + 1000)
	document.cookie = "key=value;expires=" + date
```

## localStorage(本地存储)

* setItem(key,value):设置
* getItem(key):获取
* removeItem(key):删除某个条目
* clear():删除所有条目
* length

## cookie和localStorage的不同点

* cookie可灵活设置数据生命周期，但localStorage是永久性存储且不能被改变该特性
* cookie用起来麻烦，localStorage用起来简单。


### $.extend() 和 $.fn.extend()

* $.extend 是为$对象扩展方法
* $.fn.extend 是为所有jQuery对象扩展方法

```

$.fn.extend({
	方法名:function(){
		
	},
	方法名:function(){

	}
	.......
})


```


## ES6	[ES6参考手册](http://es6.ruanyifeng.com)

* const与let 
* 模板字符串
* 箭头函数
* for of语句


## NodeJS

### 模块(对象)：一套功能的集合

```
	require("模块名")
```


* fs：文件系统
	* readFile(url,function(error,data){})
	* writeFile(url,data,function(error){})
	* unlink(url,(error)=>{})

* http

```
	//创建一个WebServer并将其挂载到port端口上
	createServer((request,response)=>{
		
		//向前端返回数据
		response.end("message")
	}).listen(port)


	get(url,(oData)=>{
		var result = "";
		oData.on('data',(data)=>{
			var result = result + data;
		})
		oData.on("end",()=>{
			result.........
		})
	})

```

* express
	* get(url,callback(request,response){})
	* listen(port)
	

* express-static

```
	express.use(static(__dirname + "/public"))
```

* ejs

```
	ejs.renderFile(filename, data, options, function(err, str){
	    // str => Rendered HTML string
	});

	
	<%  %> 流程控制
	<%=  %> 查询变量
	<%-  %> 查询变量 并解析HTML标签


```

* mysql

```
	//配置链接信息
	var connection = mysql.createConnection({
	  host     : 'localhost',
	  user     : 'me',
	  password : 'secret',
	  database : 'my_db'
	});

	//尝试创建链接
	connection.connect();

	//使用SQL语句操作数据库
	connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) {
	  if (error) throw error;
	  console.log('The solution is: ', results[0].solution);
	});
	
```

 
* mysql
	* `SELECT * FROM 表名` 查找某个表内的所有数据
	* `INSERT INTO 表名 (字段名1, 字段名2,...) VALUES (值1, 值2,....)`
	* `DELETE FROM 表名 WHERE 字段名 = 值`
	* `UPDATE 表名 SET 字段名 = 新值,字段名 = 新值,字段名 = 新值 WHERE 列名=某值`


### 下载第三方模块  ` npm install 模块名`


## Vue

### Vue的特性

* 双向数据绑定
* MVVM设计模式


### 实例化Vue对象

```

	new Vue({
		el:"#root", //把ID值叫ROOT的元素由该Vue实例对象来接管
		// 在该Vue实例中有name数据可以在root元素中使用
		data:{
			name:"王大伟"
		},
		// 所有事件处理函数
		methods:{
			
		},
		// 计算属性：具有复杂逻辑运算的数据模型
		// 与methods一样，这里是若干个方法的集合
		// 每个方法都必须有一个return语句
		computed:{
		},
		components:{
			组件名:组件对象,
			组件名:组件对象
		},
		mounted(){
			//生命周期函数（钩子函数）其中的一种
			//一般ajax请求来的数据都在这里进行挂载到数据模型上
		},
		router:{
			// 定义路由功能的配置信息
			// 接受通过VueRouter()构造函数创建的一个路由对象
		}
	})

```


### 插值表达式

```
	{{ js表达式 }}
```


### 指令：一个vue自定义的HTML属性。

* v-text:取数据模型中的某个值用于解析开始标签与结束标签之间的内容
* v-model:一般用于表单元素，把该元素的value属性的属性值与数据模型中的某个值绑定在一起。
* v-for:根据数据模型中某个字段的长度来循环标签。
* @事件名 : 绑定事件
* v-bind:属性名 : 将html源生属性或自定义属性与数据模型中某个值相绑定
* v-if:根据数据模型决定该元素是否存在
* v-show:根据数据模型决定该元素是否显示


### 在Vue事件处理函数中，this指向的不是触发事件的元素的Node节点，而是Vue实例化对象。


## Vue组件：页面中一个区域，每个页面都是由多个组件共同构成的。

### Vue组件化有哪些好处？

* 代码复用变得更加容易。
* 团队协作变得更加简单，代码合并时冲突较少。

### 组件类别

* 全局组件

```
	//创建全局组件

	Vue.component("组件名",{
		//该组件里面的内容,该属性必须要有的。
		template:"HTML代码段",
		data:,
		methods:,
		computed:,
		......


	})

```


* 局部组件


	// 注册
	var componentA = {
		template:`
			<div class='top'>
				<h2>局部组件</h2>
				<h3>嘿嘿嘿</h3>
				<h4>{{message}}</h4>
			</div>
		`,
		data(){
			return {
				message:"hellohello"
			}
		}
	}
	//挂载
	new Vue({
		el:"#wrap",

		// 挂载
		components:{
			componentA
		},
		.......
	})


## 父组件向子组件传值：媒介是props；在子组件中声明props属性，此时可以把子组件看做成一个函数，而props里面的值就是该函数的形参，在调用该组件的时候，因为是在父组件作用域（管辖区）内，所以可以将父组件中想要传递的值以自定义属性的形式传递给子组件，此时可以把自定义属性理解为调用函数时传入的实参。
## 子组件向父组件传值：媒介是自定义事件；首先在父组件中监听一个自定事件，在子组件中触发某个事件后利用$emit方法帮助父组件触发该自定义事件，因为$emit后续参数可以传递给自定义事件的事件句柄，又因为监听自定义事件时在父组件作用域中，所以自定义事件的事件句柄是在父组件的methods中声明的，再所以来自子组件的数据就可以以参数的形式传递给父组件的事件句柄中了。


##Git 命令

### 初始仓库： git init
### 查看仓库状态： git status
### 将工作区所有的文件提交文件到缓冲区：git add -A
### 将缓冲区的所有文件提交到版本库：git commit -m "注释信息"
### 对比文件差异：git diff 文件名
### 查看版本记录：git log
### 查看所有操作相关的版本记录：git reflog
### 撤销修改：git checkout 文件名
### 版本回退：git reset --hard 版本号 
### 从版本库向远程库推送：git push
### 设置远程库地址：git remote add origin 远程库URL
### 第一次向远程库提交：git push -u origin master
### git pull
### git clone 远程库URL
### git push 


### LESS & SASS
### 有用的特性
* 变量
* 混合
* 嵌套