js基础内容
1.方法
Math数学对象
| 方法 | 解释/示例 | |
|---|---|---|
| 获取圆周率 | Math.PI | 3.1415926535897 |
| 求绝对值 | Math.abs(num) | |
| 求M的N次方 | Math.pow(m,n) | |
| 求最大值 | Math.max(num1,num2,num3…) | |
| 求最小值 | Math.min(num1,num2,num3…) | |
| 向上取整 | Math.ceil(Float) | |
| 向下取整 | Math.floor(Float) | |
| 取[0,1)之间的随机数 | Math.random() | |
| 取[min,max]之间的随机数 | Math.floor(Math.random()*(max+1-min))+min |
Date对象
| 方法 | 解释/示例 |
|---|---|
| new Date(） | 获取当前时间信息 |
| new Date(年,月,日,时,分,秒) | 转换指定时间 |
| Date.toLocaleDateString() | 2021/5/26 |
| Date.toLocaleTimeString() | 下午4:57:34 |
| Date.toLocaleString() | 2021/5/26下午4:57:34 |
| Date.getFullYear() | 年 |
| Date.getMonth() | 月 |
| Date.getDate() | 日 |
| Date.getDay() | 星期几 |
| Date.getHours() | 时 |
| Date.getMinues() | 分 |
| Date.getSeconds() | 秒 |
| Date.getTime() | 时间戳 |
| Date.getMilliseconds() | 毫秒 |
String对象
| 方法 | 解释/示例 |
|---|---|
| String.padStart(length,内容) | 当字符串不满足length长度时，在前面添加内容，可以多字符 |
| String.padEnd(length,内容) | 当字符串不满足length长度时，在后面添加内容，可以多字符 |
| String.indexOf(内容) | 查找内容首次出现的位置，返回数字，找不到返回-1 |
| String.lastIndexOf(内容) | 查找内容最后一次出现的位置，返回数字，找不到返回-1 |
| String.substr(start,length) | 在字符中str中从strart开始读取length个字符 |
| String.split(分割符) | 在字符串中使用分割符进行分割，并以数组返回 |
| String.replace(‘a’,‘b’) | 用b替换a，返回一个新的字符串，可以用正则 |
| String.match(‘a’,‘b’) | 搜索匹配，然后返回匹配的字符串。可以用正则 |
| String.search(‘a’,‘b’) | 搜索匹配，然后返回匹配的位置。可以用正则 |
| String.slice(start,end) | 字符中str中从strart开始读取到end的位置结束 |
| String.toLowerCase() | 转为小写 |
| String.toUpperCase() | 转为大写 |
| String.charAt(n) | 字符串中第n个字符，等价于str[n] |
| String.trim() | 删除前、 后所有空格符 |
| String.repeat(n) | 复制n次 |
Array对象
| 方法 | 解释/示例 |
|---|---|
| arr1.concat(arr2) | 合并数组，将arr2合并到arr1的尾部 |
| arr.join(连接符) | 拼接数组元素为字符串，连接符可以用‘’为空 |
| arr.reverse() | 翻转数组 |
| arr.pop(str) | 从尾部删除，返回删除的字符串 |
| arr.push(str) | 从尾部追加，返回数组长度 |
| arr.shift(str) | 从头部删除，返回删除的字符串 |
| arr.unshift(str) | 向头部添加，返回数组长度 |
| arr.splice(start[,num[,e1,e2,e3…]]) | 在中间进行删除或删除与添加 |
| arr**.sort((a,b)=>{return a - b;})** | 排序，提供一个 回调函数，a-b升序，b-a降序 |
arr.sort(function(a,b){
return a - b;
})
2. 函数及其他
-
isNaN(变量) 检测数字是不是非数字，也可以检测字符是否是纯数字字符
-
用于转换以数字开头的字符串
parseInt(字符串)
parseFloat(字符串)
- typeof 变量，检测变量类型，它不是函数
- Array.isArray() 主要用于检测是否是数组。返回真或者假
- instanceof 检测对象是由哪种构造函数实例化所得，也可以检测复制类型，
- typeof 变量 === ‘object’ && !(Array.isArray(变量)）
- valueOf
webAPI内容
1.方法
DOM
获取元素方法：
| 方法 | 解释/示例 | 元素个数 |
|---|---|---|
| document.getElementById(‘id’) | 根据id获取元素 | 1 |
| document.getElementsByTagName(‘标签名’) | 根据标签名获取元素列表 | 伪数组 |
| document.getElementsByClassName(‘类名’) | 根据类名获取元素列表 | 伪数组 |
| document.querySelector(‘CSS选择器’) | ★根据CSS选择器获取元素 | 1 |
| document.querySelectorAll(‘CSS选择器’) | ★根据CSS选择器获取元素 | 伪数组 |
| document.body | 找到body | 1 |
| document.head | 找到head | 1 |
| document.documentElement | 找到html | 1 |
修改样式
| 方法 | 解释/示例 |
|---|---|
| 对象.style.样式名 | 修改元素节点的CSS样式 |
| .className | 修改标签类名 |
| .classlist | ★修改标签类名，伪数组 |
| .classlist.add(类名) | 添加一个类也可以添加多个，逗号隔开 |
| .classlist.remove(类名) | 删除一个类也可以删除多个，逗号隔开 |
| .classlist.toggle(类名) | 切换一个类，没有就添加，有就删除 |
| .classlist.contains(类名) | 判断是否有某个类 |
| .classlist.replace(类名) | 替换某个类 |
| getComputedStyle(标签元素，伪元素).样式名 | 不是获取伪元素，就用null，有left和right可以替代offsetLeft和offsetRight |
修改属性
| 方法 | 解释/示例 |
|---|---|
| .getAttribute(属性名) | 获取属性 |
| .setAttribute(属性名,属性值) | 设置属性 |
| .removeAttribute(属性名) | 删除属性 |
| data-xxx=’xxx‘ | html中显示 |
| .dataset.xxx=xxx | 设置属性，读取属性 |
表单元素的属性
| 方法 | |
|---|---|
| .value | 获取输入的内容，文本框 |
| .defaultValue | 读取默认的值，文本框 |
| .disabled | 是否禁用，给一个true就是禁用，false就是启用 |
| .checked | 设置单选框、多选框选中，给true就是选中，给false就是不选中 |
| .selected | 设置下拉框默认选中 |
获取节点方法
| 方法 | 解释/示例 |
|---|---|
| .parentNode | 找父元素节点 |
| .children | 找子元素，伪数组 |
| .nextElementSibling | 找下一个兄弟元素 |
| .previousElementSibling | 找上一个兄弟元素 |
| .firstElementChild | 获取第一个子元素 |
| .lastElementChild | 获取最后一个子元素 |
| .cloneNode() | 克隆节点，空白或者false为浅克隆，只克隆标签，true为深克隆，克隆标签与内容 |
| .childNodes | 找子节点，含元素节点，文本节点 |
| .previousSibling | 找上一个兄弟节点，含元素节点，文本节点 |
| .nextSibling | 找下一个兄弟节点，含元素节点，文本节点 |
| .firstChild | 获取第一个子节点，含元素节点，文本节点 |
| .lastChild | 获取最后一个子节点，含元素节点，文本节点 |
| .attributes | 属性节点，伪数组 |
| .nodeName | 节点名 |
| .nodeType | 节点类型 |
| .nodeValue | 节点值 |
JSON格式化
| 方法 | 解释/示例 |
|---|---|
| JSON.stringify(变量) | 将数组或对象转换为JSON字符串 |
| JSON.parse(变量) | 将JSON字符串还原回数组或对象 |
元素操作
| 方法 | 解释/示例 |
|---|---|
| document.createElement(‘标签名’) | 创建出一个空的元素对象，要想看到必须添加给某个父元素 |
| 父元素.appendChild(子元素) | 添加子元素到父元素的最后面，已经存在那就是移动 |
| 父元素.insertBefore(子元素，目标元素) | 添加子元素到目标元素的前面，已经存在那就是移动 |
| 父元素.removeChild(子元素) | 删除子元素 |
| 父元素.replaceChild(子元素，被替换的元素) | 替换元素，用子元素替换被替换的元素 |
文字相关
| 方法 | 解释/示例 |
|---|---|
| .textContent() | 读取时只会取到文本内容，不能识别标签，写入时标签也当文本 |
| .innerText() | 读取时只会取到文本内容，不能识别标签，写入时标签也当文本 |
| .innerHTML() | 读取时取到所有内容（包括标签），写入时可以识别标签 |
BOM
| 方法 | 解释/示例 |
|---|---|
| history.forword() | 看浏览历史记录，前进一页 |
| history.back() | 看浏览历史记录，后退一页 |
| location.href=url | 调整到指定URL页面 |
| location.reload() | 刷新页面 |
| navigator.userAgent | 查询UA |
| window.open(url地址,tatarget打开方式,窗口参数) | 打开一个窗口，并返回一个窗口ID |
| ID.close() | 利用窗口ID关闭窗口 |
| window.close() | 关闭整个浏览器窗口 |
| history.go(n) | n为正数为前进n页，为复数为后退n页 |
| location.protocol | URL的协议 |
| location.host | URL的主机 |
| location.hostname | URL的主机名 |
| location.port | URL的端口 |
| location.pathname | URL的路径名 |
| location.search | URL的查询字符串 |
| location.hash | URL的哈希(锚点) |
| screen.availWidth | 屏幕的可用宽度 |
| screen.availHeight | 屏幕的可用高度 |
⭐坐标相关
| 方法 | 解释/示例 |
|---|---|
| .offsetWidth | 用于读取左边线左侧到右边线右侧的距离（C3盒模型下的width） |
| .offsetHeight | 用于读取上边线上侧到下边线下侧的距离（C3盒模型下的height） |
| .offsetParent | 用于获取当前元素相对父元素 |
| .offsetLeft | 获取的是元素左边线外侧与offsetParent左边线内侧之间的距离 |
| .offsetTop | 获取的是元素上边线外侧与offsetParent上边线内侧之间的距离 |
| .scrollWidth | 获取内容的宽度 |
| .scrollHeight | 获取内容的高度 |
| .scrollLeft | 水平滚动的距离（可读可写） |
| .scrollTop | 垂直滚动的距离 |
| .clientWidth | 获取可视区域的宽度 |
| .clientHeight | 获取可视区域的高度 |
| .clientLeft | 获取的是元素左边框的宽度 |
| .clientTop | 获取的是元素上边框的宽度 |
event对象
| event对象中的参数 | 解释/示例 |
|---|---|
| .pageX | 获取的位置距离文档左边的距离 |
| .pageX | 获取的位置距离文档上边的距离 |
| .clientX | 获取的位置距离窗口左边的距离 |
| .clientY | 获取的位置距离窗口上边的距离 |
| .screenX | 获取的位置距离屏幕左边的距离 |
| .screenY | 获取的位置距离屏幕上边的距离 |
| .stopPropagation() | 阻止事件冒泡 |
| .eventPhase | 获取事件阶段 |
| .type | 获取事件名 |
| .target | 代表被点击的那个目标对象 |
| .preventDefault() | 阻止默认行为。 |
| .keycode | 记录了键盘的键码，可以识别哪个案件 |
浏览器存储
| 方法 localStorage与sessionStorage 一样的用法 | 解释/示例 |
|---|---|
| localStorage.setItem(名，值) | 将字符串保存到本地，需要指定名，值 |
| localStorage.getItem(名) | 从本地读取数据 |
| localStorage.removeItem(名) | 从本地删除数据 |
| localStorage.clear() | 清除本站的本地所有数据 |
2.事件
| 事件监听 | 事件传递类型为可选，为真是事件捕获，为假是事件冒泡。 |
|---|---|
| 元素.addEventListener(‘事件名’，事件函数[，事件传递类型]) | 事件监听。如果要取消事件监听，事件函数不能使用匿名函数。 |
| 元素.removeEventListener(‘事件名’，事件函数名[，事件传递类型]） | 移除事件监听。要取消事件监听，注册时需要使用有名函数，才能移除事件监听。 |
鼠标事件
| 事件名 | 解释/示例 |
|---|---|
| click | 鼠标单击后执行 |
| focus | 获取光标，主要在输入框和textarea里 |
| blur | 失去光标，主要在输入框和textarea里 |
| dblclick | 鼠标双击 |
| mouseover | 鼠标移入,建议用mousernter |
| mouseout | 鼠标移出,建议用mouseleave |
| mousemove | 鼠标移动 |
| mousedown | 鼠标按下 |
| mouseup | 鼠标弹起 |
| mouseenter | 鼠标移入, |
| mouseleave | 鼠标移出, |
拖拽事件，盒子需要加draggable=“true”,img默认有
| 事件名 | 解释/示例 |
|---|---|
| dragstart | 拖拽开始 |
| drag | 拖拽中（只要是拖拽中就不断触发） |
| dragend | 拖拽结束 |
| dragenter | 拖拽进入，其他元素拖入当前元素时触发 |
| dragleave | 拖拽离开，其他元素拖出当前元素时触发 |
| dragover | 拖拽悬停，其他元素在当前元素拖动时触发，阻止事件默认行为才可以让drop生效 |
| drop | 拖放 ，其他元素在当前元素释放时触发 |
鼠标相关事件
| 方法 | |
|---|---|
| scroll | 滚动事件 |
| resize | 尺寸改变事件 |
键盘事件:
| 事件名，只有文本框和document | 解释/示例 |
|---|---|
| keydown | 键盘按下时出发 |
| keyup | 键盘弹起时出发 |
| e.keycode | 记录了键盘的键码，可以识别哪个案件 |
| input.oninput | 输入框变化时的事件 |
其他事件：
| 方法 | 解释/示例 |
|---|---|
| window.onload | 页面加载完成后执行 |
| window.onunload | 页面关闭之后执行 |
| window.onbeforeunload | 页面关闭之前执行 |
3.函数及其他：
| 定时器 | |
|---|---|
| setTimeout(函数，N毫秒) | 一次性的定时器，N毫秒后执行一次函数，返回定时器标识 |
| setInterval(函数，N毫秒) | 重复定时器，每N毫秒都执行一次函数，返回定时器标识 |
| clearTimeout(定时器标识) | 清除一次性定时器 |
| clearInterval(定时器标识) | 清除重复定时器 |
js高级内容
1.方法：
| 方法 | 解释/示例 |
|---|---|
| 构造函数.prototype | 指向原型对象 |
| 原型对象.constructor | 指向构造函数 |
| 对象._proto_ | 指向原型对象 |
| 函数.call(this指向, 实参1,实参2,实参3…) | 改变this的指向 |
| 函数.apply(this指向,参数2) | 改变this的指向,参数2为数组或伪数组 |
| 函数.bind(this指向) | 改变this的指向，this的指向不能再次跟更改，相当于没有了this |
2.函数及其他：
判断基本数据类型用typeof，复杂类型用instanceof
语法：
数据 instanceof 构造函数名
类和继承：
class 类名 {
constructor (形参列表) {
//定义属性的地方
}
// 方法列表（定义方法的地方）
}
class 类名 extends 父类名 {
constructor (参数列表) {
super(传参数)
this.xxx
}
// 方法列表
}
正则对象：
| 方法 | 解释/示例 |
|---|---|
| reg.test(‘str’) | 判断str里面是否满足正则条件，是就是TRUE，不然就是FALSE |
| reg.exec(‘str’) | 提取正则规则的str里第一个满足条件的内容()，没有则返回null |
正则元字符与一些其他
| 符号 | 含义 |
|---|---|
| . | 找\r\n以外的字符 |
| \d | 找数字 |
| \D | 非数字 |
| \w | 找_、字母、数字 |
| \W | 找除了_、字母、数字，简单来说可以理解为除了_以外的符号 |
| \s | 不可见字符 |
| \S | 可见字符 |
| | | 或，左边或右边的任意一个 |
| () | 优先得到结果 |
| [] | 中括号里的任意一个 |
| [起点-终点] | 从哪到哪 |
| [^] | 除了中括号里面以外的 |
| ^ | 开头，注意： [^] 才是负向 直接写^代表以什么开头 |
| $ | 结尾，以^$组合起来的中间内容叫严格匹配 |
| ? | 0个或1个 |
| * | 0个或多个 |
| + | 1个或多个 |
| {n} | n次 x=n |
| {n，} | 重复n次或更多 x>=n |
| {n，m} | 重复出现的次数比n多但比m少 n<=x<=m |
g 全局匹配 i 忽略大小写
Jquery内容：
1.方法：
| 方法 | 解析/示例 |
|---|---|
| $(function(){}) | 加载事件，DOM树加载完毕就立刻调用 |
| $(css选择器) | 获取DOM元素，获得是伪数组 |
| jQuery对象.css(‘样式名’，‘样式值’) | 给元素添加css样式，多个样式添加用对象的方式，获取不要给值 |
| jQuery对象.text() | 不加内容只获取内容，不获取标签，加内容为设置内容 |
| jQuery对象.html() | 不加内容只获取内容和标签，加内容为设置内容或标签 |
| jQuery对象.show() | 显示元素,传参数1可以加动画时长 |
| jQuery对象.hide() | 隐藏元素 |
| jQuery对象.remove() | 删除元素 |
| jq对象.delay(延迟时间).动画 | 动画延时 |
| jq对象.each(function (index, item) {}） | 显示迭代，第一个参数为下标，第二个参数为每个元素 |
| jq对象.append( 子元素 ) | 添加元素，添加到子元素的最后 |
| jq子元素对象.appendTo( 父元素 ) | 添加元素，添加到子元素的最后 |
| jq元素对象.empty() | 清空自己所有的内容 |
| jq对象.prepend( 子元素 ) | 添加元素，添加到子元素的最前面 |
| jq子元素对象.prependTo( 父元素 ) | 添加元素，添加到子元素的最前面 |
| jq对象.clone() | 都包含标签本身和内容，传trye会包含jq事件 |
| .val() | 相当于原生的value,不传参数就是获取，传参数就是设置 |
| jq对象.on(‘事件名’, 回调函数) | 是jQuery推荐注册事件的方式 |
| jq对象.on(‘事件名’, ‘选择器’, 回调函数) | 事件委托版用法 |
| jq对象.off([‘事件名’]) | 删除这个事件名对应的事件,不传参数删除所有jQuery绑定的事件 |
| jq对象.attr(‘属性名’,[属性值]) | 不传属性值就是获取，传属性值就是设置 |
| jq对象.data() | 用data-写的自定义行内属性，用这个操作，但是不会修改行内的属性 |
| jq对象.prop(‘checked’) | 专门用来操作 布尔类型 的行内属性,如checked |
| let 返回值 = $.noConflict() | 多库库存方法 |
jQuery里的筛选方法
| 名称 | 描述 |
|---|---|
| jQuery对象.children(selector) | 相当于$(‘ul-li’)，子类选择器，可以传选择器筛选 |
| jQuery对象.find(selector) | 相当于$(‘ul li’),后代选择器，可以传选择器筛选 |
| jQuery对象.siblings(selector) | 查找兄弟节点，不包括自己本身。可以传选择器筛选 |
| jQuery对象.parent() | 查找父亲 |
| jQuery对象.parents(selector) | 不传查找到li的所有父级元素，可以传选择器筛选 |
| jQuery对象.eq(index) | 相当于$(‘li:eq(2)’),index从0开始 |
| jQuery对象.next() | 找下一个兄弟 |
| jQuery对象.prev() | 找上一次兄弟 |
| jQuery对象.nextAll() | 找后面所有兄弟 |
| jQuery对象.prevAll() | 找前面所有兄弟 |
| jQuery对象.end() | 在链式编程中，可以回到链式编程里的上一个对象 |
| jQuery里的动画 | 描述 |
|---|---|
| .slideUp() | 上滑 |
| .slideDown() | 下滑 |
| .slideToggle() | 上下滑 |
| .fadeIn() | 淡入 |
| .fadeOut() | 淡出 |
| .fadeToggle() | 淡出淡入 |
| .fadeTo([time],[opacity],[liner],[function]) | 用动画效果的方式把透明度改到某个值 |
| .animate({样式名：样式值},time,liner,function) | animate动画 |
jQuery中的宽高
菜鸟教程
- 按 ctrl + 鼠标左键点击，就可以打开这个超链接
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0TQGitR-1632750857494)(D:\Da\自己总结\图片\jQuery中的宽高.png)]
- width() 和 height()
- 常用
- 获取的就是宽和高
- innerWidth() 和 innerHeight()
- 获取的是宽+左右padding、 高+上下paading
- outerWidth() 和 outerHeight()
- 获取的是 宽 + 左右padding + 左右border 、 高 + 上下padding + 上下border
- outerWidth(true) 和 outerHeight(true)
- 获取的是 宽 + 左右padding + 左右border + 左右margin、 高 + 上下padding + 上下border + 上下margin
jquery中的offset和position
- offset 获取的是相对于文档的位置
- position 获取的是相对于自身定位所参照的父级元素的位置
scrollLeft() 和 scrollTop()
- scrollLeft获取往左边滚出去的距离，scrollTop获取往上边滚出去的距离
- 但是要注意原生都是属性，jQuery都是方法,所以记得是 scrollLeft() 和 scrollTop()
2.事件：
| 方法 | 解析/示例 |
|---|---|
| jq对象.on(‘事件名’, 回调函数) | 是jQuery推荐注册事件的方式 |
| jq对象.on(‘事件名’, ‘选择器’, 回调函数) | 事件委托版用法 |
Ajax内容：
jQuery里的方法：
| 方法 | 解析/示例 |
|---|---|
| $.get(url,data,success) | get请求，可以用对象形式传递 |
| $.post(url,data,success) | post请求，可以用对象形式传递 |
| $.ajax(type,url,data,success) | ajax请求，可以用对象形式传递 |
| header{key,value} | ajax设置请求头属性 |
| contentType：false；processData：false | ajax请求中关闭自带的编码属性 |
| $.ajaxSetup({beforeSend:function(xhr){xhr.setRequestHeader(key,value)}}) | ajax全局设置，设置Send之前设置请求头属性 |
| jQuery对象.serialize() | 快速获取表单域的数据，需要添加name属性 |
原生：
| 方法 | 解析/示例 |
|---|---|
| audio/video对象.playbackRate | 设置或返回音频/视频的当前播放速度。 |
| new FormData(form对象) | 创建FormData对象 |
| fd对象.append(key,value) | fd对象里面加属性 |
| input对象.files | 获取文件输入框里面的数据 |
| URL.createObjectURL（对象） | 对象转URL对象 |
| parent | 找父页面，在子页面（iframe）里面使用 |
| decodeURI | 解码URL编码 |
原生ajax使用:
var xhr = new XMLHttpRequest(); //1.创建一个Ajax对象
xhr.open(‘get’, ‘https://autumnfish.cn/api/joke/list?num=10’) //2.添加open方法
xhr.open(‘post’, ‘http://www.liulongbin.top:3006/api/addbook’)
xhr.onload = function () {} //3.添加回调函数
xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); //4.post请求需要加内容类型
xhr.send(‘bookname=nihao&author=xiexie&publisher=asd’) //get里面内容为空，post需要加内容
模板引擎:
创建一个script type=“text/html” id=“tpl-info” 标签，id随意，type固定
<div>{{@title}}</div> //变量里有标签用@才能识
<div>姓名：{{name}}</div> //正常写法
{{if vip==1}} //判断写法
{{else if vip==2}}
{{else}}
{{/if}}
{{each hobby}} //循环写法
- {{$index+1}}-{{$value}}
{{/each}}
注册时间: {{regTime | getTime}} //函数写法，getTime为函数，前面为变量
git内容：
| 指令git | 解释/示例 |
|---|---|
| git init | 初始化仓库 |
| git config --global user.email “邮箱号” | 设置邮箱 |
| git config --global user.name “用户名” | 设置用户名 |
| git add . | 添加到缓存区 |
| git commit -m “描述文本” | 提交代码，并添加描述文本 |
| git status | 查看当前的工作区域是否干净 |
| git log | 查看每次提交的记录 |
| git log --oneline | 查看每次提交的记录，只显示关键数据，也就是一行显示 |
| git reset --hard 版本号 | 版本回滚命令 |
| git reflog | 可以获得所有git操作记录 |
| git remote add origin 仓库地址 | 链接本地仓库与远程仓库 |
| git remote -v | 查看仓库名字与远程地址，不加-v只查看名字 |
| git push -u origin master | 推送数据到远程仓库，第二次推送不用带参数 |
| git clone 仓库地址 | 克隆仓库到本地 |
| git remote remove origin | 移除远程仓库的地址 |
| git branch 分支名 | 创建分支，不加分支名为查询分支 |
| git checkout 名字名 | 切换分支 |
| git push --set-upstream origin 分支名 | 第一次推送分支，需要先在远程服务器创建分支 |
| git merge 分支名 | 合并分支 |
| ssh-keygen -t rsa -C “邮箱号” | 生产公钥 |
| git pull <远程主机名> <远程分支名>:<本地分支名> | 远程分支是与当前分支合并，则冒号后面的部分可以省略。 |
node.js内容：
| 对象解构赋值方法 | 解释/示例 |
|---|---|
| let{对象的成员名:变量名}=对象 | 解构语法，相当于 变量名=对象.成员名 |
| let {变量名}=对象 | 当变量名与对象成员名字一样的时候，可以隐藏一项 |
| let{变量1,…对象2}=对象1 | 将对象1除了变量1之外的赋值给对象2 |
let obj1={
age:38,
name:“达人”,
gender:“非酋”,
fd:“水”
}
let{age,name,gender,fd}=obj1
console.log(age,name,gender,fd); //38 达人 非酋 水
let {age:ag1,…obj2}=obj1
console.log(ag1,obj2); //38 { name: ‘达人’, gender: ‘非酋’, fd: ‘水’ }
| 数组解构赋值方法 | 解析/示例 |
|---|---|
| let [变量]=数组 | 将数组中的数据，依次赋值给变量 |
| let [变量,…数组2]=数组1 | 将数组1除了第一个之外的赋值给数组2 |
| …数组 | 将数组快速展开 |
let arr=[1,2,3]
let [n1,n2,n3]=arr
console.log(n1,n2,n3); //1 2 3
let [n4,…arr2]=arr
console.log(n4,arr2); //1 [ 2, 3 ]
console.log(…arr); //1 2 3
Array对象
| 方法 | 解释/示例 |
|---|---|
| Array对象.forEach((value,index)=>{}) | 循环数组，不能中断，无返回值 |
| Array对象.map((value,index)=>{}) | 循环数组，不能中断，有返回值生产新数组 |
| Array对象.filter((value,index)=>{return true}) | 循环数组，不能中断，有返回值,返回值为真时添加到新数组 |
模块
fs 文件系统模块
| const fs = require(‘fs’) 导包 | 解释/示例 |
|---|---|
| fs.unlink(路径，(err)=>{}) | 删除文件，删除成功err为null |
| fs.readFile(路径[,可选参数],(err,data)=>{}) | 读取文件，data默认buffer格式，可以在参数那里设置utf-8 |
| fs.writeFile(路径,数据[,可选参数],(err)=>{}) | 写入文件， |
path 路径模块
| const path = require(’path’) 导包 | 解释/示例 |
|---|---|
| __dirname | 文件夹路径 |
| __filename | js文件路径 |
| path.join(__dirname, 文件夹 , 文件名) | 拼接路径 |
npm config set registry https://registry.npm.taobao.org/ 切换淘宝镜像
http 网络模块
| const http= require(’http’) 导包 | 解释/示例 |
|---|---|
| const server=http.createServer((req,res)=>{}) | 创建http服务，req请求对象，res返回对象 |
| res.end(‘返回数据’) | 返回数据 |
| req.on(‘data’,(data)=>{}) | 接收post数据事件 |
| req.on(‘end’,()={}) | 接收完post数据事件 |
| server.listen(43888,()=>{}） | 监听端口 |
res.end(‘返回内容’) 设置返回内容
res.setHeader(key,value) 设置返回响应头
req.url 获取请求地址的相对路径
querystring 查询字符串模块
| const querystring= require(’querystring’) 导包 | 解释/示例 |
|---|---|
| querystring.parse(‘字符串’) | 将字符串解析成对象 |
npm i nodemon -g 安装nodemon，全局模式-g
npm init -y 初始化npm项目
npm i express 安装express，非全局模式
npm i multer 安装multer ，非全局模式
npm i express multer 同时安装2个
npm i 有package.json的文件时,可以自动下载所有需要的包
express 网络模块
| const express= require(’express’) 导包 | 解释/示例 |
|---|---|
| const app=express() | |
| app.get(‘路径’，(req,res)=>{}) | get请求发起 |
| req.query | 获取get请求的参数 |
| res.setHeader(‘Content-Type’,‘text/json’) | 设置响应头为json |
| res.send(‘返回数据’) | 返回数据 |
| app.use(express.static(‘www’)) | 开放www文件夹，里面的文件为1级路径，里面的文件夹为2级 |
| app.post(‘路径’,(req,res)=>{}) | post请求 |
| app.use() | 可以用来加载一些中间件 |
| app.use(express.urlencoded) | 使用url编码解码 |
| req.body | 获取post数据,默认会解析成对象 |
| req.file | 文件数据 |
| app.listen(‘端口’,()=>{}) | 启动服务器 |
multer模块
| const multer= require(’multer’) 导包 | 解释/示例 |
|---|---|
| const upload = multer({dest: ‘uploads/’}) | 创建目录 |
| app.post(’/reg’,upload.single(‘userIcon’),(req,res)=>{}) | post请求时候带upload创建文件 |
| let {username,password}=req.body | post文本数据在body里面 |
| let userIcon=req.file.filename | 文件数据在file里面,获取文件名 |
app.use((req,res,next)=>{代码片段1;next()}) 中间件函数,可以对req,res的数据预先处理
next()方法: 会去调用堆栈中的下一个中间件
如果没有调用next()方法,则程序执行完中间件的时候程序会停止(卡住)
res.setHeader(‘Access-Control-Allow-Origin’,’*’) // *代表所有的请求路径 ,解决跨域问题
app.use(cors()) 调用cors包里面cors方法,解决跨域问题
jq解决跨域语句再AJAX里面加入dataType:‘jsonp’
mySQL指令
| 方法 | 解释/示例 |
|---|---|
| insert into 表名(字段1, 字段2) values(值1, 值2) | 插入数据,每个字段对应每个值 |
| delete from 表名 where 条件 | 删除表格,去掉条件都是删除整个表格 |
| update 表名 set 字段1=‘新值’,字段2=‘新值’ where 条件 | 修改数据 |
| select * from 表名 where 条件 | 查询数据 |
所有where都不是必须的, 不加就是对整个表格进行操作
insert into heroinfo (name,title,age) values (‘提莫’,‘迅捷斥候’,‘108’) //插入数据
delete from heroinfo where age>100 //删除数据
update heroinfo set name=‘妲己’,title=‘妲己爱主人’ where id=1 //对id=1的数据进行修改
select * from heroinfo //读取整个表格
select id,name from heroinfo where age>50 //读取表格中满足age>50的数据,并只返回id,name字段
mysql模块
| var mysql = require (‘mysql’) 导包 | 解释/示例 |
|---|---|
| var connection = mysql.createConnection({ | 设置数据库参数 |
| host : ‘localhost’, // 数据库的地址/名字 | |
| user : ‘root’, // 登录数据库的用户名 | |
| password : ‘root’, // 登录数据库的密码 | |
| database : ‘mysql73’ // 你自己数据库名称 | |
| }); | |
| connection.connect(); | 打开与数据库的链接 |
| connection.query(sql语句, function (error, results, fields) {}) | 对数据库的操作 |
| connection.end(); | 关闭与数据库之间的链接 |
crawler 爬虫模块
promise对象
| new promise((resolve,reject)=>{}) | 解释/示例 |
|---|---|
| promise对象.then((data)=>{}) | 成功处理 |
| promise对象.catch((err)=>{}) | 失败处理 |
| promise对象.finally(()=>{}) | 完成处理 |
| Promise.all([promise对象]) | 打包成一个新的Promise对象 |
| Promise.race([promise对象]) | 打包成一个新的Promise对象 |
vue基础:
尚硅谷:
| 方法 | 解释/示例 |
|---|---|
| object.defineProperty(对象,属性,属性配置) | 对象添加属性, 属性配置有value,enumerable(可遍历的), writable(可修改的),configurable(可删除的),get函数(读取时调用,返回值为属性的值),set(value)函数(修改时调用,value为收到的值) |
| object.keys(对象) | 列出对象的属性名, 已数组方式 |
vue Vue.config.profuctionTip=false
| 方法 | 解释/示例 |
|---|---|
| {{表达式}} | 插值语法,关联数据 |
| v-bind: 或 : | 单项绑定数据 |
| v-model:value=’’ 或 v-model=’’ | 双向绑定数据, 一般都是绑定value值 |
| v-on:事件名=方法 或 @事件名=方法 | 使用事件, 不传参数可以不用括号,传事件对象用$event |
| 事件修饰符 | |||
|---|---|---|---|
| prevent | 阻止默认事件 | capture | 使用事件的捕获模式 |
| once | 事件只触发一次 | self | 只有event.target是当前操作的元素时才触发事件 |
| stop | 阻止事件冒泡 | passive | 事件的默认行为立即执行，无需等待事件回调执行完毕 |
| 键盘事件,按键别名 | |||||
|---|---|---|---|---|---|
| enter | 回车 | delete | 删除 | esc | 退出 |
| space | 空格 | tab | 换行 | up | 上 |
| down | 下 | left | 左 | right | 右 |
| v-model修饰符 | |
|---|---|
| number | 自动将用户的输入值转为数值类型 |
| lazy | 转为在 change 事件同步数据 |
| trim | 过滤用户输入的首尾空白字符 |
黑马:
| 方法 | 解释/示例 |
|---|---|
| {{value}} | 插值表达式,可以是data里面的数据,可以是2元或3元运算符 |
| v-text | 设置元素的文本,相当于innerText,这个设置标签全部内容,如果是部分内容,用插值语法 |
| v-html | 设置元素的文本及标签,相当于innerHtml |
| v-on | 绑定事件,v-on:事件名=‘事件方法’, 简写@事件名=‘事件方法’ |
| v-bind | 绑定元素属性,v-bind:属性=“value”, 简写:属性=“value” |
| v-for | 循环渲染, 列表渲染, v-for="(item , index) in 列表名" |
| v-model | 双向数据绑定,绑定的是value值 |
| v-if | 根据条件渲染, 还有v-else-if, v-else 配合使用 v-if=“表达式” |
| v-show | 元素的显示隐藏,就是元素的display属性 |
| key | 解决渲染出错,相当于给元素添加唯一标识符 |
| 了解方法 | 解释/示例 |
|---|---|
| v-cloak | 设置Vue加载前的样式,需要先写CSS样式,再调用 |
| v-once | 只渲染一次 |
| v-pre | 不渲染 |
数组高阶方法
| 方法 | 解释/示例 |
|---|---|
| arr.map((value,index)=>{return value*2}) | 遍历数组,返回新数组,新数组的值是return的内容 |
| arr.filter((value,index)=>{return true) | 过滤数组,返回新数组,新数组的值是return值为true的时候value内容 |
| arr.forEach((value,index)=>{) | 遍历数组 |
| arr.some((value,index)=>{return true) | 找数组是否某个元素满足条件,返回值为true或false |
| arr.every((value,index)=>{return true) | 找数组是否所有元素满足条件,返回值为true或false |
| arr.findIndex((value,index)=>{return true) | 找数组下边,return true返回当前下表,全部不满足默认返回-1 |
| arr.reduce((sum,value)=>sum+value,0) | 一般用于数组求和,求最大值/最小值,返回值取决于最后一个return |
组件
name:’’; 子组件使用name属性
<style scoped></style> 子组件使用CSS作用域
<slot>我是默认值</slot> //子组件的插槽
<local1>
/<button><a href="#">点击购买</a> 父组件使用插槽 </button>
</local1>import local1 from ‘./local1.vue’ //父组件导入子组件
components:{local1 } /父组件导入子组件,步骤2
子组件:
props:[“good-name”,“good-price”], //子组件中声明props ： 相当于声明属性
this.$emit(‘自定义事件名’,参数) //自定义事件名随意,参数可以多个
父组件 :
@自定义事件名=“函数(参数)”
| vue实例结构 | |
|---|---|
| el | 挂载点 |
| data | 数据 |
| methods | 事件函数,方法 |
| computed | 计算属性 |
| filters | 过滤器 |
| watch | 监视器 |
标签内使用ref , this.$refs 来获取元素
给style 添加scope ,css作用域,相当于添加了属性选择器
路由传参,两种,路径传参刷新还在,params传参刷新不见了,
发送: this.$router.push({ path: ‘路由地址’, query: { key: ‘value’ }})
接收: this.$route.query.key 取值
发送: this.$router.push({ path: ‘路由地址’, params: { key: ‘value’ }})
接收: this.$route.params.key 取值
ton><a href="#">点击购买</a> 父组件使用插槽
</button>
</local1>import local1 from ‘./local1.vue’ //父组件导入子组件
components:{local1 } /父组件导入子组件,步骤2
子组件:
props:[“good-name”,“good-price”], //子组件中声明props ： 相当于声明属性
this.$emit(‘自定义事件名’,参数) //自定义事件名随意,参数可以多个
父组件 :
@自定义事件名=“函数(参数)”
| vue实例结构 | |
|---|---|
| el | 挂载点 |
| data | 数据 |
| methods | 事件函数,方法 |
| computed | 计算属性 |
| filters | 过滤器 |
| watch | 监视器 |
标签内使用ref , this.$refs 来获取元素
给style 添加scope ,css作用域,相当于添加了属性选择器
路由传参,两种,路径传参刷新还在,params传参刷新不见了,
发送: this.$router.push({ path: ‘路由地址’, query: { key: ‘value’ }})
接收: this.$route.query.key 取值
发送: this.$router.push({ path: ‘路由地址’, params: { key: ‘value’ }})
接收: this.$route.params.key 取值