JavaScript的相关知识与问题

最初的样子

一, 不理解的知识1. 高阶函数'

一,JS的基础

1.查看效果，审查元素-Console
2.声明变量必须使用var关键词
语法一var name;声明变量,uname默认值为undefinedname="佩奇"; 给变量赋予值console.log(name); 将该值输出const  声明一个常量,无法被改变
语法二var age=20; 声明变量为数值类型,颜色为蓝色console.log(age); 输出该数值var age="20"; 加上""/''后直接为字符串类型三要素(输出方式)1.对话框（浏览器弹窗提示的内容）alert("傻逼");2.控制台输出 (常用)console.log("傻逼2号");3.在页面上输出  文档-输出 (输出到页面上的内容，也就是正常敲代码)document.write("你好 <h1>飞机<h1>");4.对话输入框(浏览器弹窗输入内容)prompt("啊哈哈哈哈");

1.什么叫JavaScript与网页进行交互的脚本语言,具有逻辑性
2.JavaScript的组成部分ECMAScript(欧洲计算机制造商协会),用于指定脚本规范DOM (文档对象模型) Browse Object ModelBOM (浏览器对象模型) Document  Object Model

1,变量

1.使用关键词 varvar= name; name的默认值是undefined  变量的命名anme="内容"; 给变量赋予值,是一个字符串类型console.log(name);输出值
2.命名规则只能是数字,字母,下划线,不能数字开头不能是保留字或关键字(第一期表格里有)驼峰命名法(大驼峰和小驼峰)var yourName="傻逼"; 小驼峰 变量和属性var YourName={傻逼}; 大驼峰用于对象严格区分大小写变量要有语义化,见名思义

数据的类型,6种
1.未定义类型var name undefined未定义类型
2.string 字符串类型,在任何字段上添加''/""可直接变成字符串var name="刘德华"
3.number 数值类型,也就是数字NaN 属于数值类型,但不是一个数值,为了程序出了错还能继续往下走的一个特殊值isNaN(num):判断是不是数值,是数值,返回false,不是数值,返回true
4.boolean 布尔函数类型(计算结果是对还是错)var flag=true(对)  flag=false(错)(e表示法) 1.2e9:后面增加9个0       1.2e-6:前面增加6个0
5.null 特殊数据类型 空类型,表现为灰色var obj=null;  null属于object(对象类型)
6.undefined 特殊数据类型 来自null,值相等null==undefined  都表示空
7.object 对象类型,表现为一个大括号  (包含Array数组 )var obj=new object{};

数据类型的转换
//1.强制转换,例子:其他五个转boolean类型1.boolean();语法结算时添加var name="内容";console.log(Boolean(内容));   //第一个字母要大写2.object转boolean         结果始终是true3.null转boolean           始终是false4.undefined转boolean      始终是false5.string转boolean         有字符串内容为true,没有字符串内容为false6.number转boolean       非0数值都为true,是0为false//2.类型转换1.Number();   //字符串转数值Number(str)2.parseInt();   //保留整数,不具备四舍五入(也可以字符串转成数值)var str="10.222";console.log(parseInt(str));   运算的结果会是103.parseFloat();  //默认保留小数点(也可以字符串转成数值)var str="10.222";console.log(parseFloat(str));   运算的结果会是10.22console.log(str.toFixed(2));  运算的结果会是10.22,且变成字符串4.Math.round()  //四舍五入(可吧字符串转成数值)var str="10.522";console.log(Math.round(str));   运算的结果会是115.toString();   //把数值转化成字符串( 可解析二进制乱码 )var num=200;console.log(num.toString())
自动转换  除了 + 都能自动转换(因为+号会出现拼接效果)var str="100"console.log(typeof(str))  结算为字符串类型console.log(Number(str))  强制转换为数值类型console.log(str*1/1-1)    在原数值上加算  可以为*  -  /
算法结果用typeof结算该值属于什么类型var name;name="小猪猪";console.log(typeof(uname));
数学算数运算符var num1=200;var num2=300;var num3=num1+num2;console.log(num3);  结果为500特殊的符号 % 用来运算余下的数值例子:var num=500;console.log(num % 60)  结算为秒(分需要下一个算法)console.log((num / 60) % 60)  结算为分(时需要下一个算法)console.log((num / 60 / 60) % 60)  结算为时

二,运算符和进制

1.  name.toString(16)把name数值转换为16进制name.toString(16)     //转成16进制 根据括号内的数值选进制name.toString(8)    //转成8进制
2.  parseInt(name,8)把指定数值进制转成10进制parseInt(name,8)   //8进制转10进制parseInt(name,2)  //2进制转10进制

一,算数运算符+  -  *  /  %字符串和数值之间运算,字符串为数字会变成数值,字符串和字符串运算,会转数值算,+号例外%取余数例子:给1500分钟数值,一天24小时,就是1天60分,取余数就是60分
二,字符串运算符+字符串和字符串/字符串和数值,利用+号会直接拼接都成为字符串
三,一元运算符 (对目标进行运算  操作一个值)++  num++   先取值,后运算++在后面,代表还没有+1,下一个值加上1++num   先运算,后赋值++在前面,代表先+1,成为下一个值--  num--   先取值,后运算--num   先运算,后赋值
四,关系运算符 (把目标进行对比)==  >  <  >=  <=  !=  !==  ===  运算结果都为true/false!=不等于    !==不全等于   ===全等于(指所有类型)比较公式数值与数值比较       根据运算符比数值与字符串比较     字符串为数字会转为数值比较字符串与字符串比较   取左边第一个数字,十进制比较(ASCII表进行比较)
五,逻辑运算符  (true为1   false为0)&& 与     1==1 && 1==2 有一个是false,就是false,必须两个都是true找false,找到后就取该值,未找到取最后的值|| 或    1==1 && 1==2 有一个是true,就都是true找true,找到后就取该值,未找到取最后的值!  非     为false,返回true   为true,返回false相反的意思
六,赋值运算符+=  -=  *=  /=例子:num += 1   结果为  num=  num+1
七,位移运算符<< 左位移   >> 右位移算法:先把一个值转化为2进制,再向左或者右移动n位,再转换为10进制来计算例子:  2 >> 2 = 0       2 << 2 = 8
八,三元运算符(三目)(在只有两种结果的算法使用)? : 例子:var = 1 > 2 ? 答案1 : 答案2解析:1是否大于2   大于为答案1   不大于为答案2

1.分支运算语法/Math

一.固有程序三大流程控制1.顺序:浏览器解析顺序,从上到下,从左到右, = 会改变从右到左bar num = 10;   //10赋予给了num,所以=是从右到左2.分支:单分支,多分支3.循环:while , do..while , for , for..in,for..of,forEach,map等while , do..while , for用的比较多二,单分支的语法(表达式运算,为true执行第一个,否则执行第二个)if(表达式){正常执行} else{否则执行}1.多分支写法if(表达式){执行} else if(表达式){执行} else{}2.嵌套写法if(表达式){if(表达式){执行}else{执行}} else{执行}注意:只能嵌套在if里面,不能嵌套在else里面扩展:整Math.random()  该命令是取0-1中间的值,不包含1Math.pow(2,3);     //2的三次方Math.PI;         //π的数值Math.abs();   // 返回一个值的绝对值,正数依旧为正数Math.pow(2,3)   // 2的3次方Math.max()  //一组数中,得到最大值Math.min()  //一组数中,得到最小值Math.round()  //四舍五入Math.ceil()     //天花板函数,向上取整   0.1取1Math.floor()    //地板函数,向下取整  0.1取02**3  代表次方  2的三次方
三,逻辑分支switch(表达式name){case "内容1":                //输入的内容,就输出下面的输出内容console.log("输出内容")   //逻辑代码,输出的内容break;                   //返回case "内容2":             console.log("输出内容") break;default:                     //不为上面的内容则执行console.log("你是傻子")break;}例子1:var name = prompt("输入的内容"); //接收到的结果是字符串(prompt为弹窗输入内容)switch (name) {                // name对应输入的内容就执行(这里表达式为固定值)case "A":                   //输入的内容console.log("80-100"); //打印的内容break;case "B":                    //输入的内容console.log("90-100"); //打印的内容break;default:                    //不为上面的内容则执行console.log("一边玩去");break;}例子2:var grade = prompt("考试成绩"); //接收到的结果是字符串switch (true) {                //填true确认对错case (grade >= 80 && grade <= 100)://输出对错,结果为对console.log("A");//打印的内容break;case (grade >= 60 && grade <= 79):console.log("A");break;case (grade >= 0 && grade <= 159):console.log("B");break;default:console.log("一边玩去");break;}

2.循环运算

一,循环代码while  (先判断,后执行)语法: while(表达式){执行代码}表达式是否成立,成立则继续执行代码,不成立结束循环例子: while(name < 100){name++} 每执行一次,name+1,name数值为100时停止do...while (先执行,后判断)语法: do{执行代码}while(表达式)  先执行一次命名,再进行运算是否成立for  (用的比较多的)语法:for(循环值;循环条件;循环量增减){执行代码}循环值可不写,放在外面,另外两个必须写,分号; 必须存在执行顺序: 确认循环制-循环条件-执行代码-增减-循环条件~~~例子:   var num=0;for(var name=1; name<100; name++){num+=name}console.log(num)  //结果为1-100之和循环规则: 循环可以互相嵌套,短循环在外层(计算次数少),长循环在内层(计算次数多)结束循环: break; 该值在什么循环内,执行该值结束这个循环返回循环: continue; 该值在什么循环内,执行该值,结束本次循环,下一次循环开始,break; 跨级结束循环: 给一个循环值添加锚点,break;指定当前锚点,执行时结束锚点的循环例子: aaa: for(){} //aaa:为添加锚点break aaa;  //结束aaa这个锚点 (可添加在任何地方)
二,合数和素数合数:能被自己以内的其他数整除,不包括0和1和2   比如: 4 6 8 9 10 12 14 15素数:无法被自己以内的其他数整除,不包括1和本身  比如: 3 5 7 11 13 16

三,函数

一, 什么是函数1.将一段代码片段,抽取出来,成为一个独立的代码,叫函数,简称就是将一段代码打包用函数打包一段代码,输出函数则执行函数里面的代码2.函数=工具(方便,高效,无需关注原理,不受限制,方便维护)3.函数分内置函数,系统函数 (现有的)自定义函数 (重点)  语法:function name(){ return;}  //name()函数命名-大括号接收实参-return;结束且输出函数name(); //调用这个函数,若括号内有值,对应形参,可自己调用自己注意:上面的name叫形参,,,下面的name叫实参
二, 为什么学习函数1.提高编程效率,降低难度2.可以把多个相似的计算式,合成一次,赋予一个计算的值,进入到函数里面计算,再输出这个值的答案
三, 什么是arguments(数值组合),只在函数出现1. 是一个数组,包含多个数值,按顺序排列2. 它是一个只能在函数内部出现的一个元素,不是真正的数组3.多个值运算的时候,不需要定义多个值,用该值接收4.接收实参给的数值个数,,,代替了形参(不需要在形参命名多次)语法:  arguments.length(代表实参的个数)arguments[name] (取数值包里面的第几个数值)arguments.callee例子:function fn(){var sum = 0;for (var i=0; i<arguments.length; i++){sum+=arguments[i];}return sum;}console.log(fn(10,20,30,40,50,60)); //结果为这些值的和四, 函数里面的this函数的this默认指向上一级,上一级没内容就是window,上一个函数是window,里面的也是window改变this指向,给函数添加new,变成构造函数,改变函数的指向, 1: show=new fn()  2: (new fn())四, 函数递归函数自己调用自己,但是必须要有临界点,结束标签,不然会进入死循环五, 构造函数构造函数,在调用的时候采用new 调用,  var show= new show("aa")   没有用new调用就是普通函数构造函数里面的this默认指向函数本身六, 匿名函数把函数赋予给一个变量,这个变量就是这个函数语法: var aa=function(){};  aa();调用函数语法: (function(){})(); 不需要调用,直接运行普通函数中可包含匿名函数,把匿名函数return给普通函数语法: function aa(){ return function(){} };   aa()(); aa函数中的匿名函数七, 回调函数一个函数,当做另外一个函数的参数,并在另外一个函数里面执行该函数,并且传递参数主要用来获取到正常外面获取不到的函数里面的值例子: function show(callback){    //show形参接收一个函数setTimeout(function(){   //设置一个定时器函数var aa={ name="牛逼" }    //定义一个对象callback(aa)             //调用外面传进来的函数,传一个实参},5000)}var fn(abc){console.log(abc)}   //外面创建一个函数show(fn)                        //show实参传一个函数

1.事件驱动

一,配合页面进行事件驱动1. 在页面代码上添加一个按钮,比如添加一个按钮,命名一个id2. 在js里面获取页面的元素:  var aa =document.getElementsByTagName("标签名称")[下标]  // 无兼容问题var aa =document.getElementByClassName("样式名称")var aa =document.getElementByName("属性名称")var aa =document.getElementById("id名称")  // 无兼容问题var aa=document.querySelector("#id名称")   获取一个按钮    H5新增,class加.,纯标签不加var aa=document.querySelectorAll("div获取全部标签")     H5新增3. 点击后,触发一个js运算命令:name.onclick =要运算的命令4. js里面 name.value 可以获取这个id的值例子:<button id="btn">一个按钮</button>var aa = document.getElementById("btn");aa.onclick = numfunction num(){alert("你TM点到我了");}5. 引入外部JS文件  <script src="文件地址"><scipt>

四,数组

一,什么是数组1. 他是一组数据,他里面的元素的类型不受限制2. 可以一次性装多个值,不受类型限制,可以随意扩容
二,数组的创建方式一: var arr=new Array(); 数组的构造函数方式二: var arr= Array();方式三: var arr=[]; (推荐使用)
三,针对数组的属性1. length 判断数组里面有几个元素console.log(arr.length);  //判断数组里面有几个元素arr.length=3;  //把数字的个数,改成3个,只能减少,不能增多2. 数组的取值(下标)取值排序,从0开始,往后依次  console.log(arr[1]);   //打印数组第二个值arr[3]="ZZ";  //修改数组里面第四个值3. 数组的删除和增加push()     //添加一个元素到最后一个位置,并返回数组新的长度pop()      //删除最后位置的元素,并返回被删除的元素unshift()  //添加一个元素到第一个位置,并返回数组新的长度shift()    //删除第一个位置的元素,并返回被删除的元素语法: arr.push("新元素");   name = arr.pop()4. 其他额外属性some()  //查找数组中的元素是否满足指定条件,有就返回true(不会检测空数组,不改变原始数组)语法: arr.some(function(ele,index){ return ele>=10; })    ele代表arr里面的值every()  //查找数组中是否满足指定条件,有一个不是就返回false语法: arr.every(function(ele,index){ return  ele>=10; })sort()  //排序,默认从小到大,只能10以内的数字比较,不能多位数,多位数比较的第一位数的ASICC值解决办法:添加一个函数(1表示交换位置,,-1不交换位置)语法: arr.sort(function(a,b){return a-b;})reverse()  //倒序,将数组里面的元素,倒过来排列语法: arr.reverse();concat() //合并数组,不会改变原来的数组,返回一个新的合并了的数组语法: arr.concat(arr1,arr2);join() //把数字变成字符串输出,返回一个新的字符串,默认逗号隔开,不影响原数组语法: arr.join();   arr.join("/"); 把逗号改成/号slice() //截取开始位置,到结束位置的元素,不包含结束位置,进行取出来语法: arr.slice(0,2); //截取第一个到第二个位置的元素splice() //删除开始的位置计算,到后面的元素语法: arr.splice(2,1); 从第三个开始,删除一个元素arr.splice(2,0,"aa"); 第三个元素,前面插入aa, 0为插入  1为替换for..in  //遍历循环,读取一遍数组里面的所有元素  (会遍历到原型上的属性和值,方法)语法: var arr = [11,22,33,44];for (var i in arr){    //i会遍历一遍所有属性console.log("下标" + i);  //输出这是第几位console.log("值" + arr[i]); //输出第几位的值console.log( arr[i]);  //全部输出,}

五,字符串

一, 什么是字符串1. 就是有 双引号或者单引号 包起来的就是字符串2. 他是JS里的一只数据类型 String
二, 字符串的创建方式1. var str="字符串"2. var str=String("字符串")3. var str=new String("字符串")  //字符串对象的包装集
三, 字符串的属性1. length  字符串的长度(只能获取长度,不能修改),字符串具有恒定性,万年不变
四, 字符串的其他属性charAt[]     //他的作用等价于[index]取值 arr.charAT[1]  //取某个下标的值charCodeAt() //获取下标的ASCII码    arr.chaCodeAt(1)String.fromCharCode() //把ASCII码解析为字符   String.fromCharCode(str)concat()    // 合并字符串,返回新的字符串  arr.concat(arr1)indexOf()   // 查找指定字符串第一次的位置,找到了返回下标,找不到返回-1语法: arr.indexOf("牛","3")  从第三个下标开始找,可不加lastIndexOf() //查找一个值最后出现位置的下标  arr.lastIndexOf("a")search()      //查找一个值最先出现位置的下标      arr.search(a)replace()     //替换,将一个值换成另一个  arr.replace("第一个","第二个")`注意: /\*/gi(/*代表符号,g代表全部匹配,i代表忽略大小写)/^\s/   /\s$/   ^代表前面的    $代表后面的`substring(1,3) //截取一段下标字语法: arr.substring(1,3)  一个值的时候从0开始,可以负数slice     //截取开始位置到结束位置substr(2)    //截取开始位置到后面的个数split()     //根据分隔符,将字符串切割成数组  arr.split("=")trim()      //去掉前后空格     aee.trim()toLowerCase()  转小写   arr.toLowerCase()toUpperCase()  转大写

六,日期/时间

一, 时间的创建1. var data = new Date(); 2. 获取: getDate() 获取当前日期    setDate() 设置当前日期
二, 可获取的值,改变Date即可   语法: date.getDate()FullYear()/年份   Month()/月份(获取本地需要+1)  Date()/日Day()/星期         Hours()/小时                 Minutes()/分钟Seconds()/秒           Milliseconds()/毫秒          Time()/1999年到现在的毫秒
三, 计时器setInterval("执行内容",时间(毫秒))  //定时器: 每隔一定时间,执行一次(不准时)setTimeout("执行内容",多久后执行(毫秒)) // 延时器: 多久后执行一次clearInterval(定时器ID);  //暂停某个计时器,也可以根据顺序填第几个clearTimeOut(定时器ID);  // 暂停某个延时器例子:ID = setInterval(function () {console.log("阿福SaaS是打")}, 1000)计时器的重启: 给计时器定义一个名字,后面名字=计时器可以重启某个计时器

七,对象

一, 对象的创建方法方式一: var obj=new Object();  //这种方法用等于号隔离obj.nam="老吊";obj.age="21";obj["age"]=22;  有双引号不是变量,没有就是变量obj.ff=["你","我","他"]  //第一种方法写法obj.gg=function(){}console.log(obj.age);方式二: var Obj={     // 这种方法用双引号隔离name:"老吊",age:20,"aa":"19"};
二, 对象的输出方式一: console.log("我是是" + this.age)  //this就是对象的名称方式二: run.printInfo=function(){        //run是对象名称   printInfo可以为任何值console.log("我是是" + this.age)}  obj.run()三, 对象的操作delete obj.name    删除一个属性或者方法obj.name和obj["name"]  是一样的,obj里的某个属性

八,BOM的属性

window对象有:  document/文档对象   history/历史对象   location/地址信息   frames/框架内容                     screen/客户端显示屏幕信息       navigator/访问者有关浏览器的信息一, window对象方法 语法: window.alert("")   可不加window1. alert("这是一个弹窗")2. confirm("这是一个确定和取消窗口")3. prompt("请输入一个内容")4. open("http://www.baidu.com","_new")  //自动打开一个网页,会被拦截,第三个属性为尺寸位置5. close();     //关闭浏览器本页面6. print();     //调出打印对话框7. window.location  //加载当前页面控制台信息8. 定时器的设置和移除二, 页面信息互传的一个方式 (点击事件触发)1. 使用open和opener,可以获取到子页面的元素向子窗口发送 window.open('地址','打开方式','窗口大小')   //可以定个变量等于这个窗口窗口向父窗口发送 window.opener.父窗口的input标签来接收传的值父传子,定义一个空元素,接收要打开的一个新窗口,http开头2. 窗口打开  open('地址','窗口命名/方式','窗口尺寸')三, location的对象属性 (文档加载相关信息,和导航) (点击事件触发或者打印)1. decodeURIComponent(str)   //对汉字内容进行解码,吧乱码重新翻译回汉字2. window.location.hash = "#666666"; // 设置#后的字符串并跳转3. window.location.href = url;  // 页面跳转,跳转到其他url页面4. document.write(window.location.href)  //被跳转的页面进行接收信息5. 其他属性值hash: 锚点/读取页面     port: 端口号      host: 主机名: 端口号hostname: 主机名       href: 整个URL     pathname: 路径名search: 获取?后面的字符串四, location的对象方法 (点击事件触发或者打印)1. window.location.reload();         重新加载本页面2. window.location.reload(true);     强制重新加载3. window.location.assign("http://www.baidu.com");    跳转到指定连接4. window.location.replace(“http://www.baidu.com”);   用新的连接替换现在的五, history的历史记录对象属性  (上网的记录,历史记录) (点击事件触发或者打印)1. history.length;     //历史记录的个数2. history.back();     //后退3. history.forward();  //前进4. history.go(-1);    //-1代表后退   1代表前进   0代表刷新六, navigator对象  (保存了浏览器的信息) (点击事件触发或者打印)1. navigator.userAgent;  查看浏览器版本信息appName 浏览器名称      appVersion 浏览器版本    platform 操作系统

1.元素节点

一, 获取元素节点属性 ( 语法: aa.parentNode )1. parentNode  获取最近的父级关系节点        2. nextElementSibling     //获取下一个兄弟关系   ie 6 7 8 有兼容问题!3. nextSibling            //获取下一个兄弟关系   非 ie 6 7 8 有兼容问题! (去掉了Element)4. previousElementSibling  //上一个兄弟关系---有兼容写法5. firstElementChild       //获取父级里面的子元素第一个---有兼容写法6. lastElementChild        //获取父级里面的子元素最后一个---有兼容写法7. childNodes.length       //获取父级里面的全部子元素,但是包含空格,需要用遍历挑选元素节点8. children.length         //获取父级里面的全部子元素,但是包含注释,谷歌没问题`兼容的写法: var name = id.nextElementSibling || id.nextSibling;`二, 扩展内容1. name.nodeType  //判断name是个什么节点1 为元素节点      2 为属性节点     3 为文本节点2. name.nodeName  //判断name是一个什么标签元素节点返回标签名(标签名大写)      属性节点返回属性名称  其他节点返回三, 元素的互相添加1. var div = document.createElement("div");        //创建一个div元素节点2. var Txt = document.createTextNode("这是文本");    //创建一个文本节点3. name.appendChild(子级id);                    //把一个子级添加到父级最后一个4. name.insertBefore(子级id, name的前面)         //把一个子级添加到指定的前面5. name.className = "box"                      //给一个name创建一个class属性`特殊: document.body      代表页面里面的body`6. name.removeChild(子级id)             //删除父元素里面的一个子元素7. name.remove()   //直接把name这个元素标签删除四, 元素标签固有属性节点操作 (比如 <a src"" class"" >)1. name.attributes;                 //获取到所有的属性,后面加括号,判断这个属性是什么节点2. name.getAttribute("");           //选择一个属性名称,获取其对应的属性值3. name.setAttribute("属性","值");   //赋予一个标签新的属性和值4. name.removeAttribute("属性名");   //移除一个属性值五, 克隆一个元素标签1. div.cloneNode(false);  //浅克隆: 只克隆div当前的结构2. div.cloneNode(true);   //深克隆: 克隆div的全部属性六, 替换一个标签1. name.replaceChild(div,box);     //name里面某个标签替换成另一个标签(需要创建出来)`特殊: 如果是两个存在的属性,互相替换,原有的属性会消失,div是新表情,box是被替换的`七, 页面表示nam.innerHTML= ;  //获取一个标签里面的所有内容,包括标签里面的标签全部内容---也可以插入nam.innerText=""; //获取一个标签里面的文本内容---也可以插入nam.nodeValue=""; //文本节点使用会输出带标签的内容bb.style.width= "";  //获取某个标签的样式属性,这里是CSS属性的宽度

九, 事件

一, 鼠标事件1. onclick       //单击触发事件2. ondblclick    //双击触发事件3. onmouseenter  //鼠标移入触发事件4. leave  //鼠标移出去触发事件5. move   //鼠标在里面移动就触发6. over   `特殊移入事件,移动到子元素也会触发`7. out    `特殊移出世界,移出到父级元素也会触发`8. down   //鼠标按下不松开触发9. up     //鼠标松开的时候触发10.wheel  //滚轴按钮按下触发11.oncontextmenu   //鼠标右键按下时触发  需要去掉默认的右键菜单兼容写法:  if (e.preventDefault) {        //去掉右键默认菜单 e.preventDefault();} else {e.returnValue = false;}12. ele = e.target||e.srcElement;  //ele来获取点击的目标是什么,需要先获取鼠标节点ele.nodeName   //判断点击的是什么标签,默认大写ele.className  //获取被点击里面的class名字二, 键盘事件onkeydown    //当按下键盘上的键触发,一直按着会重复触发onkeypress   //当按下键盘上的字符键触发,一直按着会重复触发onkeyup      //松开按下的键触发扩展: e.keyCode;   //把按下的键转换为编号  需要先获取键盘按下节点String.fromCharCode(e.keyCode);   //把编号转换为字母e.key   //输出的为小写组合键事件altKey       //按下alt键  , 结果为trueshiftKey     //按下shift键ctlKey       //按下ctrl键metaKey      //按下window键keyCode      //获取键盘上任何一个键的ASICC码(不分大小写)charCode     //获取键盘上任何一个键的ASICC码(分大小写)三, HTML事件  -跟页面相关的触发事件语法 window.onload =    //被触发的对象是页面onload       //页面加载完成后触发onunload     //页面完全卸载后触发(刷新清除了前面的内容)onselect     //选中指定文本里面的内容时触发 (比如input对话框)onchange     //改变指定文本里面的内容时触发 (比如input对话框)onfocus      //当页面或者元素获得焦点时触发 (鼠标的光标)onblur       //当页面或者元素失去焦点时触发 (鼠标的光标)onsubmit     //当点击提交按钮时在元素节点上触发 (比如提交<form>表单)  //点击优先级高onreset      //当点击重置按钮时在元素节点上触发 (比如重置<form>表单)  //点击优先级高onscroll     //当用户用滚轴滚动滚动条时触发   后面加Top为不可见区域的高度扩展: window.scrollTo(x,y) 为滚动条的x轴和y轴位置(只写一个默认为X轴)getScroll().Top;    页面不可见区域的高度oninput      //当用户在输入的时候触发onsize       //改变窗口大小时触发注意:  document.XXX= function(){兼容+执行命令}  为针对网页页面四, 事件对象 eventbutton    //判断获取鼠标按下时按的什么键0为左键     1为滚轴按钮     2为右键 扩展: 获取事件对象的兼容写法: var e=evt||window.event;    evr对应函数的形参扩展: 获取点击的是什么兼容写法: var ele = e.target || e.srcElement;  五, 鼠标点击位置定位 //可以填left/top/right/bottomclientX      //浏览器当前可视范围的X坐标    不加X/Y,加Width和Height获取可视浏览器宽度`window.innerHeight   获取页面可视区域的高度`clientY      //浏览器当前可视范围的Y坐标pageX/Y      //距离浏览器内容区域的坐标screenX/Y    //距离显示器屏幕的坐标offsetX/Y    //鼠标点击的元素位置距离元素边界的坐标   不加X/Y,加Left是元素到上一个元素边界的距离//加Width,是获取自身的宽度

1. 事件的冒泡

一, 冒泡顺序,默认从里到外,逐个触发例子: 三个层叠的方块,点到最小的那个,也相当于点到其他的两个二, 阻止冒泡时间的默认行为(点到最小的就停止了,不再往外走)  方法: 点击函数添加阻止事件var e = evt || window.event;方法一:  (兼容写法)if (e.stopPropagation) {      //阻止默认冒泡顺序的兼容写法e.stopPropagation();      //非IE使用} else {e.cancelBubble = true;     //IE使用};方法二:(阻止浏览器的默认行为 //比如右键菜单)      if (e.preventDefault) {      //阻止默认冒泡顺序的兼容写法e.preventDefault();      //非IE使用} else {e.returnValue = false;     //IE使用};扩展: 给a标签阻止默认事件,可以添加一个点击函数,加入确认窗口confirm("确定跳转吗")

2. 事件监听器

一, 捕获事件  (捕获和委托,需要定义的同一个函数)box.addEventListener(“click”, func, false) click: 事件触发条件,不带onfunc:  事件调用的函数名称,没有双引号也没有(),也可以直接在里面写函数false/true:  是否使用捕获,反向冒泡(默认为false),从内到外,改为true从外到内{capture:true, once:true}   第三个也可以为函数,前面的为是否捕获,,后面的为触发次数为一次
二, 移除事件box.removeEventListener(“click”, func)移除事件监听器,只能删除用该方法添加的事件监听器 (IE8以下不支持)三, IE8以下使用的事件监听器box.attachEvent("onclick", fn);   //添加事件,需要加onbox.detachEvent("onclick", fn);   //移除事件四, 两者的兼容写法 (封装兼容)  添加事件: obj为捕获和阻止按钮 - 后面三个为固定function addEvent(obj,type,callback,useCapture){if(obj.addEventListener){obj.addEventListener(type,callback,useCapture)} else {obj.attachEvent("on"+type, callback)     //兼容IE的需要加on  后面的固定}}捕获调用: addEvent(box,"click", fn);    被点击的内容 - 触发条件 - 触发的内容阻止事件:function addEvent(obj,type,callback,useCapture){if(obj.removeEventListener){obj.removeEventListener(type,callback,useCapture)} else {obj.detachEvent("on"+type, callback)}}捕获调用: removeEvent(box, "click", fn);    点击触发的内容 - 事件名称 - 触发的内容

3. cookie

一, cookie的作用1. 作用就是为了在浏览器,存储少量数据,并且随着请求携带数据到服务器2. 缺点: 最大储存为4K - 且不能存储敏感数据 - 容易被伪造和挟持二, cookie的完整格式语法"name=value;expires=date;path=路径;domain=域名;secure;"  每个用; 隔开name=value   两个都可变,你要保存的名字,值(必填)expires="+date+"   cookie的失效时间,默认为浏览器关闭失效,date为获取的时间path=路径      存储的路径domain=域名    存储访问某个指定网站的cookiesecure        安全设置, 设置了则必须使用https协议才可获取cookie(可选)三, URI编码/解码设置cookie (内容必须为字符串)document.cookie = "user2=" + encodeURIComponent("张三");设置张三为一个URI编码,设置cookie的名字decodeURIComponent(document.cookie);对上面的赋值URI编码进行解析,结果为  user2=张三;

4. JSON

一, 什么是JSON1. JSON是一种结构化的数据表示方式(数据格式)2. 是一种轻量级的数据格式二, JSON的写法普通对象的写法:  var  obj={name:"天堂",age:20};JSON字符串的写法:  var json='{"name":"天堂","age":100}'里面的内容都需要双引号,数值可不用加三, JSON的作用1. 配置文件   2. 用于跨平台传递数据四, JSON的转换JSON.stringify(obj);  把一个对象转换成字符串JSON.parse(str);    把一个json字符串的写法转换成对象/数组五, JSON的方式创建数组和对象数组:  var arr=JSON.parse('[]')对象:  var obj=JSON.parse('{}')

5. 正则表达式

一, 什么是正则1. 匹配有规律的字符串2. 正则的特性-懒惰性: 找到一次就不找了,需要用g全局   贪婪性:二, 正则表达式:  由元字符和修饰符组成语法: var reg=/ /;var reg=new RegExp(/ /);正则寻找值的时候,找到一个就不找了,后面加特殊符号: i 代表不分大小写  g 代表全局匹配  m 代表换行三, 字符串的正则表达式用法search(/帅/) 找到一串字符串中的这个字replace(/帅/g,'丑')  找到字符串中的所有字,并替换match(/帅/g)  找到一串字符串中的所有这个字,组成数组四, 正则表达式常用的返回值test() 符合返回true   否则返回falseexec() 符合返回数组   否则返回null五, 正则的-元字符. 匹配任意字符      * 任意次数     .*任意字符任意次数+ 至少一次         ? 0次或1次     [] 取值范围 [0-9] [ab]a或b^ 开始位置         [^] 取反       $ 结束位置{n} 固定n次       {n,m} 最少n次,最多m次    {n,} 最少n次,最多不限\d 只能是数字,或者[0-9]       \D  不能是数字,或者[^0-9]\w 只能是数字,字母,下划线_     \W  不能是数字,字母,下划线_,或者[^0-9a-z_]\s 代表空白                  \S  不是空白|  或者,其中一个符合即可      ()  进行分组,整体匹配,后面可加{5},找几次,要是一连串的\  转义,把元字符变成普通符号    ?: 非捕获,对(?:)分组其中一个,不进行捕获

十, ES5-ES6新增

一. 通用新属性 (不支持IE8及以下)"use strict"  严格模式,用来消除一些语法的不合理,更加严谨,安全,快速1. 不可以忽略声明var变量2. 在函数里面,会禁止使用this关键词指向全局3. 不能使用八进制开头,八进制(05555)4. arguments变量,无法被修改,只有在arguments内部被修改才行,外部修改实参无效bind()属性:  改变函数里的this指向,函数的this默认指向上一级或者window语法: 函数内 function fn(){ console.log(this.arr) }.bind(obj)fn()            //在函数结束处添加函数外 function fn(){ console.log(this.arr) }     fn.bind(obj)()  //在调用处添加

1. ES5 数组新增

indexOf() 在一个数组/字符串里面查找一个内容的下标,如果没找到下标就是-1
forEach() 遍历一遍某个数组,里面需要加函数来执行,没有返回值,对原数组没影响语法: arr.forEach(function(el,index,arr){执行})el: 数组里面的每一个数值index: 数值里面每一个数值的下标arr: 数组本身map() 遍历一遍某个数组,里面需要加函数来执行,可以用return返回一个值,对原数组没影响语法: arr.map(function(el,index,arr){执行})filter() 过滤出数组中你想要的元素,并返回,不改变原数组,需要定义一个值接收语法: arr.filter(function(el,index,arr){ if( el>20 ){ return el; } })arr=arr1.filter(el){ return el>3 }some() 查找数组中的内容,找到了,就返回true,后面的不找了,需要定义一个值接收语法: arr.some(function(el,index,arr){ if( el==20 ){ } })
every() 查找数组中的内容,需要全部符合,一个不符合,就返回false,后面的不找了,需要定义一个值接收reduce() 非遍历的特殊值语法: arr.reduce(function(pre,cur,index,arr){执行})pre: 上一次的值,后面为undefiledcur: 当前正在处理的数组元素,没有return返回一个值给pre,就取后面一个index: 当前正在处理的数组元素下标arr:  再次调用该数组return pre; 返回一个值给下一个pre案列: var arr = [11, 22, 33, 44, 66, 55, 22, 99, 33, 44, 55, 11]arr.reduce(function (pre, cur, index, arr) {console.log(pre, cur, index)return pre + cur;})

2. ES6新增

一, ES6新增属性let 声明一个变量,跟var差不多,但是作用域只在块级里面,超出就失效const  声明一个常量,无法被改变,比如Math.PI是固定的圆周率三, ES6数组方法Set()  结构类似数组,成员值都是唯一的,不会重复   [...new Set(arr)]  去重后输出为数组语法: set = new Set(arr)    console.log(set.size)输出语法: .size 下标个数   .add(9) 添加一个值   .delete(9) 删除一个值   .has(9) 确认是否有这个值     .clear() 清除所有值Array.from() 把伪数组变成真数组,对象里面需要添加 length:3 来确定更改数组的个数语法: var obj = { 0: "你大爷", 1: "你二爷", 2: "你二大爷", length: 3}                         console.log(Array.from(obj))Array.of()  把任意一组值,转换成数组  比如: arr=Array.of(11,22,33,44)find()和findIndex() 获取数组里面每个对象的值,下标,内容 (用来查找元素)语法: arr.find(function(el.index.arr){ if判断 })if判断: if( el==10 ){ return el; }       (findIndex返回的下标)for..of    遍历数组和对象,字符串 (不会遍历到原型上的属性和值,方法)语法: for(var el of arr.keys()){ console.log(el) }特殊: values    得到值    keys      得到下标  obj[el] 打印值entries   得到实例... 扩展运算符 (可直接把一个数组拆分成多个数值)Math.max/min   找一串数值中的最大值和最小值,需要用到...拆分数值 语法: Math.max(...arr)特殊: ...合并数组  arr3 = [...arr1,...arr2]  转化成普通数值合并四, 箭头函数:  箭头函数只执行一行代码时,不需要return语法: var fn = n => n*100;   fn(2)    可以不写functionc  var show = (n1,n2) => { return n1+n2; }  show(1,2)理解: n为形参   n*100为{}里面要执行的内容扩展: 箭头函数里面的this,默认指向外面一层,非箭头的普通函数,默认指向window (或者.前面的一位)五, ES6的对象1. ES6 对象的简写: 在对象的外面进行赋值, 对象里面直接填入变量例子: var age=10;var age1={age} 2. ES6 对象方法的简写: 直接方法后面添加(){}  不需要加function例子: var age={id(){}}3. ES6 对象的其他属性Object.is(-0,0)    两个值进行比较,纯粹的外观进行比较,一样就是true,不一样就是falseObject.assign()  对象的浅拷贝和合并(只拷贝对象的第一层数值,第二层,第三层两个对象共享)obj1 = Object.assign({}, obj)    //把obj拷贝给空元素,赋于给obj1特殊: 把第二个值合并给第一个,接收的第三个跟第一个相等,第二个不变,若第一个为空,两个不相等对象的深拷贝把对象转字符串赋值,再转对象赋值,得到全新的对象4. WeakSet  对象的去重,成员都是唯一的,不会重复语法: let ws = new WeakSet([obj1, obj2])输出语法: .size 下标个数   .add(age:20) 添加一个对象   .delete(age:20) 删除一个对象   .has(9) 确认是否有这个对象     5. Map 是一个超对象,可以添加属性和方法  ,也不能出现重复的,属性名一样,前面的会被替代语法: map = new Map();     map.set("a", [11, 22, 33]);语法: var map = new Map([[1, 'one'], [2, 'two'], [3, 'three']])  添加方法输出语法: .size 成员个数   .set(9,6) 设置一个属性和值   .get(key) 读取一个值   .has(9) 确认是否有这个值     .clear() 清除所有值      .delete(key)删除某个值6. assign 对象的拼接,把两个对象合体成一个语法: Object.assign({},obj1,obj2)  //把后面的跟第一个合并,后面的不会改变,第一个会改变

2. ES6 字符串新增

二, ES6字符串方法indexOf("")    在一个字符串里面找某个内容,找到返回下标includes("")   判断字符串中是否有这个内容,找到返回true  第二个参数是从第几位开始找startsWith("")  判断字符串是不是这个内容开头,第二个参数从第几位开始找endsWith("")    判断字符串是不是这个内容结尾,第二个参数从第几位开始找repeat(100)     让一个字符串重复打印多少次``和${}        进行字符串拼接语法:    str1="牛"       str=`你很${str1}逼`//字符串的补全( 第一个参数:最低长度  第二个参数:补全的内容 )'x'.padStart(5, 'ab')    //x只有一个,所以会利用ab在开头补全至  ababx'x'.padEnd(5, 'ab')      //x只有一个,所以会利用ab在结尾补全至  xabab

3. ES6其他

解构赋值  用一个值去接收赋的值,需要对称,对象的情况下需要名字一样语法: var [a,[b,c],d]  = [1,[2,3],4]语法: var { name, age } = { name: "牛逼", age: 30 }class 类对象,ES6新加入例子: class Person {                     //设置一个父类函数constructor(Name, Age) {        //接收两个数据,形参this.name = Name;           //把传进来的数据赋值this.age = Age;              }run() { console.log('run') }   //新增一个方法                 static say() { 执行内容 }       //静态新增一个方法 需通过父类获取 Person.say  }var p = new Person('大佬','50');      //传两个数据进去,实参console.log(p)P.sayHi()                        //静态方法class 类对象的继承  extendsclass Employee extends Person {            //定义一个Employee继承Person的方法constructor(Name, Age, Stu) {super(Name, Age)                 //继承前面已有的this.sut = Stu;                   //设置自己新增的}position() { console.log(this.name + "出来吃烤肉吧!") }  //子类新增一个方法}var E = new Employee('大佬', 50, '未知', 222)   //子类变成构造函数,传四个值E.run()                                      //输出继承的run方法E.position()                                 //输出自己的position方法console.log(E)Symbol 方法唯一 (两个一样的对象,只能存在一个)var s1 = Symbol("foo");    var s2 = Symbol("foo");     s1 === s2; // falseGenerator 函数,可以对函数进行暂停语法 function * show(){ yield }           //yield用来暂停此函数输出: show.next().value              //输出函数里面计算的内容注意: 如果使用了暂停,next里面的done为false对象的克隆( 对象里面有对象,按层级分 )浅克隆:var obj1 = Object.assign({}, obj)  //只克隆第一层,后面的共享(改变一个都会改变)深克隆:把一个对象,通过JSON,先转字符串,再转对象进行赋值,两个对象互相不影响Promise 解决回调地狱和并发处理一系列问题,需要把Promise  return给外面的函数,方便下面再次使用语法: P= new Promise((resolve,rejected)=>{      //两个参数,都是函数,一个是成功,一个是失败resolve("这是正确")                    //成功了就执行})P.then((yes)=>{console.log(yes)} return P)    //then是接收正确和错误的参数得出结果后,可以再次调用函数,然后return出去,再用then看结果//函数的写法`function show(path){return new Promise((resolve,reject)=>{进行一段指令resolve(data)})}show(aaa).then((data)=>{ 打印data } return show(aaa) ).then()``

4. 动画

一, 获取元素本身的一些属性box.currentStyle[top]    谷歌不兼容(为undefined)    获取元素距离上面的距离window.getComputedStyle(box,null)[top]     谷歌兼容  二, 对获取属性进行封装成函数   ( box为元素本身,,attr为要移动的方向 )function show(box,attr){     //输出的尺寸带有单位,需要用parseInt( show(box,attr) ) 转数值if(box.currentStyle){ return box.currentStyle[attr]; }window.getComputedStyle(box,null)[attr]}三, 获取鼠标滚动,页头( 内容 )不可见部分document.documentElement.scrollTop       //有标准的声明头,才生效  可简写为 scrollTopwindow.pageYOffset                       //最新的ie 9 10 11document.body.scrollTop                  //没有标准的声明头,才生效获取有没有声明头: document.compatMode     结果:CSS1Compat有   BackCompat无四,  鼠标滚动获取兼容写法function getScroll() {if (window.pageYOffset != undefined) {           //它声明头无关,跟版本有关, ie 9以上return { left: window.pageXOffset, top: window.pageYOffset}} else if (document.compatMode == "CSS1Compat") {     //有声明头return {                                          left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}} else {                                          //无声明头return {left: document.body.scrollLeft,top: document.body.scrollTop}}}

十一, 面向对象

一, 什么是面向对象面向对象是利用对象进行编程的一种思想;  有称之为: oop思想面向对象编程(OOP)的三个基本特征是：封装、继承、多态封装: 将相同的属性和行为,封装一个独立的实例,称为类继承: 子类拥有父类的属性和方法,子类可以重写父类的方法,子类可以添加更多属性和方法多态: 重载, 在一个类中,有同名不同参数的方法(重载),重写, 子类重写父类二, 工厂模式工厂模式就是把 var obj = new Object() 创建的对象包起来

1. 闭包

一, 闭包就是 函数嵌套函数,内部函数可以引用外部函数的参数和变量创造局部变量,函数内可以使用,外部使用不了,内部函数return出去,让外面可以访问,但是无法修改外部函数调用内部函数,需要再加一个 ()  例子: show()()可以设置一个常量,来防止被外面改变二, 内存泄露,闭包没有内存泄露,内存泄露是指你用不到(访问不到)的变量,依然占据着空间,不能被再次利用

十二, Ajax

一, 什么是ajax: 与服务器进行数据交互的一种技术,实现同步和异步的局部数据刷新好处: 提高了用户体验 / 降低了压力 / 减少了浏览器的全局渲染Ajax主要用于数据的校验二, 进程和线程一个进程可以包含多个线程单线程和多线程单线程 --- 一次多线程 --- 多次比喻: 一家饭店就是进程,n个服务员就是多线程   '浏览器解析引擎'属于单线程,容易造成浏览器阻塞

1. 同步和异步

一, ajax的核心对象   XMLHttpRequest 简写 XHRfunction createXHR() {              //ajax核心对象(必写)if (window.XMLHttpRequest) {     //谷歌和火狐的兼容写法return new XMLHttpRequest();}return new ActiveXObject("Msxml2.XMLHTTP")  //IE的兼容写法}二, 同步和异步    是在浏览器解析引擎出现  同步false: 多件事情,按照顺序,一步一步执行异步true: 能同时处理多个事物,不会造成阻塞, 写法需要回调函数三, 封装ajax函数 (主要获取到服务器返回的数据,也就是页面的内容)function Ajax(url){           //封装函数(必写) 形参还可加 对象/函数内调(callback)var xhr = createXHR();    //把核心对象赋值xhr.open("get", url, false);   //请求方式-链接-同步/异步,异步为truexhr.send(null);  //像服务器发送请求(get才用)  post请求给向服务器发送的参数(字符串)1. 同步判断接收数据if(xhr.status==200){ return xhr.response }  //接收的数据}2. 异步判断接收数据xhr.onreadystatechange = function () {         //用来获取readyState状态if(xhr.status==200&&xhr.readyState==4){    //判断服务器状态和数据响应状态if(typeof (callback) == "function"){   //回调函数,判断第三个值是不是函数callback(xhr.response) }}}重点1: 异步接收数据,需要触发 xhr.onreadystatechange 事件,然后才能检测到readyState属性重点2: 异步需要回调函数,callback为Ajax第二个形参,传过来的是函数,,判断完后再调用函数,把内容传过去扩展: statusText/HTTP状态码的说明         responseText/返回纯文本responseXML/返回xml的格式           response/返回的是状态的集合码四, 接收的一些数据内容xhr.status响应的HTTP状态码200/服务器状态ok     304/缓存    404/找不到服务器     500/服务异常xhr.readyState异步响应的状态码0/未初始化     1/启动,已经调用open()        2/发送,已经调用send3/接收,部分已响应         4/完成,全部响应完成

2. 服务器查询用户名

一, 通过连接查看: "http://www.useker.cn/api/day22/checkname.php?regname="+this.valuethis.value为表单输入的内容二, Ajax函数传三个数据接收function Ajax(url, data, callback) {       //获取连接,对象,执行函数let xhr = createXHR();                 //获取ajax核心对象xhr.open("get", url + "?" + getPramas(data), true)  //设置传递内容xhr.send(null)xhr.onreadystatechange = function () { 如上面正常判断且返回 }扩展: 注意: "http://www.useker.cn/api/day22/checkname.php" 网址后面都不要了,来进行拼接三, php后面的对象拼接function getPramas(obj) { var str = "";for (const key in obj) { str += key + "=" + obj[key] + "&" }return str; }扩展: obj为一个对象,对象进行遍历,最后输出结果为  obj={regname:"刘德华"}

3. POST请求

一, 判断账号注册: url("http://useker.cn/api/server/login.php")JS代码:  function Ajax(url, date, callback) {   //链接-对象-函数回调var xhr = createXHR();             //获取ajax核心对象xhr.open("post", url, true)        //设置 请求方式-链接-异步xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //必填xhr.responseType = "json";         //返回的类型是json,否则文字为乱码xhr.send(getParams(date))          //send内填 对象转字符串拼接函数这里为上面正常的true异步判断接收数据}二, 对象转字符串拼接function getParams(obj) {         //获取一个对象,对象的名字根据url端口是否写死var str = "";                 //创建空对象for (const key in obj) {      //遍历对象str += key + "=" + obj[key] + "&";  //字符串拼接   结果为: uname=大佬&}return str;                   //把拼接好的结果返回给函数}

十三, PHP

一, PHP初体验什么是静态页面: 以html或htm结尾的文件,就是静态页面什么是动态页面: 静态页面里面嵌套了其他后台语言的标记,并且后缀为 php  jsp  aspx  asp注意: 后缀为php的页面不能浏览器直接运行,要经过服务器的php编译码,编译成html再输出到浏览器二, PHP写法  (每一行代码后面,都必须打 ; 分号)语法: <?php   (页面没有html代码的写法)      <?php ?>   (页面有html代码的写法)三, 创建元素写法$ 声明变量   $uname = "刘德华"print_r()   输出元素到页面,类似console.log()       print_r( $uname )var_dump()  查看一个元素的类型,类似typeOf()         var_dump( $uname ).  字符串的拼接方式,跟js里面的+一样->  什么里面的什么,跟js里面的.一样$arr = array("11",'22',33,true)     创建一个数组四, php的一些方法$_REQUEST["uname"];  判断接收的数据是什么协议GET为get协议   POST为post协议    REQUEST为两个协议都行json_encode($Arr);    把php数组,转成json字符串json_decode($Arr);   把json字符串转成数组array_push($Arr,$Arr1);   合并数组,把后面数组的内容添加到前面的数组里面去file_get_contents("./users.json");   读取本地json文件里面的数组file_put_contents("./users.json",字符串);  把一段字符串文件,传到本地数据文件里面去

1. JSONP原型

一, 什么是原型: 元素就是一个函数中自带的一个属性 (构造函数)每个函数都有一个prototype,这个属性是一个对象扩展: show.prototype.constructor === show      prototype里面的constructor就等于函数本身二, 原型的作用可以让同一个构造函数创建的所有对象共享属性和方法三, 判断构造函数里的一个数值时私有还是公有show.hasOwnProperty(aa)   私有返回true  没有或公有返回false  (但是它不知道到底有没有该值)(aa in show)              有该值就返回true    没有就返回false

2. 继承

一, 继承方式原型继承,父类的属性不能在子类里面初始化对象冒充继承,bind,call,apply,利用这三个方法,改变父类的this指向bind   改版函数this的指向   show.bind( obj ) 把show函数的this指向改为objcall   继承一个函数的属性    show.call(this,Name)    继承show函数的属性,用逗号隔开apply  继承一个函数的属性    show.apply(this,[Name]) 继承show函数的属性,中括号,逗号隔开二, 继承原型组合继承 == 原型继承 + 对象冒充寄生组合继承 == 寄生继承 + 对象冒充对象冒充    bind,call,apply                   //继承父类的所有属性原型继承    show.prototype = new DragBox()    //继承父类的所有方法   寄生继承    Object.create(base.prototype);    //继承父类的原型Object.create(); 窃取别人原型对象

十四, Jquery

一, 什么是Jqueryjquery是一个快速、小型且功能丰富的javascript库兼容多款浏览器, html文档遍历和操作、事件处理、动画和ajax三个版本 1.X/用于PC端    2.X//移动端    3.X/轻量级PC和移动端  jq实行同样的命令时,后面不会覆盖前面的二, 过滤选择器  $("li>li").css() css值为带单位的,写单位需要加""   不写单位不加""  nth-child(2n)   子标签的奇数或者偶数,或者第几个contains('牛')  标签文本中包含该文字的has(span)       某个标签是否有某个标签,有就直接设置>/空格 某个标签里面的某一个        ~/+  除了自己,拿到所有的兄弟odd 拿奇数                      even 拿偶数first 选取第一个标签             last 选取最后一个标签gt(2) 下标大于某个数的子标签       lt(2) 下标小于某个数的子标签eq(2) 拿到第几个                 not(li) 除了li都拿到empty 文本为空的                 parent 最近的父级标签selected   下拉列表选中的checked    表单按钮选中的[name='uname']   属性选择器,可以选择任何标签符合大括号里面的属性三, 属性选择器  $("li").parent().siblings("li")   除了自己以外的所有兄弟.parent()      查找最近的父级标签 .parents(li)    所有父级标签中叫li的.next()         下一个兄弟.prev()         上一个兄弟.preAll()        前面的所有.nextAll()       后面的所有.find("li")      某个标签里的所有某个标签.children()      某个标签里面的子元素.children(':last-child')     父级最后一个子标签.eq(index)       拿到下标元素( 多个兄弟才生效 ).index(1)        找下标  没有值就是获取到下标.children("ul")  父级里面的某些标签.append()        把某个内容放到哪去.prop("属性",true/false)   操作动态属性是否执行   只填属性,可以判断是否是执行的.html("")        把某个标签的内容都改掉    没参数为获取.text()          修改/获取/删除文本内容.empty()         清空盒子里面的内容.remove()        删除整个盒子.clone(true)     深克隆浅克隆    深拷贝会拷贝事件    浅拷贝会拷贝结构和样式 $(document).scrollTop    获取页面隐藏部分的高度.val()等于value()   获取文本内容.slice(0,3)       下标第0个到第三个,不包含3扩展: .end()链式属性里,返回到最初的元素.is(':checked') 判断某个按钮是否被选中四, 动画的属性针对样式操作addClass("")  给元素添加css样式名hasClass("")  判断元素是否有该class类名removeClass("")  删除某个元素的class类名  没参数全删除toggleClass("")  样式切换,样式有和无之间切换attr("属性","值")  给一个标签设置属性和值removeAttr("属性") 移除标签属性的值动画的样式 (两个参数时,第二个为回调函数)正常左上角显示隐藏show()        //显示hide()        //隐藏下拉式的方法slideDown()        //下拉式隐藏slideUp()          //下拉式展开slideToggle()      //两个之间切换淡入淡出的方法 fadeIn()           //显示fadeOut()          //隐藏fadeToggle         //切换fadeTo(1000,0.5)   //改变透明度,增加一个透明度选项自定义动画(第一个为内容,第二个时间,第三个回调函数)animate({},1000)    //正常移动动画    有四个时,第二个为动画匀速stop()             //每次停一次动画里面有true false 两个值  第一个为是否清空后续队列动画第二个为是否快速完成该次动画五, 创建一个标签元素$("<div>标签</div>")      //直接就创建了一个div$("body").append()       //把内容加到某个标签结尾  前父后子$("box").appendTo($("body"))  //最后添加一个标签   前子后父$("box").prependTo("body")    //放到第一个个     前子后父$("body").prepend()      //把内容加到某个标签开头     前父后子 $("li").before($div)     //插入到什么标签的前面   $("li").after($div)      //插入到什么标签的后面$("li").text(123)       //把标签里面的内容改掉,跟innertext一样六, 表单操作:checked    寻找表单按钮被选中的.val()等于value()     获取表单元素里面的内容.position()           获取定位元素的位置   只能获取.offset({属性:值})     设置元素到body的位置            加.left可以获取

1. jq事件

一, jq的委托绑定事件对象.bind("事件",函数)                   给对象绑定什么事件执行什么内容父级对象.delegate("对象","事件",函数)     父级下面的哪个对象绑定事件对象.on("事件",函数)                      给对象绑定什么事件执行什么内容父级.on("事件","对象",函数)                给对象绑定什么事件执行什么内容二, jq解绑事件$("body").off()      解绑所有跟body有关的事件   off("事件","对象")   解绑指定事件或者指定的对象off("事件","**")    除自己之外的所有对象解绑三, 其他事件resize   改变页面窗口大小事件preAll   获取一个标签前面的所有标签nextAll  获取一个标签后面的所有标签$(evt.currentTarget)   点击目标为当前的元素遍历事件 结束return false;   true是结束当前,继续下一次循环each((下标,值)=>{})       遍历一个内容each(对象,(下标,值)=>{})   可以遍历非jq数组map(对象,(下标,值)=>{})    可以遍历非jq数组,有返回值

2…jq动态版本和插件

一, jq使用版本的切换    .noConflict()当导入两个jq版本时,优先使用后面的,通过该功能,可以让一个符号使用前面的版本例子: $.noConFlict()   可以更改$的控制权指向二, jq插件的导入注意:需要导入在jq正常版本的后面,

十五, Git的操作

一, git的使用pwd        /查看当前路径ls         /查看当前坏境应用所有路径mkdir 名字 /创建一个文件夹 cd         /进入某一个路径cd ../     /返回上一级rm -rf     /删除和强制删除文件或者文件夹clear      /清屏touch .gitignore  /创建过滤文件touch index.html /创建一个文件vi index.html    /打开一个文件i 进入编辑状态    esc结束编辑       shift+: + wq 保存并退出二, 其他使用配置文件git init      创建一个空的暂存区,也就是隐藏的git文件夹git status    查看文件状态,如果是红色,就需要关联,或者过滤git add .     把当前目录里的文件和暂存区关联git commit -m '这次操作的注释'git config --global user.email   文件的邮箱,一台电脑只需要设置一次git config --global user.name    文件的名字,一台电脑只需要设置一次git config --list   查看配置文件git config --global --edit   编辑配置文件git reflog      查看历史编辑记录git reset --hard 编号   回到某次历史,进行编辑分支操作git branch     查看分支git checkout -b 分支名    新建一个分支git branch -d 分支名    删除一个分支git checkout '分支名'   切换到一个分支git merge 分支名     合并子分支(文件在一起)码云和git绑定,需要码云秘钥git remote add 名字 码云的SSH码    进行提交 ( 需要在码云创建一个仓库 )git push --force origin master   提交失败就强行提交git remote remove 名字  删除名字同步到码云git push -u --force 名字 master   第一次提交到码云第二次提交不需要 --force下载码云的文件git clone SSH地址

1. less和sass

一, less的安装使用( 注意:一个台电脑只需要安装一次 )第1步:   安装 cnpm 淘宝代理的npm镜像包 ( 选择第一行,等待安装 )第2步:   cnpm -v  版本号  查看是否安装成功第3步:   cnpm install -g less第4步:   lessc -v   查看是否安装完毕第5步:   lessc  ./src/index.less   ./src/index.css ( 同步文件 )二, sass的安装使用第1步:   gem sources ‐‐remove https://rubygems.org/  删除现有的,没有需要安装第2步:   ruby -v    查看安装的版本号第3步:   gem sources --add https://gems.ruby-china.com/ --removehttps://rubygems.org/     添加源码/安装第4步:   gem sources -l     打印是否替换成功,如果成功了   *** CURRENT SOURCES ***第5步:   sass ./sass/index.scss ./css/index.css    ( 同步文件 )同步方式: sass ‐‐style compressed ./test.sass ./test.csscompressed  压缩后的代码compact     简洁的css代码expanded    没有缩进的css代码nested      默认值css代码三, 安装gulp,一种流程化工具第1步:   cnpm install gulp -g      全局安装第2步:   gulp -v                   查看是否安装成功,版本号第3步:   目录下面创建  gulpfile.js/压缩文件   .gitignore/用来排除文件( git创建 )第4步:   cnpm init -y               配置一个管理工具,把配置文件还原第5步:   会自动生成 package.json 文件,里面会放置安装好的版本号第6步:   cnpm i gulp@3 --save-dev      生成配置文件第7步:   在  .gitignore    添加node_modules第8步:   gulp +名字    ( 安装好压缩的文件后,再运行 )第9步:   压缩文件的安装-引入: const gulp = require("gulp")第10步:  (html安装)百度搜索,npm,然后搜索gulp-htmlmin 找到并运行 cnpm install gulp-htmlmin --save-dev或者 cnpm i gulp-htmlmin -D第11步:  (sass安装)搜索gulp-sass  找到并运行 cnpm install node-sass gulp-sass --save-dev第12步:  (css安装) cnpm i gulp-clean-css gulp-autoprefixer --save-dev第13步:  创建css私有前缀,执行顺序需要再css压缩之前第14步:  (js安装) cnpm i gulp‐uglify gulp‐babel@7 babel‐preset‐env@1 ‐‐save‐dev第15步:  (兼容ES6) 创建一个 .babelrc文件(git创建)  里面填入 {"presets": ["env"] } 第16步:  (安装babel) cnpm i babel‐core@6.26.3 --save-dev ( 主要是ES6转ES5 )第17步:  (图片安装) cnpm i gulp‐imagemin ‐D提示:    如果发现报错,优先查看插件是否安装成功 ( package.json )      还有错误,查看关键词是否写错或者不匹配四, gulp的语法 ( 其他的八九不离十 )const sass = require('gulp-sass');    //引入主模块sass.compiler = require('node-sass');  //引入sass压缩模块gulp.task("sass", () => {gulp.src("./sass/*.scss").pipe(sass({}).on('error', sass.logError)).pipe(gulp.dest("./src/css"))})CSS添加私有前缀const autoprefixer = require('gulp-autoprefixer');   //引入主模块gulp.task('testAutoFx', function () {gulp.src('src/css/*.css').pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0'],cascade: true,         //是否美化属性值 默认：true 像这样：remove: true           //是否去掉不必要的前缀 默认：true})).pipe(gulp.dest('dist/css/'));});

十六, NodeJS

一, node基础知识name=require("模块名");     引入某个模块http /http模块                   url /url模块          querystring /qs模块              fs  /fs模块扩展:  安装插件( 可以实现自动刷新发布 )  cnpm i nodemon -gnodemon 页面名字.js     //可运行指定页面

一, http模块var http=require("http");     引入http模块//创建一个服务器,有人访问了,就执行里面的内容var server=http.createServer((request,response)=>{   //创建一个http响应服务//让浏览器以指定的格式和编码进行解析response.writeHead(200,{"Content-type":"text/html;charset=utf-8"})response.write("向浏览器发送的内容");        //返回给浏览器的内容response.end();                           //响应完了 结束})server.listen(8081,()=>{})    //监听,设置一个端口对应一个服务内容  回调函数判断是否在运行扩展: request  :浏览器通过http向服务器发送的东西response  :服务器接收到发送过来的东西,返回给浏览器的内容requset.url  浏览器向服务器请求的内容( get请求 )get请求: 传过来的数据直接显示在url上, requset.url可以直接拿到传输内容post请求: 传过来的数据url看不到,通过两个事件可以查看事件1: resuest.on('data',(aa)=>{ str+=aa })  //数据传输执行(n次)  aa为接收的数据提示: 数据分多次传输,需要拼接起来事件2: resuest.on('end',()=>{})  //数据传输完毕后执行(1次)二, url模块var URL=require("url");     引入url模块//假设一个链接var url = "http://127.0.0.1:8080/api/login?uname=abc123&upwd=123#abc"URL.parse(url)         //解析一个url链接,把链接的每个部分进行拆散URL.parse(url).query   //提取解析后的某一个内容 ( uname=abc123&upwd=123 )URL.parse(url,true).query  //把某个内容解析后,转为对象扩展: 一个完整的链接分别为http:                  声明头/协议      protocol127.0.0.1.8080         主机/服务器      host主机名字( hostname ):端口( port )/api/login             路径            pathname?uname=abc&upwd=123    传输内容(带问号)  searchuname=abc&upwd=123     传输内容         query#abc                                   hash三, querystring模块var qs = require("querystring");   引入qs模块//假设一个query字符串var url = "uname=abc&upwd=123&sex=男&sex=女"qs.parse(url,true)   //把接收的query字符串转成一个对象qs.stringify()       //把一个对象转成query字符串qs.unescape()        //把转字符串造成的文字乱码转文字qs.escape()          //把文字转乱码四, fs模块 (异步的回调函数 err 判断是否存在该文件,返回null)var fs = require("fs");   引入fs模块fs.readFile() // 读取文件异步语法: fs.readFile("index.js",'utf-8',(err,data)=>{})同步语法: fs.readFileSync("index.js") //异步读取会直接返回,不需要data扩展: 读取出来的文件内容是二进制数据,通过.toString()转换回调函数的data是读取到的内容,不过是二进制数据fs.writeFile()  //在一个文件里写入内容,只会写一次 (覆盖) (err没找到文件会自己创建)异步语法: fs.writeFile("index.css","写入的内容",(err)={ })  //写入了返回null同步语法: fs.writeFileSync("index.css","写入的内容")追加写入语法: 在回调函数前面加 {encoding:"utf-8",flag:"a"}fs.stat()   //检测是文件还是目录语法: fs.stat("./node",(err,state)={       if(err){ 没有该文件 }      //有该文件返回null  否则就是truestate.isDirectory()      //这是目录   是为true  否则为falsestate.isFile()           //这是目录   是为true  否则为false})fs.mkdir()  //创建一个文件夹 ( 有同步和异步 )异步语法: fs.mkdir("css",(err)=>{if(err){ 创建失败 }         //有该文件返回null  否则就是true})同步语法: fs.mkdirSync("css")         //如果没有该文件返回undefinedfs.appendFile()  //在一个文件里追加写入内容语法: fs.appendFile("index.css","写入的内容",{encoding:"utf-8"},(err)=>{})fs.rename() //重命名文件的名字语法: fs.rename("js","jsA",(err)=>{})    //现有的文件名和改后的文件名fs.unlink() //删除一个文件语法: fs.unlink("js",(err)=>{})

1.express框架

express项目生成器//创建跟目录文件夹//文件夹初始 npm init   然后安装express包//安装: npm install express-generator -g//创建项目 express 名字  然后安装依赖包和运行项目
一, 安装express框架 第一步:  npm init -y     //初始化一个环境第二步:  在项目目录下安装   cnpm i express --save-dev二, 开始使用( 先引入 )var express = require("express");   //引入express模块  var server = express();       //类似前面的http,建立一个服务器server.listen(8080)       //监听服务器端口var expressStatic=require("express-static")  //引入读取文件模块server.use(expressStatic('读取的文件'))  //让服务器读取哪个文件提示: 这样url访问的时候,会直接在读取的文件里面寻找//响应用户的请求后做什么( get请求和post请求都可以 )server.all('/index.html',(request,reponse)=>{reponse.send("向浏览器发送的内容");        //返回给浏览器的内容reponse.end()                           //服务器响应完了,结束})//get请求或者post请求 后做什么   all为两个请求都支持   use使用某个中间件server.get("/index.html",(request, response, next)=>{request.query()                         //拿到用户名和密码 ( 对象格式 )})request   发送给服务器的url(含每个部分)  request.query 拿到get请求的用户名和密码response  服务器返回给浏览器, 该模式下   response.json() 可直接把对象转字符串next      执行某个服务内容后,继续往下走   next()    //该服务执行完毕,去下一个服务params    能单独拿到query前面的id部分   reuest.params.id  也是访问端口后面的:id

2. express框架-中间件

一, 安装插件第一步: npm init -y第二步: cnpm i express --save-dev     //安装express框架第三步: cnpm i body-parser --save-dev第四步: cnpm install cookie-parser --save-dev    //安装cookie中间件二, 引入模块( 多个 )var bodyParser=require("body-parser");三, 配置中间件server.use(bodyParser.urlencoded({  //use为使用该配置limit:"500mb",                //设置传输的数据大小extended:false                   //是否使用扩展}));//通过use启用中间件的一些插件server.use(bodyParser.json());      //让浏览器发送的json也支持四, cookie中间件的配置1. server.use(cookieParser("JM"))    //配置的时候加密,防止被修改,不加密去掉 "JM"2. res.cookie("avc123","123456")     //服务器向浏览器发送的内容加密方式: 后面加{signed:true}  启用加密3. req.signedCookies      //服务器接收浏览器带来的cookie  加密的方式4. req.cookies            //服务器接收浏览器带来的cookie  未加密的方式

3. 自定义中间件/模块

一, 本地创建require  外部引入模块   require("./md")  //需要加./ 除非是放在模块文件夹里面exports  输出一个变量   exports.str   //输出str这个变量,外部可以引用module   批量输出变量   module.exports={ 内容或者执行函数 }调用: const db = require("./libs/DbHlper") //默认加载index.js语法: module.exports={   //往外暴露一个对象,这样外部可以直接通过路径引用url(){           //闭包函数return function(req,res,next){req.on("data",(data)=>{})        //post请求多次获取传输内容req.on("end",()=>{ next() })    //获取完,返回出去,然后继续往下走}}}二, 模块提交初始化模块信息 npm init   //然后填写模块名字,版本,描述,主文件地址,

4. cookie

一, 下载引入( npm网站搜索 )cnpm install cookie-parser --save-dev        //下载var cookieParser = require("cookie-parser")  //引入二, cookie的一些设置server.use(cookieParser("JM"))    //配置的时候加密,防止被修改,不加密去掉 "JM"res.cookie("avc123","123456");    //服务器向浏览器发送的时候添加,在服务里面(不启用加密)加密写法:  {signed:true}  传输内容后面再增加一个对象( 有多个信息 )maxAge:1000毫秒     path:./www    //指定目录下访问该网页才能读取req.signedCookies    //读取所有带签名加密的cookie内容req.cookies          //读取所有不带签名的cookie内容res.redirect("/login");  //页面地址的跳转

5. session

一, 下载引入( npm网站搜索 )cnpm install cookie-session --save-dev        //下载var cookieSession = require("cookie-session")  //引入二, session的一些设置server.use(cookieSession({name: "1000phone",              //设置秘钥keys: ["aaa", "bbb", "ccc"],    //三个秘钥随机使用,更安全maxAge: 1000 * 60 * 20          //如果超过20分钟,不发送请求到服务器,cookie也消失}));req.session["currentUser"];  //获取或存储session里面的内容,跟cookie差不多值是一个对象{ uname: 'abc123', upwd: '123456' }

十七, 数据库

-- 数据库的脚本 后缀是 .sql-- 插入语句
-- insert into 表名称 (字段,...)values('值',...)
INSERT INTO userinfo (u_name,u_pwd,u_sex)VALUES('abc123','123','男')-- 查询语句( 查询一个表 )
-- 语法 select * from 表名称
SELECT*FROM userinfo-- 查询的登陆  ( and==&& )  查询断数据  前面设置展现哪些内容
SELECT `u_id`,`u_name`,`u_sex` FROM userinfo WHERE u_name='abc123' AND u_pwd='123'-- 修改  where 用于接调剂  根据id修改某个信息
UPDATE `userinfo` SET u_sex='女' WHERE u_id=1-- 删除  根据id删除一段数据
DELETE FROM `userinfo` WHERE u_id=1-- 软删除,不是物理删除,拒绝物理删除
SELECT*FROM userinfo WHERE u_status=1-- 所谓的软删除就是把状态改成0
UPDATE userinfo SET u_status=1 WHERE u_id=1

1. sql数据库连接

一, 与SQL数据库的连接cnpm i mysql --save-dev    //引入sql模块,才能连接到数据库var conn = mysql.createConnection({        //1.创建数据库连接host: 'localhost',      //SQL主机user: 'root',           //用户名password: '',           //密码database: 'cs1905',      //数据库名字port: 3306           //端口号})conn.connect();         //2.连接数据库  里面有回调函数错误先行//登陆接口//3.准备sql语句( 也就是前面sql的一些命令 )var sql = "SELECT * FROM userinfo WHERE u_name=? AND u_pwd=? AND u_status='1';"//4.执行sql语句conn.query(sql, [req.query.uname,req.query.upwd], (err, result, fields) =>{//准备的sql语句 - 参数(传输过来的内容) - 回调函数(错误,结果,字段)if (result.length >= 1) {      //5.拿到sql结果,判断结果,大于等于1,就表示拿到数据了//result 是在数据库查询到的返回结果res.json({             //返回一些状态msg: '登陆成功',status: 1,data: { u_id, u_name, u_sex }           //把登陆成功的账号,性别返回出去})}}//注册接口//3. 准备sql语句( 也就是前面sql的一些命令 )var sql = "INSERT INTO userinfo (u_name,u_pwd,u_sex)VALUES(?,?,?)"//4. 执行sql语句conn.query(sql, [req.query.uname, req.query.upwd], (err, result, fields) =>{if (err) {                  //判断,如果跟数据库相同,就报错res.json({msg: '执行异常',status: -3,err: err.message    //返回错误的详细信息( 用户名什么的已存在 )})return;}conn.destroy(); //释放连接  创建一次数据库连接就释放掉if (result.affectedRows >= 1) {     //判断受影响行数是否为1 res.json({msg: '注册成功',status: 2})}}

2. 图片的传输

一, 模块的引入   安装: cnpm install multer --save-devconst path = require("path");   //获取文件的扩展名模块const multer = require("multer");  //引入图片上传功能模块二, 配置模块//设置图片的目标路径 ( 会自动在根目录生成文件 ) 也是上传访问的路径const upload = multer({          //设置图片的目标路径dest: "./public"})app.use(upload.any())  //全部的上传路径都可以传任何文件//配置静态服务器 中间件app.use(express.static("./public/"))   //可以随意访问该文件夹的内容//解决跨域问题app.use("*", (req, res, next) => {req.header("Access-Control-Allow-Origin", "*")next()})//设置图片上传,  使用req.files拿到图片的一些信息// upload.any() 只给这个路径配置的方法,可以上传任何文件app.post("/upload",upload.any(),(req,res,next)=>{// 如果req.files.length为0 就是上传失败//获取到图片的传输地址+文件扩展名//path得到文件路径和名字     path.extname模块方法获取到文件的扩展名var newPath=req.files[0].path+path.extname(req.files[0].originalname)//用fs模块来重命名文件 fs.rename(req.files[0].path,newPath,(err)=>{//err报错就是有找到文件名  否则就是上传成功}}三, JQ实现图片的预览功能$("#file").on("change", function () {      //上传文件标签内容进行改变时执行var fr = new FileReader();             //读取上传的文件的数据fr.readAsDataURL(this.files[0])        //将文件以数据URI的形式保存在result属性中fr.onload = function (e) {             //文件数据读取完成后触发事件var ele = e.target || e.srcElement;$("#img").attr("src",ele.result)     //ele.result是图片的本体  并设置到IMG}})

3. 路由

一, 路由的介绍路由就是一个管理工具,,用来管理某个路径二, 路由的设置1. 先引入express模块  且创建服务import express from "express"   //一种新的引入方式 需要babel才能识别1.1 安装babel-cli来识别新的语法 cnpm install babel-cli babel-preset-env --save-dev安装预设cnpm i babel-plugin-transform-runtime --save-devcnpm i babel-runtime --save-dev1.2 创建 .babelrc文件,里面填入{"presets": ["env"],"plugins": ["transform-runtime"]}1.3 修改 package.json 配置文件里面的 scripts   然后执行 npm start"test": "echo \"Error: no test specified\" && exit 1","start": "nodemon --exec babel-node app.js"  //app为文件名2. 创建一个路由   const userRoute=express.Router({   //可添加审核要求,也可以不添加caseSensitive:false,           //区分大小写strict:true                   //严格模式});3. 用来解析文字乱码app.use("*",(request,response,next)=>{response.header("Content-Type","text/html;charset=utf-8")    next()})4. 给路由管理的路径( 以及里面的子路径 )app.use("/users",userRoute);      //userRoute与创建路由名字对应5. 让路由管理的子路径userRoute.get("/add/:id",(request,response,next)=>{console.log(request.params.id)  //params跟query差不多, params可以获取纯数字   response.end("恭喜")})

JavaScript的相关知识与问题相关推荐

【JavaScript】相关知识学习笔记
JavaScript笔记定义: JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言. 特点: 01.向HTML页面中添加交互行为 02.脚本语言,语法跟java类似 ...
javascript高级相关知识
本文旨在加深对前端知识点的理解,资料来源于网络. 一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何 ...
JavaScript运动相关知识
1.定时器(异步的多次) let id = setInterval(function(){},毫秒值) clearInterval(id) 2.延时器 (异步的执行一次) setTimeout(f ...
【提高系列】webpack相关知识
这次我们主要研究的是webpack框架的相关知识,webpack是一个打包构建的前端框架,用于解决前端开发的模块化问题. 应用场景和纵向比较说到webpack,肯定你还会想到gulp和grunt这些 ...
JavaScript -- ajax相关知识点的笔记
Ajax相关知识更详尽:看这一篇就够了!-Ajax详解_抱着猫睡觉的鱼_的博客-CSDN博客视频地址:[黑马程序员AJAX零基础到精通_整合Git核心内容全套教程] https://www.bili ...
狂补呼叫中心相关知识，将收集的资料贴于此
狂补呼叫中心相关知识,将收集的资料贴于此: H.323的协议体系根据1998年H.323第二版,H.323制定了无QoS(服务质量)保证的分组网络 PBN(packet Based Networks ...
（转载）技术族谱：软件开发相关知识体系的整理心得（图）
每隔一段时间,就会收到些类似的消息: 怎么学好软件开发? 我已经学完了A,我接下来该学B还是C? 其实这样的问题,真的是一言难复.如何学习,是一个很复杂的话题,尤其是眼下业内的技术名词日新月异,乱花迷 ...
Java入门与实践——计算机相关知识科普
计算机相关知识科普 Computer: 全称是电子计算机,俗称电脑, 能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备由硬件和软件组成常见的形式有台式计算机.笔记本计算机.大型计算机( ...
Java学习笔记 0、计算机相关知识了解
文章目录前言一.计算机基本知识 1.认识CPU 2.认识内存二.三大定律三.IT两大鼻祖四.万维网五.windows下的常用命令六.各类语言及应用七.各种进制数四个进制介绍原码.反 ...

JavaScript的相关知识与问题

最初的样子

一,JS的基础

1,变量

二,运算符和进制

1.分支运算语法/Math

2.循环运算

三,函数

1.事件驱动

四,数组

五,字符串

六,日期/时间

七,对象

八,BOM的属性

1.元素节点

九, 事件

1. 事件的冒泡

2. 事件监听器

3. cookie

4. JSON

5. 正则表达式

十, ES5-ES6新增

1. ES5 数组新增

2. ES6新增

2. ES6 字符串新增

3. ES6其他

4. 动画

十一, 面向对象

1. 闭包

十二, Ajax

1. 同步和异步

2. 服务器查询用户名

3. POST请求

十三, PHP

1. JSONP原型

2. 继承

十四, Jquery

1. jq事件

2…jq动态版本和插件

十五, Git的操作

1. less和sass

十六, NodeJS

1.express框架

2. express框架-中间件

3. 自定义中间件/模块

4. cookie

5. session

十七, 数据库

1. sql数据库连接

2. 图片的传输

3. 路由

JavaScript的相关知识与问题相关推荐

最新文章

热门文章