꼭 숙지해야 할 10가지 jQuery 팁-JS 튜토리얼-php.cn

꼭 숙지해야 할 10가지 jQuery 팁

伊谢尔伦

풀어 주다： 2016-12-01 10:18:27

원래의

948명이 탐색했습니다.

빠른 개발에 도움이 되는 10가지 jQuery 팁/코드 조각을 수집했습니다.

1. 위로 가기 버튼

다른 플러그인을 사용하지 않고도 animate와 scrollTop을 이용하면 위로 돌아가는 애니메이션을 구현할 수 있습니다.

// Back to top
$(&#39;a.top&#39;).click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

로그인 후 복사

scrollTop의 값을 변경하면 리턴과 상단 사이의 거리를 조정할 수 있으며, animate의 두 번째 매개변수는 리턴 작업을 수행하는 데 필요한 시간(단위: 밀리초)입니다.

2. 이미지 미리 로드

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

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

로그인 후 복사

3. 이미지가 로드되었는지 확인하세요.

때로는 후속 작업을 수행하기 위해 이미지가 로드되었는지 확인해야 합니다.

$(&#39;img&#39;).load(function () {
  console.log(&#39;image load successful&#39;);
});

로그인 후 복사

img를 다른 ID로 바꾸거나 지정된 이미지가 로드되었는지 확인하는 클래스입니다.

4. 깨진 이미지 자동 수정

웹사이트에서 깨진 이미지 링크를 발견하면 쉽게 교체할 수 없는 이미지로 교체할 수 있습니다. 이 간단한 코드를 추가하면 많은 문제를 줄일 수 있습니다.

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

로그인 후 복사

사이트에 깨진 이미지 링크가 없더라도 이 코드를 추가해도 아무런 해가 없습니다.

5. 마우스 오버 시 클래스 속성 전환

사용자가 클릭 가능한 요소 위에 마우스를 올렸을 때 효과를 변경하려면 다음 코드를 사용하세요. 사용자가 요소 위로 마우스를 가져가면 클래스 속성이 자동으로 취소됩니다.

$(&#39;.btn&#39;).hover(function () {
  $(this).addClass(&#39;hover&#39;);
  }, function () {
    $(this).removeClass(&#39;hover&#39;);
  });

로그인 후 복사

필요한 CSS 코드만 추가하면 됩니다. 더 깔끔한 코드를 원할 경우 다음과 같이 전환 클래스 메서드를 사용할 수 있습니다.

$(&#39;.btn&#39;).hover(function () { 
  $(this).toggleClass(&#39;hover&#39;); 
});

로그인 후 복사

참고: CSS를 직접 사용하여 이 효과를 얻는 것이 더 나은 솔루션일 수 있지만 여전히 메서드를 알아야 합니다.

6. 입력 필드 비활성화

사용자가 일부 작업(예: "용어 읽기" 확인란 선택)을 수행할 때까지 양식의 제출 버튼이나 입력 필드를 비활성화해야 할 수도 있습니다. . 비활성화된 속성을 활성화하기 전까지는 추가할 수 있습니다:

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

로그인 후 복사

removeAttr 메소드를 실행하고 제거할 속성을 매개변수로 전달하기만 하면 됩니다:

$(&#39;input[type="submit"]&#39;).removeAttr(&#39;disabled&#39;);

로그인 후 복사

7. 링크 로딩 방지

때때로 페이지에 링크를 걸거나 새로고침하고 싶지 않을 경우, 다른 작업을 수행하거나 다른 스크립트를 실행하고 싶을 수도 있습니다. :

$(&#39;a.no-link&#39;).click(function (e) {
  e.preventDefault();
});

로그인 후 복사

8. 페이드/슬라이드 전환

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

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

로그인 후 복사

9. 간단한 아코디언 효과

아코디언 효과를 얻는 빠르고 쉬운 방법은 다음과 같습니다.

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

로그인 후 복사

10. 두 개의 DIV를 동일한 높이로 만듭니다.

때로는 두 개의 DIV를 동일한 높이로 만들어야 하는 경우가 있습니다. 그 안에 얼마나 많은 콘텐츠가 들어있나요? 다음 코드 조각을 사용할 수 있습니다.

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

로그인 후 복사

이 코드는 요소 집합을 반복하고 높이를 요소 중 최대 높이로 설정합니다.

영문 원문: 누구나 알아야 할 jQuery 팁