一个简单技巧的集合,帮你提升 jQuery 技能。
Matt Smith 发起的一个小项目,目前已有 15 个 小技巧。伯乐在线会持续跟进更新。
回到顶部按钮
预加载图片
检查图片是否加载完毕
自动修复损坏的图片
Hover 上的 Class 开关
禁用 input 字段
停止链接加载
淡入淡出/滑动开关
简单的折叠效果
将两个 Div 设为相同高度
在新窗口打开外部链接
找到文本元素
切换可视与隐藏的触发器
Ajax 调用的错误处理
链式操作
回到顶部按钮
通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:
// Back to top
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>
将 scrollTop 的值改为你想要 scrollbar 停止的地方。然后你要做的就是,设置在 800 毫秒内回到顶部。
预加载图片
如果你的页面使用了大量不能初始可见的图片(例如绑定在 hover 上),预加载它们是十分有用的:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png'<span class="crayon-sy" style="margin: 0px