你应该知道的jQuery的小技巧

本文为翻译文章，原文在jquery-tips-everyone-should-know。本文从属于笔者的Web 前端入门与最佳实践系列文章。

回到顶部的按钮

经过使用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的值能够设置滚动最终中止的位置，最终的效果就是在800毫秒的时间内文档会被滚动到指定的地方。

图片预加载

若是网页中使用了大量的图片而且不必定须要马上可见，能够把它们放入预加载队列：

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('img').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

检查图片是否加载完成

有时候须要检查某个图片是否加载完成从而继续下面的操做：

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

一样的，可使用ID或者类选择器来判断某个特定的图片是否加载完成。

Fix Broken Images Automatically

在页面上若是发生某些图片加载失败是一个很是常见而且恶心的事情，以下的一小段代码能够在某种程度上解决这个问题：

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

即便没有发现任何的坏链的状况，也是建议将这段代码添加到页面中。

Toggle Classes on Hover

不少时候须要的响应是在用户悬浮在某个元素上时改变其的可见性或者状态，换言之，便是在用户将鼠标悬浮在某个元素上时修改其的类属性，而在用户中止悬浮时移除该类:

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

固然，更简单的就是利用 toggleClass 方法:

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

Note: CSS的hover伪类多是更方便的作法，不过知晓这种用法也是值得的。

禁用输入框

不少状况下咱们但愿提交按钮可以在部分文本框未填入的状况下处于禁用状态直到用户执行了某个动做，此时咱们就须要为这个按钮添加disabled属性：

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

若是须要回复输入框的状态，那么就要再次使用 prop方法, 不过将 disabled 的值设置为false:

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

阻止连接的加载

有时候你不但愿用户在点击了某个连接以后跳转到新的页面或者重载当前页面：

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

触发渐隐/滑动

滑动与渐隐是jQuery种最多见的动画之一，不少时候咱们但愿能在用户点击某个元素以后将其渐隐渐出或者滑动出现：

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

简单的折叠效果

有时候咱们须要可以达成简单的折叠效果：

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

将两个DIV设置为统一高度

有时候但愿不管两个DIV种包含怎样的内容都能保持统一高度：

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

也可使用以下更灵活一点的方法：

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

若是但愿全部的列都保持统一高度：

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

在新的窗口打开外部连接

有时候须要控制在本页面打开同源连接，在新的页面种打开外部连接：

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

Note: window.location.origin 在IE10下没法工做. 这个修复 专门处理这个问题。

根据文本选择元素

经过使用 contains() 选择器能够根据内容搜索对应的元素，下述代码的做用就是在文本不存在的时候隐藏元素：

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

可见性变化时候的触发

在某个Tab得到焦点或者失去焦点的时候：

$(document).on('visibilitychange', function(e){
  if (e.target.visibilityState === "visible") {
    console.log('Tab is now in view!');
  } else if (e.target.visibilityState === "hidden") {
    console.log('Tab is now hidden!');
  }
});