发布：杭州达内      来源：达内培训      时间：2015-11-04

    达内web培训专家收集了若干提升 jQuery 技能的小技巧。

    1.创建回到顶部按钮

// Back to top

$('a.top').click(function (e) {

  e.preventDefault();

  $(document.body).animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a href="#">Back to top</a>

    2.预加载图片

$.preloadImages = function () {

  for (var i = 0; i < arguments.length; i++) {

    $('<img>').attr('src', arguments[i]);

  }

};

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

    3.自行修复图片链接

$('img').on('error', function () {

  $(this).prop('src', 'img/broken.png');

});

    4.Hover 的 Class 增减

$('.btn').hover(function () {

  $(this).addClass('hover');

}, function () {

  $(this).removeClass('hover');

});

    5.禁用 input 代码

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

将 disabled 的值改为 false 时：

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

    6.停止链接加载

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

  e.preventDefault();

});

    7.淡入淡出和滑动效果开关

// Fade

$('.btn').click(function () {

  $('.element').fadeToggle('slow');

});

// Toggle

$('.btn').click(function () {

  $('.element').slideToggle('slow');

});

    8.手风琴效果

// 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;

});

    9.使两个div高度相同

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

    使所有列的高度相同的方法

var $rows = $('.same-height-columns');

$rows.each(function () {

  $(this).find('.column').height($(this).height());

});

    10.新窗口打开链接

$('a[href^="http"]').attr('target', '_blank');

$('a[href^="//"]').attr('target', '_blank');

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

    11.通过文本找元素

var search = $('#search').val();

$('div:not(:contains("' + search + '"))').hide();

    12.视觉改变触发

$(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!');

  }

});

    13.Ajax 调用的错误处理

$(document).ajaxError(function (e, xhr, settings, error) {

  console.log(error);

});

    14.插件链式调用

$('#elem').show();

$('#elem').html('bla');

$('#elem').otherStuff();

    上面一段代码可以改为链式操作，精简和提速了代码

$('#elem')

  .show()

  .html('bla')

  .otherStuff();