分享前端开发常用代码片段-值得收藏

一、预加载图像

如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

二、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

你也可以使用 ID 或 CLASS 替换 <img>标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

四、悬停切换

当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除类。

只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

五、淡入淡出/显示隐藏

六、鼠标滚轮

七、鼠标坐标

1、JavaScript实现

2、jQuery实现

八、禁止移动端浏览器页面滚动

1、HTML实现

2、JavaScript实现

九、阻止默认行为

十、阻止冒泡

十一、检测浏览器是否支持svg

十二、检测浏览器是否支持canvas

十三、检测是否是微信浏览器

十四、检测是否移动端及浏览器内核

十五、检测是否电脑端/移动端

十六、检测浏览器内核

十七、强制移动端页面横屏显示

十八、电脑端页面全屏显示

十九、获得/失去焦点

1、JavaScript实现

2、jQuery实现

二十、获取上传文件大小

二十一、限制上传文件类型

1、高版本浏览器

2、限制图片

3、低版本浏览器

二十二、正则表达式

二十三、限制字符数

二十四、验证码倒计时

二十五、时间倒计时

二十六、倒计时跳转

二十七、时间戳、毫秒格式化

二十八、当前日期

二十九、判断周六/周日

三十、AJAX调用错误处理

当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

三十一、链式插件调用

jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

通过使用链式,可以改善

还有一种方法是在(前缀$)变量中高速缓存元素

链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复