- 博客(48)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 扩展jQuery的其他运动形式
我们知道jQuery中的animate运动形式只有两种：linear（匀速）和swing（慢快慢）所以，这里对jQuery中的运动形式进行了一些扩展jQuery源码利用的tween.js库进行的运动形式的封装，我们这里同样也利用的是tween.js库（只是对它稍加改动，选出了一些常用的）进行扩展扩展之前，肯定是要先引入jQuery库的，这里我就不再引入了，直接看扩展$.extend(jQuery....
2018-05-31 12:25:56
310
原创 cssTransform.js（获取transfrom相关属性的值）封装函数
需要注意的是：如果想要使用该封装函数获取transform相关的属性，那么transform相关的设置，也必须是通过该方法设置的调用：cssTransform(element,attr,val)参数说明：element:要进行动画的元素attr:运动的属性（包括scale系列，translate系列，skew系列）val:运动的属性的值，比如30deg，100px啦等等（当然不用带单位哦）使用如下...
2018-05-30 18:33:24
2178
原创 move.js（运动函数封装）
调用：startMove(obj,json,endFn);参数说明：obj:要运动的元素（必写）json:是对象格式，对应为元素的属性和值（必写）endFn:回调函数（可有可无）例子：document.onclick = function(){ startMove(oDiv,{width:200,height:300});}move.js代码function startMove(obj,...
2018-05-30 18:13:27
6068
1
原创 tween.js
var Tween = { linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, easeIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, easeOut: function(t, b, c, d){ //减速曲线 return -c *(t/...
2018-05-30 18:06:32
613
原创 希尔排序原理及JavaScript实现
基本思想：希尔排序也成为“缩小增量排序”，其基本原理是，现将待排序的数组元素分成多个子序列，使得每个子序列的元素个数相对较少，然后对各个子序列分别进行直接插入排序，待整个待排序列“基本有序”后，最后在对所有元素进行一次直接插入排序。因此，我们要采用跳跃分割的策略：将相距某个“增量”的记录组成一个子序列，这样才能保证在子序列内分别进行直接插入排序后得到的结果是基本有序而不是局部有序。希尔排序是对直接...
2018-05-30 09:27:23
2052
1
原创 css中background系列详解
研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background...
2018-05-29 22:21:04
1949
原创 移动端滑动图片实现无缝滚动小实例
嗯、刚接触移动端不久，可能写的不是特别的完美，或许还会有bug，如果您看到了有哪些地方做的不是特别的好，或者您有更好的意见，欢迎在留言区指出，吾将不胜感激，当然我也会随着学习的深入，不断回来完善，尽量做到完美话不多说，上代码：（注：css代码没有附带，有兴趣的可以留言区留言）<!DOCTYPE html><html lang="en"><head> ...
2018-05-28 21:11:12
3948
7
原创 弹性盒模型新旧版本对比总结
因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击新版本弹性盒模型：https://blog.csdn.net/lhjuejiang/article/details/80019673旧版本弹性盒模型：https://blog.csdn.net/lhjuejiang/article/details/804713...
2018-05-27 20:23:01
1423
转载 CSS3弹性盒模型Flex布局新旧混合写法详解（兼容微信）
flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持 display:box），自主研发这东西也不好多说什么了，下面入正题。首先还是从两...
2018-05-27 18:41:22
1193
原创 HTML标签嵌套规则
看了网上有各种相关的总结，所以我就不再重复粘贴复制，只是把比较容易犯错的整理一下规则如下：内联元素不要嵌套块元素（虽然浏览器可能可以正常解析，但是尽量不要这样使用，一方面是遵守代码规范，另外可能会引起意想不到的错误）一些块元素不能嵌套块元素（h1、h2、h3、h4、h5、h6、p、dt不能包含块级元素）注意：p元素嵌套任何块级元素都一定会被浏览器错误解析P标签内包含块元素时，它会先结束自己，比如：...
2018-05-26 21:27:53
852
转载 W3C 代码标准规范
直接附链接喽https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html
2018-05-26 20:29:02
652
转载 css中线性渐变兼容性处理
研究了一下css3中线性渐变的兼容性问题处理，本来是想要自己总结的，但是发现张鑫旭大神关于这个问题写的很清楚了，所以就直接转载了，写得很好，很清晰IE浏览器下的渐变背景IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码：filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,...
2018-05-26 13:22:01
2105
转载 IE中CSS-filter滤镜小知识大全
前段时间在做一个专题的时候用到了opacity不透明度属性，因为设计图上是半透明背景，白色文字所以在IE用到了其支持的filter属性，听说这个属性还有不同的效果，不单单就只有不透明度而已，所以抽个时间赶紧来充下电。有时候我们很习惯的用到不透明属性opacity来增加层次感或者增加用户体验，但因这个属性是css3属性，所以对于低级浏览器的兼容性来说就达不到我们预期的效果。一般而言，我们都尽可能少用...
2018-05-26 12:31:48
1197
转载 H5新增语义化标签
一、根据页面的结构，由div派生的标签。 <header> <footer> <nav> 导航 在H4中导航栏一般用ul-li标签，H5中可以直接用<nav>标签 eg. <nav> <a href="#">导航标题1 </a> &
2018-05-26 11:36:04
664
原创 less的四种使用方法介绍
1、直接引入less.js使用步骤：1、到less官网，下载less文件2、在编译器中新建一个less文件，引入到我们的html页面中（注意下面的和css的引入方式稍微有些不同哦，看rel）<link href="css/style.less" rel="stylesheet/less"/>3、引入我们下载的less文件<script src="js/less.min.js"&g...
2018-05-25 21:11:27
11054
转载 箭头函数中的this指向问题详解
箭头函数有几个使用注意点。（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。上面四点中，第一点尤其值得注意。thi...
2018-05-25 20:06:44
11573
转载 移动端页面使用rem来做适配
rem介绍rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如html{ font-size: 10px;}p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem;}rem来做适配以前...
2018-05-25 17:31:22
375
原创 导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）
上代码前先说一下一个需要注意的点我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，（但是IE6下不生效）实现法一：HTML代码：&...
2018-05-24 23:00:31
2709
原创 wampserver 2无法访问localhost的问题（手机真机测试电脑上的本地网页）
这个网上有很多解决办法，WampServer2.2和WampServer2.4都有解决办法，写得也还是不错的WampServer2.2：写得好的网址：https://jingyan.baidu.com/article/fb48e8be3737696e632e145c.htmlWampServer2.4：写得好的网址：https://blog.csdn.net/qq_30378229/article...
2018-05-23 18:03:59
882
原创 webpack(v4.8.3)中静态资源输出以及使用第三方库的两种方法
一、webpack中静态资源输出所谓静态资源输出，说白了就是一些文件不需要经过webpack处理，直接输出到指定的地方（类似于粘贴复制）实现步骤：1、npm i copy-webpack-plugin -D2、引入 const CopyWebpackPlugin = require('copy-webpack-plugin');3、使用：new CopyWebpackPlugin([{ ...
2018-05-22 13:36:06
849
原创 webpack（v4.8.3）中对css的几种处理总结（css分离，消除冗余的css代码，自动添加浏览器内核前缀）
一、CSS分离我们知道webpack的理念就是把所有的东西都打包到js文件中，包括css、图片呀等等，好处是减少http请求，但劣势也很明显，就是随着项目越来越大，js文件也会越来越大，所以，我们就需要对css文件进行分离css分离，嗯，其实就是将css单独打包，做法很简单，需要一个插件，extract-text-webpack-plugin@next（注意：加@next是现阶段必须要加的（前提是...
2018-05-21 21:30:15
5558
转载 JS的十大经典算法排序
引子有句话怎么说来着：雷锋推倒雷峰塔，Java implements JavaScript.当年，想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript（原名LiveScript），如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域（C/C + +的大神们不要打我。。。），但在Web的江湖，JavaScript可谓...
2018-05-20 22:06:27
213
转载 毕业一年左右的前端妹子面经总结
原文链接地址https://juejin.im/post/5af99678f265da0b8e7f881e前言嗯(emmmm)，这篇面经我两周在SegmentFault上写过啦，现在在掘金上再更新一下会不会有人想揍我：你看又来了又来了~因为答应了一位技术经理不能食言在掘金上也写写文章，所以如果看过的那就再看一次吧(我已经推迟一天啦，摸摸自己的小肚子，周末吃喝玩乐+学习了)，但是我记得要更新，你看是...
2018-05-19 19:09:47
782
原创 react实现TodoList案例
说明一下：实现这个案例需要准备的东西实在太多，不可能把所有的代码都贴上来（贴了，您也未必想看啊，哈）所以，css代码，配置文件，无关逻辑的就不往这上面贴了（想必大家既然选择做这个案例，这些基本的东西也都是会的，如果有什么疑问或者想要完整的源码的可以留言，嗯、互相帮助，互相进步）需要掌握的知识点：webpack、npm、CommonJs、ES6、react、react-router功能效果：（从上到...
2018-05-19 18:14:26
1268
1
转载 深入理解 react-router 路由系统
在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统，比如 director，代码库也比较轻量。当然，主流的前端框架也都有自己的路由，比如 Backbone、Ember、Angular、React 等等。那 react...
2018-05-18 17:29:16
437
原创 React Router中Link和NavLink的学习总结
Link现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom';const Header = ()=>...
2018-05-18 17:26:20
46882
4
转载 React Router v4 知识点介绍
转载：https://www.jianshu.com/p/6a45e2dfc9d9万恶的根源距离React Router v4 正式发布也已经过去三个月了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正好“尝尝鲜”...江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。（ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信机智如我的你也会发现，ReactRou...
2018-05-18 16:12:57
234
原创 react中的无状态函数式组件
无状态函数式组件，顾名思义，无状态，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。其实无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层嗯，看个例子，使用类组件和无状态函数式组件两种方法进行对比顶...
2018-05-17 22:20:48
6827
转载 React Router 4 简易入门
React Router4是一个流行的纯React重写的包。现在的版本中已不需要路由配置，现在一切皆组件。本文涵盖了开始使用React Router构建网站所需要的一切知识。我们将会为本地运动队制作一个网站。代码想看网站最终效果，查看demo点击预览安装React Router被拆分成三个包：react-router,react-router-dom和react-router-native。rea...
2018-05-17 11:41:50
263
原创 react中的refs属性的使用方法
在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。 虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。但是...
2018-05-16 19:45:56
5484
原创 jQuery中的Ajax的一些方法
jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，还有load()、$.get()、$.post()、$.getScript()、$.getJSON()等load()方法load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中 结构为：load(url,[data],[callback])使用url参数指定选择符可...
2018-05-15 18:45:23
225
转载 深入学习react中的setState 函数
原文链接地址：https://www.oschina.net/translate/functional-setstate-is-the-future-of-reactReact 已经在 JavaScript 中普及了函数式编程。 这导致一些大型框架采用了 React 使用的基于组件的 UI 模式。 现在功能性发烧已经蔓延到整个网络开发生态系统中。但 React 团队并没有停下脚步，他们继续深入挖掘...
2018-05-15 18:07:42
3439
原创 理解react中的props和state
Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合；props：1、props意为属性，只可父组件改变子组件的props，而子组件不能自更新。（组件内部的this.props属性是只读的，不能修改）2、props是子组件暴露给外部的公有接口。3、props是一个父组件传递给子组件的数据流，...
2018-05-14 22:56:28
1388
原创 warning.js:33 Warning: A component is changing a controlled input of type text to be uncont
今天在做一个小练习的时候，真的是踩了很多坑，还好最后还是爬出来了，现在分享出来，希望帮到遇到和我一样问题的你，也是避免自己再次踩坑里报错内容：Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from contr...
2018-05-13 19:22:30
9374
转载 【大街推荐】给明年依然年轻的我们：欲望、外界、标签、时间、人生目标、现实、后悔、和经历
今天是22岁的最后一天。几个月前，我从沃顿商学院毕业，用文凭上“最高荣誉毕业”的标签安抚了已经年过半百的老妈，然后转头辞去了毕业后的第一份工作，跟一家很受尊敬的公司、还有150万的年薪道了别，回到了上海，加入了“刚毕业就失业”俱乐部，开始了一天三顿盒饭的新生活，开始创建一个叫做连客的小东西（www.linkkk.com)。中间许多精彩剧情暂时略过。我肯定不是第一个做过这样事的人，也肯定不会是最后一...
2018-05-13 16:27:46
592
原创 了解什么是JSX以及它的语法
一、什么是JSX？JSX 即 JavaScript XML，是一种在 React 组件内部构建标签的类 XML 语法。JSX 并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。这样对于使用 JavaScript 来构建组件以及组件之间关系的应用，在代...
2018-05-12 20:17:23
1866
1
原创 react中的属性验证
PropType导出一系列验证器，这些验证器可以用来确保接收到的数据是有效的。在验证属性之前，要先安装一个propTypes库，执行npm i -S prop-types使用之前要先引入prop-type验证属性前要先定义好一个对象，添加属性验证不要忘了将定义好的对象挂载在组件上面我们可以设定一个属性是一个特定的js类型，默认情况下，下面的这些都是可选的 PropTypes.array, P...
2018-05-11 22:39:51
1061
原创 ES6 模块与 CommonJS 模块的差异
前面我们已经对ES6的模块化规划和CommonJs的模块化规范已经介绍过了，所以今天我们主要聊聊这两种模块化的差异，如果对这两种模块化规范不是特别了解的，可以点击ES6模块化规范和CommonJs模块化规范ES6 模块与 CommonJS 模块完全不同。它们有两个重大差异。CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，ES6静态分析，动态引用，输出的是值的引用，值改...
2018-05-10 23:07:16
4307
原创 ES6中的模块化规范（一）
注意：ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。export命令一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。exp...
2018-05-09 23:14:39
4418
原创 webpack中的publicPath路径问题（output和DevServer中的publicPath的作用）
在webpack的配置文件中，output和devServer中都可以设置一个publicPath属性，那么两者的作用有什么不同呢？嗯、稍微的分析一下1、publicPath在output属性里面，设置的其实是一个基础的路径，它会为我们所有的资源都应用上publicPath设置的值，然后再接上资源对应转换出来的路径，怎么理解呢，看一下例子就知道了我们在配置文件中设置了一下的值output:{ ...
2018-05-08 19:42:43
11324
8
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人