一、JavaScript篇JavaScript常见输出 - window.alert() 弹出框警告
- document.write() 将内容写到HTML文档中
- innerHTML 写入到HTML元素中
- console.log() 控制台输出
1 函数中的arguments使用每个函数内部都有一个 arguments ，系统内置的。 arguments是用来储存实际传入的参数
2 函数的作用域任何程序运行时候都要占用空间，函数调用的时候也要去占用空间 垃圾回收机制：调用完函数之后，系统会分配对应的空间给这个函数使用（空间大小一般由函数里声明的变量和形参决定），当函数使用完毕以后，这个内存会被释放，还给系统。 在函数内部声明的变量和形参是属于当前函数的内存空间。 内存管理机制：在函数中声明的变量和形参，会随着函数的调用被创建，随着函数的调用结束而销毁。在函数中声明的变量和形参，有效范围是当前函数（当前函数的大括号内），作用域，局部作用域。
3 函数递归满足以下三个特点就是递归： - 函数自己调用自己
- 一般情况有参数
- 一般情况下有return
注：递归可以解决循环能做的所有事情，有一些循环不容易解决的事情，递归也能解决。
4 函数闭包满足以下特点的叫做闭包 - 函数嵌套函数
- 内部函数使用外部的形参和变量
- 被引用的形参和变量就不会被 【垃圾回收机制所回收，使内部函数的变量常驻内存中】
5 数组方法| 方法 | 格式 | 返回值 | 说明 |
|---|
| Math.random() | var sum = Math.random() * 10 | 数字 | 随机数： 随机生成0 ~ 1之间的小数 | | push() | 数组.push(参数1，参数2，...) | 插完元素以后的数组的长度 | 给数组的末尾添加元素 | | pop() | 数组.pop() 不用传参 | 取下一个元素 | 从数组末尾取下一个元素 | | shift() | 数组.shift() 不用传参 | 取下的元素 | 从数组头部取下一个元素 | | unshift() | 数组.unshift(参数1，参数2，...) | 插完元素以后的数组的长度 | 给数组的头部插入元素 | | concat() | 数组.concat(数组，数据，...) | 合并成的新数组，原数组不会改变 | 拷贝原数组，生成新数组 | | slice() | 数组.slice(start, end) | 生成新数组原数组不会发生改变 | 可以基于当前数组获取指定区域元素 [start, end] 提取出元素生成新数组 | | splice() | 数组.slice(开始截取的下标, 截取的长度，插入数据1，插入数据2...) | 截取下来的元素组成的数组 | 对元素进行增删改 | | join() | 数组.join(字符串) | 拼接好的字符串 | 将数组中的元素，用传入的拼接符，拼接成一个字符串 | | reverse() | 数组.reverse() | 逆序后的数组，此方法会修改原数组 | 数组逆序 | | sort() | 数组.sort() | 排序后的数组，此方法会修改原数组 | 默认从小到大排序，按照字符串排序 |
6 ECMA5新增数组方法| 方法 | 格式 | 参数 | 返回值 | 说明 |
|---|
| indexOf() | 数组.indexOf(item，start) | item 任意数据，start 小标，可以不传，默认为0 | -1 没有查到，>= 0 查到元素的下标 | 在数组 中查找item元素下标 | | forEach() | 数组.forEach(item,index){函数} | item遍历到的当前数组的内容，index遍历到的当前数组元素下标 | item与index | 数组遍历 | | map() | 数组.map(item, index, arr){函数} | | 不会改变原数组，而是将里面函数执行一次返回新数组 | 遍历当前数组，然后调用参数中的方法 | | filter() | 数组.filter((item, index,array) => {函数}) | | 运行定义的函数后，返回符合的数组 | 数组过滤 | | som() | 数组.some((item，index，arr) => {函数}) | | 有返回true，没有返回false，只要找到符合条件的元素，后面的循环就停止了 | 在数组中查找是否有符合内容的元素 | | every() | 数组.every((item，index，arr) => {函数}) | | 有返回true，没有返回false，只要找不到符合条件的元素，后面的循环就停止了 | 在数组中查找是否有符合内容的元素 | | reduce()归并 | arr.reduce(prev, next, index, arr) | prev第一次是 下标为0的元素，第二次开始 上次遍历retturn的值，next 从下标1开始，当前遍历到的元素，arr数组本身 | | |
{ console.log(prev + "," + next); return prev + next})alert(res)
7 字符串方法| 方法 | 格式 | 参数 | 返回值 | 说明 |
|---|
| indexOf() 字符查找 | 字符串.indexOf(text, start) | text需要查找的字符串，start从哪里开始查找的下标 | -1说明没有找到 | 查找text在字符串中的位置 | | lastIndexOf() | 字符串.lastIndexOf(text) | text需要查找的字符串 | -1说明没有找到 | 查找text在字符串最后一次出现的位置 | | search() | 字符串.search(text) | text需要查找的字符串或者 正则表达式 | -1说明没有找到 | 查找text在字符中第一次出现的位置 | | match（） | 字符串.search(text) | text需要查找的字符串或者 正则表达式 | null说明没有找到 | 匹配返回字符串中的所有符合text规则的字符数组 | | substring() | 字符串.substring(start, end) | start, end 开始位置与结束位置 | 新的字符串 | 将字符串中 [start, end] 提取，生成一个新的字符串 | | substr() | 字符串.substr(start, length) | start开始位置，length要生成新字符串的长度 | 新的字符串 | 提取字符串 | | slicce() | 字符串.slicce(start, end) | start, end 开始位置与结束位置，不包括第end位 | 新的字符串 | 提取start到end 的字符串 | | replace() 过滤替换 | supStr.replace(oldStr,newStr) | oldStr旧字符串，newStr新字符串 | 新的字符串 | 用newStr将supStr中的oldStr替换掉，生成新的字符串 | | new RegExp('\','g') | txtData.replace(newRegExp('\','g'), '/') | 替换字符串中所有匹配上的字符或则使用replaceAll()但是兼容性不高 | | | | split() 字符串分割 | 字符串.split(分隔符，length) | 分隔符为字符串里面的字符，lenth控制返回数组元素格式，一般不用 | 数组 | 对数组会用分隔符进行分割，将分割后的子串，放到数组中 | | 字符串大小写转换 | toLowerCase(） 转换成大写 | toUpperCase() 转换成小写 | 改变原字符串 | 字符大小写转换 | | concat字符串拼接 | 字符串.concat(字符串1，字符串2，...) | 字符 | 新的字符串 | 拼接字符串 | | fromCharCode() | | | | 将ASCII编码转换成对应的字符。 |
8 正则表达式
9 对象方法delete 关键字 删除对象属性或者方法
Math 数学运算函数| 方法 | 说明 |
|---|
| Math.random() | 返回0 ~ 1之间的随机小数（可能是 0，不可能是 1） | | Math.max(num1, num2) | 返回较大的数 | | Math.min(num1, num2) | 返回较小的数 | | Math.abs(num) | 绝对值 | | Math.ceil(19.3) | 向上取整（20） | | Math.floor(11.8) | 向下取整（11） | | Math.pow(x, y) | x的y次方 | | Math.sqrt(num) | 开平方 |
日期对象
| 方法 | 说明 |
|---|
| set/getDate() | 从Date对象中返回一个月中的某一天 | | getDay() | 从Date对象返回一周中的某一天（0 ~ 6） | | set/getMonth() | 从Date对象中返回月份（0 ~ 11） | | set/ getFullYear() | 从Date对象中返回年份 | | set/getHours() | 返回Date对象中的小时（0 ~ 23） | | set/getMinutes() | 返回Date对象中的分钟（0 ~ 59） | | set/getSeconds() | 返回Date对象中的秒数（0 ~ 59） | | set/getMilliseconds() | 返回Date对象的毫秒 | | set/getTime() | 返回1970年1月1日至今的毫秒数 | | getTimezoneOffset() | 返回本地时间与格林标准时间的分钟差 |
对象遍历方法对象遍历 只能通过for ..in 方法
10 setInterval定时器格式：
功能：每隔对应毫秒数，执行一次传入的函数 11 Bom对象系统对话框| 方法 | 参数 | 返回值 | 说明 |
|---|
| alert() | 无 | 无 | 弹出警告窗 | | confirm() | 无 | 确认返回true，取消 false | 带取消和确定的提示框 | | prompt() | 1.面板显示内容 2.输入框里面默认参数（可以不传） | 确认返回输入框内容，取消返回null | 带输入框的提示框 |
open() 打开新窗口| 参数1 | 参数2 | 参数3 |
|---|
| 跳转的url 打开一个新窗口，加载url | 字符串，给打开的窗口起一个名字 | 一串特殊含义的字符串 |
History 历史记录window.history 掌管的是，当前窗口（注意不是浏览器）历史记录（只要加载的url不一样就会产生历史记录） - history .length 输出当前窗口历史记录条数
- history .back 返回上一条历史记录
- history .forward() 前进到下一条历史记录
- history .go() 参数 0 刷新当前页面 正整数 前进n条记录 负整数 后退n条记录
location页面跳转| 方法 | 说明 |
|---|
| location.assign(url) | 在当前窗口跳转到url | | location.replace(url) | 在当前窗口替换成新的url，不会产生历史记录 | | location.reload(url) | 刷新当前窗口 | | location.reload(true) | 不经过浏览器缓存强制从服务器加载 |
12 Dom操作节点获取| 方法 | 返回值 | 功能 |
|---|
| document.getElementById(id) | 符合条件的一个节点 | 通过id获取节点 | | node.getElementsByTagName(标签名) | 伪数组/l类数组 | 从node节点，通过元素标签名获取元素节点 | | node.getElementsByClassName(class名) | 伪数组/l类数组 | 通过class获取符合条件的元素节点 | | document.getElementsByName(name属性的值) | 节点 | 通过name属性的值获取符合条件的元素节点 | | document.querSelector(css选择器) | 一个元素节点，找到符合条件的第一个元素节点 | 传入的参数为css选择器 | | document.querySelectorAll(css选择器) | 一个伪数组 | | | node.parentNode | node的父节点 | 获取node节点的父节点 |
节点元素样式获取| 方法 | 说明 |
|---|
| node.currentStyle['height'] IE方法或者 getComputedStyle(node).['height'] 谷歌方法 | node表示元素节点，[] 里面是获取的样式属性 | | node.getAttribute("class") | 获取node节点的class属性的值 | | node.setAttribute("class" , “box”) | 给node节点添加值为box的class属性 | | node.removeAttribute("title") | 删除node节点的tille属性 | | node.innerHTML = "..." | 插入的html标签会被解析 | | node.innerText= "..." | 插入纯文本，里面写入html便签也不会解析 | | node.outerHTML= "..." | 从外标签开始到外便签结束 会解析标签 |
访问子节点方法| 方法 | 说明 |
|---|
| childNodes() | 访问当前节点下所有的子节点 | | firstChild() | 访问子节点中的首位 | | lastChild() | 访问子节点中的最后一位 | | nextSibling() | 访问当前节点兄弟节点中的下一个节点 | | previousSibling() | 访问当前节点兄弟节点的上一个节点 |
节点操作| 方法 | 返回值 | 说明 |
|---|
| document.createElement() | 新创建的标签 | 创建一个新节点 | | node1.appendChild(node2) | | 将node2 节点 插入到node1 节点的末尾 | | document.createTextNode(文本) | 新创建的文本标签 | 穿件文本节点（纯文本） | | box1.parentNode.insertBefore(box2, box1) | | 将box2节点添加到box1的前面 | | box1.parentNode.replaceChild(box2, box1) | | | | node.cloneNode() | 克隆出来的新节点 | 克隆node节点本身和子节点 | | box.parentNode.removeChild(box) | | 将box节点从页面上删除 |
ps：parentNode 表示的是此节点的上级父节点 元素宽高、边距获取- offsetWidth 元素宽度获取
- offsetHeight 元素高度获取
- offsetLeft 元素距离左侧距离获取
- offsetTop 元素距离上面距离获取
浏览器宽高获取13 事件与事件类型鼠标事件| 事件名称 | 说明 |
|---|
| click | 单机 | | dblclick | 双击 | | mouseover | 鼠标移入（会重复触发） | | mouseout | 鼠标移出（会重复触发） | | mousemove | 鼠标移动（会不停触发） | | mousedown | 鼠标按下 | | mouseup | 鼠标抬起 | | mouseenter | 鼠标移入（不会重复触发） | | mouseleave | 鼠标移出（不会重复触发） |
键盘事件| 事件名称 | 说明 |
|---|
| keydown | 键盘按下 （如果按下不放手会一直触发） | | keyup | 键盘抬起 | | keypress | 键盘按下（只支持字符键） |
window 事件 | 事件名称 | 说明 |
|---|
| load | 当页面加载完成以后触发 | | unload | 当页面解构的时候触发（刷新页面，关闭当前页面） IE浏览器兼容 | | scroll | 页面滚动事件 | | resize | 窗口大小发生变化时触发 |
表单事件| 事件名称 | 说明 |
|---|
| blur | 失去焦点 | | focus | 获取焦点 | | select | 当我们在输入框内选中文本时候触发 | | change | 当我们对输入框的文本进行修改并且失去焦点的时候 | | submit | 当我们点击submit上的按钮才能触发 | | reset | 当我们点击reset上的按钮才能触发 |
14 事件对象获取
获取当前鼠标的位置| x坐标 | y坐标 | 说明 |
|---|
| clientX | clientY | 原点位置：可视窗口的左上角 | | pageX | pageY | 原点位置：整个页面的左上角（包含滚动出去的滚动距离） | | screenX | screenY | 原点位置：电脑屏幕的左上角 |
事件对象属性- shiftKey 按下shift键，为true，默认为false
- altKey
- ctrlkey
- metaKey
- window系统 按下window键为true
- macos系统 按下command键为true
注：和其他的操作进行组合，形成一些快捷键的操作
键盘事件对象属性- keyCode 键码
- which
- 返回值：键码返回的是大写字母的ASCII码值，不区分大小写
- 格式：var which = e.which || keyCode
- 注：只在keydown下支持
- charCode 字符码
- which
- 返回值：字符码区分大小写，当前按下键对应的ASCII码值
- 格式 ： var which = e.which || charCode
- 注：只在keypress下支持
Target目标触发Target的指向就是触发当前事件的元素，this永远指向当前函数的主人。
阻止事件冒泡有浏览器兼容问题 - cancelBubble = true
- stopPropagation()
事件委托实现步骤： - 找到当前节点的父节点或则祖先节点
- 将事件添加到找到的这个父节点或则祖先节点上
- 找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作
如下：li 委托 ul 将点击的li变成红色 事件监听器- removeEventListener（） 删除事件中的函数
- 格式：node.removeEventListener（）
- 参数：
- addEventListener() 给元素的事件添加函数
- 格式： node.addEventListener("click")
- 参数：
- 第一个参数：事件类型
- 第二个参数：绑定函数
- 第三个参数：布尔值
15 localStorage 本地存储只能存储String localStorage 对象 - localStorage .setItem(name,value); 写入
- localStorage .getItem(name); 读取
- localStorage .removeItem(name); 删除
16 强制改变this指向call() 方法- 格式：函数名.call()
- 参数：
- 第一个参数：传入该函数this指向的对象，传入什么强制指向什么
- 第二个参数：将原函数的参数往后顺延一位
apply() 方法- 格式：函数名.apply()
- 参数：
- 第一个参数：传入该函数this指向的对象，传入什么强制
- 第二个参数：数组 数组放我们原有所有参数
bind() 方法预设this指向
17 ECMA6数组方法
| 方法 | 返回值 | 说明 |
|---|
| find((item，index，arr) => {函数}) | 找到的元素 | 在数组中查找符合条件的元素，只要找到一个符合的元素，就终止遍历 | | findIndex((item) => {函数}) | | 找到符合元素的下标 | | 数组.copywithin(开始下标，start，end) | [start,end] 范围 | 数组内容覆盖 |
18 ECMA6对象合并Object.assign 合并对象 将所有传入的对象，都合并到第一个对象中
19 Map映射会将重复的合并
20 ajax网络请求
21 cookie本地存储- 可以设置过期时间
- 最大存储4kb，每个域名下最多可以储存50条数据
- 只能存字符串
cookie语法： 格式：name=value;[expires=data];[path=path];[domain=somewhere.com];[secure] name 键 value 值 都是自定义 注： 中括号参数属于可选参数，可以不添加
cookie编码中文encodeURIComponent 将中文编译成对应的字符 decodeURIComponent 将对应的字符编译成中文
expires: cookie过期时间必须填写，日期对象 系统会自动清除过期cookie
path：cookie限制访问路径访问限制，如果不去设置，默认加载当前，html文件的路径 我们设置cookie路径，和当前文件的路径，必须保持一致，如果不一致，cookie访问失败
domain：cookie限制访问域名如果不去设置，默认加载的是当前.html文件的服务器域名 如果加载当前文件域名和设置 的域名不一样，设置cookie失败
Cookie的secure设置参数如果不设置，设置cookie，可以通过http协议加载文件设置，也可以通过https协议加载cookie文件 设置这个字段之后，只能设置https协议加载cookie 22 构造函数封装
23 Prototype 原型对象概念：每一个函数上，都有一个原型对象Prototype 用在构造函数上，我们可以给构造函数的原型Prototype，添加方法 1、如果将方法添加到构造构造函数的Prototype原型对象上，构造函数构造出来的对象共享原型上的所有方法
24 原型链继承
25 __ proto __与instanceof 关键字构造函数构造出来的对象，有一个属性__ proto ，指向构造出这个对象的构造函数的原型 ，每个对象的proto__属性指向自身构造函数的prototype； instanceof 关键字 功能：判断某一个对象是否是这个构造函数构造出来
26 Promise构造函数（解决回调地狱）
二、jQuery篇1 过滤三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。这个过滤指的就是相当于css中的选择器，如：id选择器，类选择器，标签选择器，子代选择器等
2 查找| 方法 | 说明 |
|---|
| prev() | 查找当前兄弟节点中的上一个节点 | | next() | 查找当前兄弟节点中的下一个节点 | | eq() | 通过已经获取到元素的伪数组下标获取指定元素的节点 |
3 设置和修改行间属性 attr
4 class 属性添加与删除- Class可以写多个css样式，addClass()可以添加class
- removeClass() 可以删除class
5 元素宽高获取| 方法 | 说明 |
|---|
| width() 与 height() | width | | innerWidth() 与 innerHeight() | width + padding | | outerWidth() 与 outerHeight() | width + border + padding |
6 节点操作下面每种标签的方法右边写着另外一种方法 作用是写入的选择器标签相反而已，一般用于方便其他样式的操作，方便jquery的链式操作 - insertBefore() before()
- insertAfter() after()
- appendTo() 插入到子节点的末尾 appendChild（类似于js的方法）
- prependTo() 插入到子节点的首位 prepend()
- remove（）删除元素节点
- detach() 删除元素节点
7 事件绑定on() 方法给一个事件添加函数
同时给多个事件添加一个函数， 多个事件之间可以通过空格隔开
给不同的事件添加不同的函数
事件委托
取消事件绑定 off 方法
8 窗口滚动高度获取 scrollTop
9 事件阻止(事件冒泡、默认行为阻止)- ev pageX which
- preventDefault stopPropagation
10 键盘事件鼠标事件 与 键盘事件 keydown事件下用which可以输出键盘按下的键码支持所有按键包括功能键。 keypress事件下 用which可以输出键盘按下的字符码 只支持字符键功能键不能输出 ev pageX which keydown： keyCode 键码 keypress： charCode 字符码
11 获取鼠标的位置值 pageX 与 pageY
12 元素top与left值获取| 方法 | 说明 |
|---|
| offset() | 直接获取当前元素，距离最左边的距离，margin不算数 | | position() | 直接获取，当前元素，距离第一个有定位父节点的距离，margin算在内 | | offsetParent() | 查找第一个有定位的父节点，如果父节点没有定位就继续往上找，最终到html节点 |
13 元素内容获取- val() 获取/ 设置表单元素的值
- size() 输出，获取网页元素的个数，类似于js中的 length
- each() 用来循环将元素节点内容赋值成下标值
- html() 获取元素的里面的内容
- text() 获取元素的纯文本内容
- attr() 获取标签行内属性值
- css() 获取元素的style里面的属性
14 jquery特效函数hide（）隐藏 show（）显示 淡入淡出 这些效果都在hover移入移出方法下使用 hide(动画持续的毫秒数，回调函数，动画结束的时候执行)
- slideDown()
- slideUp() 动画效果是卷帘效果
- fadeIn() 淡入
- fadeOut() 淡出
- fadeTo (动画持续时间， 透明度0 ~ 1，回调函数)
15 jquery的 animate 动画- 默认的运动形式是 满快慢
- 扩展更多animate 的运动形式：
Jquery引入后jquery可以设置颜色class颜色样式删除与添加时候的动画效果，有了jqueryUi以后，addClass 和 removeClass 就变成了增强版方法
Jquery停止动画函数 stop（） finish（）
delay()延迟下一个动画执行的时间（） 里面传在需要延时多少时间后执行
16 元素节点获取- siblings() 用来除当前节点外，所有的兄弟节点
- nextAll() prevAll()
- parentsUntil() nextUntil( ) prevUntil()
父节点的获取| 方法 | 说明 |
|---|
| parent() | 获取父节点 | | parents() | 获取父节点 参数选择器 | | closest() | 必须传入参数，参数也是选择器，只获得一个符合条件的元素，从自己开始去查找 |
克隆节点| 方法 | 说明 |
|---|
| clone() | 默认只会克隆节点本身，并不会克隆我们元素节点的行为和事件 | | clone(true) | 既会克隆节点本身，还会克隆节点元素节点的行为和事件 |
多个选择器拼接- add() 可以将多个选择器拼接在一起
- slice() slice(start, end) [start, end] 获取指定范围内获取的元素节点
表单数据串联化| 方法 | 说明 |
|---|
| serialize() | 将我们表单中的数据拼接成querystring（查询字符串）name1=value1&name2=value2 | | search() | ？name1=value1&name2=value2 | | querystring() | name1=value1&name2=value2 | | serializeArray() | 将表单数据拼接成数组 |
主动触发事件| 方法 | 说明 |
|---|
| trigger() | 主动触发 | | ev.data | | | ev.target(兼容后触发对象) | | | ev.type(输出事件类型) | |
17 对元素节点包装| 方法 | 说明 |
|---|
| wrap() | 每个获取到的元素节点单独包装 | | wrapAll() | 整体包装 | | wrapInner() | 内部包装 | | unwrap() | 删除包装 删除上面一层包装，不包括body节点 |
") $("span").wrapAll("") $("span").wrapInner("") $("span").unwrap() // 没有参数}) 18 cookie$.cookie(name) 通过name取值 $.cookie(name， value) 设置name和value $.cookie(name， value ，{ 可选项 raw：true value 不进行编码 默认false value要进行编码的
}) $.cookie(name, null) 删除cookie
19 ajax 网络请求
load方法将url传入以后，将下载到的数据直接填充到被选中元素的innerHTML中
get与post方法直接调用
三、websocket通信协议1 创建websocket对象
2 websocket事件| 事件 | 事件处理程序 | 描述 |
|---|
| open | Socket.onopen | 连接建立时触发 | | message | Socket.onmessage | 客户端接收服务器端数据时触发 | | error | Socket.onerror | 通讯发生错误时触发 | | close | Socket.onclose | 连接关闭时触发 |
3 websocket方法| 方法 | 描述 |
|---|
| Socket.send() | 使用连接发送数据 | | Socket.close() | 关闭连接 |
4 调用websocket对象事件与方法
5 使用nodejs开发websocket服务使用nodejs开发websocket需要依赖一个第三方包。Nodejs Websocket { console.log('有用户连接'); // 每当接收到用户传递过来的数据，这个text事件会被触发 connect.on('text', (data) => { console.log('接收到了用户对的数据', data); // 给用户一个响应的数据 // 对用户放过来的数据，把小写转换成大写，并且拼接一点内容 connect.send(data.toUpperCase() + '!!!') }) // 只要websock
| 
