CSS进阶篇--CSS3实现波浪效果

2017-05-22
阅读 2 分钟
10.7k
首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。

JS进阶篇--JS函数节流(throttle)

2017-05-18
阅读 3 分钟
7.4k
介绍前,先说下背景。在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道,DOM操作时很消耗性能的,这个时候,如果你为这些事件...

JS基础篇-- JS对全角与半角的验证,相互转化以及介绍

2017-05-17
阅读 2 分钟
12.7k
汉字字符和规定了全角的英文字符及国标GB2312-80中的图形符号和特殊字符都是全角字符。在全角中,字母和数字等与汉字一样占据着等宽的位置。

JS进阶篇--RequireJS模块化编程详解

2017-05-17
阅读 6 分钟
8k
1.模块的写法 模块化编程一般都有这么几个过渡过程,如下描述。 原始方法 {代码...} 上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。 这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。 对象写法 为了解决上面的缺点,可以把模块写成...

css3效果:animate实现点点点loading动画效果(二)

2017-05-04
阅读 3 分钟
4.3k
这里用到了currentColor这个关键字,IE9+浏览器支持,其可以让CSS生成的图形的颜色跟所处环境的color属性值一样,也就是跟文字颜色一样。

css3效果: animate实现点点点loading动画效果(一)

2017-05-02
阅读 8 分钟
9.9k
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: {代码...} css代码: {代码...} 出现的就是如图所示的结果。注意点: 1.IE10+以及其他浏览器,点点点动画消失,IE6-IE9是普通的点点点文字。2.animate动画是连续的,但是我们这儿是一帧一帧的,一卡一卡的,不是那么连续的效果,用到step-star...

jQ进阶篇--开发短信发送倒计时功能

2017-04-11
阅读 5 分钟
2.8k
实现的主要功能如下:1.点击按钮的时候,可以进行倒计时,倒计时自定义。2.当接收短信失败后,倒计时停止,可点击重新发送短信。3.点击的元素支持一般标签和input标签。

JS总结篇--[总结]JS常用方法与片段

2017-03-09
阅读 10 分钟
2.3k
IE中有这样一个方法:removeNode(),这个方法在IE下是好使的,但是在Firefox等标准浏览器中就会报错了 removeNode is not defined,但是在核心JS中有一个操作DOM节点的方法叫:removeChild()。

jQ进阶篇--deferred对象详解

2017-03-09
阅读 6 分钟
3.2k
开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

jQ进阶篇--插件开发进阶

2017-03-08
阅读 8 分钟
3.2k
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuer...

jQ基础篇--插件开发入门

2017-03-08
阅读 4 分钟
2.9k
现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQ...

JS总结篇--[转]JS学习总结-技巧、方法、细节

2017-03-08
阅读 5 分钟
1.8k
但是转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数,创建正则表达式的时候要使用/pattern/flags这样的简化形式。

git常用命令总结以及用github来展示你的前端页面

2017-02-22
阅读 3 分钟
3.2k
命令git init 把当前文件夹初始化为默认的git库git add 文件名 向git库中添加一个文件git rm 文件名 从git库中删除一个文件git status 查看当前库中进行的任务git diff 文件名 add前查看工作区和暂存区的差别git commit -m "修改内容" 把修改内容提交上去,用于区别版本git checkout -- 文件名 在add之前把文件恢复到上...

jQ进阶篇--jQuery 对AMD的支持(Require.js中如何使用jQuery)

2017-02-22
阅读 3 分钟
3.1k
AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。

vuejs2.0实现分页组件,使用$emit进行事件监听数据传递

2017-02-22
阅读 7 分钟
3.2k
上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。

vuejs2.0实现一个简单的分页

2017-02-22
阅读 6 分钟
3k
调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.el就是element的缩写,定位模版的位置.data就是数据了.知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.所以我们要用computed

vuejs2.0使用Sortable.js实现的拖拽功能

2017-02-21
阅读 3 分钟
15.2k
在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码。

CSS效果篇--CSS3实现5种预载动画效果

2017-02-16
阅读 5 分钟
5.6k
实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。实现如图所示:html代码: {代码...} css代码: {代码...} 预载动画二:交错圈 两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。效果:html代码: {代码....

vuejs 1.x - 实例:搜索过滤

2017-02-15
阅读 3 分钟
1.9k
{代码...} 结果如图所示,可以搜索过滤,点击table th可以降序,升序排列当前列

JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

2017-02-15
阅读 8 分钟
4.1k
window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。

JS基础篇--如何用JavaScript判断dom是否有存在某class的值?

2017-02-14
阅读 2 分钟
5.7k
源码里面用到了nodeType,nodeType是HTML DOM 的nodeType 属性,nodeType 属性返回以数字值返回指定节点的节点类型。常用的一般有三种:

JS基础篇--HTML DOM classList 属性

2017-02-14
阅读 3 分钟
9.4k
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据

2017-02-10
阅读 2 分钟
9.4k
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据。如图所示: html代码: {代码...} js自定义过滤器代码: {代码...} 比如在输入框中输入'mm',得到筛选的结果如图所示:

vuejs通过filterBy,orderBy实现搜索筛选,降序排序实例

2017-02-09
阅读 2 分钟
5.1k
直接贴代码了,页面实现的样子: {代码...} 当在输入框中输入'合同',得到结果如图:

vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

2017-02-08
阅读 3 分钟
4.5k
在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样: ref="myElement", v-ref:my-component 变成了这样: ref="myComponent"。绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例。

CSS进阶篇--CSS gradient渐变之webkit核心浏览器下的使用以及实例

2017-02-03
阅读 6 分钟
4.1k
渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可以用来代替图片URL。在webkit核...

CSS进阶篇--CSS3常用属性animation-play-state的使用技巧

2017-02-02
阅读 5 分钟
3.6k
浏览器支持:Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。注释:Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

JS进阶篇--touch.js 拖动、缩放、旋转 (鼠标手势)

2017-01-20
阅读 4 分钟
6.5k
可以实现手势操作:拖动、缩放、旋转。封装好的脚本方法是这样的: {代码...} html代码: {代码...} js调用: {代码...} touch官网地址:[链接]

vue.js插入dom节点的方式

2017-01-19
阅读 2 分钟
18k
说明:1.对比jquery的dom节点的插入方式,vue.js的插值需要使用先new创建一个实例然后通过$mount()。2.手动挂载到dom节点中,然后使用$appendTo/$before/$after等方法进行插值。3.这种操作dom的思想其实并不是vue提倡的方式,而vue提倡的方式是通过操作数据来完成你想要的结果。4.vue的思想是这个dom已经存在,通过判断...