狂兔-CSDN博客

原创 sass语法

know安装npm install -g sasssass文件不可以直接链接在html里面编译将scss文件编译成css文件sass input.scss output.css然后将转化好的css 链接在html里面监听sass --watch input.scss:output.css监听scss文件的变化，如果变化了自动转化为css文件四种转化格式 n...

2019-08-03 11:57:23 166

原创前端路由之——History

前面我们讲了前端路由之——hash的方法，今天我们来讨论一下前端路由的另一种方式——History ヽ(✿ﾟ▽ﾟ)ノ没有看上一篇文章的小伙伴可以返回查看我们的历史文章~~首先我们来说一下这个history是个啥嘞？js的history对象window.history 表示window对象的历史记录 1.window.history.back()，后退 2.window.h...

2019-06-20 22:10:49 416

原创 Vue中碰见的问题（一）

路由跳转传值//跳转页面获取参实 mounted(){ console.log(this.$route.query) } //传值页面加入路由跳转 methods: { edit(num) { this.$router.push({path:"addgoods",query:{num:num}}) } }Vue中 watch 监听路由变化当路由不是从一...

2019-06-03 19:33:34 242

我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash（哈希），大型框架的路由系统大多都是hash实现的。刚看完上面那段话，可能有人会有疑问：URL中的#是什么，如何用hash实现前端路由呢？别着急，往下看 ~~~首先我们来说一下URL中的井号（其实也叫 has...

2019-06-02 12:46:04 2022 1

原创前端路由

在谈前端路由之前，我们先了解一下：从输入URL到页面加载完成是一个怎样的过程1. 输入地址当我们开始在浏览器中输入网址的时候，浏览器其实已经开始在智能的匹配可能得到的URL了，他会从历史记录、书签等地方，找到已经输入的字符串可能对应的URL，然后给出智能的提示。　　　对于Google chrome这种聪明的浏览器，他甚至会直接从缓存中把网页展示出来，也就是说在你还没有戳下enter键的...

2019-05-19 20:35:37 213

原创 ES6-循环中的块级作用域

for循环let//这是一个我们常见的问题var funcs = [];for (var i = 0; i < 3; i++) { funcs[i] = function () { console.log(i); };}funcs[0](); // 3//用立即函数解决上述闭包问题var funcs = [];for (var i = 0...

2019-05-12 12:03:46 441 1

原创事件绑定传参 & 跳转页面传值

js解决动态绑定事件时不能传参的问题在写东西的时候会遇到这样的问题，想为事件绑定一个函数有人想这样写: (假如我现在想为div加入一个点击事件) var div = document.getElementsByTagName("div")[0]; div.onclick = fun(); function fun() { console.log("click！"); }...

2019-04-28 19:24:31 327

原创搜索框的默认提示文字

我们平常见到的搜索框，就比如csdn上的搜索框，当框内没有文字的时候会出现默认的提示文字，然而鼠标聚焦上去文字就会消失。效果图如下：&amp;amp;lt;!--html代码--&amp;amp;gt;&amp;amp;lt;div class=&amp;quot;middle&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&am

2019-02-03 12:47:05 9477 1

原创页面的部分切换&csdn上传视频

我们时常会遇见这样的问题&amp;amp;amp;amp;amp;lt;!--html 代码--&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;li onclick=&amp;amp;amp;amp;quot;opens(1)&amp;amp;amp;amp;quot; class=&amp;amp;amp;amp;quot;choose-1

2019-02-03 11:40:40 177

原创了解git

什么是git？git 就像一个软件，用来控制代码的版本的。（也叫分布式版本控制系统的软件）上面的名词可能没有理解吧，别着急，咱门一个一个解释。。首先版本控制是个啥？记录一个或若干文件内容变化，可以查阅特定版本修订情况的系统。（就像你修图一样，修错了可以用返回到原来的图片上去，还有一个理解就比如...

2019-01-27 12:06:03 286

原创 webpack (js&json&css的打包)

webpack它是一个前端资源加载/打包工具，根据模块的依赖关系（如a.js依赖b.js）进行静态的分析，并依据规则生成对应的静态资源。框架安装在安装webbpack前，本地环境需要安装node.jsnpm install webpack -g//全局环境下安装webpacknpm install webpack --save-dev //局部安装webpack -v //查...

2019-01-20 15:29:04 2079

原创了解cookie&&session

在解释cookie和session之前我们先说一下httphttp-无状态，无法保存信息（其中包含用户的登陆信息等）平常我们在网页上登陆自己的账号会有记住密码这一选项，一段内我们在自己的电脑打开同一个网页将默认登陆自己之前的账号，就像前面所说的这种效果是http所不能实现的，这也就是为啥我们要引入cookie和session的原因啦。简介cookie：在浏览器保存一些数据，每次将服务...

2018-11-07 20:57:09 177

原创 canvas绘图

引入：canvas标签&amp;amp;amp;amp;lt;canvas width=&amp;amp;amp;quot;500px&amp;amp;amp;quot; height=&amp;amp;amp;quot;500px&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;/canvas&a

2018-11-04 14:37:54 1128

原创 Express框架基础

安装（建立一个文件夹，打开cmd 进入到文件夹内部，输入nmp install express）配置接收请求响应1.创建服务var server=express();2.监听server.listen(8080);3.处理用户的请求server.use(‘地址’,function(req,res){});此处的req,res还含有原生的方法（eg：req.write(...

2018-11-04 14:33:28 2697

原创浅谈call apply bind

初学call apply的时候看的是书，书上讲的很浅显，在网上看了很多博客讲的都很是高深，这里标题说是浅谈，其实本来想写的是深入，但是写到最后感觉自己所了解的远远不够，这里的this究竟指的是什么，与作用域又有什么关系？因为目前知识水平的限制，我就暂时先总结了一些。更加深层次的东西，我也将继续挖掘。。其实，call()和apply()就是改变函数的执行上下文，（也就是函数内部的this的指向）。...

2018-10-25 20:27:52 160

原创 js同步异步回调函数

js同步异步同步指的是一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。异步是指每一个任务有一个或多个回调函数，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与排列顺序不一定一致，是异步的。异步模式其实就是延迟处理。在和HTML交互的过程中，会需要一些IO操作（典型的就是A...

2018-10-21 16:05:39 3348 1

原创 node-js模块化

模块化：系统模块：http，querystring，url自定义模块包管理器系统模块：Crypto 加密Events 事件Net 网络操作OS 操作系统信息Path 处理文件路径Stream 流操作Timers 定时器ZLIB 压缩自定义模块：1.模块组成2.nmp3.发布自己的模块1.自己的模块require 请求：引入模块如果有&amp;amp;quot;./&amp;am

2018-10-11 22:18:17 295

原创 node js基础

性能高跟前台js配合方便js 能用的Node-js也能用运行 Win+R命令行中Ctrl+C 终止命令行e:进入E盘切换盘符cd 改变当前目录node xxx.js 执行程序tab 快捷补全文件缩略名（node 1+tab 直接显示 node 1.js）...

2018-10-04 21:48:40 539

原创 css-经典三栏布局

float布局左右两边固定，中间自适应。.left{ width: 100px; height: 200px; background-color: yellow; float: left;}.right{ width: 100px; height: 200px; background-color: pink; float:...

2018-09-15 21:00:16 170

原创 css-响应式布局

meta将屏幕按1:1的比例显示在网页代码的头部，加入一行viewport标签&amp;amp;amp;lt;meta name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;width=device-width,initial-scale=1&amp;amp;quot;&amp;amp;amp;gt;viewport是网页默

2018-09-06 21:42:43 587

原创 CSS3-flex布局

内容：设置弹性容器：display:flex/inline-flex;，它的所有子元素自动成为弹性子元素弹性容器外弹性子元素内正常渲染。（弹性盒子只定义了弹性子元素如何在弹性容器内布局）通常情况下默认每个容器只有一行，弹性子元素在弹性盒内一行显示。设置flex布局以后，子元素的float 、 clear 、 vertical-align属性将失效。容器存在两个轴：水平的主轴...

2018-09-06 21:13:50 673

原创正则表达式

我们平常在写代码可能会遇见这样的问题：

2018-08-18 20:53:58 566

原创 JS-数组

克隆：//便利对象 for(var prop in obj) 1.判断是不是原始值 typeof() 2.引用值判断是数组还是对象 //tostring instanceof construtor 3.建立相对应的数组或对象&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; var obj={ name:&quo

2018-08-18 09:38:32 132

原创 json

json 是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的） JSON.parse(); string--&amp;gt;json //字符串转换为对象 JSON.stringify(); json--&amp;gt;string //转换为字符串的json形式浏览器识别 html 代码，将代码的每一个节点放在 domTree 树...

2018-08-11 10:28:19 175

原创事件分类

另一种事件捕获：（仅对IE 有用） div.setCapture(); div.releaseCapture();将页面中所有的事件揽在自己身上鼠标事件：click，mousedown，mousemove，mouseup （移动端：touchstart，touchmove，touchend） click=mousedown+mouseup&amp;lt;div style=&quot;b...

2018-08-06 20:38:31 442

原创 JS 事件处理模型-事件冒泡-捕获

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）（事件点击在子元素上事件会一层一层向它的父元素传递从结构上的子元素冒泡向父元素）focus, blur, change, submit, reset, select 等事件没有冒泡功能//css代码&amp;amp;amp;amp;amp;lt;div style=&amp;amp;amp;amp;quot;background-color

2018-08-06 09:37:48 220

原创 JS 作用域-闭包

运行期上下文：函数执行的时候，会创建一个称为执行期上下文的内部对象。（类似于我们在预编译中所讲的AO对象）一个执行期上下文定义一个函数执行时的环境。函数每次执行时对应的执行期上下文都是独一无二的，所以多次调用同一个函数会导致产生多个执行期上下问，当函数执行完毕，它所产生的执行期上下文将被销毁。作用域： [[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。作用...

2018-08-04 08:38:42 271 1

原创 JS 事件1-触发-循环-解除

元素.on事件类型=function(){};句柄绑定一个对象的一个事件，只能绑定一个处理函数&amp;amp;amp;lt;div style=&amp;amp;quot;background-color: red;width: 50px;height: 50px;&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;

2018-08-03 20:37:00 255

原创 date 对象-定时器

日期对象常用操作:日期对象，是系统提供好的在控制台输入： &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;amp;gt;date = new Date; //记录出生时的日期 new出来后就不会改变当然刷新页面会改变&amp;amp;lt;/script&amp;amp;gt;get方法获取date

2018-08-01 20:08:33 247

原创 JS 立即执行函数

针对初始化功能的函数执行完将函数立即释放(function abc(){ var a=111; var b=222; console.log(a+b);}())&amp;amp;lt;/script&amp;amp;gt;&amp;amp;lt;/body&amp;amp;gt;&amp;amp;lt;/html&amp;amp;gt;当然这段代码的运行结果为：333，

2018-08-01 15:22:53 197

原创 DOM节点增插删改

增：（并没有增加到页面上！！）document.createElement(); //创建元素节点（标签）&amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;amp;gt;var div=document.createElement('div'); //添加一个div标签 //创建后被JS攥在手里并没

2018-08-01 15:21:29 206

原创 DOM 查找节点

DOM 对象，用来操作 html 和 xml功能的一类对象的集合（注意：css不可以被操作）标签也就是 DOM 元素查：选择元素方法的操作：documnet 代表整个文档document.getElementById(); 【按Id名选择一个】//html&amp;amp;amp;lt;div id=&amp;amp;quot;only&amp;amp;quot;&amp;amp;amp;gt;hello

2018-08-01 15:21:11 2590

原创 JS错误信息 & ea5.0 严格模式:

try…catchtry{ console.log("b"); console.log(b); //发现错误直接中断 console.log("c");}catch(e){ //error是一个对象，只有两项信息 (error.message error.name) console.log(e.name+":"+e.message);}consol..

2018-08-01 15:20:48 161

原创 JS 关于this对象

首先：在函数中this 到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。1.构造函数如果函数作为构造函数用，那么它里面的 this 就代表它将要 new 出来的的对象function A(){ this.name=&quot;xiaoming&quot;; this.age=&quot;7&quot;; console.log(this); //结果：A {name: &a

2018-07-30 17:17:23 712 1

原创 JS 预编译过程

在谈预编译之前先说收 js 的运行过程运行过程 1.语法编译 2.预编译（通篇扫描） 3.解释执行语法执行：就是检查你的代码有什么低级错误就是我们平常的编译器报错（变量为声明就是使用会报错，只有用 typeof () 编译器不会报错）预编译：就是在内存中开辟一段空间存放变量和函数解释执行：js 是一种解释性语言编译一行执行一行，单线程的同一时间只能干一件事关于...

2018-07-28 10:32:22 320

原创理解 JS 原型

一个在prototype上的特殊操作来看这段代码输出结果和你想的是否一致呢？Person.prototype.name=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;sunny&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;; function Person(){ //执行new 操作相当于在此处 var this={__proto__

2018-07-28 10:31:53 190

原创 JS 包装类

JS的数据类型：基本类型：Undefined, Null, Boolean, Number, String 引用类型：Object, Array, Date, RegExp （其实就是对象）JS中只有对象才有属性和方法，原始值没有属性和方法那么我们平常求字符串的长度用length属性不是没有问题吗？ var str=&amp;amp;amp;amp;quot;hello world&amp;amp;amp;amp;quot;; var lon

2018-07-28 10:31:23 4056 1

原创 JS 变量

Javascript是一种解释语言，可以跨平台的单线程语言（同一时间只能干一件事，可以用来回切换给视觉提供同时进行的效果）引入方式（1）和CSS样式表一样可以从外部引入（2）页面内嵌可以加在&amp;amp;amp;amp;amp;amp;amp;lt; body &amp;amp;amp;amp;amp;amp;amp;gt;标签内部变量由值决定类型动态解释随时可以变换类型(Ⅰ)原始值（1）number：v

2018-07-28 10:30:29 525

原创 margin 塌陷及合并问题

margin塌陷问题：以父子关系结合的两个元素，在垂直方向上margin会粘合在一起，外层盒模型的margin-top取两个元素中margin-top较大的值。正常的情况下内层元素是相对于外层元素进行移动，发生margin塌陷时内层元素却相对于整个文档进行移动。margin塌陷问题例子演示如下：设置一个父元素div套一个子元素div (父元素边框100px 子元素边框50px...

2018-06-24 15:45:46 777

原创 CSS盒子塌陷问题的讨论

什么是盒子塌陷？理论上在父元素内部的元素出现在盒子外部出现原因? 一个父亲不能被自己浮动的儿子，撑出高度。当父元素未设置（足够）高度的时候，子元素设置了浮动的属性时，子元素就会跳出父元素的边界（脱离文档流）。（当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。）（如图：子元素设置浮动导致父元素塌...

2018-06-18 21:42:53 956 1

空空如也

空空如也