CSS CSS3
布局属性
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 !important为最高权值important;
a:link一般状态 a:visited点击后 a:hover鼠标经过时 a:active:点击时
list-style-type:none;去点 list-style-image列表图片 list-style-position:900px;列表图片位置
背景颜色background-color:;字体颜色color:; 边框颜色border-color:;
display:none;显示为无block显示 display:block;区块 display:inline-block;行内块元素
绝对定位(position:absolute)相对定位(position:relative)固定定位(position:fixed) placement-top:1px；放置绝对定位
text-align:center;水平居中 vertical-align: middle;把此元素放置在父元素的中部。left;左:right;右 opacity: 0.6;透明
font-weight:bold;字体加粗 italic=斜体 font-size:;字体大小 line-height:;行高
background-repeat:no-repeat;背景图不重复 repeat全图 repeat-x repeat-y 背景位置background-position:先x left后y center;
background:url(images/9821.png ) no-repeat left bottom 20px,url(images/9821.png )left top;多重背景语法
background-size:100%;背景图片大小 background-size:cover;以背景图最适合的比例铺满整个屏幕
background-attachment: fixed;背景图片固定在相应位置 z-index: 99;加大层叠权值
background-origin: content-box;从填充 background-origin: padding-box; 从外边框 background-origin: border-box;从内边框 （背景图的开始位置）
padding:填充;margin:边界；auto居中 上右下左如顺时针，padding:20px 10px 15px 30px; 上下 左右一样padding:10px 20px box-sizing:border-box;让填充在内边距
overflow: scroll;溢出的将以卷动滚动条的方式呈现 hidden;隐藏溢出容器的内容且不出现滚动条 auto;当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条
text-decoration:underline;下划线 overline=上划线 line-through=中划线 text-indent:2em;段落缩进
中文、字母间距letter-spacing:50px;英文单词间距word-spacing:50px; width:宽度； heigh:高度；
浮动=float:left;左，float:right;右 防止浮动上来=overflow:hidden;clear:both;消除左右浮动
边框=border:solid;实线，dashed（虚线），dotted（点线） border:1px solid #fff;
border-radius:圆角;
CSS3动画属性
transition: all=全部 color=颜色 1s过度时间 规定速度效果的速度曲线。 定义过渡效果何时开始;
transition-property:width; 规定设置过渡效果的CSS属性的名称
transition-duration: 5s; 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: linear;
规定速度效果的速度曲线。linear（默认）规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay: 2s;延迟2秒执行效果
transform-style: preserve-3d;设置为3D效果 perspective: 1000px;景深
transform:scale(1.2);放大先X后Y 1.2=X和Y rotate(-30deg)=旋转 translateZ(100px)=偏移 translate(X,Y)=偏移
transform-origin:x y z;设置动画基准点
@keyframes=定义动画 go=名称{ 0%{transform:tranlateX(0px);} 50%{transform:tranlateY(300px);} 100%{transform:tranlateY(0px);}} }
animation:name=定义名称 10s=动画总共时间 innear=匀速 ease-in=快到慢 ease-out=慢到快 ease-in-out=慢快慢
1s=延迟播放 infinite=无线播放（或者设置2次 20） alternate=反向播放;
animation-play-state:paused;=动画暂停animation-fill-mode:forwards;停留最后一针 animation-fill-mode:backwards;在第一针位置等待
CSS3阴影属性
text-shadow: 0px 3px 5px rgba(0,0,0,0.5);阴影代码 可以多重阴影如text-shadow: 0px 3px 5px rgba(0,0,0,0.5),0px 3px 5px rgba(0,0,0,0.5);
第1个长度值用来设置对象的阴影水平偏移值。可以为负值 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 rgba(0,0,0,0.5);颜色
box-shadow:;是背景阴影 text-shadow:;是内容阴影
CSS3 选择器
子选择器即大于符号(>),用于选择指定标签元素的第一代子元素 .first>span{border:1px solid red;}<span>内容</span>
p:target选择器可用于选取当前活动的目标元素。 当点击 a链接 跳转的目标元素样式就会激活
例子跳转至内容 1</a> <p id="news1"><b>内容 1...</b></p>
E::first-line 伪元素选择器 选择匹配E元素内的第一行文本
E::first-letter 伪元素选择器 选择匹配E元素内的第一个字符
E::before 伪元素选择器 在匹配E的元素前面插入内容
E::after 伪元素选择器 在匹配E的元素后面插入内容
使用E::before与E::after 为类选择器需要配合（ content属性来使用）content: "hello "
更深入的例子div:hover::before { content: ''; height: 100%; top: 0; left: -5000px; position: absolute; width: 10000px; z-index: -1; }
:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；:nth-child(4n+1)隔三选一 :nth-child()不支持负数
第一个参数是代表从第几个参数开始选取）:nth-child(2n)==:nth-child(even)"选择偶数 :nth-child(2n+1)"和":nth-child(odd)" 选择奇数
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；如（ div p ::nth-of-type ） 或 :nth-of-type(even) 偶尔 odd 是奇数
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。
E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
E[attr][attr="value"]（ 可以有多个匹配 这样只要是同时具有这两属性的元素都将被选中）
CSS3 弹性盒布局
display:flex;新版弹性盒模型 flex-direction:row;设置主轴为水平方向 flex-direction:column;设置主轴为垂直方向
flex-direction:row-reverse;设置主轴为水平反向排序 flex-direction:column-reverse;设置主轴为垂直反向排序
flex-wrap:no-wrap不换行wrap换行; 指定子元素是否换行
justify-content:flex-start;元素在主轴开始位置 justify-content:flex-end;元素在主轴结束位置 justify-content:center;元素在主轴中间 justify-content:space-between;富裕空间平均分配在每两个元素之间 justify-content:space-around;富裕空间平均分配在每个元素两侧
align-items:flex-start;元素在侧轴开始位置,富裕空间在侧轴结束位置 align-items:flex-end;元素在侧轴结束位置,富裕空间在侧轴开始位置
align-items:center;元素在侧轴中间,富裕空间在侧轴两侧 align-items:baseline;根据侧轴方向上文字的基线对齐
flex-grow:1;弹性盒空间(2两倍弹性空间) order: 1;排列顺序，数值小的排在前面(允许负值)
flex-shrink:0;属性都为1，当空间不足时，都将等比例缩小。为0时则不会缩小
align-self: center;用于覆盖父级指定的布局方式
display:-webkit-box;老版弹性盒模型 -webkit-box-orient:horizontal;设置主轴为水平方向 -webkit-box-orient:vertical;设置主轴垂直平方向
-webkit-box-direction:reverse;反序排序 老板弹性盒模型需要两条 -webkit-box-orient:horizontal; -webkit-box-direction:reverse; 配合使用 并且不以边界为起点
-webkit-box-pack:start;元素在主轴开始位置,富裕空间在主轴结束位置 -webkit-box-pack:end;元素在主轴结束位置,富裕空间在主轴开始位置
-webkit-box-pack:center;元素在中间,富裕空间在主轴两侧 -webkit-box-pack:justify;富裕空间平均分配在每两个元素之间
-webkit-box-align:start;元素在侧轴开始位置,富裕空间在侧轴结束位置 -webkit-box-align:end;元素在侧轴结束位置,富裕空间在侧轴开始位置
-webkit-box-align:center;元素在侧轴中间,富裕空间在侧轴两侧
-webkit-box-flex;弹性盒空间 -webkit-box-ordina-group;元素具体位置
HML HTML5标签
meta 移动端设置标签
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
name="viewport"窗口设定 width=device-width页面大小屏幕等宽 initial-scale=1初始化比例大小
minimum-scale=1.0允许缩放的最小比例 maximum-scale=1.0允许缩放的最大比例 user-scalable=no用户是否可以缩放
常用HTML5标签
contenteditable="true" 给某个元素加上该属性就变成可编辑状态
<header></header> 头部标签
<nav></nav> 导航条标签
<main></main> 页面主题内容标签
<footer></footer> 底部导航标签
<time></time> 标记时间
<progress></progress> 进度条标签 value值可以用来控制进度条
<audio></ audio>音频控件、
[if !supportLists]• [endif]<audio></ audio>音频控件、
[if !supportLists]• [endif]controls : 显示或隐藏用户控制界面
[if !supportLists]• [endif]autoplay : 媒体是否自动播放
[if !supportLists]• [endif]loop : 媒体是否循环播放
[if !supportLists]• [endif]currentTime : 开始到播放现在所用的时间
[if !supportLists]• [endif]duration : 媒体总时间(只读)
[if !supportLists]• [endif]volume : 0.0-1.0的音量相对值
[if !supportLists]• [endif]muted : 是否静音
[if !supportLists]• [endif]autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
[if !supportLists]• [endif]paused : 媒体是否暂停(只读)
[if !supportLists]• [endif]ended : 媒体是否播放完毕(只读)
[if !supportLists]• [endif]error : 媒体发生错误的时候，返回错误代码(只读)
[if !supportLists]• [endif]currentSrc : 以字符串的形式返回媒体地址(只读)
[if !supportLists]• [endif]play() : 媒体播放
[if !supportLists]• [endif]pause() : 媒体暂停
[if !supportLists]• [endif]load() : 重新加载媒体
[if !supportLists]• [endif]（Video额外特性）
[if !supportLists]• [endif]poster : 视频播放前的预览图片
[if !supportLists]• [endif]width、height : 设置视频的尺寸
[if !supportLists]• [endif]videoWidth、videoHeight : 视频的实际尺寸(只读)
[if !supportLists]• [endif]
插入音频
分行 空格 <hr />水平横线
创建表格的四个元素table、tbody、<th></th>：表格的头部的一个单元格，也就是th标签中的文本默认为粗体并且居中显示
:表格的一行 td表格的一个单元格
当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。
HTML（表单标签）
<form autocomplete=”on”记录之前输入的内容action=”当提交跳转相应.html” novalidate当前嵌套的文本框不做校验> placeholder="Email"提示信息
当type="text"为文本输入框; 当type="password"为密码输入框。
当type="email"为邮件输入框。 当type="url"为路径输入框。
type="submit"提交按钮 type="button"普通按钮 type="reset"重置
type="file"=文件选择框 accept=” audio/*” multiple=” multiple”允许一个以上的(上传)值。
audio/* 接受所有的声音文件。video/* 接受所有的视频文件。image/* 接受所有的图像文件。
type="date"=日历 type="color"=颜色选取器
<input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"> </datalist> 常用下拉框组合
type="checkbox"为复选框当设置 checked="checked"时该选项被默认选中
下拉列表框
文本域
举列男</label> for 属性中的值应当与相关控件的 id 属性值一定要相同。
JavaScript笔记
事件触发（window）
addEventListener("事件名如:click",函数名,flase为冒泡 true为捕获);事件绑定（可以绑定多个函数）
removeEventListener("事件名如:click",函数名,flase为冒泡 true为捕获);取消事件绑定
Event.cancelBubble = true;阻止事件冒泡（用于ie的阻止）event.stopPropagation();阻止事件冒泡（标准浏览器有效IE不行）Event.preventDefault();阻止链接默认行为，没有阻止冒泡
onclick=鼠标单击 ondblclick=鼠标双击 onblur=失去光标后 onseroll=鼠标滚动
onmouseenter=鼠标悬浮 onmouseover=移入 onmouseout=移开 onmousemove=鼠标移动
onmousedown=鼠标上的元素被按下触发的事件 mouseup：鼠标按下后，松开时触发的事件
ontouchstart=手指按下 ontouchmove=手指移动 ontouchend=手指抬起
（注意：移动端开发时，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式 addEventListener ）移动端事件对象：（touches = 当前位于屏幕上的所有手指列表 targetTouches = 位于当前DOM元素上的手指列表 changedTouches = 涉及当前事件的手指列表）
onkeydown=当键盘某个按键被按下时触发此事件 onkeyup=当键盘上某个按键被按放开时触发此事件 onkeypress=当键盘某个键被按下并且释放时触发此事件.
onchange=当前元素失去焦点并且元素的内容发生改变而触发此事件 onfocus=当某个元素获得焦点时触发此事件 onreset=当表单中RESET的属性被激发时触发此事件 onsubmit=表单被递交时触发此事件
window.onresize=当浏览器的窗口大小被改变时触发此事件
window.onload=加载后执行 window.onerror=出现错误时触发此事件
window.onunload=当前页面将被改变时触发此事件
onpaste= 当内容被粘贴时触发此事件 onselect=当文本内容被选择时的事件
oncontextmenu=当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
DOM元素属性 （Element）
[if !supportLists]1) [endif]document.getElementById(“box”); 获取一个ID元素
[if !supportLists]2) [endif]document.getElementsByTagName(“div”); 获取所有标签为div的
[if !supportLists]3) [endif]document.getElementsByClassName(“dom”); 获取所有class为dom的
[if !supportLists]4) [endif]document.getElementsByName(“name”); 获取name属性返回数组
[if !supportLists]5) [endif]document.querySelector(“#id #d1”); 能像CSS一样获取元素不兼容IE8以下 返回的是一个元素
[if !supportLists]6) [endif]document.queryselectorAll(“#ul li”); 能像CSS一样获取元素不兼容IE8以下 返回的是一组元素
[if !supportLists]7) [endif]（注意）className 返回的是字符串（”me1 me2”）classList返回的是数组 [“me1”],[“me2”]
[if !supportLists]8) [endif]元素.classList=获取所有class类名 元素.classList.add("类名")=在后面添加class类名
[if !supportLists]9) [endif]元素.classList.remove("类名")=删除class类名方法
[if !supportLists]10) [endif]元素.classList.toggle("类名")=如果这个类名不存在就添加，存在删除
[if !supportLists]11) [endif]元素.parentNode=获取父节点 （11） 元素.children=获取子节点
[if !supportLists]12) [endif]元素.firstElementChild=获取第一个子节点
[if !supportLists]13) [endif]元素.slastElementChild=获取最后一个节点
[if !supportLists]14) [endif]元素.previousElementSibling=获取上一个节点 （同级的上一个）
[if !supportLists]15) [endif]元素.nextElementSibling=获取下一个节点 （同级的下一个）
[if !supportLists]16) [endif]document.createDocumentFragment()创建一个DOM载体，可用于一次性添加
[if !supportLists]17) [endif]document.createElement('h1')=创建一个节点
[if !supportLists]18) [endif]变量.style.cssText='height:100px;width:100px;';能添加多条样式并提高性能
[if !supportLists]19) [endif]父级.appendChild(节点)=在某个元素里后面添加一个节点
[if !supportLists]20) [endif]父级.insertBefore(节点,何处);在指定位置（前面）插入一个节点
[if !supportLists]21) [endif]父级.insertAfter()；在指定位置（后面）插入一个节点
[if !supportLists]22) [endif]父级.removeChild(元素)=删除一个节点(注意：使用前要声明父级)
[if !supportLists]23) [endif]父级.cloneNode(true表示克隆子节点一起 默认false表示不克隆子节点);
[if !supportLists]24) [endif]父级.replaceChild(元素,元素);用第一个元素替换掉第二个元素
[if !supportLists]25) [endif]元素.remove()删除自身
[if !supportLists]26) [endif]元素.insertAdjacentHTML('beforebegin', '<p>hello </p>'); 作为前一个同辈元素被插入
[if !supportLists]27) [endif]元素.insertAdjacentHTML('afterend', '<p>hello </p>');作为后一个同辈元素被插入
[if !supportLists]28) [endif]元素.insertAdjacentHTML('afterbegin', '<p>hello </p>');作为第一个子元素被插入
[if !supportLists]29) [endif]元素.insertAdjacentHTML('beforeend', '<p>hello </p>');作为最后一个子元素被插入
[if !supportLists]30) [endif]元素.setAttribute("属性名","属性");=设置属性
[if !supportLists]31) [endif]元素.getElementBytag("属性名");=获取属性
[if !supportLists]32) [endif]元素.removeAttribute=删除属性
[if !supportLists]33) [endif]元素.getAttribute(“属性”)=获取相对路径或者属性
window 下的方法（window）
History.pushState('name','title22','/path'); //推进一个状态
History.replaceState('name',"title",'/path'); //替换一个路由
History.back(); //加载 history 列表中的前一个 URL。
History.forward(); //加载 history 列表中的下一个 URL。
History.go(); //加载 history 列表中的某个具体页面。
window.onhashchange = function(){} 当hash改变时触发此函数
window.btoa(str)Base64转码（注意不能转码中文）window.atob("Base64") Base64解码
window.encodeURIComponent("url转码") window.decodeURIComponent(“URL解码”)
window.localStorage没有过期时间 浏览器关闭后不消失 window.sessionStorage 浏览器关闭后会消失 H5存储
window.localStorage.setItem('name','222'); 存值
window.localStorage.getItem('name'); 取值
window.localStorage.removeItem('name'); 删除
innerHTML=找相应的代码 javascript:void(0)空链接窗口不动 typeof=检查数据类型
setInterval=开始定时器 setTimeout(func(){},300)=只重复一次 clearInterval=清除定时器
while for break=跳出循环 continue跳出当前循环 eval=转成代码执行
var date=new Date();=系统时间
date.setDate(date.getDate() - 1); //昨天的时间
date.setDate(date.getDate() + 1); //明天的时间
date.setTime(毫秒) //设置时间戳 date.getTime() //获取时间戳
date.getFullYear(); //得到年份 date.getMonth() + 1, //月份
date.getDate(), //日 date.getHours(), //小时
date.getMinutes(), //分 date.getSeconds(), //秒
date.getDay(); //周（数值类型） date.getMilliseconds();//获取毫秒
var date=new Date(2018,10,26,9,10,36);=定义一个（之前或未来）时间
以下是定义之前或者未来允许的（时间格式）
new Date("2009-1-1"); new Date("2009/1/1"); new Date(2009,1,3)
new Date("2009-1-1 3:21"); new Date("2009/1/1 3:21");
（注意）：定义之前或者未来时间有个小Bug(当参数错了或当前没31号，照样会被定义出来)
以下公式计算（今天于未来的时间差）
Math.floor(时间戳/ 86400000)=天 Math.floor()=向下取整
Math.floor(时间戳%86400000/ 3600000)=小时
Math.floor(时间戳%86400000%3600000/60000)=分
Math.floor(时间戳%86400000%3600000%60000/1000)=秒
Math.random()=0-1之间的小数 Math.floor()=向下取整 Math.ceil()=向上取整
Math.abs()把正数转换为负数 Math.round()四舍五入
ES6的Math 方法
Math.trunc() 方法用于去除一个数的小数部分，返回整数部分
Math.sign() 方法用来判断一个数到底是正数、负数、还是零。 参数为正数，返回+1；参数为负数，返回-1； 参数为0，返回0；参数为-0，返回-0; 其他值，返回NaN。
Math.sinh(x)返回x的双曲正弦（hyperbolic sine）
Math.cosh(x)返回x的双曲余弦（hyperbolic cosine）
Math.tanh(x)返回x的双曲正切（hyperbolic tangent）
Math.asinh(x)返回x的反双曲正弦（inverse hyperbolic sine）
Math.acosh(x)返回x的反双曲余弦（inverse hyperbolic cosine）
Math.atanh(x)返回x的反双曲正切（inverse hyperbolic tangent）
BOM窗口属性（window）
var weizhi=ev||event; weizhi.clientX weizhi.clientY可视区位置
document.documentElement.scrollTop||document.body.scrollTop=滚动距离
document.documentElement.clientWidth=可视区宽度
document.documentElement.clientHeight=可视区高度
元素.clientWidth=获取元素的宽度 元素.clientHeigth=获取元素的高度
元素.getBoundingClientRect()=某元素离可视区高度距离 ，自身宽高等
元素.offsetTop=获取计算后的属性 元素.scrollTop=获取某元素滚动距离
window.innerHeight=浏览器内部高度 window.innerWidth=浏览器内部宽度
screen.avaiHeight=可用高度 screen.avaiWidth=可用宽度
screen.height=高度 screen.width=宽度
open('网址或路径','_blank=新建窗口','_self=在当前打开') close()=关闭当前浏览器
window.navigator.userAgent=检测浏览器版本
window.location.hostname返回WEB主机域名
window.location.pathname返回当前页面的路径和文件名
window.location.port返回主机的端口
window.location.protocol返回所使用的WEB协议
window.location.href返回当前页面的URL
window.location.assign方法加载新的文档
Number ES6方法（Number.protopety）
（1）Number.isFinite(Number)检查一个数值是否为有限的 return Booleab
（2）Number.parseInt=转换为整数 （3）Number.parseFloat=浮点数
（4）Number.isNan(Numbel)= 判断是否是数值类型return Boolean类型
（5）Number.isInteger() 判断一个值是否为整数 return Boolean类型
ES7新增了一个指数运算符（**）
let a = 2; a **= 2; //等同于 a = a * a;
let b = 3; b **= 3; //等同于 b = b * b * b;
String字符串方法（String.prototype）
JSON.parse()将json字符串转成json对象。JSON.stringify()将json对象转换成json字符串。
（1）str.charAt(index); 返回子字符串，index为字符串下标，
（2）str.slice(下标,下标)=截取元素 slice('')=截取每一个元素 slice(0,-4)从0到倒数第四个
（3）str.split(separator,limit); 参数1指定字符串或正则，参照2指定数组的最大长度 返回数组
（4）str.indexOf(元素,起始点)=找到后，返还相应下标，找不到返回-1
（5）str.lastIndexOf(元素,起始点); 从右往左找子字符串，找到返还相应下标，找不到时返回-1
（6）str.concat(str1,str2) 将两个或多个字符的文本组合起来，返回一个新的字符串。
（7）substring(起始点,结束点) 返回值:提取的字符串起点到终点（不包含结束点）
（8）str.trim() 去除字符串首尾空格
（9）str.charCodeAt(index); 返回子字符串的unicode编码，
（10）String.fromCharCode(num1,...num2); 根据unicode编码返回字符串
charCodeAt 49-58=数字 charCodeAt 65-91大写的英文 charCodeAt 97-123小写的英文
（11）toUpperCase()=转成大写 （12）toLowerCase=小写
以下是ES6字符串方法
（13）Includes(str) 返回布尔值，表示是否找到了参数字符串。
（14）startsWith(str) 返回布尔值，表示参数字符串是否在源字符串的头部。
（15）endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部。
（16）str.repeat(3)方法返回一个新字符串，表示将原字符串重复n次
（17）'�'.at(0) // "�" 返回字符串给定位置的字符
以下是ES7字符串方法
'str.padStart(5, 'ab') // 'ababx' padStart用于头部补全
'str.padEnd (5, 'ab') // 'ababx' padEnd用于尾部补全。
Array数组方法（Array.prototype）
（1）arr.push(元素 )=从尾部添加（2）arr.pop(元素 )删除最后一个元素并返回删除的元素。
（3）arr.unshift(元素 )=从头部添加（4）arr.shift(元素 )第一个元素删除并返回第一个元素的值。
（5）arr.toString()把数组转换为字符串，并返回结果（不操作源数组）
（6）arr.concat=连接一个数组 列如 var a=[1.2.3]; var b=[4.5.6]; a.concat(b); //[1,2,3,4,5,6] 该方法是浅拷贝
（7）arr.join()=将数组转换成字符串= a=[1,2.3] a.join(“”) //”123” a.join(“-“) //”1-2-3”
（8）arr.reverse()=反转数组项的顺序。
（9）arr.sort(function(n1,n2){return n1-n2;});数组排序 return n1-n2 从小到大排序，return n2-n1 从大到小排序（操作源数组）
（10）slice(下标,下标)=截取元素 slice('')=截取每一个元素 slice(0,-4)从0到倒数第四个 两个参数都可以接受负数
（11）split('元素',限制长度)=分割成数组{如果加元素就以元素为分割} var a='12-5-6';a.split('-');a=[0=12 1=5 2=6]
（12）splice(下标,下标,值,) 一个参数时则从下标开始删到尾 两个参数时从下标删到下标的位置
三个参数时(下标,数量>0,值)是修改 三个参数时从(下标,数量是0的话,值)是增加在下标的前面
（13）arr.indexOf(index)=接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 （14）arr.lastIndexOf(index)=接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
（15）arr.forEach(function(value,index, array){});对数组进行遍历循环（操作源数组）
（16）arr.map(function(value,index,array){return});返回每次函数调用的结果组成的数组。（不操作源数组）
（17）arr.filter(function(value,index,array){return});返回满足过滤条件组成的数组。（不操作源数组）
（18）arr.every(function(value,index,array){return});判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true（不操作源数组）
（19）arr.some(function(value,index,array){return});判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。（不操作源数组）
（20）arr.reduce(function(prev, cur, index, array){ return prev + cur; },10);返回的值决定return是什么 （参数1是上一个，参数2是下一个）
（21） reduceRight ）的作用跟这个一样，只不过从数组右边往左遍历（不操作源数组）
Array ES6数组方法（Array.prototype）
（1）Array.from(arr)转为真正的数组，并返回结果（二个参数，作用类似于数组的map方法）（不操作原数组）
（2）arr.find((value,index,arr)){return}用于找出第一个符合条件的数组成员，然后返回该成员。（不操作原数组）
（3）arr.findIndex((value,index,arr)){return}用于找出第一个符合条件的数组成员，然后返回该成员（索引index）（不操作原数组）
（4）arr.fill(“填充内容”,”起始位置”,”结束位置”)填充一个数组。
（5）arr.keys() arr.values() arr.entries() 返回一个（Iterator）遍历器
（6）arr.includes(value)回一个布尔值，表示某个数组是否包含给定的值。该方法属于ES7
对象的属性（Object）
（1）__proto__原型链 （2）prototype=原型
（3）constructor=构造函数（如果给prototype赋值一个引用数据类型 constructor会丢失）
（4）obj.constructor.name="检测数据类型"
（5）obj.hasOwnProperty判断是否是自身原型上的私有属性 delete删除属性
（6）Object.getOwnPropertyDescriptor(obj,”属性”)方法可以获取该属性的描述对象。如：enumerable 可枚举性等
ES6 对象方法
（1）Object.is({}, {}) 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。return Boolean类型
（2）Object.assign(target, obj,…) 用于对象的合并，将源对象（obj）的所有（自身不包含原型链上的）可枚举属性，复制到目标对象（target）（该方法是浅拷贝）
（3）Object.getOwnPropertyNames(obj) 返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。
（4）Object.getOwnPropertySymbols(obj) 返回一个数组，包含对象自身的所有Symbol属性。
（5）Reflect.ownKeys(obj) 返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。
（6）Object.setPrototypeOf(object, obj.prototype) 同于下function (obj, obj.prototype) { obj.__proto__ = proto; return obj; } 设置原型链
（7）Object.getPrototypeOf(obj); 用于读取（原型链）__proto__对象
（8）Object.keys(obj) 方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
（9）Object.values(obj) 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
（10）Object.entries(obj)方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
（11）Object.getOwnPropertyDescriptors(obj) 返回指定对象所有自身属性和方法（非继承属性）的描述对象。
function下的方法（function.prototype）
function.prototype下的改变（this）指向方法. call(改this,N个参数...) bind(改this)返回一个绑定this的函数 apply(改this,参数是数组或者类数组)
canvas(画布) canvas元素默认具有高宽 width:300px; height:150px;
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext('2d'); 渲染上下文和它的绘画功能。
（1）canvas提供了三种方法绘制矩形fillRect, strokeRect, clearRect
fillRect(x, y, width, height) 绘制一个填充的矩形（填充色默认为黑色）
strokeRect(x, y, width, height) 绘制一个矩形的边框（默认黑色）
clearRect(x, y, width, height)清除指定矩形区域，填充一个背景色
（2）添加样式和颜色
fillStyle:设置图形的填充颜色。strokeStyle :设置图形轮廓的颜色。
linewidth=当前绘线的粗细
lineJoin: 设定线条与线条间接合处的样式（默认是miter）round : 圆角bevel : 斜角miter : 直角round : 圆角 bevel : 斜角 miter : 直角
（3）绘制路劲
moveTo(x, y) 设置笔触起点：指定的坐标x以及y上
lineTo(x, y) 将笔触移动到指定的坐标x以及y上
closePath() 闭合路径， 如果图形已经闭合了的，即当前点为开始点，该函数什么也不做
stroke() 通过线条来绘制图形轮廓。不会自动调用closePath()
lineCap=butt方形 round圆形 square方形 线段末端以指定形式结束 round square增加了一个高度，是线段厚度一半的矩形区域
fill() 填充路径的内容区域生成实心的图形。自动调用closePath()
rect(x, y, width, height) 绘制矩形
clip()从原始画布中剪切任意形状和尺寸。
（4）保存状态 与 重新绘制
beginPath() 重新绘制新的图形（清空在此之前所有关联的笔绘）
save() 存到栈中的绘制状态
restore() 通过在绘图状态栈中弹出顶端的状态
（5）画圆
arc(x, y, radius, startAngle, endAngle*Math.PI/180, anticlockwise)radius为半径，startAngle以及endAngle参数用弧度定义了开始以及结束的弧度，这些都是以x轴为基准。anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
arcTo(x1, y1, x2, y2, radius) 根据控制点和半径画一段圆弧 (x1 y1) (x2 y2)只是控制一个方向
quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。起始点为moveto时指定的点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。起始点为moveto时指定的点
（6）canvas中的变换所有的变换（多次添加都是累加的）
translate(x, y)它用来移动canvas的原点到一个不同的位置。
rotate(angle*Math.PI/180)旋转的角度(angle)，它是顺时针方向的
scale(x, y)分别是横轴和纵轴的缩放因子，它们都必须是正值。
（7）绘制图像与文本操作
1 ctx.drawImage(img, x, y, width ,height); 绘制一张图片，需要等图片加载后才能操作
实例var img = new Image(); img.src="tg.png"; img.onload=function(){ draw(); }
function draw(){ ctx.drawImage(img,0,0,img.width,img.height) }
2 ctx.createPattern(img,"no-repeat"); 返回一个背景对象，需要等图片加载后才能操作
实例var img = new Image(); img.src="tg.png"; img.onload=function(){draw();}
function draw(){ var pattern = ctx.createPattern(img,"no-repeat")
ctx.fillStyle=pattern; ctx.fillRect(0,0,300,300); }
3 var gradient = ctx.createLinearGradient(x起点,y起点, x终点, y终点);返回一个填充渐变
实例gradient.addColorStop(0,"red"); gradient.addColorStop(0.5,"yellow"); gradient.addColorStop(1,"green"); ctx.fillStyle=gradient; ctx.fillRect(0,0,300,300);
4 var r= ctx.createRadialGradient(x, y, r1, x2, y2, r2)返回一个圆形渐变
实例 var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
gradient.addColorStop(0,"red"); gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink"); gradient.addColorStop(1,"green");
ctx.fillStyle=gradient; ctx.fillRect(0,0,300,300);
5 ctx.fillText(text, x, y) 在指定的(x,y)位置填充指定的文本
6 ctx.strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框
7 ctx.font = “10px sans-serif” 指定文字的字体大小 默认是10px sans-serif。在指定时，必须要有大小和字体 缺一不可
8 Ctx. textAlign=left左right右center居中; 水平对齐方式根据填充的X位置
9 textBaseline=top顶部 middle中间bottom底部; 垂直对齐方式根据填充的Y位置
10 ctx.measureText(text)返回一个 TextMetrics 对象，包含关于文本尺寸信息 例如文本的宽度
（8）canvas中的像素操作
1 ctx.getImageData(sx, sy, sw, sh):获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
sx:提取的图像数据矩形区域的左上角 x 坐标。 sy:提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。 sh:将要被提取的图像数据矩形区域的高度。
2 ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素 height:图片高度，单位是像素 data:Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）R:0 --> 255(黑色到白色) G:0 --> 255(黑色到白色) B:0 --> 255(黑色到白色) A:0 --> 255(透明到不透明)
3 ctx.createImageData(width, height); 创建一个ImageData对象 默认创建出来的是透明的
4 ctx.putImageData(myImageData, dx, dy) 方法去对场景进行像素数据的写入。
（9）canvas中的全局透明属性与重叠属性
1 ctx. globalAlpha = 0.5 这个属性影响到canvas里所有图形的透明度，范围是 0.0到 1.0
2 ctx. globalCompositeOperation=”source-over(默认值)”; 覆盖合成属性
source:新的图像(源) destination:已经绘制过的图形(目标)
1 source-over 源在上面,新的图像层级比较高 (默认值)
2 source-out :只留下源超过目标的部分
3 source-in只留下源与目标的重叠部分(源的那一部分)
4 source-atop:砍掉源溢出的部分
5 destination-over:目标在上面,旧的图像层级比较高
6 destination-in:只留下源与目标的重叠部分(目标的那一部分)
7 destination-out:只留下目标超过源的部分
8 destination-atop:砍掉目标溢出的部分
（10）canvas图片导出与事件与透明度
1 ctx.isPointInPath(x,y) 判断x,y上是否绘制了canvas路劲
实例：canvas.onclick=function(ev){ ev = ev||event;
var x = ev.clientX - canvas.offsetLeft; var y = ev.clientY - canvas.offsetTop;
if(ctx.isPointInPath(x,y)){ alert(123); } }
2 canvas.toDataURL(type默认为image/png,encoderOptions可以从0到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略。 ); 返回值是导出当前绘制的canvas绘制的图片
3 ctx.globalAlpha=0.2; 设置全局透明度 0-1之间
正则表达式（RegExp.prototype）
（捕获时使用）注意：正则中每个（）代表一个分组 $1代表第一个分组$2代表第二个分组…
（1）正则.text(str); 查看str这个字符串是否符合正则要求 返回值是（boolean）值
（2）正则.exec(str); 捕获字符串是否有正则规则相应的字符，成功返回（[捕获的内容,下标,字符串内容]）失败返回（null）（每次只能捕获一个满足条件的，需要捕获多个首先加个全局修饰符g再多次调用） 注意:如果有分组如(),返回的结果就是[捕获的内容,分组,下标,字符串内容]
（3）str.match(正则); 捕获正则规则的字符串，如果正则没有加全局g 返回值是：[捕获的内容,下标,字符串内容] 如果加了全局g，正则规则匹配到的字符串返回（一个数组 ）失败返回（null）注意:如果有分组如(),并且没加全局g 返回结果就是[捕获的内容,分组,下标,字符串内容]
（4）str.search(正则); 在字符串中查找正则匹配的内容，返回一个（index索引）位置
（5）str.replace(正则，”指定字符串”); 在字符串中查找正则匹配的内容，进行替换（返回新字符串）不加全局修饰符g则替换符合规则的一个，加了全局修饰符g则全部替换
（5）str.replace的第二种正则用法是str.replace(正则,function(捕获的内容，分组，…分组，下标，字符串内容){});return是替换正则匹配的值。（注意：字符串有多个匹配的则函数调用N次，正则匹配加了全局g则匹配多次）
/ \d=数字 / /\D=除了数字 \
/\w=英文,数字,下划线/ /\W=除了英文,数字,下划线/
/\b/=匹配一个边界（开头，结尾，空格，\n，都是边界。）/\B/=匹配一个非边界
/\s/=匹配一个空白符（空格，\n，换行，都是空白符）/\S/=匹配不是空白符任意一个
（2）量词元字符不可以单独使用，加在元字符后面使用，表示前面的元字符出现的次数
* 不出现或多次 + 出现一次或者多次 ？不出现或一次 .表示除了\n以外任意一个字符
{n}出现n次 {n，}出现n次与无数次 {n，m}出现n次到m次 |左边或右边一份为二
()优先执行，作用域(?:)前面加?:代表此分组不被捕获 \1代表第一个()的分组字符串复制一次
有特殊意义的元字符进到[]中就变成本身的意义 比如（.+*? 等特殊意义字符）(-)除外(-)放在最后面代表非特殊意义[xyz]（匹配其中一个即可） [a-z]从字符a-z（中选一个即可） [0-9a-zA-Z_]匹配0到9或a到z字母或大写A-Z字母（中选一个即可）[^123] 非123即可返回真
g=查找全局 i=忽悠大小写;
Node.js
当node在执行模块中的代码时，它首先在代码的最顶层，添加一个函数并传入五个参数(function (exports,require,module="代表当前模块本身",__filename=当前文件绝对路劲,__dirname=当前所在文件夹绝对路径){})()
module.exports=变量; 导出模块 require(“./a.js”);引入模块
var nav=require('nav');//nav在根目录不存在，去node_modules ，找到了nav文件夹。 nav文件夹下面有package.json ，//找 package.json 入口文件 "main": "nav.js",
npm -g install supervisor 安装改代码自动重启web服务
supervisor“文件名“ 如：supervisor app.js
url（解析url模块） let url = require('url');
url.parse("url",true); //解析URL第二个参数如为true返回query 则解析成对象
url.resolve('http://example.com/one', '/two')//'http://example.com/two'替换
fs（操作文件夹）let fs = require('fs');fs.readFileSync("pathName路径","编码格式utf-8","function(error,value){}") //同步读取文件fs.readFile("pathName路径","编码格式utf-8") //异步读取文件
fs.readdirSync("路劲") //同步读取文件夹fs.readdir("路劲",(error,value)=>{}) //异步读取文件夹
fs.writeFileSync("pathName路径","内容","编码格式utf-8") //同步写入fs.writeFile("pathName路径","内容","编码格式utf-8","function(error,value){}") //异步写入
var rs=fs.createReadStream("url");创建可读流（适合大文件读取,音频，视频等）
rs.on('data',(data) =>{ str+=data; }) // 每读取一次触发一次rs.on('end',(chunk) =>{ console.log("chunk:="+chunk) }) // 读取完成rs.on('error',(err)=>{ console.log(err); })//读取失败
var ws=fs.createWriteStream("url");创建可写流（适合大文件写入,音频,视频等）ws.once('open',function () {console.log('流打开了~~~');}); //监听流打开ws.once('close',function () {console.log('流关闭了~~~');}); //监听流关闭ws.write('data流写入，可以写入多次','utf8'); //往文件写入内容ws.end(); //标记写入完成
writerStream.on('finish',()=>{}{ console.log('写入完成');})//写入完成后触发readStream.on('error',(err)=>{ console.log(err); }) //读取失败后触发
rs.pipe(ws); //将可读流写入可写流路径里
fs.openSync("./pathName",'w=可写r=可读'); //同步打开文件fs.open("./pathName",'w=可写r=可读',(error,value)=>{}); //异步打开文件fs.closeSync('变量'); //同步关闭文件fs.close('变量',()=>{}); //异步关闭文件
fs.existsSync('path'); //检查文件是否存在fs.stat('path',(error,stats)=>{}); //异步获取文件状态fs.unlink('path',(error)=>{}); //删除文件fs.mkdir('path',(error)=>{}); //创建一个目录fs.rmdir('path',(error)=>{}); //删除一个目录fs.rename('oldPath','newPath',(error)=>{}); //对文件重新命名fs.watchFile('filename[,options]',(prev,curr)=>{}) //监听文件修改（包括内容改动和名字、时间戳等的任何变化）fs.watch('filename[,options]',(prev,curr)=>{}) //监听文件修改（包括内容改动和名字、时间戳等的任何变化）
http.createServer(创建服务器) let http = require('http');
http.createServer((req,res)=>{ let {pathname,query} = url.parse(req.url); let rsult = null; try { if(pathname=="/"){ result = fs.readFileSync("./index.html","utf-8"); res.end(result); return; } if(/\.[a-zA-Z0-9]+/i.test(pathname)){如果pathname有后缀说明请求的不是(ajax)资源文件 if(/\.(html|js|css)$/i.test(pathname)){ //如果后缀名是html|js|css这些结尾的 读取的时候加上utf-8 result = fs.readFileSync("."+pathname,"utf-8"); } else { //否则就是请求 img 音频 视频等文件不需要加后缀名 result = fs.readFileSync("."+pathname); } }else { //处理请求ajax，请求本地文件等 var data = ""; if(pathname=='/userInfo'){ req.on('data',(chunk)=>{ //当ajax请求发送过来的post参数时就执行 console.log(chunk); }); req.on('end',()=>{ //当ajax请求发送过来的参数结束时就执行 // console.log(typeof data,typeof JSON.parse(data)); }) } result = fs.readFileSync("./data.json","utf-8"); } }catch (e) { result = 'not fond' } res.end(result)
res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"}); //重写响应头res.write('你好 nodejs'); // 向服务器发送数据res.end(`req ${req}`); /*结束响应*/
}).listen(4444);
var events=require('events'); //引入广播接收器模块
var EventEmitter=new events.EventEmitter();
EventEmitter.on('to_mime',(data)=>{ console.log(data) }) //接收广播
EventEmitter.emit(' to_mime ','发送的数据') //发送广播
Mongodb
基本连接数据库与（切换库和表）
[if !supportLists]1. [endif]mongod （在相应文件目录下启动命令）
[if !supportLists]2. [endif]mongod --dbpath 数据库路径 --port (端口号默认：27017)如： mongod --dbpath C:\data\db --port 27017 (在其他文件目录下启动)
[if !supportLists]3. [endif]在打开一个cmd窗口 （用来操作连接数据库下的json文件）- 输入mongo 连接mongodb ，出现 > 连接远程：mongo 127.0.0.1
show dbs 与 show databases - 显示当前的所有数据库use 数据库名 如：user init - 进入到指定的数据库中show collections - 显示数据库中所有的集合（表）db表示的是当前所处的数据库
MongoDB的CRUD的操作
-向数据库中插入文档
- db.collection.insert({“name”:”xiaoming”},{“name”:”wa”}) 可以向集合中插入一个或多个文档
- db.collection.insertOne() -向集合中插入一个文档
- db.collection.insertMany() -向集合中插入多个文档
-查询数据库中的文档
- db.collection.find() 可以根据指定条件从集合中查询所有符合条件的文档-返回的是一个数组
- db.collection.findOne({"age": 22})-查询第一个符合条件的文档- 返回的是一个对象
- db.collection.find().count()-查询符合条件的文档的数量
-修改数据库中的文档
- db.collection.update({"na":"小"},{$set:{"age":1}}) -可以修改、替换集合中的一个或多个文档
- db.collection.updateOne() -修改集合中的一个文档
- db.collection.updateMany() -修改集合中的多个文档
- db.collection.replaceOne() -替换集合中的一个文档
-删除集合中的文档
- db.collection.remove({ "bgh": "Man" }) -删除集合中的一个或多个文档（默认删除多个）
- db.collection.deleteOne() -删除集合中的一个文档
- db.collection.deleteMany() -删除集合中的多个文档
- db.collection.remove({}) -清空一个集合
- db.collection.drop() -删除一个集合
- db.dropDatabase() -删除一个数据库
MongoDB的CRUD的操作（实战复习）
[if !supportLists]1. [endif]db.student.insert({“name”:”xiaoming”}); //插入一个数据。
[if !supportLists]2. [endif]db.userInfo.distinct("name"); //查询去掉后的当前聚集集合中的某列的重复数据
[if !supportLists]3. [endif]db.userInfo.find({"age": 22}); /查询 age = 22 的记录
[if !supportLists]4. [endif]db.userInfo.find({age: {$gt: 22}}); //查询 age > 22 的记录
[if !supportLists]5. [endif]db.userInfo.find({age: {$lt: 22}}); //查询 age < 22 的记录
[if !supportLists]6. [endif]db.userInfo.find({age: {$gte: 25}}); //查询 age >= 25 的记录
[if !supportLists]7. [endif]db.userInfo.find({age: {$lte: 25}}); //查询 age <= 25 的记录
[if !supportLists]8. [endif]db.userInfo.find({name:{$ne:”wang”}}); //查询不等于 wang的数据
[if !supportLists]9. [endif]db.userInfo.find({age: {$gte: 23, $lte: 26}}); //查询 age >= 23 并且 age <= 26
[if !supportLists]10. [endif]db.userInfo.find({name: /mongo/}); //模糊查询 name 中包含 mongo 的数据
[if !supportLists]11. [endif]db.userInfo.find({name: /^mongo/}); //模糊查询 name 中以 mongo 开头的
[if !supportLists]12. [endif]db.userInfo.find({}, {name: 1, age: 1}); //查询指定列 name、age 数据（设为0则隐藏）
[if !supportLists]13. [endif]db.userInfo.find({age: {$gt: 25}}, {name: 1, age: 1}); //查询指定列name age 与age > 25
[if !supportLists]14. [endif]db.userInfo.find().sort({age: 1}); //按照年龄排序1升序 -1 降序
[if !supportLists]15. [endif]db.userInfo.find({name: 'zhangsan', age: 22}); //查询name = zhangsan, age = 22的数据
[if !supportLists]16. [endif]db.userInfo.find().limit(5); //查询前5条数据
[if !supportLists]17. [endif]db.userInfo.find().skip(10); //查询10条以后的数据
[if !supportLists]18. [endif]db.userInfo.find().limit(10).skip(5); //查询在5-10之间的数据
[if !supportLists]19. [endif]db.userInfo.find({$or: [{age: 22}, {age: 25}]}); //or与 查询
[if !supportLists]20. [endif]db.userInfo.find( {age:{ $in:[1,3,5] }} ); //查询 age 等于1或3或5的数据
[if !supportLists]21. [endif]db.userInfo.find( {age:{ $nin:[1,3,5] }} ); //查询 age 不等于1或3或5的数据
[if !supportLists]22. [endif]db.userInfo.find( {age:{ $size:3 }} ); //查询 age(数组)等于三个个数。
[if !supportLists]23. [endif]db.userInfo.find( {age:{ $exists:true }} ); //查询 age这个键值存在就返回该条数据。
[if !supportLists]24. [endif]db.userInfo.findOne(); //findOne查询第一条数据
[if !supportLists]25. [endif]db.userInfo.find({age: {$gte: 25}}).count(); //查询某个结果集的记录条数（统计数量）如果要返回限制之后的记录数量，要使用count(true)或者 count(非 0) db.users.find().skip(10).limit(5).count(true);
[if !supportLists]26. [endif]db.student.update({"name":"小明"},{$set:{"age":16}}); //查找名字叫做小明的，把年龄更改为16岁：
[if !supportLists]27. [endif]1 db.student.update({"name":"小明"},{"name":"大明","age":16}); //完整替换，不出现$set关键字了：
[if !supportLists]28. [endif]db.collectionsNames.remove( { "borough": "Manhattan" } ) //删除符合的所有条件数据
[if !supportLists]29. [endif]db.restaurants.remove( { "borough": "Queens" }, { justOne: true } ) //删除一条数据（不管有多少条符合条件）
聚合（aggregate）
常用管道
$group：将集合中的文档分组，可用于统计结果
$match：过滤数据，只输出符合条件的文档
$project：修改输入文档的结构，如重命名、增加、删除字段、创建计算结果
$sort：将输入文档排序后输出
$limit：限制聚合管道返回的文档数
$skip：跳过指定数量的文档，并返回余下的文档
$unwind：将数组类型的字段进行拆分
分组-聚合函数 （$group）
$sum：计算总和，$sum:1同count表示计数
$avg：计算平均值
$min：获取最小值
$max：获取最大值
$push：在结果文档中插入值到一个数组中
$first：根据资源文档的排序获取第一个文档数据
$last：根据资源文档的排序获取最后一个文档数据
1) 核心语法db.集合名.aggregate([ {管道1: {表达式} }, {管道2: {表达式} }, {管道3: {表达式} }]);注：如果只有一个管道，可以不写中括号2) $limit 限制输出db.集合名.aggregate( {$limit: 限制输出的条数});3) $group 管道，分组db.集合名.aggregate( {$group: { _id: '$字段名', //标识分组的依据，根据某个字段进行分组 别名: {$聚合函数:'$字段名'} } })//select * from student group by 字段;示例1：统计男生、女生的总人数db.singer.aggregate({ $group:{ _id:'$sex', count: {$sum:1} }});示例2：求学生总人数、平均年龄db.singer.aggregate({ $group:{ _id:null, 总人数: {$sum:1}, 平均年龄: {$avg: '$age'} }});示例3：根据性别统计所有同学的名单db.singer.aggregate({ $group:{ _id:'$sex', 人数:{$sum:1}, 名单:{$push:'$name'} //相当于拼接字段 group_concat() }});db.singer.aggregate({ $group:{ _id:'$sex', 总人数:{$sum:1}, //统计总个数 //总年龄:{$sum:'$age'}, //累加 //平均年龄:{$avg:'$age'}, //平均数 //最大年龄:{$max:'$age'}, //最大值 //最小年龄:{$min:'$age'}, //最小值 //名单:{$push:'$name'}, //将同组的名字进行拼接 小组第一:{$first:'$name'}, 小组最后:{$last:'$name'} }});4) $match 管道，匹配条件db.集合名.aggregate({ $match:{"键名":{$gt:30}}});示例：找出年龄大于50的歌手db.singer.aggregate({ $match:{ "age":{$gt:40} }});对年龄大于40的歌手进行性别分组统计db.singer.aggregate([ {$match:{ "age":{$gt:40} } }, {$group:{ _id:'$sex', 总人数:{$sum:1} } }]);5) $project 管道，限定输出字段相当于SQL：selectname,age from student;db.集合名.aggregate({ $project:{ name:1 | 0 //1表示显示，0表示不显示 }});示例：找出年龄大于50的歌手，只显示姓名和年龄db.singer.aggregate([ {$match:{"age":{$gt:40}}}, {$project:{_id:0,name:1,age:1}}]);6) $sort 排序管道db.集合名.aggregate({ $sort:{ "键名":1 | -1 }});示例：db.singer.aggregate([ {$match:{"age":{$gt:40}}}, {$project:{_id:0,name:1,age:1}}, {$sort:{'age':1}}, {$limit:3}]);7) $skip 管道，跳过n条db.集合名.aggregate({ $skip:n});示例：db.singer.aggregate([ {$match:{"age":{$gt:40}}}, {$project:{_id:0,name:1,age:1}}, {$sort:{'age':1}}, {$skip:3}, {$limit:3}]);8) $unwind 管道，将数组字段进行拆分db.集合名.aggregate({ $unwind:'键名'});示例：拆分works字段db.singer.aggregate([ {$match:{"age":{$gt:50}}}, {$unwind:'$works'}]);
explain索引（用来提升数据库的查询时间和优化）
[if !supportLists]1) [endif]db.user.ensureIndex({"username":1}) //创建索引的命令：
[if !supportLists]2) [endif]db.user.getIndexes() //获取当前集合的索引：
[if !supportLists]3) [endif]db.user.dropIndex({"username":1}) //删除索引的命令是：
[if !supportLists]4) [endif]db.user.ensureIndex({"username":1, "age":-1}) //复合索引 数字1表示 username 键的索引按升序存储，-1 表示 age 键的索引按照降序方式存储。 （对于上面示例中的查询条件，MongoDB在检索之前将会动态的调整查询条件文档的顺 序，以使该查询可以用到刚刚创建的复合索引。）
[if !supportLists]5) [endif]db.user.ensureIndex({"username":1},{"name":"userindex"}) //创建索引时为其指定索引名
[if !supportLists]6) [endif]db.user.ensureIndex({"userid":1},{"unique":true}) //创建唯一索引如果再次插入userid重复的文档时，MongoDB 将报错，以提示插入重复键，如：db.user.insert({"userid":5}) db.user.insert({"userid":5})
[if !supportLists]7) [endif]db. user.find().explain( "executionStats" ) //查询具体的执行时间
Nodejs连接 MongoDb 数据库
npm install mongodb --save-dev || cnpm install mongodb --save-dev 2.x
npm install mongodb –save || npm install mongodb –save 3.x
http://mongodb.github.io/node-mongodb-native/2.2/quick-start/quick-start/
http://mongodb.github.io/node-mongodb-native/3.0/quick-start/quick-start/
2.x和3.x的操作方法完全一样，只有获取db对象的时候有点区别 （本笔记做的3.x版本）
https://docs.mongodb.com/manual/tutorial/getting-started/ （MongoDb英文文档）
http://www.mongoing.com （MingoDB 中文文档）
var express = require("express"); //引入express框架
var MongoClient = require('mongodb').MongoClient; //数据库引用
var app = express(); //使用express框架
var DBurl= 'mongodb://localhost:27017; //数据库连接的地址，var DBName = 'users'; //连接操作数据库集合（表）名字
Node（连接数据库）
app.get("/",function(req,res){ //连接数据库，这是一个异步的操作 MongoClient.connect(DBurl, function(err, db) { res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"}); if(err){ res.send("数据库连接失败"); return; } db.close(); //关闭数据库 });});
Node MongoDb（修改数据）
app.get('/edit',function(req,res){ MongoClient.connect(DBurl,function(err,db){ if(err){ console.log(err); console.log('数据库连接失败'); return; }
let DB = db.db(DBName); /* 数据库名 */ DB.collection('user').updateOne({"name":"lisi"},{$set:{ "age":666 }},function(error,data){ if(error){ console.log('修改数据失败'); return; } console.log(data); res.send('修改数据成功'); db.close();/*关闭数据库*/ }) })})
Node MongoDb（增加数据）
app.get('/add',function(req,res){ MongoClient.connect(DBurl,function(err,db){ /*连接数据库*/ if(err){ console.log(err); console.log('数据库连接失败'); return; }
let DB = db.db(DBName); /* 数据库名 */ //增加数据 DB.collection('user').insertOne({ "name":"大地", "age":10 },function(error,result){ if(error){ console.log('增加数据失败'); return; } res.send('增加数据成功'); db.close();/*关闭数据库*/ }) })})
Node MongoDb（删除数据）
app.get('/delete',function(req,res){ //delete?name=lisi //console.log(url.parse(req.url,true)); var query=url.parse(req.url,true).query; //console.log(query.name); var name=query.name; MongoClient.connect(DBurl,function(err,db){ if(err){ console.log(err); console.log('数据库连接失败'); return; }
let DB = db.db(DBName); /* 数据库名 */ DB.collection('user').deleteOne({"name":name},function(error,data){ if(error){ console.log('删除失败'); return; } console.log(data); res.send('删除数据成功'); db.close(); }) })})
Node MongoDb（查询数据）
app.get('/query',function(req, res) { MongoClient.connect(dbURL,function(err, db) {
let DB = db.db(DBName); /* 数据库名 */ DB.collection('user').find({}).toArray(function(error, docs) { res.send(docs); res.end(); db.close(); }) })})
app.listen(8020);
Node（Express）框架
（简单使用案例）
npm install express –save
express --view=pug myapp //安装express脚手架。
var express=require('express'); /*引入 express*/var app=new express(); /*实例化 express 赋值给 app*///配置路由 匹配 URl 地址实现不同的功能app.get('/',function(req,res){ res.send('首页');})app.get('/login',function(req,res){ res.send('登录');})app.get('/register',function(req,res){ res.send('注册');})app.listen(3000,"127.0.0.1");
（应用中间件）
/*应用级中间件*/
app.use(function(req,res,next){ /*匹配任何路由*/ //res.send('中间件'); console.log(new Date()); next(); /*表示匹配完成这个中间件以后程序继续向下执行*/})
//动态路由 http://localhost:3000/newscontent/213app.get("/user/:id",function(req,res){ var id = req.params["id"]; // 获取动态路由的参数 res.send(id);});
/* 中间件相应404* 需要放在路由最后一个 */app.use(function(req,res){ //res.render('404',{}); res.status(404).render('404',{});})
/* 第三方中间件*/
npm install body-parser --savevar express = require('express')var bodyParser = require('body-parser')app.use(bodyParser.urlencoded({ extended: false })) //配置body-parser中间件app.use(bodyParser.json()) 转换json对象● GET请求的参数在 URL 中，在原生 Node 中，需要使用 url 模块来识别参数字符串。在 Express 中，不需要使用 url 模块了。可以直接使用 req.query 对象。● POST请求在 express 中不能直接获得，可以使用 body-parser 模块。使用后，将可以用 req.body 得到参数。但是如果表单中含有文件上传，那么还是需要使用 formidable 模块
1.（安装）npm instlal cookie-parser –save2.（引入）var cookieParser = require('cookie-parser');3.（设置中间件）app.use(cookieParser("cookie jiami"));4.（设置cookie）res.cookie("name",'zhangsan',{maxAge: 900000, httpOnly: true}); //HttpOnly 默认 false 不允许 客户端脚本访问
maxAge 过期时间domain:'.aaa.com' 多个二级域名共享cookiepath 表示在哪个路由下面可以访问cookiehttpOnly:true 设置为true,表示只有在nodejs服务端可以操作cookie ，没法用js脚本语言操作cookiesigned属性设置成true 表示加密cookie信息5.（获取cookie）req.cookies.name
5.（删除 cookie）res.cookie('rememberme', '', { expires: new Date(0)});res.cookie('username','zhang',{domain:'.ccc.com',maxAge:0,httpOnly:true});
（静态资源配置）
Express.static 托管静态文件 列如：app.use(express.static('public'));
<link rel="stylesheet" href="css/style.css"/>就会去寻找 public下的静态文件 http://localhost:3000/public/css/style.css
Express.static 配置虚拟路劲 app.use('/static',express.static('public'));
<link rel="stylesheet" href="css/style.css"/>就会去寻找public下的静态文件http://localhost:3000/static/css/style.css
