• map/reduce学习感悟

    在这段时间,都在廖雪峰的官方网站学习JavaScript的教程。学习到这一章map时,对map的用法相当喜欢。以前对数组的操作都感觉相当烦锁了,但这map让我知道了,对数组的操作原来这可以这么爽。

    map()

    返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

    1
    2
    3
    4
    5
    function pow(x) {
    return x * x;
    }
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
    ...ready more
  • Array排序方法sort()中的大坑

    sort() 方法用于对数组的元素进行排序。

    但是排序结果就有点坑了,都不按常规出牌的:

    1
    2
    3
    4
    5
    6
    7
    8
    // 看上去正常的结果:
    ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

    // apple排在了最后:
    ['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

    // 无法理解的结果:
    [10, 20, 1, 2].sort(); // [1, 10, 2, 20]

    1、对了,跟想像中一样;
    2、是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后,可以理解;
    3、什么鬼?三岁小孩都不会错,现在居然…[心碎]

    ...ready more
  • diaplay:table-cell使用小结

    table-cell是display家族中的小小一员,传统布局中几剩乎是忽略它的存在。因为IE8以下是不兼容的,没错就是那个万恶的IE6和IE7。随着时间的推进,很多用户都已放弃的IE6/IE7的使用了,使table-cell沉默至今终于可以大展拳脚了。

    display:table-cell其实就是让标签元素以表格单元格的形式呈现,类似于td标签。

    相比于flex功能没这么强大,但相对于简单容易理解和使用,代码简略不用添加一些内核前缀,移动端主流还是flex

    元素自动平分填满一行

    先看看实现效果图:

    第一眼看,你可能是想着这个用float轻松实现,单格大小就是100/个数的百分比就可以。但这样单元格的数量发生变化时,你就要重新计算了,用float还要处理清除浮动一些手尾。现在用table-cell轻松无痛实现。

    ...ready more
  • 每日一撸:className

    className

    设置或返回元素的 class属性

    1
    HTMLElementObject.className=classname

    常用指定的class属性。也可以是添加class属性,不替换原有的class

    1
    HTMLElementObject.className+=classname
    ...ready more
  • 每日一撸:attribute 所有使用方法

    • attributes 获取一个属性作为对象
    • getAttribute 获取某一个属性的值
    • setAttribute 建立一个属性,并同时给属性捆绑一个值
    • createAttribute 仅建立一个属性
    • removeAttribute 删除一个属性
    • getAttributeNode 获取一个节点作为对象
    • setAttributeNode 建立一个节点
    • removeAttributeNode 删除一个节点
    • attributes 可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。

    ...ready more
  • 每日一撸:splite() | replace() | match() 方法

    split()

    用于把一个字符串分割成字符串数组。
    数组切割的常用方法。

    语法

    1
    stringObject.split(separator,howmany)

    separator:必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
    howmany:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

    ...ready more
  • input 在IE下兼容问题

    最近有个项目要求是兼容IE7以上,各种头大啊!!

    最怕是搞IE兼容了,各种 css hack…

    先记录一下input的兼容处理方案

    输入框

    html代码

    1
    <input type="text" class="text" value="" placeholder="请输入关键字">
    ...ready more
  • 前端相关网址导航,收集中...

    资源官网

    ...ready more