分享前端开发常用代码片段

一、预加载图像

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

二、检查图像是否加载

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

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

三、自动修复破坏的图像

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

四、悬停切换

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

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

五、淡入淡出/显示隐藏

2051339726-5ae932ef48f84_articlex

六、鼠标滚轮

七、鼠标坐标

1、JavaScript实现

2、jQuery实现

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

1、HTML实现

2、JavaScript实现

九、阻止默认行为

十、阻止冒泡

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

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

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

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

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

十六、检测浏览器内核

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

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

十九、获得/失去焦点

1、JavaScript实现


2、jQuery实现

二十、获取上传文件大小

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

1、高版本浏览器

2、限制图片

3、低版本浏览器

二十二、正则表达式

二十三、限制字符数

二十四、验证码倒计时

二十五、时间倒计时

二十六、倒计时跳转

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

二十八、当前日期

二十九、判断周六/周日

三十、AJAX调用错误处理

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

AJAX调用错误处理

三十一、链式插件调用

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

1605726724-5ae934ce7e864_articlex

通过使用链式,可以改善

2076706791-5ae9350c8fe6e_articlex

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

3263596527-5ae9355bee97b_articlex

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

本文在GitHub的地址 Common-code

阅读更多

参考文章 『总结』web前端开发常用代码整理

1 5 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部