所有前端都必须知道的 jQuery 技巧-CSDN博客

前端是一个很繁杂的工作，在工作中会考虑到很多细节，也许有时候一个细节没有处理好，就会造成很大的麻烦。但是一些小技巧就能够避免。作为一个新手，即使掌握一个小技巧都能够节省很多时间。以下几个 jQuery 技巧，也许你工作中能够用上。

1. 检查图像是否加载
有时为了继续脚本，你可能需要检查图像是否全部加载完毕：

$('img').load(function () { 
  console.log('image load successful'); 
});

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

2. 自动修复破坏的图像
逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你：

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

即使没有任何断掉的链接，加上这一段代码也不会让你有任何损失

3. 悬停切换类
假设你希望当用户将鼠标悬停在可点击的元素上时，它会改变颜色。那么你可以在用户悬停的时候添加类到元素中，反之则删除类：

$('.btn').hover(function () { 
  $(this).addClass('hover'); 
}, function () { 
  $(this).removeClass('hover'); 
}); 
　　你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法：
$('.btn').hover(function () { 
  $(this).toggleClass('hover'); 
});

4. 禁用输入字段

有时候，你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作（例如，勾选 “我已阅读相关条款” 复选框）。添加 disabled 属性到你的输入就可以在你想要的时候才启用它：

$('input[type="submit"]').prop('disabled', true);

然后你只需要运行输入的 prop 方法就可以了，不过 disabled 的值要设置为 false：

$('input[type="submit"]').prop('disabled', false);

5. 淡入 / 滑动切换
滑动和淡入都是我们用 jQuery 做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话，那么用 fadeIn 和 slideDown 方法就很完美。但是，如果你想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，那么可以试试下面的代码：

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

6. 让两个 div 高度相同　　有时候，你需要让两个 div 无论包含什么内容都拥有相同的高度：

$('.div').css('min-height', $('.main-div').height());

设置 min-height，这意味着它可以比主 div 大但绝对不能比主 div 小。不过，还有一种更灵活的方法是遍历一组元素，然后将高度设置为最高的那个元素的高度：

var $columns = $('.column'); 
var height = 0; 
$columns.each(function () { 
  if ($(this).height() > height) { 
    height = $(this).height(); 
  } 
}); 
$columns.height(height);

7. 在新标签页 / 窗口打开外部链接
在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开：

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

注意：window.location.origin 在 IE10 中无效。修复的时候要小心这个问题。

8. 通过文本查找元素
通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。如果文本不存在，那就隐藏该元素：

var search = $('#search').val(); 
$('div:not(:contains("' + search + '"))').hide();

9. 预加载图像
如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像：

$.preloadImages = function () { 
  for (var i = 0; i < arguments.length; i++) { 
    $('<img>').attr('src', arguments[i]); 
  } 
}; 
 
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

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

$(document).ajaxError(function (e, xhr, settings, error) { 
  console.log(error); 
});

所有前端都必须知道的 jQuery 技巧

“相关推荐”对你有帮助么？