前端开发者都应知道的 jQuery 小技巧

2507

一个简单技巧的集合,帮你提升 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