jQuery_jquery에서 일반적으로 사용되는 몇 가지 기술 요약

소개

jQuery의 존재로 인해 프론트엔드 개발을 배우는 사람들은 단 몇 줄의 코드만으로 자신의 요구 사항을 충족할 수 있습니다. jQuery를 사용하려면? 실행한 후에 코드를 볼 수 없습니다. 예상한 결과를 보면 jQuery에 문제가 있다고 생각하십니까? 실제로 문제는 사용 방법을 알고 있는지 여부에 있습니다. 개발 과정에서 자주 접하는 몇 가지 애플리케이션 예제를 살펴보고 jQuery의 색다른 세계를 발견해 보세요.

맨 위로 가기 버튼

jQuery에서 animate 및 scrollTop 메서드를 사용하면 간단한 스크롤-투-톱 애니메이션을 만들기 위해 플러그인을 사용할 필요가 없습니다.

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

scrollTop의 값을 사용하여 스크롤하려는 위치를 변경합니다. 본질적으로 이것이 바로 여러분이 하는 일입니다. 페이지가 문서 상단으로 스크롤될 때까지 다음 800밀리초 동안 페이지가 스크롤되도록 하십시오.

이미지 사전 로드

웹 페이지에서 숨겨진 이미지 파일을 많이 사용하는 경우(예: 마우스 오버 시 표시되는 이미지) 이미지를 미리 로드하는 것이 좋습니다.

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img  alt="jQuery_jquery에서 일반적으로 사용되는 몇 가지 기술 요약" >').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');<br />

이미지 로딩 여부 확인

때때로 해당 js 코드를 계속 실행할 수 있도록 이미지가 로드되었는지 확인해야 할 수도 있습니다.

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

내가 겪은 사용 시나리오: 일부 요소는 이미지의 실제 크기에 따라 크기를 조정하고 절대적인 배열로 배치해야 합니다. 요소의 크기 설정은 이미지가 로드된 후에 계산될 수 있습니다.

손상된 이미지 자동 복구

사이트에서 깨진 이미지 링크를 발견하면 하나씩 교체하는 것이 어려울 수 있습니다. 이 간단한 코드를 사용하면 많은 수고를 덜 수 있습니다.

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

깨진 링크가 없더라도 이 코드를 추가해도 아무런 영향이 없습니다.

입력 비활성화

사용자가 작업(예: '약관을 읽었습니다' 체크박스 선택)을 수행할 때까지 양식의 제출 버튼이나 입력 필드를 사용해야 하는 경우가 있습니다. 입력 상자에 비활성화된 속성을 설정한 다음 필요할 때 활성화하세요.

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

입력 상자에서 prop 메소드를 다시 실행하고 비활성화된 값을 false로 설정하기만 하면 됩니다.

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

prop 함수를 이해하지 못하는 jQuery 개발자의 경우 가장 일반적으로 사용되는 것은 attr 함수입니다. 그들은 많은 프로그램을 문제 없이 개발할 수 있습니다. 그러나 checkbox, radio 및 select를 개발할 때 attr을 발견하게 됩니다. 속성을 적용할 수 없습니다. jQuery 버그인 것 같습니다. attr 및 prop 사용에 대한 몇 가지 제안 사항은 다음과 같습니다.

확인됨, 선택됨, 읽기 전용 및 비활성화와 같은 속성을 가져오거나 설정할 때 prop 메서드를 사용하는 것이 확실히 더 좋습니다

두 DIV의 높이를 동일하게 만듭니다

어떤 콘텐츠가 포함되어 있든 상관없이 두 개의 DIV가 동일한 높이를 갖기를 원하는 경우가 있습니다.

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

이 예는 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());
});

텍스트를 기반으로 요소 가져오기

jQuery의 Contains() 선택기를 통해 요소 내의 텍스트 콘텐츠를 찾을 수 있습니다. 텍스트가 없으면 이 요소가 숨겨집니다:

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

눈에 띄는 변화 유발

사용자가 탭의 초점을 흐리게 하거나 다시 초점을 맞출 때 자바스크립트를 트리거합니다.

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