`网页标题 * `<body>`网页主体 * `<p>` 段落 * `<h1>~<h6>` 标题 * `<a>` 超链接 * href 链接地址 * target 打开方式 `_blank` * `<img>` 图像 * src 图像路径 * `<font>` 字体样式 * size 字体大小(数字) * color 字体颜色(16进制颜色值 || 英文单词) * align 水平方向的对齐方式(left || right || center) * `<strong>` 字体加粗 * `<i>` 倾斜 * `<hr>` 水平线 * width 宽度 * size 高度 * align 水平方向对齐方式(left || right || center) * color 颜色 * `<ul>` 无序列表 * `<ol>` 有序列表 * `<li>` 列表项 * `<div>` 区域 ### 路径相对路径： coser-alita.jpg 绝对路径： C:\Users\admin\Desktop\coser-alita.jpg ### 路径操作符 `文件夹名/` 进入某个文件夹 `../` 退出当前文件夹返回上一级 ### 转义： * ` ` 空格 * `>` > * `<` < ### 表格 * `table` 表格 * border 边框(数字) * cellspacing 单元格外边距(数字) * cellpadding 单元格内填充(数字) * width 宽度(数字可加%单位) * align * bordercolor 边框颜色 * `thead` 表头 * `tbody` 表格主体 * `tr` 行 * `td` 单元格 * rowspan 单元格可纵跨的个数 * colspan 单元格可横跨的个数 * `th` 标题单元格 ### 表单 * input 输入 * type 类型 * text 文本框 * password 密码框 * radio 单选按钮 * checkbox 多选按钮 * button 按钮 * submit 提交 * reset 重置 * number 数字 * date 日期 * placeholder 文本占位符 * textarea 文本域 * select 下拉选择菜单 * option 选择项 * button 按钮 #### 特殊的表单通用属性 * placeholder 文本占位符 * readonly 只读的 * disabled 失效的 * selected 默认被选中所属于option标签 * checked 默认被选中所属于单选/多选按钮 ## CSS部分 ### CSS引入方式 1.内部样式：在`<head>`中写一个`<style>`标签，把css代码写到`<style>`内部。 2.外部样式:css作为一个单独的css文件，然后在HTML中利用<link>标签将css文件引入进来。 3.内联样式（行内样式） ### 选择器 1.标签选择器(`p`,`a`,`h1`)：在页面中选取所有与标签选择器相匹配的元素 2.类选择器(`.类名`):在页面中选择所有元素的class属性与类名相匹配的元素 3.包含选择器(选择器选择器) 4.通配符(*) 选取所有元素 5:伪类选择器(选择器:hover,选择器:focus) 当鼠标移动到匹配元素时，匹配元素需要执行的样式 6:ID选择器(#ID名)匹配页面中id属性的属性值与#后面的值相一致的元素 7:交集选择器(选择器选择器选择器....) 8:子元素选择器(选择器>选择器) ### CSS属性 * color(字体颜色):10进制颜色值||16进制颜色值||颜色英文单词 * font-size(字体大小):数字+单位(px || em || rem) * font-weight(字体粗细):normal || bold * text-decoration(字体修饰):underline(下划线) || none(没有) * font-family(字体):"字体名" * text-indent(首行缩进):数字+单位(px || em) * background-color(背景颜色) * width(宽):数字+单位(px || em || %) * height(高) * padding(内填充) * border(边框):粗细样式(solid || dashed) 颜色 * `border:2px solid #f99` * margin(外边距) * margin-left * margin-bottom * margin-right * margin-top * float(浮动)：left || right || none * list-style(文本修饰):none * display(显示方式):inline(行内) || block(块) || none * text-align(文本水平对齐方式):left || right || center * line-height(行高):数字+单位 * background-image(背景图片):url(路径) * background-repeat(背景图片重复方式):repeat || no-repeat || repeat-x || repeat-y * background-position(背景位置):数字+单位(px || %) * background-size(背景图片大小):数字+单位(px || %) * overflow(溢出处理方式):visible(可见的) || hidden(隐藏的) || scroll(滚动的) * opacity(不透明度):0~1 数字 * visibility(可见性):visible || hidden * position(定位):relative(相对的) || absolute(绝对的) || fixed(固定的) || static(静态的) * transition:all 数字+单位(s || ms) * cursor(光标):pointer(手型) * border-radius(圆角) * box-shadow(阴影):水平偏移量垂直偏移量模糊半径阴影颜色 * transform(变换):方法(值) * translate(移动) * rotate(旋转):数字+单位(deg) * scale(缩放) * transform-orgin(变换轴心) * animation(动画):动画名持续时间执行次数(infinite) 延迟时间速率(linear) * z-index(层级关系)：数字 ` @keyframes 动画名{ 0%{ } 100%{ } } ` ### 块级元素与行内元素 #### 块级元素：默认宽度100%，默认独占一行，可以为其设置width,height,padding,border以及margin属性。 #### 行内元素：默认宽度自动，默认并排显示，不可以为其设置上述属性。 * `<a>` * `<i>` * `<strong>` * `<input>` * `<select>` * `<img>` * `<textarea>` ### CSS盒模型：一个元素在页面中需要占据多大的位置。 ### 如果哪个元素在调试工具中查看没有高度，那么就给该元素设置overflow:hidden属性就好了。 ## 高度坍塌 ### 触发原因：当一个元素它的所有子元素都为浮动元素时，那么该元素的高度不会被它的子元素们所撑开。 ### 解决办法： * 1.给坍塌元素设置overflow:hidden属性; * 2.在坍塌元素结束标签之前添加一个空的div标签并为其设置clear:both属性; * 3.利用伪元素选择器实现.. * 4.直接给父级元素设置高度; ### 边距传递和边距重合 #### 边距重合：当两个正常文档流内的元素垂直方向的外边距发生碰撞的时候，最终外边距所呈现的结果是两者之间的最大值而非两者相加之和。 #### 边距传递：当一个元素的第一个子元素是正常文档流内的元素且设置了上边距时，此时最终的效果看起来这个边距就像是传递给了它的父级元素一样。 ### css选择器优先级计算机制：如果有多个选择器对同一个元素声明过相同的样式，那么最后执行的结果一定是听其中某一个选择器的，具体听哪个选择器要看该选择器权重的计算分值，这个分值的计算算法是标签选择器为1分，class为10分，id为100分，其他选择器由组成该选择器的所有最小单元的分值累加之和作为该选择器的最终权重分。当权重分相同的情况下，执行就近原则（谁在下面听谁的）。另外如果某个属性拥有!important操作符的话，该属性将无视它所在选择器的权重分直接提升为最大。 ## 定位 ### 相对定位： * 1.要移动该元素，则该元素在正常文档流内所在的位置是移动之前的原始位置，而移动之后的效果只是视觉效果并不会影响其他元素,它的参照物的该移动之前的原位置。 * 2.作为某个绝对定位子孙级元素的参照物存在。 ### 绝对定位：脱离正常文档流，从该元素开始逐层向上寻找它的祖先级元素，直到找到一个position属性为relative的祖先级元素时停止寻找，此时绝对定位的元素会根据刚刚找到的那个祖先级元素进行定位。如果直到body标签都没有发现有某个祖先级元素的position属性的属性值为relative，此时绝对定位的元素将会根据body（整个页面）进行定位。 ## PS * 选区工具：M * 魔棒：W * 返回上一步：Alt+Ctrl+Z * 取消当前选区：Ctrl + D * 填充前景色：Alt + DEL * 填充背景色：Ctrl + DEL * 自由变换：Ctrl + T * 渐变工具：G * 仿制图章工具：S * 钢笔： P * 将路径转换为选区：Ctrl + Enter ### 图片格式 * jpg：色彩还原度非常好，文件大小略大，不支持透明。 * png8：色彩还原度比较好，文件大小比较小，支持透明色。 * png24:支持半透明。 * gif：支持动画 ## javascript部分 #### 标识符：变量名，函数名，对象的属性名的命名规则，以英文字母、数字、下划线以及$组成，其中数字不能作为第一个字符。 #### 关键字：系统级的标识符，一旦某个标识符预先被js所占用了，那么该标识符就被叫成关键字，并且此标识符不能再被用作变量名，函数名或对象的属性名。 #### 保留字：js目前还没用到的关键字，但有可能以后会用到，所以现在不允许开发者作为标识符使用。 #### 变量：存储数据的容器。` var 变量名=值 `,` var a1 = 5 ` #### 常量(字面量)：值本身。 #### 表达式：一切拥有返回值的短语都是表达式。 * 简单表达式：表达式的最小单元。 * 复杂表达式：可以被拆分为若干个表达式的构成。 #### 表达式的副作用:如果某个表达式它的存在与否会对整个js上下文运算结果造成一定影响的表达式，我们将它称之为有副作用的表达式。 #### 运算符：将简单表达式组成复杂表达式的方法。 * 一元运算符 * 二元运算符 * 三元运算符 #### 数据类型 * number 数字 1,1.5,,2,3,4,5,-1,-2,0,1000,NaN(非数字),Infinity,-Infinity * string 字符串 "abc","王大伟","李旭","$+=","1a","1","NaN","","true" * boolean 布尔值 true false * undefined 空值 undefined * Object 对象 #### 测试常用的方法 * `alert(exp)` 向浏览器系统的提示框中弹出一个值 * `console.log(exp)` 将表达式的返回值输出到控制台 * `document.write(exp)` 向页面输入表达式的返回值 `document.write("<br>")换行` * `typeof(exp)` 返回表达式返回值的数据类型的字符串 ``` if(exp){ 代码段 } ------------------- if(exp){ 代码段1 } else{ 代码段2 } for(exp1;exp2;exp3){ 代码段 } ``` ### 数据类型的转换 * Number(exp): * String除了纯数字的字符串以外，所有转换结果都为NaN。 * Boolean：true为1，false为0 * undefined：NaN * String(exp):全部按照字面量的形式进行转换。 * Boolean(exp): * String：除了空字符串以外，所有情况皆为true。 * Number：除了0和NaN以外，所有情况皆为true。 * undefined：false ### 数组：数据的有序集合；拥有Array.length特性用来返回数组的长度；拥有数组下标的特性Array[数字]，用来提取数组中第n个的数组成员。 * Array.push(exp) 向数组尾端插入新成员 * Array.pop() 删除数组尾端的第一个成员 * Array.unshift(exp) 向数组前端插入新成员 * Array.shift() 删除数组前端的第一个成员 ### 函数：一段可以被高度复用的代码段。 ```js // 声明函数 function 函数名(形参1,形参2,形参3...){ // 函数体 } // 调用函数函数名(实参1,实参2,实参3....) ``` #### 参数集合arguments:类数组，有下标特性，有.length。 #### retrun：代表执行函数表达式的返回值，当函数运行到return语句时，会忽略return下面的函数体内部的所有语句。 ### Object(对象) #### 对象的声明 ```js var o = { name:"王大伟", age:18, // 方法 sayName:function(){ alert(1) } }; ``` #### 对象的查找 ```js var o = { name:"王大伟", age:18 }; console.log(o.name) console.log(o["name"]) ``` #### 对象的修改 ```js var o = { name:"王大伟", age:18, sex:"male" }; // 添加 o.city = "朝阳"; o["city"] = "朝阳" // 修改 o.age = 20; o["age"] = 20; // 删除对象属性 delete o.sex ``` #### 对象属性的检测 ```js var o = { name:"王大伟", age:18, sex:"male" }; console.log("sex1" in o) ``` ### 对象的枚举 ```js var o = { name:"王大伟", age:18, sex:"male" }; for(var i in o){ console.log(i) //属性名 console.log(o[i]) //属性值 } ``` ### DOM #### document * getElementById("id名") 通过ID查找元素，返回一个Node节点 * getElementsByTagName("标签名") 通过标签名查找元素，返回的是一个NodeList * getElementsByClassName("类名") 通过标签名查找元素，返回的是一个NodeList * querySelectorAll("css选择器") 通过css选择器查找元素，返回的是一个NodeList * createElement("标签名") 返回一个新的Node节点 #### Node节点 * className 修改/获取元素的class属性的属性值 * innerHTML 修改/获取元素开始标签到结束标签之间的内容 * style 修改/获取元素的行内样式 * getElementsByTagName() * getElementsByClassName() * querySelectorAll() * setAttribute(name,value) 向node节点添加自定义行内属性 * getAttribute(name) * nodeName 获取node节点的标签名 * nodeType 节点类型 1是元素节点 * parentNode 获取父级Node节点 * nextElementSibling 一个元素后面邻近的兄弟节点 * previousElementSibling 前面的 * childNodes 返回Node节点的所有子元素 * firstElementChild 返回Node节点的第一个子元素 * lastElementChild 返回Node节点的最后一个子元素 * removeChild(node) 删除node节点 * appendChild(node) 插入节点到某个元素的内部（在结束标签之前） * insertBefore(插入的node节点,参照物的node节点) * cloneNode(true) 返回Node的副本 ##### 事件 ```js Node.onclick = function(){ this } ``` * onfocus() 当获取焦点时 * onblur() 当失去焦点时 ### 键盘事件 * onkeyup * onkeydown * onkeypress ### 鼠标事件 * onclick * onmouseover * onmouseout * onmouseenter * onmouseleave * onmousemove * onmousedown * onmouseup #### 事件对象 ##### 键盘事件的事件对象 * keyCode ##### 鼠标事件的事件对象 * clientX 相对于浏览器边缘的位置 * clientY 相对于浏览器边缘的位置 * offsetX 相对于触发事件元素的左上顶点的位置 * offsetY 相对于触发事件元素的左上顶点的位置 * screenX 相对于显示器边缘的位置 * screenY 相对于显示器边缘的位置 * target 触发事件最深层次最精确的Node节点 #### 事件的传播机制 * 捕获阶段：从外向内 * 目标阶段：最深层次的元素 * 冒泡阶段：从内向外 ### 事件监听addEventListener ``` javascript // 在捕获阶段触发第三个参数是true node.addEventListener("去on的事件名",function(){ },true||false) ``` #### window:代表整个页面; #### NodeList 类数组：若干个Node节点的集合，如果通过数组下标的形式把其中某一个元素提取出来，那么该元素就是Node节点. ### this * this出现在事件处理函数（事件句柄），所指向的就是触发该事件的Node节点。 * 出现在一般函数里或全局作用域下，指向的是window * 出现在对象的方法里，指向的是该对象。 * 出现构造函数里，指向的实例化对象。 ### 计时器 * setTimeout(function,number) * setInterval(function,number) * clearTimeout(id) * clearInterval(id) ### Math 对象 random() 返回0-1之间的一个随机小数 ceil() 向上取整 floor() 向下取整 round() 四舍五入 abs() 绝对值 ### Date 对象 getFullYear() 返回年份 getMonth() 返回月份 getDate() 返回日期 getDay() 返回星期几 (星期日会返回0) getHours() 返回小时 getMinutes() 返回分数 getSeconds() 返回秒数 getTime() 1970年1月1日0时0分0秒到现在所经过的毫秒数（时间戳） ### String 对象 * charAt() * concat() * indexOf() * lastIndexOf() * replace() * slice() * substr() * substring() * toLowerCase() * toUpperCase() * split() ### Array 对象 * push() * pop() * unshift() * shift() * splice() * reverse() * slice() ### 网络相关技术词汇 * IP地址：192.168.0.3 内网IP：192.168.0.3 公网IP：xxx.xxx.xxx.xxx * 端口：每一台电脑有65535个端口 * 域名：www.xxx.xxx * DNS解析：将域名 -> IP地址的过程 * 协议名： ### 网站上线前准备 1.WebServer：让你自己的电脑能向外部打开你的80号端口，当别人敲了你的第80号端口时，你会给别人信息的功能。 IIS，Apache,nginx 2.拥有独立IP ### Ajax：前后端数据通信，本质是JS中XMLHttpReuqest对象。 ``` 1.实例化XMLHttpReuqest对象 var http = new XMLHttpRequest(); 2.规划一个请求 http.open(请求方式,url地址,同步/异步) http.open("GET","http://192.168.0.3/xxx.txt",true) 3.发送请求 http.send() 4.接收来自后端的返回 http.responseText ``` ```javascript // 发送异步请求 txt.onkeyup = function(){ var http = new XMLHttpRequest() http.open("GET","http://192.168.0.3/name.php?name=" + this.value); http.send() // 当响应状态发生改变时 http.onreadystatechange = function(){ if(http.readyState === 4){ // 当接受来自服务器端的响应时处理的事儿 } } } ``` ### 异步请求和同步请求： #### 同步：如果没有接到服务器端的响应，此时程序会卡死直到成功接受到来自服务器的响应程序才会继续向下执行。 #### 异步：程序不会卡死。 ### jsonp:不是一种技术，不是Ajax，它是前后端配合解决跨域的一种手段。工作机制：前端使用script标签引入外部资源的方式创建一次HTTP请求，并且实现声明好后调函数，回调函数的名字会附加在请求的callback参数中。后端预先接收好来自前端发送的callback请求的参数，然后拼接成一段js语法形式的执行函数的代码段，并将返回数据以实参的形式返回前端。当前端接收到来自后端的响应时会自动调用预先声明好的回调函数，此时形参就代表服务器端返回的数据。 #### jQuery:类库 ##### jQuery的核心方法 ``` 1.根据css选择器返回页面所对应的元素（jQuery对象） $("css选择器") 2.将Node节点或NodeList转换为jQuery对象 $(node 或者 Nodelist) 3.根据html代码段生成对应的jQuery对象,类似document.createElement() $("html代码段") $("<h2 class='hello'>我是个标题</h2>") 4.类似于window.onload事件 $(function(){ }) ``` ### jQuery对象的本质：由Node组成的一个类数组，如果通过数组下标的形式将其中的某一个元素从中提取出来，那么提取之后的结果就是Node节点（源生js对象）。 #### jQuery对象下的方法： * html() 设置、获取元素开始标签与结束标签之间的内容 * val() 设置/获取元素的value属性 * addClass() 追加类名 * removeClass() 移除类名 * toggleClass() 追加/移除类名 * hasClass() 检测是否含有类名 true || false * css() 设置获取元素的行内样式 * animate() 动画 ``` $(".wrap").animate({ height:500 },3000,function(){ console.log("当动画执行完毕之后执行这个函数") }) ``` ``` //设置 jQuery对象.css({ color:"#ff0000", fontSize:"20px" }) //获取 $("#list").css("backgroundColor") ``` * remove() 删除元素 * clone(true) 克隆节点，true参数代表连同事件一块儿克隆 * append(参数1) 等价于appendChild，参数接收jQuery对象或者是源生js对象 * appendTo() * insertBefore() * closest("css选择器") 逐层向上寻找祖先级元素 * find("css选择器") 逐层向下寻找子孙级元素 * attr() 获取/设置元素的自定义属性 ``` // 获取jQuery对象标签的data-index属性的属性值 jQuery对象.attr("data-index") // 获取设置jQuery对象标签的data-index属性的属性值 jQuery对象.attr("data-index","aaa") ``` * show() * hide() * toggle() * fadeIn(speed,function(){}) * fadeOut(speed,function(){}) * fadeToggle(speed,function(){}) * slideDown(speed,function(){}) * slideUp(speed,function(){}) * slideToggle(speed,function(){}) #### jQuery对象绑定事件 ``` jQuery对象.去on的事件名(function(){ 事件处理函数 }) $("li").click(function(){ // 代表的还是原生js对象不是jQuery对象 this }) ``` ### jQuery Ajax ``` $.ajax({ method:"GET", url:"http://49.235.82.222/name.php", // 发送jsonp请求 dataType:"jsonp", data:{ name:"a", sex:18 }, success:function(data){ } }) ``` #### 本地存储 ##### cookie ``` //设置cookie var date = new Date("2020-10-01 00:00:00"); document.cookie = "name=wangdawei;expires=" + date // 设置cookie function setCookie(opt){ if(typeof opt.date === "number"){ var date = new Date(); date.setDate(date.getDate() + opt.date); } else{ date = opt.date; } document.cookie = opt.key + "=" + opt.value + ";expires=" + date; return getCookie() } // 获取cookie function getCookie(key){ var arr = document.cookie.split(";") var cookieObject = {}; for(var i = 0; i < arr.length;i++){ cookieObject[arr[i].split("=")[0].replace(" ","")] = arr[i].split("=")[1] } if(key){ return cookieObject[key]; } else{ return cookieObject; } } // 删除cookie function removeCookie(key){ var date = new Date(); date.setDate(date.getDate() - 1) if(key){ setCookie({ key:key, value:"0", expires:date }) } else{ var cookies = getCookie(); for(var i in cookies){ setCookie({ key:i, value:0, expires:date }) } } } ``` ##### localStorage ``` localStorage.setItem() localStorage.getItem() localStorage.removeItem() localStorage.clear() ``` #### cookie和localStorage和SessionStorage有什么区别 ##### cookie可以设置过期时间，操作麻烦，兼容性好。 ##### localStorage操作简单，过期时间是无限的，兼容性不好IE8以上才支持。 ##### SessionStorage不是永久性存储，只要关掉浏览器，数据就清掉了。 ### SQL:一种与数据库通信的语言; #### 数据库的数据类型 * int 整形（整数） * float 浮点型（小数） * double 双精浮点型（特别长的小数） * varchar 字符串 #### sql语句常见操作： #### 增删查改(CROD)： ```sql -- 查询 -- 查所有 SELECT * FROM 表名 -- 带有条件的查询 SELECT * FROM 表名 WHERE 字段名="某值" -- 从结果中筛选出某个字段 SELECT 字段名,字段名 FROM 表名 WHERE 字段名="某值" -- 增 INSERT INTO 表名 (字段名,字段名....) VALUES ("某值","某值"....) -- 删除 DELETE FROM 表名 WHERE 字段名="某值"; UPDATE 表名 SET 列名=新值,列名=新值 WHERE 列名称=某值 OR AND -- 排序 ORDER BY -- 模糊查询 LIKE ``` ## ES6新语法 ### 箭头函数：改变this指向，箭头函数本身不形成一个影响this的封闭作用域，它里面的this会穿透本层到达上一层函数中，上一层this指向哪箭头函数里面的this就会同样指向哪。 ```javascript function fn(a,b){ } var fn = (a,b)=>{ } // 如果只有一个参数 function (a){ console.log(a + 1) } a => console.log(a + 1) function (a){ return a + 1 } a => a + 1 ``` ## nodejs ```javascript //引入模块 require("模块名") ``` ```javascript // http 和网络相关 var network = require("http"); // 开启本机的8080端口向外提供web服务 // 当有客户机向我这台服务器的8080端口发送请求时，我会向他返回一个"success!!!!!!" // var count = 1; // network.createServer(function(request,response){ // console.log("接受到来自前端的请求,这是第" + count++ + "次请求"); // // 向前端返回一段数据 // response.end("success!!!!!!") // }).listen(8080) ``` ``` // fs 和文件的操作相关 var fs = require("fs"); // 读取文件(异步) // fs.readFile("test.txt",(error,data)=>{ // if(error){ // console.log(error) // } // else{ // console.log(String(data)) // } // }) // 同步读取文件 // console.log(String(fs.readFileSync("test.txt"))) // 写入、修改文件 // fs.writeFile("shuju/data.txt","hello world!!!!",(error)=>{ // if(error){ // console.log("写入失败") // } // else{ // console.log("写入成功") // } // }) // 写入修改同步 // fs.writeFileSync("hello.txt","hi~") // for(var i = 1; i < 20000;i++){ // console.log("正在尝试第" + i + "写入....") // fs.writeFile("shuju/data" + i + ".txt","hello world!!!!",(error)=>{ // if(error){ // console.log("写入失败") // } // else{ // console.log("第" + i + "次写入成功") // } // }) // } ``` #### 下载第三方模块 ``` npm install 模块名 express express-static mysql ejs ``` ### Vue #### MVVM开发模式:相对于传统的MVP开发模式，关注点从面向DOM到面向数据。 * Model(数据模型) data * View(视图) html页面 * VM(桥梁) VueJs核心 ### Vue实例化对象过程中的参数 ```javascript var root = new Vue({ //css选择器,页面中哪个元素需要被Vue接管 el:"", // 数据模型，此处的所有数据都可以再视图中被访问到。 data:{}, // 所有事件处理函数的集合,在视图中用 @事件名来为元素绑定各种事件 methods:{ fn1(){ // 当前Vue实例化对象,等价于root this // 访问vue实例化对象的data属性的某个属性值 this.数据模型 }, fn2(){ } //.... } }) ``` ### Vue指令:一个非标准的HTML属性。 * v-for 通过数据模型循环元素 * v-if 通过数据模型来决定该节点是否生成 * v-show 通过数据模型来决定该节点是否显示 * v-model 让表单元素的value值与数据模型中的某个值相对应。 * v-text 等价于在标签内使用插值表达式 * v-html 相当于解析HTML标签的v-text * v-bind 将某一个自定义或标准的HTML属性的属性值以JS表达式的形式被解析 ```html <h2 v-bind:class="a"></h2> <h2 :class="a"></h2> ``` ### computed计算属性：如果在页面中需要一个数据模型，而这个数据模型在data中又不存在，它需要一套复杂的计算逻辑才能得出值，在这种情况下我们不像将具体的计算逻辑代码写到视图的插值表达式中，而是写到computed计算属性里。 ### HTTP请求工具：axios ```javascript axios.post("http://127.0.0.1/data.txt",{ params:{ username:"王大伟", password:"a123436" } }).then((response)=>{ console.log(response.data) }) ``` ### components组件：就是页面中一块儿抽象的区域，这块区域中的数据模型、变量、事件...都是独立的。好处是：1.分工协作非常方便；2.组件复用起来非常方便。 ### 全局组件 ### 局部组件 ### 组件之间的值的传递 #### 父组件向子组件传值是以自定义属性的方式传递，在子组件中用props属性接收来自父组件传递的值。 #### 子组件向父组件传值是在子组件中使用$emit方法帮助父组件触发一个自定义事件，然后将要传递给父组件的值用参数传递过去。 ### ES6 * let和const:let和const有块级作用域的概念，并且不参与变量提升的操作;const代表声明常量，一旦声明就无法改变了。 * 函数参数的默认值,箭头函数 * 模板字符串 * Set * 数组的扩展方法： * indexOf() * lastIndexOf() * forEach() * map() * js模块化 * class类 #### 构造函数：高阶函数，用来生成对象的一个模具。 ``` // 构造函数 // new关键字做了些什么？ // 1.在构造函数中声明了一个空对象 // 2.将构造函数中的this重定向到声明的空对象 // 3.在函数体最后return了这个空对象 function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } // prototype:一般来说构造函数通用的属性或方法都会写在构造函数的prototype属性里 Person.prototype.type = "灵长类"; // 实例化对象 var wdw = new Person("王大伟",18,"男"); var cxz = new Person("曹志武",19,"男"); // constructor:属性实例化对象的属性，它会返回该实例化对象的构造函数的引用 // console.log(wdw.constructor) // console.log(wdw) // console.log(wdw.__proto__ === wdw.constructor.prototype) ``` #### call和apply ``` call：帮助我们调用函数的方法。执行函数并改变这次执行函数中的this指向 fn.call(1) fn.call(1,5,10) apply:和call是一样的，apply只有2个参数，第二个参数代表调用时传入的实参的集合。 fn.apply(1) fn.apply(1,[5,10]) ``` #### JS中的继承 ``` function Person(name,age,sex){ this.name = name; this.sex = sex; this.age = age; } Person.prototype.type = "灵长类"; Person.prototype.sayHello = function(){ alert(this.name) } var wdw = new Person("王大伟",18,"男"); console.log(wdw) function SuperMan(name,age,sex,skill){ // 继承Person类里面的所有的私有属性和私有方法 // Person.apply(this,[name,age,sex]) Person.call(this,name,age,sex) this.skill = skill; } // 继承Person类的原型属性和原型方法 SuperMan.prototype = new Person() SuperMan.prototype.lv = 0; var spiderMan = new SuperMan("蜘蛛侠",18,"男","吐丝"); ``` #### ES6的class ``` function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.sayName = function(){ alert(this.name) } class Person{ constructor(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } sayName(){ alert(this.name); } } // es6的继承 class Person{ constructor(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } sayName(){ alert(this.name); } } class SuperMan extends Person{ constructor(name,age,sex,leval){ // 继承父类的私有属性 super(name,age,sex); this.leavl = leval; } skill(){ alert("放大招了！！") } } var wdw = new Person("王大伟",18,"男"); var spiderMan = new SuperMan("蜘蛛侠",18,"男",10) console.log(spiderMan) ``` ### SVN和GIT：版本控制系统 * git init 初始化仓库 * git status 查看仓库状态 * git add <文件名> 将文件从工作区提交到缓冲区 * git add -A 将工作区中所有修改过或没有追踪到的文件全部提交到缓冲区 * git config --global user.name “你的用户名” * git config --global user.email “你的邮箱” * ssh-keygen -t rsa -C "你的邮箱" 生成秘钥 * git commit -m "提交注释" 将缓冲区内的文件提交到版本库 * git diff <文件名> 追踪修改的内容 * git log 查看提交日志 * git reflog 查看所有的操作日志（回到未来） * git reset --hard <版本id> 将整个工作区回退到某一个版本状态 * git push 将本地库推送到远程库 * git clone <远程库地址> 将远程库拉取到本地 * git pull 将远程库最近的版本更新到本地库上 ### 百度地图LBS ### VANT移动端组件库 ### VueCli ### grunt ### 项目

# biji3 **Repository Path**: wangdawei0418/biji3 ## Basic Information - **Project Name**: biji3 - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-05-26 - **Last Updated**: 2021-01-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## HTML部分 ### HTML语法 <标签名属性名="属性值" 属性名="属性值"..>内容 <标签名属性名="属性值" .... /> ### HTML语言特点 1. 标签分为开始标签和结束标签，开始与结束之间的部分叫内容; 2. 如果某一组(a)标签存在于另外一组标签(b)之内，我们会把a标签叫做b标签的子标签或子元素，反之b是a的父标签或父元素； 3. 忽略所有制表符与换行符，连续的空格只识别其中的一个； ### HTML标签 * ``整个页面 * ``网页头部 * ``网页标题 * `<body>`网页主体 * `<p>` 段落 * `<h1>~<h6>` 标题 * `<a>` 超链接 * href 链接地址 * target 打开方式 `_blank` * `<img>` 图像 * src 图像路径 * `<font>` 字体样式 * size 字体大小(数字) * color 字体颜色(16进制颜色值 || 英文单词) * align 水平方向的对齐方式(left || right || center) * `<strong>` 字体加粗 * `<i>` 倾斜 * `<hr>` 水平线 * width 宽度 * size 高度 * align 水平方向对齐方式(left || right || center) * color 颜色 * `<ul>` 无序列表 * `<ol>` 有序列表 * `<li>` 列表项 * `<div>` 区域 ### 路径相对路径： coser-alita.jpg 绝对路径： C:\Users\admin\Desktop\coser-alita.jpg ### 路径操作符 `文件夹名/` 进入某个文件夹 `../` 退出当前文件夹返回上一级 ### 转义： * ` ` 空格 * `>` > * `<` < ### 表格 * `table` 表格 * border 边框(数字) * cellspacing 单元格外边距(数字) * cellpadding 单元格内填充(数字) * width 宽度(数字可加%单位) * align * bordercolor 边框颜色 * `thead` 表头 * `tbody` 表格主体 * `tr` 行 * `td` 单元格 * rowspan 单元格可纵跨的个数 * colspan 单元格可横跨的个数 * `th` 标题单元格 ### 表单 * input 输入 * type 类型 * text 文本框 * password 密码框 * radio 单选按钮 * checkbox 多选按钮 * button 按钮 * submit 提交 * reset 重置 * number 数字 * date 日期 * placeholder 文本占位符 * textarea 文本域 * select 下拉选择菜单 * option 选择项 * button 按钮 #### 特殊的表单通用属性 * placeholder 文本占位符 * readonly 只读的 * disabled 失效的 * selected 默认被选中所属于option标签 * checked 默认被选中所属于单选/多选按钮 ## CSS部分 ### CSS引入方式 1.内部样式：在`<head>`中写一个`<style>`标签，把css代码写到`<style>`内部。 2.外部样式:css作为一个单独的css文件，然后在HTML中利用<link>标签将css文件引入进来。 3.内联样式（行内样式） ### 选择器 1.标签选择器(`p`,`a`,`h1`)：在页面中选取所有与标签选择器相匹配的元素 2.类选择器(`.类名`):在页面中选择所有元素的class属性与类名相匹配的元素 3.包含选择器(选择器选择器) 4.通配符(*) 选取所有元素 5:伪类选择器(选择器:hover,选择器:focus) 当鼠标移动到匹配元素时，匹配元素需要执行的样式 6:ID选择器(#ID名)匹配页面中id属性的属性值与#后面的值相一致的元素 7:交集选择器(选择器选择器选择器....) 8:子元素选择器(选择器>选择器) ### CSS属性 * color(字体颜色):10进制颜色值||16进制颜色值||颜色英文单词 * font-size(字体大小):数字+单位(px || em || rem) * font-weight(字体粗细):normal || bold * text-decoration(字体修饰):underline(下划线) || none(没有) * font-family(字体):"字体名" * text-indent(首行缩进):数字+单位(px || em) * background-color(背景颜色) * width(宽):数字+单位(px || em || %) * height(高) * padding(内填充) * border(边框):粗细样式(solid || dashed) 颜色 * `border:2px solid #f99` * margin(外边距) * margin-left * margin-bottom * margin-right * margin-top * float(浮动)：left || right || none * list-style(文本修饰):none * display(显示方式):inline(行内) || block(块) || none * text-align(文本水平对齐方式):left || right || center * line-height(行高):数字+单位 * background-image(背景图片):url(路径) * background-repeat(背景图片重复方式):repeat || no-repeat || repeat-x || repeat-y * background-position(背景位置):数字+单位(px || %) * background-size(背景图片大小):数字+单位(px || %) * overflow(溢出处理方式):visible(可见的) || hidden(隐藏的) || scroll(滚动的) * opacity(不透明度):0~1 数字 * visibility(可见性):visible || hidden * position(定位):relative(相对的) || absolute(绝对的) || fixed(固定的) || static(静态的) * transition:all 数字+单位(s || ms) * cursor(光标):pointer(手型) * border-radius(圆角) * box-shadow(阴影):水平偏移量垂直偏移量模糊半径阴影颜色 * transform(变换):方法(值) * translate(移动) * rotate(旋转):数字+单位(deg) * scale(缩放) * transform-orgin(变换轴心) * animation(动画):动画名持续时间执行次数(infinite) 延迟时间速率(linear) * z-index(层级关系)：数字 ` @keyframes 动画名{ 0%{ } 100%{ } } ` ### 块级元素与行内元素 #### 块级元素：默认宽度100%，默认独占一行，可以为其设置width,height,padding,border以及margin属性。 #### 行内元素：默认宽度自动，默认并排显示，不可以为其设置上述属性。 * `<a>` * `<i>` * `<strong>` * `<input>` * `<select>` * `<img>` * `<textarea>` ### CSS盒模型：一个元素在页面中需要占据多大的位置。 ### 如果哪个元素在调试工具中查看没有高度，那么就给该元素设置overflow:hidden属性就好了。 ## 高度坍塌 ### 触发原因：当一个元素它的所有子元素都为浮动元素时，那么该元素的高度不会被它的子元素们所撑开。 ### 解决办法： * 1.给坍塌元素设置overflow:hidden属性; * 2.在坍塌元素结束标签之前添加一个空的div标签并为其设置clear:both属性; * 3.利用伪元素选择器实现.. * 4.直接给父级元素设置高度; ### 边距传递和边距重合 #### 边距重合：当两个正常文档流内的元素垂直方向的外边距发生碰撞的时候，最终外边距所呈现的结果是两者之间的最大值而非两者相加之和。 #### 边距传递：当一个元素的第一个子元素是正常文档流内的元素且设置了上边距时，此时最终的效果看起来这个边距就像是传递给了它的父级元素一样。 ### css选择器优先级计算机制：如果有多个选择器对同一个元素声明过相同的样式，那么最后执行的结果一定是听其中某一个选择器的，具体听哪个选择器要看该选择器权重的计算分值，这个分值的计算算法是标签选择器为1分，class为10分，id为100分，其他选择器由组成该选择器的所有最小单元的分值累加之和作为该选择器的最终权重分。当权重分相同的情况下，执行就近原则（谁在下面听谁的）。另外如果某个属性拥有!important操作符的话，该属性将无视它所在选择器的权重分直接提升为最大。 ## 定位 ### 相对定位： * 1.要移动该元素，则该元素在正常文档流内所在的位置是移动之前的原始位置，而移动之后的效果只是视觉效果并不会影响其他元素,它的参照物的该移动之前的原位置。 * 2.作为某个绝对定位子孙级元素的参照物存在。 ### 绝对定位：脱离正常文档流，从该元素开始逐层向上寻找它的祖先级元素，直到找到一个position属性为relative的祖先级元素时停止寻找，此时绝对定位的元素会根据刚刚找到的那个祖先级元素进行定位。如果直到body标签都没有发现有某个祖先级元素的position属性的属性值为relative，此时绝对定位的元素将会根据body（整个页面）进行定位。 ## PS * 选区工具：M * 魔棒：W * 返回上一步：Alt+Ctrl+Z * 取消当前选区：Ctrl + D * 填充前景色：Alt + DEL * 填充背景色：Ctrl + DEL * 自由变换：Ctrl + T * 渐变工具：G * 仿制图章工具：S * 钢笔： P * 将路径转换为选区：Ctrl + Enter ### 图片格式 * jpg：色彩还原度非常好，文件大小略大，不支持透明。 * png8：色彩还原度比较好，文件大小比较小，支持透明色。 * png24:支持半透明。 * gif：支持动画 ## javascript部分 #### 标识符：变量名，函数名，对象的属性名的命名规则，以英文字母、数字、下划线以及$组成，其中数字不能作为第一个字符。 #### 关键字：系统级的标识符，一旦某个标识符预先被js所占用了，那么该标识符就被叫成关键字，并且此标识符不能再被用作变量名，函数名或对象的属性名。 #### 保留字：js目前还没用到的关键字，但有可能以后会用到，所以现在不允许开发者作为标识符使用。 #### 变量：存储数据的容器。` var 变量名=值 `,` var a1 = 5 ` #### 常量(字面量)：值本身。 #### 表达式：一切拥有返回值的短语都是表达式。 * 简单表达式：表达式的最小单元。 * 复杂表达式：可以被拆分为若干个表达式的构成。 #### 表达式的副作用:如果某个表达式它的存在与否会对整个js上下文运算结果造成一定影响的表达式，我们将它称之为有副作用的表达式。 #### 运算符：将简单表达式组成复杂表达式的方法。 * 一元运算符 * 二元运算符 * 三元运算符 #### 数据类型 * number 数字 1,1.5,,2,3,4,5,-1,-2,0,1000,NaN(非数字),Infinity,-Infinity * string 字符串 "abc","王大伟","李旭","$+=","1a","1","NaN","","true" * boolean 布尔值 true false * undefined 空值 undefined * Object 对象 #### 测试常用的方法 * `alert(exp)` 向浏览器系统的提示框中弹出一个值 * `console.log(exp)` 将表达式的返回值输出到控制台 * `document.write(exp)` 向页面输入表达式的返回值 `document.write("<br>")换行` * `typeof(exp)` 返回表达式返回值的数据类型的字符串 ``` if(exp){ 代码段 } ------------------- if(exp){ 代码段1 } else{ 代码段2 } for(exp1;exp2;exp3){ 代码段 } ``` ### 数据类型的转换 * Number(exp): * String除了纯数字的字符串以外，所有转换结果都为NaN。 * Boolean：true为1，false为0 * undefined：NaN * String(exp):全部按照字面量的形式进行转换。 * Boolean(exp): * String：除了空字符串以外，所有情况皆为true。 * Number：除了0和NaN以外，所有情况皆为true。 * undefined：false ### 数组：数据的有序集合；拥有Array.length特性用来返回数组的长度；拥有数组下标的特性Array[数字]，用来提取数组中第n个的数组成员。 * Array.push(exp) 向数组尾端插入新成员 * Array.pop() 删除数组尾端的第一个成员 * Array.unshift(exp) 向数组前端插入新成员 * Array.shift() 删除数组前端的第一个成员 ### 函数：一段可以被高度复用的代码段。 ```js // 声明函数 function 函数名(形参1,形参2,形参3...){ // 函数体 } // 调用函数函数名(实参1,实参2,实参3....) ``` #### 参数集合arguments:类数组，有下标特性，有.length。 #### retrun：代表执行函数表达式的返回值，当函数运行到return语句时，会忽略return下面的函数体内部的所有语句。 ### Object(对象) #### 对象的声明 ```js var o = { name:"王大伟", age:18, // 方法 sayName:function(){ alert(1) } }; ``` #### 对象的查找 ```js var o = { name:"王大伟", age:18 }; console.log(o.name) console.log(o["name"]) ``` #### 对象的修改 ```js var o = { name:"王大伟", age:18, sex:"male" }; // 添加 o.city = "朝阳"; o["city"] = "朝阳" // 修改 o.age = 20; o["age"] = 20; // 删除对象属性 delete o.sex ``` #### 对象属性的检测 ```js var o = { name:"王大伟", age:18, sex:"male" }; console.log("sex1" in o) ``` ### 对象的枚举 ```js var o = { name:"王大伟", age:18, sex:"male" }; for(var i in o){ console.log(i) //属性名 console.log(o[i]) //属性值 } ``` ### DOM #### document * getElementById("id名") 通过ID查找元素，返回一个Node节点 * getElementsByTagName("标签名") 通过标签名查找元素，返回的是一个NodeList * getElementsByClassName("类名") 通过标签名查找元素，返回的是一个NodeList * querySelectorAll("css选择器") 通过css选择器查找元素，返回的是一个NodeList * createElement("标签名") 返回一个新的Node节点 #### Node节点 * className 修改/获取元素的class属性的属性值 * innerHTML 修改/获取元素开始标签到结束标签之间的内容 * style 修改/获取元素的行内样式 * getElementsByTagName() * getElementsByClassName() * querySelectorAll() * setAttribute(name,value) 向node节点添加自定义行内属性 * getAttribute(name) * nodeName 获取node节点的标签名 * nodeType 节点类型 1是元素节点 * parentNode 获取父级Node节点 * nextElementSibling 一个元素后面邻近的兄弟节点 * previousElementSibling 前面的 * childNodes 返回Node节点的所有子元素 * firstElementChild 返回Node节点的第一个子元素 * lastElementChild 返回Node节点的最后一个子元素 * removeChild(node) 删除node节点 * appendChild(node) 插入节点到某个元素的内部（在结束标签之前） * insertBefore(插入的node节点,参照物的node节点) * cloneNode(true) 返回Node的副本 ##### 事件 ```js Node.onclick = function(){ this } ``` * onfocus() 当获取焦点时 * onblur() 当失去焦点时 ### 键盘事件 * onkeyup * onkeydown * onkeypress ### 鼠标事件 * onclick * onmouseover * onmouseout * onmouseenter * onmouseleave * onmousemove * onmousedown * onmouseup #### 事件对象 ##### 键盘事件的事件对象 * keyCode ##### 鼠标事件的事件对象 * clientX 相对于浏览器边缘的位置 * clientY 相对于浏览器边缘的位置 * offsetX 相对于触发事件元素的左上顶点的位置 * offsetY 相对于触发事件元素的左上顶点的位置 * screenX 相对于显示器边缘的位置 * screenY 相对于显示器边缘的位置 * target 触发事件最深层次最精确的Node节点 #### 事件的传播机制 * 捕获阶段：从外向内 * 目标阶段：最深层次的元素 * 冒泡阶段：从内向外 ### 事件监听addEventListener ``` javascript // 在捕获阶段触发第三个参数是true node.addEventListener("去on的事件名",function(){ },true||false) ``` #### window:代表整个页面; #### NodeList 类数组：若干个Node节点的集合，如果通过数组下标的形式把其中某一个元素提取出来，那么该元素就是Node节点. ### this * this出现在事件处理函数（事件句柄），所指向的就是触发该事件的Node节点。 * 出现在一般函数里或全局作用域下，指向的是window * 出现在对象的方法里，指向的是该对象。 * 出现构造函数里，指向的实例化对象。 ### 计时器 * setTimeout(function,number) * setInterval(function,number) * clearTimeout(id) * clearInterval(id) ### Math 对象 random() 返回0-1之间的一个随机小数 ceil() 向上取整 floor() 向下取整 round() 四舍五入 abs() 绝对值 ### Date 对象 getFullYear() 返回年份 getMonth() 返回月份 getDate() 返回日期 getDay() 返回星期几 (星期日会返回0) getHours() 返回小时 getMinutes() 返回分数 getSeconds() 返回秒数 getTime() 1970年1月1日0时0分0秒到现在所经过的毫秒数（时间戳） ### String 对象 * charAt() * concat() * indexOf() * lastIndexOf() * replace() * slice() * substr() * substring() * toLowerCase() * toUpperCase() * split() ### Array 对象 * push() * pop() * unshift() * shift() * splice() * reverse() * slice() ### 网络相关技术词汇 * IP地址：192.168.0.3 内网IP：192.168.0.3 公网IP：xxx.xxx.xxx.xxx * 端口：每一台电脑有65535个端口 * 域名：www.xxx.xxx * DNS解析：将域名 -> IP地址的过程 * 协议名： ### 网站上线前准备 1.WebServer：让你自己的电脑能向外部打开你的80号端口，当别人敲了你的第80号端口时，你会给别人信息的功能。 IIS，Apache,nginx 2.拥有独立IP ### Ajax：前后端数据通信，本质是JS中XMLHttpReuqest对象。 ``` 1.实例化XMLHttpReuqest对象 var http = new XMLHttpRequest(); 2.规划一个请求 http.open(请求方式,url地址,同步/异步) http.open("GET","http://192.168.0.3/xxx.txt",true) 3.发送请求 http.send() 4.接收来自后端的返回 http.responseText ``` ```javascript // 发送异步请求 txt.onkeyup = function(){ var http = new XMLHttpRequest() http.open("GET","http://192.168.0.3/name.php?name=" + this.value); http.send() // 当响应状态发生改变时 http.onreadystatechange = function(){ if(http.readyState === 4){ // 当接受来自服务器端的响应时处理的事儿 } } } ``` ### 异步请求和同步请求： #### 同步：如果没有接到服务器端的响应，此时程序会卡死直到成功接受到来自服务器的响应程序才会继续向下执行。 #### 异步：程序不会卡死。 ### jsonp:不是一种技术，不是Ajax，它是前后端配合解决跨域的一种手段。工作机制：前端使用script标签引入外部资源的方式创建一次HTTP请求，并且实现声明好后调函数，回调函数的名字会附加在请求的callback参数中。后端预先接收好来自前端发送的callback请求的参数，然后拼接成一段js语法形式的执行函数的代码段，并将返回数据以实参的形式返回前端。当前端接收到来自后端的响应时会自动调用预先声明好的回调函数，此时形参就代表服务器端返回的数据。 #### jQuery:类库 ##### jQuery的核心方法 ``` 1.根据css选择器返回页面所对应的元素（jQuery对象） $("css选择器") 2.将Node节点或NodeList转换为jQuery对象 $(node 或者 Nodelist) 3.根据html代码段生成对应的jQuery对象,类似document.createElement() $("html代码段") $("<h2 class='hello'>我是个标题</h2>") 4.类似于window.onload事件 $(function(){ }) ``` ### jQuery对象的本质：由Node组成的一个类数组，如果通过数组下标的形式将其中的某一个元素从中提取出来，那么提取之后的结果就是Node节点（源生js对象）。 #### jQuery对象下的方法： * html() 设置、获取元素开始标签与结束标签之间的内容 * val() 设置/获取元素的value属性 * addClass() 追加类名 * removeClass() 移除类名 * toggleClass() 追加/移除类名 * hasClass() 检测是否含有类名 true || false * css() 设置获取元素的行内样式 * animate() 动画 ``` $(".wrap").animate({ height:500 },3000,function(){ console.log("当动画执行完毕之后执行这个函数") }) ``` ``` //设置 jQuery对象.css({ color:"#ff0000", fontSize:"20px" }) //获取 $("#list").css("backgroundColor") ``` * remove() 删除元素 * clone(true) 克隆节点，true参数代表连同事件一块儿克隆 * append(参数1) 等价于appendChild，参数接收jQuery对象或者是源生js对象 * appendTo() * insertBefore() * closest("css选择器") 逐层向上寻找祖先级元素 * find("css选择器") 逐层向下寻找子孙级元素 * attr() 获取/设置元素的自定义属性 ``` // 获取jQuery对象标签的data-index属性的属性值 jQuery对象.attr("data-index") // 获取设置jQuery对象标签的data-index属性的属性值 jQuery对象.attr("data-index","aaa") ``` * show() * hide() * toggle() * fadeIn(speed,function(){}) * fadeOut(speed,function(){}) * fadeToggle(speed,function(){}) * slideDown(speed,function(){}) * slideUp(speed,function(){}) * slideToggle(speed,function(){}) #### jQuery对象绑定事件 ``` jQuery对象.去on的事件名(function(){ 事件处理函数 }) $("li").click(function(){ // 代表的还是原生js对象不是jQuery对象 this }) ``` ### jQuery Ajax ``` $.ajax({ method:"GET", url:"http://49.235.82.222/name.php", // 发送jsonp请求 dataType:"jsonp", data:{ name:"a", sex:18 }, success:function(data){ } }) ``` #### 本地存储 ##### cookie ``` //设置cookie var date = new Date("2020-10-01 00:00:00"); document.cookie = "name=wangdawei;expires=" + date // 设置cookie function setCookie(opt){ if(typeof opt.date === "number"){ var date = new Date(); date.setDate(date.getDate() + opt.date); } else{ date = opt.date; } document.cookie = opt.key + "=" + opt.value + ";expires=" + date; return getCookie() } // 获取cookie function getCookie(key){ var arr = document.cookie.split(";") var cookieObject = {}; for(var i = 0; i < arr.length;i++){ cookieObject[arr[i].split("=")[0].replace(" ","")] = arr[i].split("=")[1] } if(key){ return cookieObject[key]; } else{ return cookieObject; } } // 删除cookie function removeCookie(key){ var date = new Date(); date.setDate(date.getDate() - 1) if(key){ setCookie({ key:key, value:"0", expires:date }) } else{ var cookies = getCookie(); for(var i in cookies){ setCookie({ key:i, value:0, expires:date }) } } } ``` ##### localStorage ``` localStorage.setItem() localStorage.getItem() localStorage.removeItem() localStorage.clear() ``` #### cookie和localStorage和SessionStorage有什么区别 ##### cookie可以设置过期时间，操作麻烦，兼容性好。 ##### localStorage操作简单，过期时间是无限的，兼容性不好IE8以上才支持。 ##### SessionStorage不是永久性存储，只要关掉浏览器，数据就清掉了。 ### SQL:一种与数据库通信的语言; #### 数据库的数据类型 * int 整形（整数） * float 浮点型（小数） * double 双精浮点型（特别长的小数） * varchar 字符串 #### sql语句常见操作： #### 增删查改(CROD)： ```sql -- 查询 -- 查所有 SELECT * FROM 表名 -- 带有条件的查询 SELECT * FROM 表名 WHERE 字段名="某值" -- 从结果中筛选出某个字段 SELECT 字段名,字段名 FROM 表名 WHERE 字段名="某值" -- 增 INSERT INTO 表名 (字段名,字段名....) VALUES ("某值","某值"....) -- 删除 DELETE FROM 表名 WHERE 字段名="某值"; UPDATE 表名 SET 列名=新值,列名=新值 WHERE 列名称=某值 OR AND -- 排序 ORDER BY -- 模糊查询 LIKE ``` ## ES6新语法 ### 箭头函数：改变this指向，箭头函数本身不形成一个影响this的封闭作用域，它里面的this会穿透本层到达上一层函数中，上一层this指向哪箭头函数里面的this就会同样指向哪。 ```javascript function fn(a,b){ } var fn = (a,b)=>{ } // 如果只有一个参数 function (a){ console.log(a + 1) } a => console.log(a + 1) function (a){ return a + 1 } a => a + 1 ``` ## nodejs ```javascript //引入模块 require("模块名") ``` ```javascript // http 和网络相关 var network = require("http"); // 开启本机的8080端口向外提供web服务 // 当有客户机向我这台服务器的8080端口发送请求时，我会向他返回一个"success!!!!!!" // var count = 1; // network.createServer(function(request,response){ // console.log("接受到来自前端的请求,这是第" + count++ + "次请求"); // // 向前端返回一段数据 // response.end("success!!!!!!") // }).listen(8080) ``` ``` // fs 和文件的操作相关 var fs = require("fs"); // 读取文件(异步) // fs.readFile("test.txt",(error,data)=>{ // if(error){ // console.log(error) // } // else{ // console.log(String(data)) // } // }) // 同步读取文件 // console.log(String(fs.readFileSync("test.txt"))) // 写入、修改文件 // fs.writeFile("shuju/data.txt","hello world!!!!",(error)=>{ // if(error){ // console.log("写入失败") // } // else{ // console.log("写入成功") // } // }) // 写入修改同步 // fs.writeFileSync("hello.txt","hi~") // for(var i = 1; i < 20000;i++){ // console.log("正在尝试第" + i + "写入....") // fs.writeFile("shuju/data" + i + ".txt","hello world!!!!",(error)=>{ // if(error){ // console.log("写入失败") // } // else{ // console.log("第" + i + "次写入成功") // } // }) // } ``` #### 下载第三方模块 ``` npm install 模块名 express express-static mysql ejs ``` ### Vue #### MVVM开发模式:相对于传统的MVP开发模式，关注点从面向DOM到面向数据。 * Model(数据模型) data * View(视图) html页面 * VM(桥梁) VueJs核心 ### Vue实例化对象过程中的参数 ```javascript var root = new Vue({ //css选择器,页面中哪个元素需要被Vue接管 el:"", // 数据模型，此处的所有数据都可以再视图中被访问到。 data:{}, // 所有事件处理函数的集合,在视图中用 @事件名来为元素绑定各种事件 methods:{ fn1(){ // 当前Vue实例化对象,等价于root this // 访问vue实例化对象的data属性的某个属性值 this.数据模型 }, fn2(){ } //.... } }) ``` ### Vue指令:一个非标准的HTML属性。 * v-for 通过数据模型循环元素 * v-if 通过数据模型来决定该节点是否生成 * v-show 通过数据模型来决定该节点是否显示 * v-model 让表单元素的value值与数据模型中的某个值相对应。 * v-text 等价于在标签内使用插值表达式 * v-html 相当于解析HTML标签的v-text * v-bind 将某一个自定义或标准的HTML属性的属性值以JS表达式的形式被解析 ```html <h2 v-bind:class="a"></h2> <h2 :class="a"></h2> ``` ### computed计算属性：如果在页面中需要一个数据模型，而这个数据模型在data中又不存在，它需要一套复杂的计算逻辑才能得出值，在这种情况下我们不像将具体的计算逻辑代码写到视图的插值表达式中，而是写到computed计算属性里。 ### HTTP请求工具：axios ```javascript axios.post("http://127.0.0.1/data.txt",{ params:{ username:"王大伟", password:"a123436" } }).then((response)=>{ console.log(response.data) }) ``` ### components组件：就是页面中一块儿抽象的区域，这块区域中的数据模型、变量、事件...都是独立的。好处是：1.分工协作非常方便；2.组件复用起来非常方便。 ### 全局组件 ### 局部组件 ### 组件之间的值的传递 #### 父组件向子组件传值是以自定义属性的方式传递，在子组件中用props属性接收来自父组件传递的值。 #### 子组件向父组件传值是在子组件中使用$emit方法帮助父组件触发一个自定义事件，然后将要传递给父组件的值用参数传递过去。 ### ES6 * let和const:let和const有块级作用域的概念，并且不参与变量提升的操作;const代表声明常量，一旦声明就无法改变了。 * 函数参数的默认值,箭头函数 * 模板字符串 * Set * 数组的扩展方法： * indexOf() * lastIndexOf() * forEach() * map() * js模块化 * class类 #### 构造函数：高阶函数，用来生成对象的一个模具。 ``` // 构造函数 // new关键字做了些什么？ // 1.在构造函数中声明了一个空对象 // 2.将构造函数中的this重定向到声明的空对象 // 3.在函数体最后return了这个空对象 function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } // prototype:一般来说构造函数通用的属性或方法都会写在构造函数的prototype属性里 Person.prototype.type = "灵长类"; // 实例化对象 var wdw = new Person("王大伟",18,"男"); var cxz = new Person("曹志武",19,"男"); // constructor:属性实例化对象的属性，它会返回该实例化对象的构造函数的引用 // console.log(wdw.constructor) // console.log(wdw) // console.log(wdw.__proto__ === wdw.constructor.prototype) ``` #### call和apply ``` call：帮助我们调用函数的方法。执行函数并改变这次执行函数中的this指向 fn.call(1) fn.call(1,5,10) apply:和call是一样的，apply只有2个参数，第二个参数代表调用时传入的实参的集合。 fn.apply(1) fn.apply(1,[5,10]) ``` #### JS中的继承 ``` function Person(name,age,sex){ this.name = name; this.sex = sex; this.age = age; } Person.prototype.type = "灵长类"; Person.prototype.sayHello = function(){ alert(this.name) } var wdw = new Person("王大伟",18,"男"); console.log(wdw) function SuperMan(name,age,sex,skill){ // 继承Person类里面的所有的私有属性和私有方法 // Person.apply(this,[name,age,sex]) Person.call(this,name,age,sex) this.skill = skill; } // 继承Person类的原型属性和原型方法 SuperMan.prototype = new Person() SuperMan.prototype.lv = 0; var spiderMan = new SuperMan("蜘蛛侠",18,"男","吐丝"); ``` #### ES6的class ``` function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.sayName = function(){ alert(this.name) } class Person{ constructor(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } sayName(){ alert(this.name); } } // es6的继承 class Person{ constructor(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } sayName(){ alert(this.name); } } class SuperMan extends Person{ constructor(name,age,sex,leval){ // 继承父类的私有属性 super(name,age,sex); this.leavl = leval; } skill(){ alert("放大招了！！") } } var wdw = new Person("王大伟",18,"男"); var spiderMan = new SuperMan("蜘蛛侠",18,"男",10) console.log(spiderMan) ``` ### SVN和GIT：版本控制系统 * git init 初始化仓库 * git status 查看仓库状态 * git add <文件名> 将文件从工作区提交到缓冲区 * git add -A 将工作区中所有修改过或没有追踪到的文件全部提交到缓冲区 * git config --global user.name “你的用户名” * git config --global user.email “你的邮箱” * ssh-keygen -t rsa -C "你的邮箱" 生成秘钥 * git commit -m "提交注释" 将缓冲区内的文件提交到版本库 * git diff <文件名> 追踪修改的内容 * git log 查看提交日志 * git reflog 查看所有的操作日志（回到未来） * git reset --hard <版本id> 将整个工作区回退到某一个版本状态 * git push 将本地库推送到远程库 * git clone <远程库地址> 将远程库拉取到本地 * git pull 将远程库最近的版本更新到本地库上 ### 百度地图LBS ### VANT移动端组件库 ### VueCli ### grunt ### 项目