css中伪元素before或after中content的特殊用法attr

前言

前端技术发展很快,我之前写的js和jquery懒加载之可视区域加载,貌似谷歌,火狐等浏览器推出了新的方法,IntersectionObserver,可以高效的检测出某一个元素是否进入了可视区域!不过这个只有在谷歌51以上版本才可以使用!因此,关于这个属性,后面大面积推广之后,再给大家介绍。今天主要给讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果!

知识点回顾

关于伪类及伪元素,我前面文章已经经过,before和after也写过相关文章http://www.haorooms.com/post/css_common 第十条。 content除了上面的用法之外,还可以如下写:

content: attr(data-haorooms);

获取哪个属性。

html5自带表单验证体验优化及提示气泡修改

前言

慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了。还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程。今天就稍微说一下表单验证!另外,有网友建议我录制一些关于vue的视频。一是由于vue我本身用的也不多,二是视频网站暂时没有让我录制的需求。因此,后面有时间我再准备此方面的课程!

下面说下正题,html5表单验证方便的知识,我之前也写过!大家请看http://www.haorooms.com/post/html5_form_zs 今天呢,在写写其再带验证方面的东东!

html5自带表单验证

很多朋友进行表单验证的时候,都是自己用jquery或者js手工验证,或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好!其实,现在html5自带表单验证,目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧!体验一下!

javascript函数的uncurrying 反柯里化

什么是反柯里化?

前面我们讲了js函数的柯里化,今天我们再来说说反柯里化。反柯里化,字面意思的柯里化的反义词,对立面。没错,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用。更通俗的解释说反柯里化是 函数的借用,是函数能够接受处理其他对象,通过借用泛化、扩大了函数的使用范围。只说可能有点迷糊,我们来看看例子:

我们给函数增加一个反柯里化方法!

Function.prototype.unCurrying= function() {
    var that = this;
    return function() {
        return Function.prototype.call.apply(that, arguments);
    }
}

JavaScript的函数currying 柯里化

什么是js函数的currying /柯里化?

说到js的柯里化,相信很多朋友都会头大。或者不是很清楚。我今天简单的给大家介绍一下!我用一句话总结函数柯里化,js柯里化是逐步传参,逐步缩小函数的适用范围,逐步求解的过程

可能对这句话你不是很清楚,那么,我们来看个案例,简单说明一下:

需求:我们写一个函数,将函数的几个参数相加,返回结果!那我们写的函数如下

var concat3Words = function (a, b, c) {
    return a+b+c;
};

探讨javascript函数节流

前言

最近好忙,10月中旬了,才写10月份的第一篇文章。今天主要写写我们平时工作中需要的函数节流。可能有的朋友对函数节流没有意识。其实,在工作中,很多场景都需要我们进行js的节流。最常见的是屏幕伸缩resize,以及touchmove或者scroll等事件的时候。大家不知道有没有看我之前写的文章!jquery判断页面滚动条上滚下滚touchmove的滑动方向,大家在使用这些例子的时候,会发现页面不停的触发touchmove或者scroll因为这里没有关系到页面的重绘,因此,我在这里没有使用javascript函数节流。但是,当我们使用window.onresize的时候,也会不停的触发resize事件!这里就会关系到页面的重新绘制问题了。因此,在window的resize的时候,我们推荐大家使用函数节流的方式!

javascript函数节流简介

假如你对我上面一大坨文字感到头大,没关系,我在这里简单举例说明一下函数节流吧!例如当我们使用

 $(window).resize(function(){
            console.log("haorooms window resize");
        })

会发现: