jQuery技巧大全：前端开发者的必备利器

发表时间: 2022-09-02 17:18

对于前端人来说，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="#">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的回调函数中。

function preloadImg(url) {
var img = new Image();
img.src = url;
if(img.complete) {
//接下来可以使用图片了
//do something here
}
else {
img.onload = function() {
//接下来可以使用图片了
//do something here
};
}
}

2、多图片预加载

很多场景下，单图片预加载并不能满足我们的需求，因为像动画这种功能通常都会有很多的图片素材，在这种情况下，我们可以通过下面的代码来实现多图片的预加载。

function preloadImg(list,imgs) {
var def = $.Deferred(),
len = list.length;
$(list).each(function(i,e) {
var img = new Image();
img.src = e;
if(img.complete) {
imgs[i] = img;
len--;
if(len == 0) {
def.resolve();
}
}
else {
img.onload = (function(j) {
return function() {
imgs[j] = img
len--;
if(len == 0) {
def.resolve();
}
};
})(i);
img.onerror = function() {
len--;
console.log('fail to load image');
};
}
});
return def.promise();
}
var list = [......], //此处省略一万个字符
imgs = [];
$.when(preloadImg(list, imgs)).done(
function() {
//预加载结束
//do something here
}
);

六、验证元素是否为空

$(document).ready(function() {
if ($(‘#id‘).html()) {
// do something
}
});

七、淡入/滑动切换

滑动和淡入是我们在使用jQuery做动画时经常会用到的东西。如果只是想在用户点击之后展示一个元素的话，可以用fadeIn 和slideDown 方法就能完美实现。如果想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，可以使用下面的代码实现。

Fade $('.btn').click(function () {
$('.element').fadeToggle('slow');
});
Toggle $('.btn').click(function () {
$('.element').slideToggle('slow');
});

八、重复的函数只定义一次

如果追求代码的更高性能，那么在设置事件监听程序时必须要小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

$(document).ready(function(){
function showMenu(){
alert('Showing menu!');
// Doing something complex here
}
$('#menuButton').click(showMenu);
$('#menuLink').click(showMenu);
});

九、在新标签页/窗口打开外部链接

在一个新的浏览器tab或窗口中打开外部链接，并确保同一个来源的链接能在同一个tab或者窗口中打开。

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin +
'"]').attr('target', '_self');

十、停止加载链接

如果你既不需要链接到某个特定的网页，也不想要重新加载页面，可以通过阻止默认动作的方法来触发一些脚本。

$('a.no-link').click(function (e) {
e.preventDefault();
});

以上就是今天小编分享的全部干货技巧，你Get到了吗？前端人可以试着动手操作一下哦~

想要成为一个优秀的前端人，jQuery仍然是我们必须熟练掌握并运用的一个部分。并且，如果想要在工作上更进一步，或者是想要让自己的工作更加轻松高效，那么花费一些时间去学习和掌握一些小技巧是必不可少的。磨刀不误砍柴工，这些简单的jQuery小技巧或许能在你的工作中起到如虎添翼的作用哦~

jQuery技巧大全：前端开发者的必备利器

热门阅读

推荐阅读