jQuery 필수 실무 기술(2부)_jquery

이 기사의 예에는 고전적이고 실용적인 jQuery 코드 개발 기술이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

12. 이미지 미리 로드
페이지에서 보이지 않는 이미지(예: 호버 표시)를 많이 사용하는 경우 해당 이미지를 미리 로드해야 할 수도 있습니다.

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

13. 이미지 로딩 여부 확인
때로는 후속 작업을 수행할 수 있도록 이미지가 로드되었는지 확인해야 합니다.

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

img를 다른 ID나 클래스로 대체하여 지정된 이미지가 로드되었는지 확인할 수 있습니다.
14. 손상된 이미지 자동 수정
웹사이트에서 깨진 이미지 링크를 발견한 경우 쉽게 교체할 수 없는 이미지로 교체할 수 있습니다. 이 간단한 코드를 추가하면 많은 문제를 줄일 수 있습니다.

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

귀하의 웹사이트에 깨진 이미지 링크가 없더라도 이 코드를 추가해도 아무런 해가 없습니다.
15. 마우스 오버로 클래스 속성 전환
사용자가 클릭 가능한 요소 위로 마우스를 가져갈 때 효과를 변경하려면 사용자가 요소 위로 마우스를 가져갈 때 다음 코드에서 클래스 속성을 추가할 수 있습니다. 속성이 자동으로 취소됩니다.

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

필요한 CSS 코드만 추가하면 됩니다. 더 깔끔한 코드를 원할 경우에는ggleClass 메소드를 사용할 수 있습니다:

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

참고: CSS를 직접 사용하여 이 효과를 얻는 것이 더 나은 솔루션일 수 있지만 여전히 방법을 알아야 합니다.
16. 입력 필드 비활성화
사용자가 특정 작업(예: '용어 읽기' 확인란 선택)을 수행할 때까지 양식의 제출 버튼이나 입력 필드를 비활성화해야 하는 경우가 있습니다. 활성화하기 전까지는 비활성화된 속성을 추가할 수 있습니다.

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

18. 페이드/슬라이드 전환
페이드와 슬라이드는 jQuery에서 자주 사용하는 애니메이션 효과로 요소를 더 잘 표시할 수 있습니다. 하지만 요소가 나타날 때 첫 번째 효과를 사용하고 사라질 때 두 번째 효과를 사용하도록 하려면 다음을 수행할 수 있습니다.
// 페이드

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

19.간단한 아코디언 효과
아코디언 효과를 얻는 빠르고 쉬운 방법은 다음과 같습니다.
// 모든 패널 닫기

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

20. 두 DIV의 높이를 동일하게 만듭니다
때로는 내부 콘텐츠에 관계없이 두 개의 div를 동일한 높이로 만들어야 하는 경우가 있습니다. 다음 코드 조각을 사용할 수 있습니다:

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

이 코드는 요소 집합을 반복하고 높이를 요소 중 최대 높이로 설정합니다.
21. 요소가 비어 있는지 확인
이를 통해 요소가 비어 있는지 확인할 수 있습니다.

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

22. 요소 교체
div 또는 다른 것을 교체하고 싶으십니까?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.