프론트엔드 프로그래머가 알아야 할 jQuery 팁

jQuery에서 animate 및 scrollTop 메소드를 사용하면 플러그인 없이 맨 위로 스크롤하는 간단한 애니메이션을 만들 수 있습니다.

// Back to top
$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

변경 scrollTop 스크롤바를 배치하려는 위치에서 값이 변경됩니다. 실제로 해야 할 일은 문서 상단으로 스크롤될 때까지 문서 본문을 800밀리초 동안 애니메이션화하는 것뿐입니다.

참고: scrollTop의 일부 잘못된 동작에 주의하세요.

이미지 미리 로드

웹 페이지에서 처음에 보이지 않는(예: 마우스 오버 시) 많은 이미지를 사용하려는 경우 다음 이미지를 미리 로드할 수 있습니다.

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $(&#39;<img  alt="프론트엔드 프로그래머가 알아야 할 jQuery 팁" >&#39;).attr(&#39;src&#39;, arguments[i]);
  }
};
$.preloadImages(&#39;img/hover-on.png&#39;, &#39;img/hover-off.png&#39;);

이미지가 로드되었는지 확인

때때로 스크립트를 계속하기 위해 이미지가 모두 로드되었는지 확인해야 할 수도 있습니다.

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

또한 ID 또는 클래스가 포함된 태그 특정 이미지가 로드되는지 여부.

깨진 이미지 자동 복구

깨진 이미지 링크를 하나씩 교체하는 것은 매우 고통스럽습니다. 하지만 다음과 같은 간단한 코드가 도움이 될 수 있습니다.

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

깨진 링크가 없더라도 이 코드를 추가하면 아무 것도 잃지 않을 것입니다.

호버 토글 클래스

사용자가 클릭 가능한 요소 위에 마우스를 올리면 색상이 변경되기를 원한다고 가정해 보겠습니다. 그런 다음 사용자가 요소를 가리키면 요소에 클래스를 추가하고 그렇지 않으면 제거할 수 있습니다.

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

필요한 CSS만 추가하면 됩니다. 더 쉬운 방법은ggleClass 메서드를 사용하는 것입니다.

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

참고: 이 경우 CSS 솔루션이 더 빠를 수도 있지만 이 메서드를 이해하는 것이 필요합니다.

입력 필드 비활성화

때때로 사용자가 특정 작업(예: "읽었습니다" 확인)을 수행할 때까지 양식의 제출 버튼이나 텍스트 입력 중 하나를 비활성화할 수 있습니다. 약관' 확인란). 원할 때 활성화하려면 입력에 비활성화 속성을 추가하세요.

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

그런 다음 입력의 prop 메서드를 실행하고 비활성화 값을 false로 설정합니다.

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

링크 로드 중지

때로는 특정 웹페이지에 링크할 필요도 없고 페이지를 다시 로드하고 싶지도 않은 경우가 있습니다. 예를 들어 다른 스크립트를 실행하기 위해 링크가 다른 작업을 하도록 할 수도 있습니다. 이를 위해서는 기본 동작을 차단하는 것에 대해 소란을 피워야 합니다.

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

페이드인/슬라이딩 전환

슬라이딩과 페이딩은 jQuery를 사용하여 애니메이션을 적용할 때 많이 사용하는 기능입니다. 사용자가 요소를 클릭한 후에 요소를 표시하려면 fadeIn 및 SlideDown 메서드를 사용하는 것이 완벽합니다. 그러나 첫 번째 클릭 시 요소가 나타나고 두 번째 클릭 시 사라지도록 하려면 다음 코드를 사용해 보세요.

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

通过添加这个脚本，你真正需要做的仅仅是在页面上添加必要的HTML元素，这样它就可以运行工作了。

让两个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);

如果你希望所有列的高度相同：

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

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

在一个新的浏览器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中无效。修复的时候要小心这个问题。

在改变Visibility时触发

当用户不再关注某个tab，或重新聚焦原来的那个tab上时，触发JavaScript：

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

AJAX调用错误处理

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

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

链式插件调用

jQuery允许“链式”插件的方法调用，以减轻反复查询DOM并创建多个jQuery对象的过程。比方说，下面的代码片段代表了你的插件方法调用：

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

通过使用链式，可以大大改善：

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

还有一种方法是在（前缀$）变量中高速缓存元素：

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

链式和高速缓存的方法都是jQuery中可以让代码变得更短和更快的代最佳做法。

英文原文：jQuery Tips Everyone Should Know