冻得直哆嗦的豆知识

A Frosty Air Conditioner

这篇拖得太久了,已经需要在标题前面加上“躲在空调房”了~囧rz

1、jQuery 获取所选元素的标签

$.('.element').prop('tagName');

(注意,获得的标签名为大写。)

2、把 JSON 对象转为数组
使用 map() 来实现:

var arr = $.map(obj, function(el) { return el });

使用 JS 原生的 Array.prototype.map() 来实现:

var arr = Object.keys(obj).map(function(k) { return obj[k] });

3、点击穿透
使用 pointer-events:none 后,会禁用当前元素与鼠标之间的交互,
如点击、选中文字等,因此可以达到“穿透”的效果,
与重叠于其后层的元素进行交互。

div {
    pointer-events: none;  /* ie11+/chrome/firefox */
}

4、解决 iOS 在中文输入法时不触发 keyup 事件
除了监听 changekeyup 外,尝试监听 paste 事件:

$('input').on('change keyup paste', function() {
    /* do some stuff */
});

5、清空数组
除了最基本的初始化:

arr1 = [];

还可以尝试以下方式:

arr2.length = 0;
arr3.splice(0,arr3.length);

6、跨浏览器图片反射
实现(背景)图片反射效果的方式有很多,但考虑到浏览器兼容性问题,
还是这个有趣的通过 background-image:inherit 来实现比较好。
<div> 本身设背景图片,::before 进行半透明过渡,::after 反转背景图片:

0

7、正整数的正则表达式

/^[1-9]\d*$/.test(534);  /* true */

8、简单复制 Vue 中的数据对象
中数据对象都是双向绑定的,便利的同时也会在特殊场景遇到麻烦。
比如我们想把某个对象设为模版,其它的对象只复制其值而不进行改变。

vm.b = JSON.parse(JSON.stringify(vm.a));

9、解决等高行内元素突起。
当一行内有多个元素,虽然设置了统一行高/高度,
但因为字体大小差异等原因,依旧会导致整体高度有所“突起”。
此时可以为各行内元素设置 vertical-align:top 得以解决:

0

10、用背景图片解决图片尺寸不统一。
由用户上传的图片往往尺寸不一,如果在上传时后端没有处理,
在前端统一样式的列表中,特别是需要响应式的场景下,会相当麻烦。
完全可以换一个思路,用一个空的 <div> 设置背景图片替代 <img>
然后利用 background-size:cover,自动截取图片中心内容并填满容器:

0

【相关资料】
0、starmanseries – A Frosty Air Conditioner ◃ flickr

发表评论

邮箱地址不会被公开。 必填项已用*标注