方法与函数汇总

Posted 2021-10-16 达少mz

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. 函数及其他

1. isNaN(变量) 检测数字是不是非数字，也可以检测字符是否是纯数字字符

2. 用于转换以数字开头的字符串

parseInt(字符串)

parseFloat(字符串)

3. typeof 变量，检测变量类型，它不是函数
4. Array.isArray() 主要用于检测是否是数组。返回真或者假
5. instanceof 检测对象是由哪种构造函数实例化所得，也可以检测复制类型，
6. typeof 变量 === ‘object’ && !(Array.isArray(变量)）
7. 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 取值