天猫国际|前端人必看的jQuery技巧，让工作更高效！

文章图片

对于前端人来说， jQuery不仅在前端学习中是非常重要的一部分，在工作过程中也起到非常重要的作用，是我们经常会用到的东西。 jQuery是一套兼容多浏览器的javascript脚本库。使用jQuery可以非常大的提升我们在编写javascript代码时的效率，帮助我们节省大量的工作，让代码变得更加专业且简洁。

jQuery可以说是当下最流行的javascript框架之一，虽然现在出现一些声音说jQuery即将被时代所淘汰。但是，我们不得不正视的是，在目前的前端工作中仍然非常多的需要使用到jQuery 。所以，不管jQuery未来将如何，作为一个合格的前端工程师，你仍然需要熟练掌握和运用jQuery 。

下面小编整理了一些我们在工作中常用到的jQuery技巧，可以帮助我们提高工作效率，为你上班摸鱼腾出更多的时间，前端人一定不能错过~
一、返回顶部按钮
我们可以直接利用jQuery中的animate 和scrollTop 方法来实现返回顶部的动画，就不用再去使用其他的插件。

// Back to top
$('a.top').click(function () {
$(document.body).animate({scrollTop: 0 800);
return false;
);  <a href=https://mparticle.uc.cn/"#\">Back to top</a>

通过改变 scrollTop 的数值就能够调整返回距离顶部的距离， animate 的第二个参数是执行返回动作需要的时间(单位：毫秒) 。
二、禁止右键点击

$(document).ready(function(){
$(document).bind(\"contextmenu\"function(e){
return false;
);
);

三、自动修复破坏的图像
在工作中，我们有时会遇到需要逐个去替换掉已经破损掉的图像链接，相信遇到过的朋友都知道这个过程是非常痛苦的，那么下面的代码可以帮你解决这个问题。并且，即使没有需要修复的图像链接，加上这一段代码也不会有任何损失。

$('img').on('error' function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src'
'img/broken.png').addClass('broken-image');
);

四、悬停切换类
如果你想要实现当用户将鼠标悬停在可点击的元素上就能让其改变颜色的效果，那你可以在用户悬停的时候添加类到元素中，反之则删除类。（可能这种效果可以通过CSS实现，但是了解这个方法是很有必要的。）

$('.btn').hover(function () {
$(this).addClass('hover');
function () {
$(this).removeClass('hover');
);

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

$('.btn').hover(function () {
$(this).toggleClass('hover');
);

五、预加载图片
预加载图片可以分为两种情况，一种是单图片预加载，一种是多个图片同时预加载。
1、单图片预加载
先实例化一个Image对象赋值给img ，设置img.src为参数url指定的图片地址然后判断img的complete属性，若本地有图片的缓存，则该值为true ，此时可以直接操作这张图片。若本地没有缓存，则值为false ，此时需要监听img的onload事件，把对img的操作放在onload的回调函数中。