`网页标题 * `<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的组成 1.ECMAScript 2.DOM(document Object Model) 3.BOM(Browser Boject Model) ### js的引入 1.内部（加入`<script>`） 2.外部（利用`<script src="">`引入外部的.js文件） ## 注意：在JS中如果哪一行代码出现错误，那么程序运行到该行代码时会停止继续执行并抛出一个错误到控制台。 ### 标识符:作为变量名、函数名、对象的属性名以及函数的参数名的存在。起名的范围是英文字母、数字、下划线以及$，其中数字不能作为开头。 ### 变量:存储数据的容器。 `var a`,`var b = 5` ### 常量(字面量)：该值本身的意思。 * `5` * `10` * `0` * `-1` * ` "王大伟" ` * ` undefined ` * ` true ` ### 关键字:系统级的标识符，程序中不允许使用任何的关键字作为标识符。 ### 保留字 ## 表达式及返回值：一段具有返回值的短语，返回值则为计算结果。也可理解为，只要有返回值的语句都是表达式，只要是表达式都有返回值。其中变量和常量都是最简单的表达式。 ## 表达式的副作用：如果一个表达式它的存在与否会对接下来的程序造成一定影响的，我们把这样的表达式称之为有副作用的表达式；反之如果一个表达式的存在与否不会对JS程序上下文产生任何影响，这个表达式就是没有副作用的。一般来说，变量的赋值都是有副作用的。 #### 暂且需要记住的方法： * alert(exp) 在提示框中输出表达式的运算结果（返回值） * confirm(exp) * console.log(exp) * typeof(exp) 返回exp的数据类型名字的字符串 ### 数据类型 #### 原始类型 * Number(数字): 1,2,3,4,0,-1,-2,NaN,Infinity,-Infinity * String(字符串):"abc","王大伟","123","NaN","true","false" * Boolean(布尔值):true,false * undefined(未定义):undefined #### 引用类型 * Object(对象) * function(函数) ### 运算符:将简单表达式组合成复杂表达式的方法。 ### 语句 ` if(exp){ 语句1 } else{ 语句2 } ` ` for(exp1;exp2;exp3){ 语句 } ` ## 数据类型转换:在JS中一种数据类型可以转换为另外的一种数据类型; ### String转Boolean：除了空字符串(`""`)以外,其余的情况一律返回true; ### Number转Boolean：除了NaN，0和-0以外，其余情况一律返回true; ### Boolean转Number：true为1，false为0; ### String转Number：除了纯数字的字符串以字面形式来转换以外全部都是NaN； ### undefined转Boolean：false; ### parseInt() 转为整型 ### parseFloat() 转为小数 ### 函数(function)：一段可以被高度复用的代码段。 ` //声明函数 function 函数名(形参1,形参2,形参3.....){ 函数体; ....... } //调用函数函数名(实参1,实参2,实参3.......) ` ### 函数的引用:如果调用函数时不使用()，那么该表达式不会执行该函数，且表达式的返回值是该函数的引用（函数本身） ### 函数的返回值（return语句）:每一个函数都可以在函数体内写return语句，当执行该函数时，如果执行到return语句时本次执行函数将会被中止（忽略掉return语句以下的代码），且本次调用函数的表达式的返回值是return语句后面表达式的返回值。如果一个函数的函数体内没有return语句，那么调用该函数的表达式的返回值永远都是undefined。 ### 参数对象:arguments,类数组,拥有数组下标以及.length的特性，它是所有实参的集合，当声明函数时不确定调用函数时传入实参的个数就非常适合使用arguments参数对象来代表实参。 ## 在JS中如果试图去调用一个没有被声明的变量或函数，js解释器会抛出一个错误。但如果试图去查找一个对象中不存在的属性时，js解释器不会报错而是返回undefined; ### 对象(Object):一堆属性的无序集合，每个属性都由属性名与属性值构成； ` obj = { name:"王大伟", age:18, sex:"male", marryed:false, sayHello:function(){} } ` ### 对象的操作： #### 对象的查找 ` Object.属性名a -> Object对象中的属性名a的值 Object["属性名a"] -> Object对象中的属性名a的值 ` #### 添加、修改 ` Object.属性名a = 新值 ` #### 删除 ` delete Obejct.属性名 ` #### 枚举(循环):将对象中所有的属性名或属性值依次地拿出来。 ` for(var i in Object){ //循环体（该循环体循环的次数取决于Object对象中有多少条属性） i 都代表Object对象里面的其中的一个属性名 } ` ## 数组:是若干个数据的有序集合； ` [1,2,3,"王大伟",true,{}] ` ### 查找数组成员(通过下标进行查找) ：`Array[下标]`其中下标就是0,1,2,3,4,5,6..... ### 数组拥有.length的特性，它会返回数组的长度（成员数量） ### 数组的枚举 ` for(var i in arr){ arr[i] //数组的成员 } ` ` for(var i = 0; i < arr.length;i++){ arr[i] //数组的成员 } ` ## document对象的属性和方法 * getElementById() 通过ID获取元素,返回值是一个Node节点； * getElementsByTagName() 通过标签名获取元素,返回值是一个NodeList； * querySelectorAll() 参数是一个符合css选择器语法的字符串类型，返回与css选择器相匹配的一个NodeList。 * createElement() 返回一个Node节点，生成一个Node节点; ## Node节点：本身就是一个Object数据类型。 * className 设置/获取一个Node节点的class属性的属性值 String * innerHTML 设置/获取一个Node节点开始标签与结束标签之间的内容 String * getElementsByTagName() * querySelectorAll() * appendChild(Node) 将参数Node节点插入到调用该方法的元素结束标签之前 * removeChild(Node) 将参数Node节点从调用该方法的元素内部彻底移除。 * parentNode 返回Node节点的父级元素 (Node节点) * previousElementSibling 返回Node节点上一个紧邻的兄弟节点 * nextElementSibling 返回Node节点接下来紧邻的兄弟节点 * value * cloneNode(Boolean) 返回一个Node节点的副本,参数如果为true则代表连同内容一起克隆 * id 返回/设置一个元素的id属性 * insertBefore() 在某个节点之前插入节点 `parentNode.insertBefore(要插入的节点,参照物节点)` * style 改变元素的`行内样式` `Node.style.marginLeft` * selectedIndex 当前选中的option标签相对于其他option标签的下标 (select标签独占) * selected 返回option标签的选中状态 Boolean (option标签独占) * checked 返回单选按钮和多选按钮当前的选中状态 * tagName 返回Node节点的名字（大写） * setAttribute(name,value) 给元素设置自定义的行内属性 * getAttribute(name) 返回元素xxx自定义行内属性的属性值 ## NodeList：类数组（Object）,由若干个Node节点组成的一个类数组，如果我们通过数组下标的形式从中提取某一个成员的话，那么提取的结果就是Node节点。拥有数组下标和.length的特性，但是没有push(),pop()...等方法。 ## 事件：是Node节点下的一个方法，一般来说我们都不会直接调用这个方法，而是为这个方法重新赋一个新的值(function)，所代表的含义就是当该元素发生了某件事之后，则会自动触发你赋值给它的函数。 ``` Node.onclick = function(){ //事件处理函数 || 事件句柄 } Node.addEventListener("去on的事件类型",function(){ }) node.addEventListener("click",function(){ },触发时机Boolean) Node.不带on的事件名() // 帮助用户触发Node节点的onclick事件 // 1.会触发Node节点的onclick事件的事件处理函数 // 2.触发浏览器的默认行为. Node.click() Node.focus() ``` * onclick 当用户点击元素时触发的事件 * onmouseenter 鼠标移上事件 * onmouseleave 鼠标离开事件 * onmousemove 鼠标移动事件 * onmousedown * onmouseup * onblur 当用户失去焦点时触发的事件(文本框，密码框，文本域) * onfocus 当用户获取焦点时触发的事件(文本框，密码框，文本域) * onkeydown 当用户键盘按下时 * onkeyup 当用户键盘抬起时 * onchange 当选择项的选中状态发生改变时（select独有） ``` window.onkeyup = function(e){ console.log(e.keyCode) } ``` ``` 获取0-1000之间10的整数倍的随机数 foodPoint = { x:Math.floor(Math.random() * 100) * 10, y:Math.floor(Math.random() * 100) * 10 } ``` ## this关键字的使用场景 * 出现在事件处理函数中，所指向的是触发该事件的Node节点。 * 出现在对象的方法里，所指向就是方法所在的对象本身。 * 出现在全局作用域下或者是一般函数体内，所指向的就是window对象。 * 出现在构造函数里所指向的就是实例化之后的对象。 ## 计时器 * setInterval(function,number类型的秒数) * clearInterval(计时器id) * setTimeout(function,number) * clearTimeout(计时器id) ### 试图调用一个不存在的变量报错(xxxx is not defined); ### 试图调用一个对象中不存在的属性 -> undefined; ### 试图调用一个对象中不存在的方法报错(xxx is not function) ### 原始类型和引用类型的不同点 * 如果将一个原始类型的变量赋值给另外的一个变量，这时是值的赋值（值的拷贝），而引用类型则是引用的赋值（赋值了一个快捷方式）。 * 在值的比较时，原始类型判断的是返回值是否相等，而引用类型判断的是引用的指针是否指向的是同一个对象。 ## 变量作用域 ### 局部变量：在函数体内部声明的变量(注意，在不考虑ES6的情况下，js只有函数作用域的概念，没有块级作用域的概念),该变量只能在函数体内部被访问到（包括内层函数） ### 全局变量：在函数体外部声明的变量，该变量在任意位置都可以被访问到。 ### 注：在局部作用域下，当局部变量与全局变量发生冲突时，以局部变量为准。 ### 注：如果在局部作用域中试图声明一个全局变量，只要去掉var关键字就好。 ## 变量提升:JS解析器的一种内部机制，当执行函数时，JS解释器会首先遍历该函数内部的所有局部变量（遍历而非执行），并且把这些局部变量放置在函数体的顶端进行隐式的声明但不赋值，此时该变量里面存的值就是undefined,直到程序运行到真正给该变量赋值时，变量的值才是真实的值。 ## 事件对象：事件发生时浏览器存储的一些信息对象，作为事件处理函数的参数存在。 ### 鼠标事件对象属性 * screenX,screenY 触发事件时，光标相对于`显示器`边缘的位置 * clientX,clientY 光标相对于`浏览器内容区域`边缘的位置 * offsetX,offsetY 相对于触发事件的元素本身的位置 * target 返回值Node对象，本次事件的传播过程中的目标阶段的节点。 ### 事件传播机制 1.捕获阶段：从根节点自上而下地寻找元素，一直到最深层的节点为止。 2.冒泡阶段：从最深层次的节点，自下而上地一直寻找到根节点。 ## 事件委托：事件委托就是把子孙级元素的事件委托给它们的祖先级来办，好处1：可以解决动态元素无法拥有事件的问题；好处2：在极端情况下可以节省性能开销；坏处：造成this指向的混乱，事件对象的target属性来代替this。 ## addEventListener相比较于常规绑定事件方式不同点 * 多次绑定事件不覆盖，是追加。 * 改变事件触发时机 ``` node.addEventListener("click",function(){},true/false) ``` ## Math * abs() 绝对值 * floor() 向下取整 * ceil() 向上取整 * round() 四舍五入 * random() 返回0-1之间的伪随机数 * PI ### String对象的全局方法 * indexOf(searchvalue,fromindex) 检索字符串首次出现的位置 * lastIndexOf(searchvalue,fromindex) 检索字符串首次出现的位置(从后向前) * replace(regexp,replacement) 替换字符串（默认惰性匹配） `str.replace(/需要被替换的字符串/g,reaplacement)`全局匹配 * slice(start,end) 根据下标截取一段字符串 * split() 将字符串切割为一个数组，数组长度取决于第一个参数的字符 * substr() substring() 参考文档，类似于slice() * toLowerCase() 转换小写 * toUpperCase() 转换大写 ### 数组Array对象的全局方法 * push() 向后插入 * pop() 删除最后一个 * shift() 删除第一个 * unshift() * concat() 数组连接 * join() 返回数组的字符串形式 * reverse() 反转数组 * splice() 从数组中添加/删除项目 ## Date对象的全局方法 * getFullYear() 返回年份 * getMonth() 返回月份 * getDate() 返回日期 * getHours() 返回小时 * getMinutes() 返回分钟 * getSeconds() 返回秒 * getDay() 返回星期几 * getTime() 返回时间戳 ### window.onload : 当页面加载完毕之后 ### Ajax:HTTP脚本化 ```js //1.实例化XMLHttpRequest对象 var http = new XMLHttpRequest() //2.规划一个请求 open(method,url,asy) // method(请求方式):GET || POST // url(请求地址) // say(异步/同步)：true || false http.open("GET","http://xxx.xxx.xxx.com/aaa.html") //3.发送请求 http.send() //4.接收响应 (异步) http.onreadystatechange = function(){ if(http.readyState == 4){ console.log(http.responseText) //返回来自服务器的响应 } } ``` ## JSONP：它是一种解决跨域请求问题的一种手段。工作机制是由前端动态生成一个script标签，由该标签向后端发送一个HTTP请求，后端接收到来自前端的请求后，会给前端返回一段执行函数的js代码段并且把需要返回给前端的数据放置在参数上当做实参存在，函数的名字由前端在发送请求时附带的callback参数的值上。 ## JSON:前后端交换数据的格式。（类似的格式还有XML） ## 本地存储 ### cookie ```js // 写入cookie document.cookie = "key=value;expires=" + Date实例化对象 function setCookie(key,value,expires){ if(typeof expires === "object"){ document.cookie = "key=value;expires=" + expires; } if(typeof expires === "number"){ var date = new Date(); date.setDate(date.getDate() + expires) document.cookie = `${key}=${value};expires=${date}`; } } // 读取cookie document.cookie -> "key=value; key=value; key=value" function getCookie(name){ var cookie = document.cookie; var result = {} var arr = cookie.split("; "); for(var item of arr){ result[item.split("=")[0]] = item.split("=")[1] } if(!name){ return result; } if(typeof name === "string"){ return result[name]; } } // 删除cookie function removeCookie(name){ var date = new Date(); date.setDate(date.getDate() - 1); document.cookie = `${name}=xxx;expires=${date}` } // 修改cookie function resetCookie(key,value,expires){ if(typeof expires === "object"){ document.cookie = `${key}=${value};expires=${expires}`; } if(typeof expires === "number"){ var date = new Date(); date.setDate(date.getDate() + expires) document.cookie = `${key}=${value};expires=${date}`; } } ``` ### localStorage * length 返回长度 * setItem(key,value) * getItem(key) * removeItem(key) * clear() ### localStorage与cookie的不同点 1. 失效时间 2. 数据大小 3. 兼容性 l.. IE8↑ ### 构造函数和原型(prototype) ### 构造函数:生成对象的函数，一般来说习惯把该函数的首字母大写。就像一个工厂或者是模具，通过实例化(new 构造函数(....))生产出产品（对象）。 ```js function CreatePerson(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } new CreatePerson("xxx",18,"男") // 实例化 -> 对象 ``` ## new关键字做了什么事情？ 1. 在函数体顶端创建了一个空对象。 2. 把本次函数的this指向改成刚刚创建的那个空对象。 3. 在函数结束之前，将刚刚创建的对象return出去。 ## 每一个构造函数都有一个prototype属性，这个属性指向了一个对象（原型对象），该构造函数的每一个实例化对象当访问一个属性或方法时，如果从自身找不到该属性或方法都会再去它的构造函数的原型对象里再次寻找。 ```js obj.constructor -> 该对象的构造函数 obj.__proto__ ->该对象的构造函数的原型对象 ``` ## nodeJs ### 为url字符串对象扩展序列化请求参数的全局方法 ```js String.prototype.parseUrl = function(){ var result = {} var n = this.indexOf("?") + 1; var s = this.substring(n); var arr = s.split("&"); for(item of arr){ var m = item.split("="); result[m[0]] = m[1]; } return result; } ``` ### 引入模块 ```js // 引入模块 require("模块名") ``` ```shell  npm install 模块名 ``` ```express express.get("路由",function(request,response){ response.end("......") }) ``` ### fs模块 ```js //读取 fs.readFile("路径",function(error,data){ }) // 写入 fs.writeFile("路径","内容",function(){ }) ``` ## 常用的sql语句 ### 查询 ``` SELECT * FROM 表名 SELECT * FROM 表名 WHERE 字段名="某值" SELECT * FROM 表名 WHERE 字段名="某值" AND 字段名="某值" SELECT * FROM 表名 WHERE 字段名="某值" OR 字段名="某值" ``` ### 删除 ``` DELETE FROM 表名 WHERE 字段名="某值" ``` ## 插入 ``` INSERT INTO 表名 VALUES (值1,值2,值3.....) INSERT INTO 表名 (列1, 列2,...) VALUES (值1, 值2,....) ``` ## 修改 ``` UPDATE 表名称 SET 列名称=新值 WHERE 列名称 = 某值 UPDATE 表名称 SET 列名称=新值,列名称=新值,列名称=新值.... WHERE 列名称 = 某值 ``` ## 前后端分离,重前端的开发模式 ### 前端 1.HTML+CSS 2.做JS交互 3.根据后端接口请求数据 4.将服务器返回的数据进行二次加工后，根据页面中写好的模板插入到页面里。 ### 后端： 1.数据库设计库表的结构 2.做好接口：根据路由的不同，执行sql语句从数据中查结果，将结果加工之后返回给前端。 ## 前后端不分离模板引擎在后端的开发模式 ### 前端： 1.HTML+CSS 2.做JS交互（不是数据交互） ### 后端： 1.数据库设计库表的结构 2.在前端做好的HTML+CSS+JS文件基础上添加服务器脚本(这个过程我们俗称套程序)。 ### 毕设设计流程 1.设计系统的组织架构图 1.1)确定系统内有哪些功能 2.制作系统的流程图 2.1)校对核验你的程序设计是否合理 2.2)确认你的系统究竟有几个页面 5个页面 3.原型图 3.1)内容怎样组织(左侧放什么，右侧放什么，上面放什么，下面放什么以及) 3.2)某个按钮或者某个链接点击之后会去哪个页面，或者某个按钮是干嘛的。 ## jQuery ## jQuery对象的本质：由若干个Node节点组成的一个类数组，如果通过数组下标的特性从jQuery对象结果集中提取中某一个成员，那么该成员就是Node节点。jQuery对象与Node节点下所有的属性和方法不共享。 #### jQuery核心方法接受的参数 1. `$("css选择器")` -> 很像Node节点的一种叫做jQuery对象的东西。 2. `$(Node || NodeList)` -> jQuery对象 3. `$(function(){})` 类似于window.onload 4. `$("html代码段")` 生成并返回一个与参数代码段相匹配的jQuery对象 #### jQuery对象下的方法 * addClass("") 为jQuery对象追加一个类名 * removeClass("") * toggleClass("") * hasClass("") 判断一个元素是否拥有某一个类名 * html("") * text() * eq() * 去on事件名(function(){}) ``` jQuery对象.click(function(){ ....... this -> 不是jQuery对象，而是源生Node节点 }) ``` * show() * hide() * toggle() * fadeIn() * fadeOut() * fadeToggle() * slideDown() * slideUp() * slideToggle() * css({}) 设置一个元素的行内样式 * animate({},speed,callback) * val() * append() - 在被选元素的结尾插入内容 * prepend() - 在被选元素的开头插入内容 * after() - 在被选元素之后插入内容 * before() - 在被选元素之前插入内容 * clone() * remove() * attr() 操作元素的自定义/行内属性 * width() * height() * innerWidth() * innerHeight() * outerWidth() * outerHeight() * children() * closest() * find() * each(function(){}) * next() * prev() * nextUntil() * prevUntil() * siblings() * $.get(url,callback) * $.post(url,callback) * $.ajax() ```js $.ajax({ url:, type:, data:, success:function(data){ }, beforeSend:function(){ }, async, dataType:"jsonp" }) ``` ```js // 整个浏览器可视区域的高度 $(document).height() $(window).height() ``` ## VUE ## MVVM开发模式:view视图（html页面）,model数据模型（数据，Vue实例化对象中的data属性），modelView（Vue的核心）。 ### 实例化Vue对象中的属性 ```js var root = new Vue({ // 接管区域 el:"#wrap", // 数据模型 data:{ name:"王大伟", age:18, sex:"男" }, // 事件处理函数的集合 methods:{ fn1:function(){ }, fn2:function(){ } }, // 计算属性 // 一定有return语句 computed:{ fn1:function(){ }, fn2:function(){ } }, // 挂载到该组件（该Vue实例化对象里的局部子组件） components:{ } // 生命周期函数中最常用的一种 // 所有当页面加载完毕后需要将某些数据挂载到数据模型上的时候 // 逻辑都要写到这里。 // 换言之：这里包含着一切刚刚进入页面时的网络请求，数据挂载等等操作。 mounted(){ }, // 如果你的vue实例需要使用路由，这个属性的属性值是一个配置好的VueRouter router: }) ``` ### 指令(directive)：Vue为html元素扩展的一些属性； * v-model：属于表单元素，把该元素的value值与数据模型里的某个字段做关联 * v-on:事件名：为元素绑定事件，事件处理函数要写到Vue实例化对象参数中的methods对象的方法里。(可以简写成 `@事件名`) * v-if * v-show * v-for:通过数据模型生成若干个节点 * v-bind:HTML原生属性：让节点的某个原生属性的属性值与数据模型中某个字段的值关联。`<button v-bind:disabled="xxxx">按钮</button>`可以简写成`<button :disabled="xxxx">按钮</button>` ``` <p v-for="(item,aaa) of studentList"> {{aaa}} ------ {{item}} </p> ``` ### 监听键盘某个按键的事件 ```html <input type="text" @keyup.keycode码="xxx"> ``` ### 插值表达式(声明式渲染):可以从视图中获取数据模型中的某个值。 ### Vue双向数据绑定 ### computed计算属性 ### 变异方法： * push() * pop() * shift() * unshift() * splice() * sort() * reverse() ### 虽然vue在变异方法之外支持数组的重新赋值也会更新视图，但一定要在用另外一个数组做中转时引用数据类型的坑。 ### 修改数组成员的vue方法：`vue对象.$set(this.数组,下标,值)` ### 添加对象成员的vue方法：`vue对象.$set(this.对象名,属性名,值)` ### 组件 #### 全局组件 ```js // 组件的声明 Vue.component("组件名",{ template:` html代码段 `, data(){ return { studentList:[], text:"..." } } // 其余和Vue实例化对象过程传参的形式是一样的 }) // 组件的调用 <组件名></组件名> ``` ### 父组件向子组件传值：在父组件作用域中通过自定义属性传递给子组件，在子组件中通过props属性接收 ```js <div id="root"> <top :text="studentList"></top> </div> <script> Vue.component("top",{ template:` <div class="header"> <h3>{{text}}</h3> </div> `, props:["text"], data(){ return { } } }) var root = new Vue({ el:"#root", data(){ return { studentList:["王大伟","郝卓"] } } }) </script> ``` ### 子组件向父组件传值：子组件通过$emit的方法帮助父组件触发自定义事件，并且把要传的数据以事件处理函数参数的形式传递过去。 ```html <div id="root"> <btn @addcount="add"></btn> <h2>{{count}}</h2> </div> <script> Vue.component("btn",{ template:` <button @click="add1" class="button">添加</button> `, data(){ return{ n:5 } }, methods:{ add1(){ this.$emit("addcount",this.n) } } }) var root = new Vue({ el:"#root", data(){ return { count:0 } }, methods:{ add(howmany){ this.count += howmany; } } }) ``` ### 局部组件 ```javascript // 声明局部组件 var addCpt = { template:` <button @click="add1" class="button">添加</button> `, data(){ return{ n:5 } }, methods:{ add1(){ this.$emit("addcount",this.n) } } } // 挂载 new Vue({ el:"#root", data(){ return{ } }, components:{ add:addCpt } }) ``` ### 插槽 ### 具名插槽 ` <com> <template v-slot:slot1> <p>这是传入到1号插槽的内容</p> </template> <template v-slot:slot2> <p>这是传入到2号插槽的内容</p> </template> </com> template:" <div> <slot name="slot1"></slot> <slot name="slot2"></slot> </div> " ` ### 插槽默认值:直接写在插槽声明的slot标签里。 ### 作用域插槽 ``` <div id="root"> <btn @addcount="add"> <template v-slot="dd"> <span>{{dd.data.CNName}}</span> </template> </btn> </div> <script> Vue.component("btn",{ template:` <div> <slot :data="user" > <p>{{user.name}}</p> </slot> </div> `, data(){ return{ user:{ name:"wangdawei", CNName:"王大伟" } } } }) ``` ### vue-router ``` // 1.实例化路由(使用VueRouter构造函数)&配置路由规则(当路由为什么的时候，加载什么组件) var routerObject = new VueRouter({ // 路由规则 routes:[ { path:"/studentList", component:studentData }, { path:"/studentDetails", component:studentDetails }, // 动态匹配 // 在对应的组件中通过$route.params中获取当前页面传递过来的参数 { path:"/details/:id", component:detailsCpmt }, ], mode:"history" }) var root = new Vue({ el:"#root", data(){ return { studentList:[ { label:"王大伟", children:[ { label:"王大伟1" }, { label:"王大伟2", children:[ { label:"王大伟2-1" }, { label:"王大伟2-2" } ] }, { label:"王大伟3" }, ] }, { label:"郝卓", }, { label:"梁帆" }, { label:"黄正文" } ] } }, methods:{ }, computed:{ }, mounted(){ }, // 挂载 components:{ studentData, studentDetails }, // 将配置好规则的VueRouter实例化对象挂载到Vue实例中 router:routerObject }) ``` ### LESS CSS预处理器 ### 引入 ``` <link rel="stylesheet/less" href="style.css"> <script src="less.min.js"></script> ``` ### 变量 ``` @xxx:值; background-color:@xxx; ``` ### 在VUE中操作DOM节点 ``` 通过给元素绑定ref属性，然后在组件事件或某个生命周期函数中使用this.$refs.名字来获取Node节点，如果ref属性所在的元素是一个组件的话，那么this.$refs.名字返回值将是一个组件的实例化对象而非Node节点。不要使用Node操作一切与数据有关的操作。 ``` ### Vue路由参数操作 ``` // 动态匹配 // 在对应的组件中通过$route.params中获取当前页面传递过来的参数 { path:"/details/:id", component:detailsCpmt }, ``` ### vueCli #### 安装 ``` npm install -g @vue/cli ``` ### 创建VueCli项目 ``` vue create 项目名(别有大写字母) ``` ### 常用命令 ``` 启动项目 npm run serve 编译发布 npm run build UI管理界面 vue ui ``` ### vuex #### state:放全局数据的，这里存放的数据在项目中的任何组件中都可以被调用 ##### 两种访问state的方式 * `$store.state.xxx` * `import {mapState} from "vuex" 在computed中使用 ...mapState(["xxx"])` #### mutations:对象包含若干方法，操作仓库中state属性的某一个或某几个值，也就是操作仓库数据的唯二方法。 ##### 两种触发mutations的方式 * `$store.commit("mutations里面的函数名",传入的实参)` * `import {mapMutations} from "vuex" 在methods中使用 ...mapMutations(["xxx"])` ### GIT * `git init` 新建GIT仓库 * `git add <文件名>` 把某个文件添加到缓冲区 * `git add -A` 把工作区中的所有文件提交到缓冲区 * `git commit -m "提交注释"` 将缓冲区里所有的文件提交到版本库 * `git commit -am "提交注释"` 将工作区中所有被修改的文件（不含新增文件）直接提交到版本库 * `git diff <文件名>` 将工作区的某个文件与版本库或缓冲区的对应文件相比较 * `git status` 检查仓库状态 * `git log` 检查版本库提交日志 * `git reflog` 检查版本库提交日志（所有操作） * `git checkout <版本号>` 版本回溯 * `git clone <远程库地址>` 从远程库中拉取一个仓库到本地 * `git push` 把本地库的当前状态推送到远程库 * `git pull` 从远程库中更新最新状态到本地库 ## ES6 `https://es6.ruanyifeng.com/` * let和const * 字符串原型对象的新方法:includes()，startsWith(),endsWith(),repeat(),padEnd(),padStart(),trimStart()，trimEnd() * Math对象下的新方法：sign() * 新的运算符：** * 函数：参数的默认值，rest 参数(参数集合)，箭头函数 * set数据结构 * promise * 模板字符串 ### 面试题汇总 1.箭头函数与普通函数有什么不同点。（1）函数体内的this对象，会穿过本层也就是说上一层this指向是谁在箭头函数中this指的就是谁。（2）不可以当作构造函数；（3）不可以使用arguments对象，如果要用，可以用 rest 参数代替。

# biji2 **Repository Path**: wangdawei0418/biji2 ## Basic Information - **Project Name**: biji2 - **Description**: No description available - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-11-18 - **Last Updated**: 2020-12-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的组成 1.ECMAScript 2.DOM(document Object Model) 3.BOM(Browser Boject Model) ### js的引入 1.内部（加入`<script>`） 2.外部（利用`<script src="">`引入外部的.js文件） ## 注意：在JS中如果哪一行代码出现错误，那么程序运行到该行代码时会停止继续执行并抛出一个错误到控制台。 ### 标识符:作为变量名、函数名、对象的属性名以及函数的参数名的存在。起名的范围是英文字母、数字、下划线以及$，其中数字不能作为开头。 ### 变量:存储数据的容器。 `var a`,`var b = 5` ### 常量(字面量)：该值本身的意思。 * `5` * `10` * `0` * `-1` * ` "王大伟" ` * ` undefined ` * ` true ` ### 关键字:系统级的标识符，程序中不允许使用任何的关键字作为标识符。 ### 保留字 ## 表达式及返回值：一段具有返回值的短语，返回值则为计算结果。也可理解为，只要有返回值的语句都是表达式，只要是表达式都有返回值。其中变量和常量都是最简单的表达式。 ## 表达式的副作用：如果一个表达式它的存在与否会对接下来的程序造成一定影响的，我们把这样的表达式称之为有副作用的表达式；反之如果一个表达式的存在与否不会对JS程序上下文产生任何影响，这个表达式就是没有副作用的。一般来说，变量的赋值都是有副作用的。 #### 暂且需要记住的方法： * alert(exp) 在提示框中输出表达式的运算结果（返回值） * confirm(exp) * console.log(exp) * typeof(exp) 返回exp的数据类型名字的字符串 ### 数据类型 #### 原始类型 * Number(数字): 1,2,3,4,0,-1,-2,NaN,Infinity,-Infinity * String(字符串):"abc","王大伟","123","NaN","true","false" * Boolean(布尔值):true,false * undefined(未定义):undefined #### 引用类型 * Object(对象) * function(函数) ### 运算符:将简单表达式组合成复杂表达式的方法。 ### 语句 ` if(exp){ 语句1 } else{ 语句2 } ` ` for(exp1;exp2;exp3){ 语句 } ` ## 数据类型转换:在JS中一种数据类型可以转换为另外的一种数据类型; ### String转Boolean：除了空字符串(`""`)以外,其余的情况一律返回true; ### Number转Boolean：除了NaN，0和-0以外，其余情况一律返回true; ### Boolean转Number：true为1，false为0; ### String转Number：除了纯数字的字符串以字面形式来转换以外全部都是NaN； ### undefined转Boolean：false; ### parseInt() 转为整型 ### parseFloat() 转为小数 ### 函数(function)：一段可以被高度复用的代码段。 ` //声明函数 function 函数名(形参1,形参2,形参3.....){ 函数体; ....... } //调用函数函数名(实参1,实参2,实参3.......) ` ### 函数的引用:如果调用函数时不使用()，那么该表达式不会执行该函数，且表达式的返回值是该函数的引用（函数本身） ### 函数的返回值（return语句）:每一个函数都可以在函数体内写return语句，当执行该函数时，如果执行到return语句时本次执行函数将会被中止（忽略掉return语句以下的代码），且本次调用函数的表达式的返回值是return语句后面表达式的返回值。如果一个函数的函数体内没有return语句，那么调用该函数的表达式的返回值永远都是undefined。 ### 参数对象:arguments,类数组,拥有数组下标以及.length的特性，它是所有实参的集合，当声明函数时不确定调用函数时传入实参的个数就非常适合使用arguments参数对象来代表实参。 ## 在JS中如果试图去调用一个没有被声明的变量或函数，js解释器会抛出一个错误。但如果试图去查找一个对象中不存在的属性时，js解释器不会报错而是返回undefined; ### 对象(Object):一堆属性的无序集合，每个属性都由属性名与属性值构成； ` obj = { name:"王大伟", age:18, sex:"male", marryed:false, sayHello:function(){} } ` ### 对象的操作： #### 对象的查找 ` Object.属性名a -> Object对象中的属性名a的值 Object["属性名a"] -> Object对象中的属性名a的值 ` #### 添加、修改 ` Object.属性名a = 新值 ` #### 删除 ` delete Obejct.属性名 ` #### 枚举(循环):将对象中所有的属性名或属性值依次地拿出来。 ` for(var i in Object){ //循环体（该循环体循环的次数取决于Object对象中有多少条属性） i 都代表Object对象里面的其中的一个属性名 } ` ## 数组:是若干个数据的有序集合； ` [1,2,3,"王大伟",true,{}] ` ### 查找数组成员(通过下标进行查找) ：`Array[下标]`其中下标就是0,1,2,3,4,5,6..... ### 数组拥有.length的特性，它会返回数组的长度（成员数量） ### 数组的枚举 ` for(var i in arr){ arr[i] //数组的成员 } ` ` for(var i = 0; i < arr.length;i++){ arr[i] //数组的成员 } ` ## document对象的属性和方法 * getElementById() 通过ID获取元素,返回值是一个Node节点； * getElementsByTagName() 通过标签名获取元素,返回值是一个NodeList； * querySelectorAll() 参数是一个符合css选择器语法的字符串类型，返回与css选择器相匹配的一个NodeList。 * createElement() 返回一个Node节点，生成一个Node节点; ## Node节点：本身就是一个Object数据类型。 * className 设置/获取一个Node节点的class属性的属性值 String * innerHTML 设置/获取一个Node节点开始标签与结束标签之间的内容 String * getElementsByTagName() * querySelectorAll() * appendChild(Node) 将参数Node节点插入到调用该方法的元素结束标签之前 * removeChild(Node) 将参数Node节点从调用该方法的元素内部彻底移除。 * parentNode 返回Node节点的父级元素 (Node节点) * previousElementSibling 返回Node节点上一个紧邻的兄弟节点 * nextElementSibling 返回Node节点接下来紧邻的兄弟节点 * value * cloneNode(Boolean) 返回一个Node节点的副本,参数如果为true则代表连同内容一起克隆 * id 返回/设置一个元素的id属性 * insertBefore() 在某个节点之前插入节点 `parentNode.insertBefore(要插入的节点,参照物节点)` * style 改变元素的`行内样式` `Node.style.marginLeft` * selectedIndex 当前选中的option标签相对于其他option标签的下标 (select标签独占) * selected 返回option标签的选中状态 Boolean (option标签独占) * checked 返回单选按钮和多选按钮当前的选中状态 * tagName 返回Node节点的名字（大写） * setAttribute(name,value) 给元素设置自定义的行内属性 * getAttribute(name) 返回元素xxx自定义行内属性的属性值 ## NodeList：类数组（Object）,由若干个Node节点组成的一个类数组，如果我们通过数组下标的形式从中提取某一个成员的话，那么提取的结果就是Node节点。拥有数组下标和.length的特性，但是没有push(),pop()...等方法。 ## 事件：是Node节点下的一个方法，一般来说我们都不会直接调用这个方法，而是为这个方法重新赋一个新的值(function)，所代表的含义就是当该元素发生了某件事之后，则会自动触发你赋值给它的函数。 ``` Node.onclick = function(){ //事件处理函数 || 事件句柄 } Node.addEventListener("去on的事件类型",function(){ }) node.addEventListener("click",function(){ },触发时机Boolean) Node.不带on的事件名() // 帮助用户触发Node节点的onclick事件 // 1.会触发Node节点的onclick事件的事件处理函数 // 2.触发浏览器的默认行为. Node.click() Node.focus() ``` * onclick 当用户点击元素时触发的事件 * onmouseenter 鼠标移上事件 * onmouseleave 鼠标离开事件 * onmousemove 鼠标移动事件 * onmousedown * onmouseup * onblur 当用户失去焦点时触发的事件(文本框，密码框，文本域) * onfocus 当用户获取焦点时触发的事件(文本框，密码框，文本域) * onkeydown 当用户键盘按下时 * onkeyup 当用户键盘抬起时 * onchange 当选择项的选中状态发生改变时（select独有） ``` window.onkeyup = function(e){ console.log(e.keyCode) } ``` ``` 获取0-1000之间10的整数倍的随机数 foodPoint = { x:Math.floor(Math.random() * 100) * 10, y:Math.floor(Math.random() * 100) * 10 } ``` ## this关键字的使用场景 * 出现在事件处理函数中，所指向的是触发该事件的Node节点。 * 出现在对象的方法里，所指向就是方法所在的对象本身。 * 出现在全局作用域下或者是一般函数体内，所指向的就是window对象。 * 出现在构造函数里所指向的就是实例化之后的对象。 ## 计时器 * setInterval(function,number类型的秒数) * clearInterval(计时器id) * setTimeout(function,number) * clearTimeout(计时器id) ### 试图调用一个不存在的变量报错(xxxx is not defined); ### 试图调用一个对象中不存在的属性 -> undefined; ### 试图调用一个对象中不存在的方法报错(xxx is not function) ### 原始类型和引用类型的不同点 * 如果将一个原始类型的变量赋值给另外的一个变量，这时是值的赋值（值的拷贝），而引用类型则是引用的赋值（赋值了一个快捷方式）。 * 在值的比较时，原始类型判断的是返回值是否相等，而引用类型判断的是引用的指针是否指向的是同一个对象。 ## 变量作用域 ### 局部变量：在函数体内部声明的变量(注意，在不考虑ES6的情况下，js只有函数作用域的概念，没有块级作用域的概念),该变量只能在函数体内部被访问到（包括内层函数） ### 全局变量：在函数体外部声明的变量，该变量在任意位置都可以被访问到。 ### 注：在局部作用域下，当局部变量与全局变量发生冲突时，以局部变量为准。 ### 注：如果在局部作用域中试图声明一个全局变量，只要去掉var关键字就好。 ## 变量提升:JS解析器的一种内部机制，当执行函数时，JS解释器会首先遍历该函数内部的所有局部变量（遍历而非执行），并且把这些局部变量放置在函数体的顶端进行隐式的声明但不赋值，此时该变量里面存的值就是undefined,直到程序运行到真正给该变量赋值时，变量的值才是真实的值。 ## 事件对象：事件发生时浏览器存储的一些信息对象，作为事件处理函数的参数存在。 ### 鼠标事件对象属性 * screenX,screenY 触发事件时，光标相对于`显示器`边缘的位置 * clientX,clientY 光标相对于`浏览器内容区域`边缘的位置 * offsetX,offsetY 相对于触发事件的元素本身的位置 * target 返回值Node对象，本次事件的传播过程中的目标阶段的节点。 ### 事件传播机制 1.捕获阶段：从根节点自上而下地寻找元素，一直到最深层的节点为止。 2.冒泡阶段：从最深层次的节点，自下而上地一直寻找到根节点。 ## 事件委托：事件委托就是把子孙级元素的事件委托给它们的祖先级来办，好处1：可以解决动态元素无法拥有事件的问题；好处2：在极端情况下可以节省性能开销；坏处：造成this指向的混乱，事件对象的target属性来代替this。 ## addEventListener相比较于常规绑定事件方式不同点 * 多次绑定事件不覆盖，是追加。 * 改变事件触发时机 ``` node.addEventListener("click",function(){},true/false) ``` ## Math * abs() 绝对值 * floor() 向下取整 * ceil() 向上取整 * round() 四舍五入 * random() 返回0-1之间的伪随机数 * PI ### String对象的全局方法 * indexOf(searchvalue,fromindex) 检索字符串首次出现的位置 * lastIndexOf(searchvalue,fromindex) 检索字符串首次出现的位置(从后向前) * replace(regexp,replacement) 替换字符串（默认惰性匹配） `str.replace(/需要被替换的字符串/g,reaplacement)`全局匹配 * slice(start,end) 根据下标截取一段字符串 * split() 将字符串切割为一个数组，数组长度取决于第一个参数的字符 * substr() substring() 参考文档，类似于slice() * toLowerCase() 转换小写 * toUpperCase() 转换大写 ### 数组Array对象的全局方法 * push() 向后插入 * pop() 删除最后一个 * shift() 删除第一个 * unshift() * concat() 数组连接 * join() 返回数组的字符串形式 * reverse() 反转数组 * splice() 从数组中添加/删除项目 ## Date对象的全局方法 * getFullYear() 返回年份 * getMonth() 返回月份 * getDate() 返回日期 * getHours() 返回小时 * getMinutes() 返回分钟 * getSeconds() 返回秒 * getDay() 返回星期几 * getTime() 返回时间戳 ### window.onload : 当页面加载完毕之后 ### Ajax:HTTP脚本化 ```js //1.实例化XMLHttpRequest对象 var http = new XMLHttpRequest() //2.规划一个请求 open(method,url,asy) // method(请求方式):GET || POST // url(请求地址) // say(异步/同步)：true || false http.open("GET","http://xxx.xxx.xxx.com/aaa.html") //3.发送请求 http.send() //4.接收响应 (异步) http.onreadystatechange = function(){ if(http.readyState == 4){ console.log(http.responseText) //返回来自服务器的响应 } } ``` ## JSONP：它是一种解决跨域请求问题的一种手段。工作机制是由前端动态生成一个script标签，由该标签向后端发送一个HTTP请求，后端接收到来自前端的请求后，会给前端返回一段执行函数的js代码段并且把需要返回给前端的数据放置在参数上当做实参存在，函数的名字由前端在发送请求时附带的callback参数的值上。 ## JSON:前后端交换数据的格式。（类似的格式还有XML） ## 本地存储 ### cookie ```js // 写入cookie document.cookie = "key=value;expires=" + Date实例化对象 function setCookie(key,value,expires){ if(typeof expires === "object"){ document.cookie = "key=value;expires=" + expires; } if(typeof expires === "number"){ var date = new Date(); date.setDate(date.getDate() + expires) document.cookie = `${key}=${value};expires=${date}`; } } // 读取cookie document.cookie -> "key=value; key=value; key=value" function getCookie(name){ var cookie = document.cookie; var result = {} var arr = cookie.split("; "); for(var item of arr){ result[item.split("=")[0]] = item.split("=")[1] } if(!name){ return result; } if(typeof name === "string"){ return result[name]; } } // 删除cookie function removeCookie(name){ var date = new Date(); date.setDate(date.getDate() - 1); document.cookie = `${name}=xxx;expires=${date}` } // 修改cookie function resetCookie(key,value,expires){ if(typeof expires === "object"){ document.cookie = `${key}=${value};expires=${expires}`; } if(typeof expires === "number"){ var date = new Date(); date.setDate(date.getDate() + expires) document.cookie = `${key}=${value};expires=${date}`; } } ``` ### localStorage * length 返回长度 * setItem(key,value) * getItem(key) * removeItem(key) * clear() ### localStorage与cookie的不同点 1. 失效时间 2. 数据大小 3. 兼容性 l.. IE8↑ ### 构造函数和原型(prototype) ### 构造函数:生成对象的函数，一般来说习惯把该函数的首字母大写。就像一个工厂或者是模具，通过实例化(new 构造函数(....))生产出产品（对象）。 ```js function CreatePerson(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } new CreatePerson("xxx",18,"男") // 实例化 -> 对象 ``` ## new关键字做了什么事情？ 1. 在函数体顶端创建了一个空对象。 2. 把本次函数的this指向改成刚刚创建的那个空对象。 3. 在函数结束之前，将刚刚创建的对象return出去。 ## 每一个构造函数都有一个prototype属性，这个属性指向了一个对象（原型对象），该构造函数的每一个实例化对象当访问一个属性或方法时，如果从自身找不到该属性或方法都会再去它的构造函数的原型对象里再次寻找。 ```js obj.constructor -> 该对象的构造函数 obj.__proto__ ->该对象的构造函数的原型对象 ``` ## nodeJs ### 为url字符串对象扩展序列化请求参数的全局方法 ```js String.prototype.parseUrl = function(){ var result = {} var n = this.indexOf("?") + 1; var s = this.substring(n); var arr = s.split("&"); for(item of arr){ var m = item.split("="); result[m[0]] = m[1]; } return result; } ``` ### 引入模块 ```js // 引入模块 require("模块名") ``` ```shell  npm install 模块名 ``` ```express express.get("路由",function(request,response){ response.end("......") }) ``` ### fs模块 ```js //读取 fs.readFile("路径",function(error,data){ }) // 写入 fs.writeFile("路径","内容",function(){ }) ``` ## 常用的sql语句 ### 查询 ``` SELECT * FROM 表名 SELECT * FROM 表名 WHERE 字段名="某值" SELECT * FROM 表名 WHERE 字段名="某值" AND 字段名="某值" SELECT * FROM 表名 WHERE 字段名="某值" OR 字段名="某值" ``` ### 删除 ``` DELETE FROM 表名 WHERE 字段名="某值" ``` ## 插入 ``` INSERT INTO 表名 VALUES (值1,值2,值3.....) INSERT INTO 表名 (列1, 列2,...) VALUES (值1, 值2,....) ``` ## 修改 ``` UPDATE 表名称 SET 列名称=新值 WHERE 列名称 = 某值 UPDATE 表名称 SET 列名称=新值,列名称=新值,列名称=新值.... WHERE 列名称 = 某值 ``` ## 前后端分离,重前端的开发模式 ### 前端 1.HTML+CSS 2.做JS交互 3.根据后端接口请求数据 4.将服务器返回的数据进行二次加工后，根据页面中写好的模板插入到页面里。 ### 后端： 1.数据库设计库表的结构 2.做好接口：根据路由的不同，执行sql语句从数据中查结果，将结果加工之后返回给前端。 ## 前后端不分离模板引擎在后端的开发模式 ### 前端： 1.HTML+CSS 2.做JS交互（不是数据交互） ### 后端： 1.数据库设计库表的结构 2.在前端做好的HTML+CSS+JS文件基础上添加服务器脚本(这个过程我们俗称套程序)。 ### 毕设设计流程 1.设计系统的组织架构图 1.1)确定系统内有哪些功能 2.制作系统的流程图 2.1)校对核验你的程序设计是否合理 2.2)确认你的系统究竟有几个页面 5个页面 3.原型图 3.1)内容怎样组织(左侧放什么，右侧放什么，上面放什么，下面放什么以及) 3.2)某个按钮或者某个链接点击之后会去哪个页面，或者某个按钮是干嘛的。 ## jQuery ## jQuery对象的本质：由若干个Node节点组成的一个类数组，如果通过数组下标的特性从jQuery对象结果集中提取中某一个成员，那么该成员就是Node节点。jQuery对象与Node节点下所有的属性和方法不共享。 #### jQuery核心方法接受的参数 1. `$("css选择器")` -> 很像Node节点的一种叫做jQuery对象的东西。 2. `$(Node || NodeList)` -> jQuery对象 3. `$(function(){})` 类似于window.onload 4. `$("html代码段")` 生成并返回一个与参数代码段相匹配的jQuery对象 #### jQuery对象下的方法 * addClass("") 为jQuery对象追加一个类名 * removeClass("") * toggleClass("") * hasClass("") 判断一个元素是否拥有某一个类名 * html("") * text() * eq() * 去on事件名(function(){}) ``` jQuery对象.click(function(){ ....... this -> 不是jQuery对象，而是源生Node节点 }) ``` * show() * hide() * toggle() * fadeIn() * fadeOut() * fadeToggle() * slideDown() * slideUp() * slideToggle() * css({}) 设置一个元素的行内样式 * animate({},speed,callback) * val() * append() - 在被选元素的结尾插入内容 * prepend() - 在被选元素的开头插入内容 * after() - 在被选元素之后插入内容 * before() - 在被选元素之前插入内容 * clone() * remove() * attr() 操作元素的自定义/行内属性 * width() * height() * innerWidth() * innerHeight() * outerWidth() * outerHeight() * children() * closest() * find() * each(function(){}) * next() * prev() * nextUntil() * prevUntil() * siblings() * $.get(url,callback) * $.post(url,callback) * $.ajax() ```js $.ajax({ url:, type:, data:, success:function(data){ }, beforeSend:function(){ }, async, dataType:"jsonp" }) ``` ```js // 整个浏览器可视区域的高度 $(document).height() $(window).height() ``` ## VUE ## MVVM开发模式:view视图（html页面）,model数据模型（数据，Vue实例化对象中的data属性），modelView（Vue的核心）。 ### 实例化Vue对象中的属性 ```js var root = new Vue({ // 接管区域 el:"#wrap", // 数据模型 data:{ name:"王大伟", age:18, sex:"男" }, // 事件处理函数的集合 methods:{ fn1:function(){ }, fn2:function(){ } }, // 计算属性 // 一定有return语句 computed:{ fn1:function(){ }, fn2:function(){ } }, // 挂载到该组件（该Vue实例化对象里的局部子组件） components:{ } // 生命周期函数中最常用的一种 // 所有当页面加载完毕后需要将某些数据挂载到数据模型上的时候 // 逻辑都要写到这里。 // 换言之：这里包含着一切刚刚进入页面时的网络请求，数据挂载等等操作。 mounted(){ }, // 如果你的vue实例需要使用路由，这个属性的属性值是一个配置好的VueRouter router: }) ``` ### 指令(directive)：Vue为html元素扩展的一些属性； * v-model：属于表单元素，把该元素的value值与数据模型里的某个字段做关联 * v-on:事件名：为元素绑定事件，事件处理函数要写到Vue实例化对象参数中的methods对象的方法里。(可以简写成 `@事件名`) * v-if * v-show * v-for:通过数据模型生成若干个节点 * v-bind:HTML原生属性：让节点的某个原生属性的属性值与数据模型中某个字段的值关联。`<button v-bind:disabled="xxxx">按钮</button>`可以简写成`<button :disabled="xxxx">按钮</button>` ``` <p v-for="(item,aaa) of studentList"> {{aaa}} ------ {{item}} </p> ``` ### 监听键盘某个按键的事件 ```html <input type="text" @keyup.keycode码="xxx"> ``` ### 插值表达式(声明式渲染):可以从视图中获取数据模型中的某个值。 ### Vue双向数据绑定 ### computed计算属性 ### 变异方法： * push() * pop() * shift() * unshift() * splice() * sort() * reverse() ### 虽然vue在变异方法之外支持数组的重新赋值也会更新视图，但一定要在用另外一个数组做中转时引用数据类型的坑。 ### 修改数组成员的vue方法：`vue对象.$set(this.数组,下标,值)` ### 添加对象成员的vue方法：`vue对象.$set(this.对象名,属性名,值)` ### 组件 #### 全局组件 ```js // 组件的声明 Vue.component("组件名",{ template:` html代码段 `, data(){ return { studentList:[], text:"..." } } // 其余和Vue实例化对象过程传参的形式是一样的 }) // 组件的调用 <组件名></组件名> ``` ### 父组件向子组件传值：在父组件作用域中通过自定义属性传递给子组件，在子组件中通过props属性接收 ```js <div id="root"> <top :text="studentList"></top> </div> <script> Vue.component("top",{ template:` <div class="header"> <h3>{{text}}</h3> </div> `, props:["text"], data(){ return { } } }) var root = new Vue({ el:"#root", data(){ return { studentList:["王大伟","郝卓"] } } }) </script> ``` ### 子组件向父组件传值：子组件通过$emit的方法帮助父组件触发自定义事件，并且把要传的数据以事件处理函数参数的形式传递过去。 ```html <div id="root"> <btn @addcount="add"></btn> <h2>{{count}}</h2> </div> <script> Vue.component("btn",{ template:` <button @click="add1" class="button">添加</button> `, data(){ return{ n:5 } }, methods:{ add1(){ this.$emit("addcount",this.n) } } }) var root = new Vue({ el:"#root", data(){ return { count:0 } }, methods:{ add(howmany){ this.count += howmany; } } }) ``` ### 局部组件 ```javascript // 声明局部组件 var addCpt = { template:` <button @click="add1" class="button">添加</button> `, data(){ return{ n:5 } }, methods:{ add1(){ this.$emit("addcount",this.n) } } } // 挂载 new Vue({ el:"#root", data(){ return{ } }, components:{ add:addCpt } }) ``` ### 插槽 ### 具名插槽 ` <com> <template v-slot:slot1> <p>这是传入到1号插槽的内容</p> </template> <template v-slot:slot2> <p>这是传入到2号插槽的内容</p> </template> </com> template:" <div> <slot name="slot1"></slot> <slot name="slot2"></slot> </div> " ` ### 插槽默认值:直接写在插槽声明的slot标签里。 ### 作用域插槽 ``` <div id="root"> <btn @addcount="add"> <template v-slot="dd"> <span>{{dd.data.CNName}}</span> </template> </btn> </div> <script> Vue.component("btn",{ template:` <div> <slot :data="user" > <p>{{user.name}}</p> </slot> </div> `, data(){ return{ user:{ name:"wangdawei", CNName:"王大伟" } } } }) ``` ### vue-router ``` // 1.实例化路由(使用VueRouter构造函数)&配置路由规则(当路由为什么的时候，加载什么组件) var routerObject = new VueRouter({ // 路由规则 routes:[ { path:"/studentList", component:studentData }, { path:"/studentDetails", component:studentDetails }, // 动态匹配 // 在对应的组件中通过$route.params中获取当前页面传递过来的参数 { path:"/details/:id", component:detailsCpmt }, ], mode:"history" }) var root = new Vue({ el:"#root", data(){ return { studentList:[ { label:"王大伟", children:[ { label:"王大伟1" }, { label:"王大伟2", children:[ { label:"王大伟2-1" }, { label:"王大伟2-2" } ] }, { label:"王大伟3" }, ] }, { label:"郝卓", }, { label:"梁帆" }, { label:"黄正文" } ] } }, methods:{ }, computed:{ }, mounted(){ }, // 挂载 components:{ studentData, studentDetails }, // 将配置好规则的VueRouter实例化对象挂载到Vue实例中 router:routerObject }) ``` ### LESS CSS预处理器 ### 引入 ``` <link rel="stylesheet/less" href="style.css"> <script src="less.min.js"></script> ``` ### 变量 ``` @xxx:值; background-color:@xxx; ``` ### 在VUE中操作DOM节点 ``` 通过给元素绑定ref属性，然后在组件事件或某个生命周期函数中使用this.$refs.名字来获取Node节点，如果ref属性所在的元素是一个组件的话，那么this.$refs.名字返回值将是一个组件的实例化对象而非Node节点。不要使用Node操作一切与数据有关的操作。 ``` ### Vue路由参数操作 ``` // 动态匹配 // 在对应的组件中通过$route.params中获取当前页面传递过来的参数 { path:"/details/:id", component:detailsCpmt }, ``` ### vueCli #### 安装 ``` npm install -g @vue/cli ``` ### 创建VueCli项目 ``` vue create 项目名(别有大写字母) ``` ### 常用命令 ``` 启动项目 npm run serve 编译发布 npm run build UI管理界面 vue ui ``` ### vuex #### state:放全局数据的，这里存放的数据在项目中的任何组件中都可以被调用 ##### 两种访问state的方式 * `$store.state.xxx` * `import {mapState} from "vuex" 在computed中使用 ...mapState(["xxx"])` #### mutations:对象包含若干方法，操作仓库中state属性的某一个或某几个值，也就是操作仓库数据的唯二方法。 ##### 两种触发mutations的方式 * `$store.commit("mutations里面的函数名",传入的实参)` * `import {mapMutations} from "vuex" 在methods中使用 ...mapMutations(["xxx"])` ### GIT * `git init` 新建GIT仓库 * `git add <文件名>` 把某个文件添加到缓冲区 * `git add -A` 把工作区中的所有文件提交到缓冲区 * `git commit -m "提交注释"` 将缓冲区里所有的文件提交到版本库 * `git commit -am "提交注释"` 将工作区中所有被修改的文件（不含新增文件）直接提交到版本库 * `git diff <文件名>` 将工作区的某个文件与版本库或缓冲区的对应文件相比较 * `git status` 检查仓库状态 * `git log` 检查版本库提交日志 * `git reflog` 检查版本库提交日志（所有操作） * `git checkout <版本号>` 版本回溯 * `git clone <远程库地址>` 从远程库中拉取一个仓库到本地 * `git push` 把本地库的当前状态推送到远程库 * `git pull` 从远程库中更新最新状态到本地库 ## ES6 `https://es6.ruanyifeng.com/` * let和const * 字符串原型对象的新方法:includes()，startsWith(),endsWith(),repeat(),padEnd(),padStart(),trimStart()，trimEnd() * Math对象下的新方法：sign() * 新的运算符：** * 函数：参数的默认值，rest 参数(参数集合)，箭头函数 * set数据结构 * promise * 模板字符串 ### 面试题汇总 1.箭头函数与普通函数有什么不同点。（1）函数体内的this对象，会穿过本层也就是说上一层this指向是谁在箭头函数中this指的就是谁。（2）不可以当作构造函数；（3）不可以使用arguments对象，如果要用，可以用 rest 参数代替。