这篇拖得太久了,已经需要在标题前面加上“躲在空调房”了~囧rz
$.('.element').prop('tagName');
(注意,获得的标签名为大写。)
2、把 JSON 对象转为数组。
使用 jQuery 的 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、点击穿透。
使用 CSS 的 pointer-events:none
后,会禁用当前元素与鼠标之间的交互,
如点击、选中文字等,因此可以达到“穿透”的效果,
与重叠于其后层的元素进行交互。
div { pointer-events: none; /* ie11+/chrome/firefox */ }
4、解决 iOS 在中文输入法时不触发 keyup 事件。
除了监听 change
和 keyup
外,尝试监听 paste
事件:
$('input').on('change keyup paste', function() { /* do some stuff */ });
5、清空数组。
除了最基本的初始化:
arr1 = [];
还可以尝试以下方式:
arr2.length = 0; arr3.splice(0,arr3.length);
6、跨浏览器图片反射。
用 CSS 实现(背景)图片反射效果的方式有很多,但考虑到浏览器兼容性问题,
还是这个有趣的通过 background-image:inherit
来实现比较好。
<div>
本身设背景图片,::before
进行半透明过渡,::after
反转背景图片:
0
7、正整数的正则表达式。
/^[1-9]\d*$/.test(534); /* true */
8、简单复制 Vue 中的数据对象。
在 Vue 中数据对象都是双向绑定的,便利的同时也会在特殊场景遇到麻烦。
比如我们想把某个对象设为模版,其它的对象只复制其值而不进行改变。
vm.b = JSON.parse(JSON.stringify(vm.a));
9、解决等高行内元素突起。
当一行内有多个元素,虽然设置了统一行高/高度,
但因为字体大小差异等原因,依旧会导致整体高度有所“突起”。
此时可以为各行内元素设置 vertical-align:top
得以解决:
0
10、用背景图片解决图片尺寸不统一。
由用户上传的图片往往尺寸不一,如果在上传时后端没有处理,
在前端统一样式的列表中,特别是需要响应式的场景下,会相当麻烦。
完全可以换一个思路,用一个空的 <div>
设置背景图片替代 <img>
,
然后利用 CSS 的 background-size:cover
,自动截取图片中心内容并填满容器:
0
【相关资料】
0、starmanseries – A Frosty Air Conditioner ◃ flickr