10 2019 档案
摘要：1.安装与引入 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，官方文档 在HTML文件中引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 在脚手架中使用 //安装
阅读全文
摘要：1.基本使用 AJAX = Asynchronous JavaScript and XML，即异步 JavaScript 和 XML， 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 get请求：参数拼接到url后面 <script> function getMsg(){ var ur
阅读全文
摘要：1.前言 Vue Router官网 在此之前需要了解单页应用single page web application，SPA）和多页面（Multiple page application，MPA）的差别 对比项目 多页面MPA 单页应用SPA 应用构成 多个完整页面构成 一个外壳页面和多个页面片段构成
阅读全文
摘要：1.创建 Web 服务器 创建 Web 服务器需要用到http模块 使用http模块搭建一个基本的服务器： 步骤一：引入http模块 步骤二：创建服务对象 createServer(cb) 步骤三：设置路由，根据路径给客户端响应相关的数据 步骤四：开启服务 2.向客户端响应数据 向客户端响应数据要做
阅读全文
摘要：1.Express介绍 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 Express的特点： 实现了路由功能 中间件功能 扩展了req和res对象 可以集成其他模版引擎 Express的安装： np
阅读全文
摘要：1.知识必备 (1)当服务器响应不同文件类型时，需要设置响应报文头，让浏览器选择相应的编码解析数据。 常用对照表HTTP Mime type： https://tool.oschina.net/commons 思路：根据访问的路径来提取后缀名，再根据后缀名设置相应的 Content Type (2)
阅读全文
摘要：1.fs模块 在node.js中，所有文件的操作都是通过fs模块来实现的。包括文件目录的创建，删除，查询以及文件的读取，写入。 在fs模块中，所有的方法都分成同步和异步两种实现，具有sync后缀的为同步方法，不具有sync后缀的未异步方法。同步方法使用 = 接收返回的结果和数据，而异步方法多一个参数
阅读全文
摘要：1.node.js是什么 node.js不是一门语言，而是一个开发平台，是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 何为开发平台：有对应的语言和实现特定功能的api 2.node.js的特点 1.事件驱动 2.非阻塞式 I/O 的模型 3.单线程 4.拥有世界上最大的开
阅读全文
摘要：1.绘制图片 相关api及其参数：ctx.drawImage() 参数 说明 参数一 图片对象 参数二，三 可选，图片裁剪的基点（原图左上角为原点） 参数四，五 可选，图片裁剪区域的宽高（基于原图大小） 参数六，七 画布的绘制起点坐标 参数八，九 可选，被裁剪图片显示出来的宽高（缩放） 注意：前5个
阅读全文
摘要：1.绘制网格 传入dom和分割线间隔进行渲染，网格线分为水平方向和垂直方向 <script> //绘制网格 function drwaGrid(dom = document.querySelector("canvas"),space = 50){ //获取画笔 var ctx = dom && do
阅读全文
摘要：1.前言 将以下数据渲染成饼图，数据格式： var data = [ {value:"10",title:"16-22的年龄人数"}, {value:"15",title:"23-30的年龄人数"}, {value:"25",title:"31-35的年龄人数"}, {value:"10",titl
阅读全文
摘要：1.绘制描边文本 说明：描边的属性是共用的，无论是绘制直线还是文字，所以有需要的话要单独设置描边颜色，相关语法如下 语法 说明 ctx.strokeStyle 设置描边的颜色（文本颜色） ctx.font 设置文本,语法与 CSS font 属性相同，详见 ctx.strokeText(str,x0
阅读全文
摘要：1.绘制圆弧轨迹 相关语法：ctx.arc(x,y,r,startRadian,endRadian,direction)，前5个参数必填： 参数 说明 x 圆心x轴坐标 y 圆心y轴坐标 r 半径大小 startRadian 起始弧度(单位Math.PI) endRadian 结束弧度(单位Math
阅读全文
摘要：1.绘制矩形轨迹 相关语法：ctx.rect(x,y,width,height)，根据传入的参数（起始坐标和宽高）用来绘制一个矩形轨迹 注意：ctx.rect()和ctx.lineTo()绘制的都是轨迹，需要配合stroke或者fill()才能在画布中看到效果 <script> var canvas
阅读全文
摘要：1.设置直线线帽的样式 相关语法：ctx.lineCap，通过赋值形式来设置直线线帽的样式，他有以下3个值： 值 说明 butt 默认 round 圆形线帽 square 正方形线帽 <script> var canvas = document.querySelector("canvas") var
阅读全文
摘要：1.画布大小 canvas默认的大小是 300*150，通过操作width/height属性可以设置画布的大小，属性值只能是具体是像素值，而不能是百分比。 <body> <div class="box"> <!-- 在标签中设置画布大小 --> <canvas width="400" height=
阅读全文
摘要：1.基本使用 调用ajax()并传入其他参数，请求url必填，可放第一个参数位置，也可以放入opstion中 <script> //方式一 $.ajax('/api/test',{}) //方式二 $.ajax({ url:"/api/test" }) </script> 2.get请求 通过typ
阅读全文
摘要：1.Zepto.js介绍 Zepto.js最初目标在移动端提供一个精简的类似jquery的js库。压缩后的大小只有9K,而jquery有将近100k Zepto.js的API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto.js增加了针对移动端的触摸和手势相关的事件 Ze
阅读全文
摘要：1.显示/隐藏/切换 本质：操作内联样式，隐藏时display设置为none，显示时自动还原原来的display属性值 动画原理：执行动画时，宽高以渐变的形式变大或者缩小 相关方法 方法名 说明 show(duration,cb) 显示元素，支持动画效果（可选），还支持回调（可选） hide(dur
阅读全文
摘要：1.事件监听 事件名(cb)：只用于原生事件 $('#box').click(function(){ console.log('click - 1') }) on(eventName,cb)：除了给当前元素做监听，还能做事件委托 $('#box').on('click',function(){ co
阅读全文
摘要：1.点击事件 事件名称 说明 click 点击事件，鼠标左键按下弹起完成后触发 mousedown 鼠标左键按下瞬间触发 mouseup 鼠标左键弹起瞬间触发 dblclick 鼠标双击触发 <script> document.onclick= function(){ console.log("cl
阅读全文
摘要：先贴出元素模型信息 1.获取内容区大小 css()：返回值是带单位的（getComputedStyle(node).width） <script> $(function(){ console.log($("div").css("width")) //200px console.log($("div"
阅读全文
摘要：1.attr() 作用：attr()方法用来修改或者读取标签属性值，它其实是原生getAtrribute()和setAttribte()的结合体，语法上更加简洁，它支持同时操作多个属性，只要将多个属性包装成对象传入即可 <body> <div id="test">hello world</div>
阅读全文
摘要：1.添加子元素 append()/prepend()：给当前元素添加子元素，子元素可以是jq对象，也可以是Dom对象，还可以是html代码，功能类似原生js的appendChild() //添加子元素到当前元素的末尾 <script> $(function(){ var $box = $('.box
阅读全文
摘要：1.css() 该方法操作的是内联样式 <script> $(function(){ var $p = $("p") // 操作单个样式 $p.css("color","red") // 操作多个样式(对象语法) $p.css({ "font-size":"30px", "text-align":"
阅读全文
摘要：1.基本选择器 jQuery可以通过标签名，id，类名来获取jquery对象，也可以将原生dom对象转换成jquery对象。 <script> $(function(){ //获取所有的元素 var $all = $("*") // 获取所有的p标签 var $p = $("p") // 获取cla
阅读全文
摘要：1.状态伪类 定义：根据元素的状态定义不同的样式，常用于a链接（未访问/已访问/鼠标划过/已选中），表单元素（失去焦点/获取焦点/禁用） a:link {color:#FF0000;} /* 链接未访问时的颜色 */ a:visited {color:#00FF00;} /* 已访问过的链接的颜色
阅读全文
摘要：1.基本使用 简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单 引入jquery <script src="https://cdn.bootcss
阅读全文
摘要：###1.移动端与pc端的区别 (1)移动端没有鼠标，自然也没有鼠标事件。所以onmousedown之类的事件监听在移动端时无效的。 (2)移动端为了响应双击事件，onclick事件有300ms的延迟，接下来的300ms内有没有再次点击，有的话视为双击，没有的话视为单击。 (3)移动端双击事件：移动
阅读全文
摘要：###1.像素密度 PPI 说到屏幕就离不开2个因素，屏幕大小和屏幕分辨率。 PPI是Pixels Per Inch缩写，pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。 PPI越高，手机屏幕显示的效果越好。以前的老手机屏幕显示效果很差，有颗粒感，就是因为PPI太低了。
阅读全文
摘要：###1.input光标颜色 默认情况下，光标颜色与字体颜色color相同，但也可以通过caret-color属性来单独设置 但是IOS的光标与字体颜色无关，默认是蓝色 可以单独设置光标颜色，这样ios也有效果 input{ color:red; caret-color: green; } ios设
阅读全文
摘要：1.1物理像素 产生原因：css样式的最小值是1px，不过这个1px只是代表css像素，在高清屏上展示的物理像素要>1（iphone6 1css像素=2物理像素。而iph6p则是1css像素=3物理像素） 解决思路：想要展示1物理像素，只能使用scale缩放 android设备中dpr值有多种，可知
阅读全文
摘要：因为手机屏幕的分辨率大小不一 ，如果使用传统的静态布局，把每个元素的宽高样式写死，在不同的屏幕中就有各种各样的显示效果。这显然不是我们想要的结果。我们需要的是根据屏幕分辨率的不同，来适配不同的样式大小。使不同的手机分辨率下都有相同的样式布局 ###1.rem适配 1rem就是html标签font-s
阅读全文
摘要：1.原理分析和效果图 先上效果图： 屏幕适配上使用rem适配，假设用户的手机屏幕最下宽度是375px，而谷歌浏览器最小的字体大小为12px，所以我以375px为标准尺寸进行rem适配，即375px的屏幕设置html标签字体大小为12px，随着屏幕宽度增大，1rem也随之增大 表盘使用的是圆角，使之展
阅读全文
摘要：1.先说说css的坐标系： x轴的正方向就是水平向右的方向 y轴的正方向就是垂直向下的方向 z轴的正方向就是屏幕到用户的方向 2.位移 说明：位移是转换属性中的一个值，包含2d与3d 属性值 说明 translate(x,y) 2d位移 translateX(n) 2d位移，设置x轴方向的位移 tr
阅读全文
摘要：1.背景图大小(background-size) 这个属性设置单张背景图的大小，默认是原图的大小 当同时指定宽高时，会造成图片失真，如果要保持宽高比，可以使用 auto 字段让宽或者高自适应 值类型 示例 说明 像素 50px 50px - 百分比 50% 50% 这个比例是基本容器本身，而不是原图
阅读全文
