qq_39743131的博客

转载 事件委托

为什么要用事件委托？？？事件委托有什么好处？？？一般来说，dom是需要有事件处理程序的，我们会直接给他事件处理程序就好了，那么如果是很多dom元素需要添加事件处理呢？？？比如 100个li，每个li 都有相同的click点击事件，可能我们会有for循环的方法，来遍历所有li，然后为每个li添加绑定事件。这么做毫无疑问的是对性能有很大的影响；在js中，添加到页面上的事件处理程序的多少将直接关系到页面...

原创 jquery的链式编程

一、jQuery的三种$()$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数。1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如：$("...

转载 bootstrap栅格系统

栅格系统（布局）Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：网格系统的实现原理非常...

转载 箭头函数

和普通函数相比，箭头函数主要就是以下两个方面的特点不绑定this，arguments更简化的代码语法第二个特点不需要过多赘述，下面我们来看看不绑定this和arguments这两个特点么叫不绑定this，我个人的理解为箭头函数的this其实就是在定义的时候就确定好的，以后不管怎么调用这个箭头函数，箭头函数的this始终为定义时的this 我们还是以前面的那个setInterval代码为例const...

转载 es6和es5的区别

1、ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { var a = 1; let b = 1; } a; b;/let不像var存在变量提升，即变量一定要声明之后才能使用2、块级作用域ES5只有全局作用域和函数作用域，没有块级作用域 3、变量的结构赋值var [a, ...

原创 vue

转载 promise

Promise 是异步编程的一种解决方案,简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其...

转载 标准模式和怪异模式

标准模式和怪异模式的来由在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CS...

转载 script中的defer和async

有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容...

原创 rem em

1.em 参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号 2.rem是css3新增的一种长度单位，他是参照根元素（html)的字号步骤一根据稿件进行图片的划分步骤二：媒体查询不同屏幕给不同的html设置字号：每一份占据的字号（每一个rem代表的px) 【总的宽度除以份数】步骤三：设置元素实际占据稿件的份数的rem应用：640px占据20等分，那么一份为32px,即为1rem...

转载 懒加载

懒加载的原理原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。代码实现既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们...

转载 webpack打包原理

webpack核心概念entry 一个可执行模块或库的入口文件。chunk 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。loader 文件转换器，例如把es6转换为es5，scss转换为css。plugin 插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。...

盒子居中弹性布局

1.将盒子居中： 1.知道小盒子的宽高：left :50%，margin-left：-（小盒子的一半的宽度） 2.不知道小盒子的宽度：left：50%  transfrom:translate:(-50%);2.弹性布局：（默认只有一行  开启换行：flex-wrap:wrap就不可以用align-items进行设置了。       可以用align-content来代替（注意只对多行管用））  ...

转载 var let const

首先我们比较一下使用var声明的变量和不使用var声明的变量的区别：使用var声明的变量声明前调用，那么该变量的值为undefined；不使用var声明的变量声明前调用直接报错Uncaught ReferenceError：xxx is not difined；使用var声明的变量不可delete，不使用var声明则可以delete掉释放空间。（实则浏览器的垃圾回收机制也会清理掉用var声明但是不...

gulp命令

五个核心的方法：gulp.task('任务名‘，function(){})//创建任务gulp.src('./*.css')指定想要处理的文件gulp.dest()//指定最终处理后的文件的存放路径gulp.watch()//自动监视文件的变化，然后执行相应的任务gulp.run('任务名’）直接执行相应的任务在npm中安装：npm install gulp -cli -g1.在项目的中也要安装g...

git 的用法

1.初始化git init2.配置使用者的用户名和邮箱git config --global user.name "xxx"git config --global user.email  "[email protected]"3.把代码放到仓库中    git add "./xxxx"(暂存区）    git commit -m "说明"（版本库）4.把代码放到仓储区，工作区 暂存区 版本库    工作区问当...

原创 mint-ui和mui的使用

mint-ui需要进行下载，import css文件 css组建可以直接使用，js组件需要在script中引入mui全部下载，在dist文件夹里里面的东西全部拷贝，在main.js中引入css文件 ，然后复制代码，注意图片的地址src后面的单引号改为双引号，不然webpack的时候会报错...

原创 ES6语法总结

       1、对象的写法        es5中对象： {add:add,substrict:substrict}        es6中对象： {add,substrict}  注意这种写法的属性名称和值变量是同一个名称才可以简写，否则要想es5那样的写法,例如： {addFun:add}    2、在对象中的方法的写法        es5中对象： {add:function(){},su...

原创 webpack的使用

其中浏览器不认识require关键字，webpack main.js build.js[运行时使用]webpack是一个资源的打包工具可以将 .js, .css , image等静态资源当做一个模块来进行打包，那么每一种模块都是有一个对应的 loader来实现, webpack是基于nodejs运行的，所以在安装webpack之前必须先安装nodejs环境,开发代码【src】和打包后生成的代码【...

原创 table 表格

1.table表格常见的使用属性为:border-collapse:collapse;2.confirm("显示的文字“）点击确认为true,取消为false，3.数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined[1, 4, -5,...