公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

单页应用中更优雅的操作dom

前言

以前的项目是jquery独行天下,但是随着单页应用的流行,很多公司放弃了jquery的使用,主要因为项目中dom操作较少,一般都是数据改变dom,但是假如项目中难免的操作一些dom的时候,我们可以完全用js的一些写法,完全没有必要小小的操作来引进一个那么庞大的jquery。 关于js替代jquery的一些函数我之前也有整理过,请看文章jquery属性的相关js实现方法

但是话说回来了,jquery用习惯了,$(),这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法

$$('a') 等价于 document.querySelectorAll(“a”)

$$ 目前用的人毕竟很少,后期维护等也不是很方便。

element上传组件循环引用及简单时间倒计时

前言

今天记录几个简单的小问题,前端时间开发用到的,之前看到博客中没有记录,简单记录一下。 一个是element上传组件循环引用的方式,一个是简单的倒计时。

上传组件每个上传都要指定相应的函数,而且函数不能传入参数,10个上传按钮要写10个上传函数,非常麻烦。针对这个,我们可以循环这些函数。

案例

element一个上传组件如下:

记录一下js光标位置及复制和剪切板

前言

关于光标位置,copy与剪切板等,博客中总结的比较少,翻了一下,很久之前做编辑器的时候,有类似文字javascript获取iframe中光标所在位置的父节点名称,但是和今天总结的这个还不太一样。由于项目中用到在input某个光标之后动态插入宏,用到了光标位置。在这里记录一下。

光标位置后插入

其实光标位置后插入,我的做法是很简单的,就一句话。vue版本如下:

JS十六进制颜色(#fff)与RGB, HSL颜色的相互转换

前言

今天做了这个需求,就是前端支持rgba设置,但是后台生成图片的时候不支持rgba,需要2个值。分别是一个十六进制颜色值和一个opacity透明度,这就要我这边传值的时候,把原来的rgba转换成2个值,然后传给后台。(注,之所以前端没有分成2个字段,是因为前端设置颜色的时候直接用一个rgba设置的,这样用户体验好,分别设置颜色和透明度的话,还要分2次,对用户来说稍微有点麻烦。)

转换方法

转换方法其实网上搜索也能搜索到,这里暂时列一下:

rgb转为十六进制颜色