jQuery 메소드의 기본 JavaScript 등가 : CSS 및 애니메이션

jQuery의 필요성 : jQuery가 정말로 필요합니까? 경우에 따라, 특히 jQuery 1.x를 사용하여 IE6/7/8을 지원 해야하는 경우 jQuery가 여전히 필요합니다. 그러나 최신 브라우저의 API는 이제 jQuery에 익숙한 많은 기능을 제공합니다. 이 기사는 CSS와 관련된 jQuery 메소드의 기본 JavaScript 동등 물질을 살펴 봅니다.

키 포인트

기본 JavaScript는 클래스 및 스타일 작업을 포함하여 jQuery를 사용하여 일반적으로 수행되는 많은 작업을 수행 할 수 있습니다. 그러나 jQuery는 여러 노드에 클래스를 적용하고 기존 클래스에 새 클래스를 첨부하는 이점이 있으며 기본 JavaScript는이를 무시할 수 있습니다.

최신 브라우저는 이제 노드에 적용되는 모든 클래스를 포함하는 배열과 같은 컬렉션 인 속성을 ​​제공합니다. 이는 기본 JavaScript에서 속성을 ​​사용하는 것보다 우선하여 클래스 작업을보다 효율적으로 만듭니다.

jQuery는 다양한 애니메이션 효과를 제공하지만 CSS3 애니메이션은 더 빠르고 코드가 훨씬 적으며 3D 변환과 같은 효과를 제공합니다. JavaScript는 여전히 CSS3 애니메이션에 응답하는 데 사용될 수 있지만 최신 브라우저에서 DOM 애니메이션에 jQuery 또는 JavaScript를 사용하는 것이 중복 될 수 있습니다.

클래식 작동
• 특정 요소에 클래스를 적용하는 것은 가장 일반적인 jQuery 작업 중 하나입니다. classList 기본 JavaScript에서는 동일한 함수를 구현할 수 있습니다. className 그러나 그게 전부는 아닙니다 :
jQuery는 여러 노드에 클래스를 적용 할 수 있습니다.
• jQuery는 새로운 클래스를 기존 클래스 정의에 첨부하지만 기본 예제는이를 무시합니다.

기본 JavaScript에서 속성은 단지 문자열입니다. 따라서 jQuery의 작동 방식을 복사하는 기능이 필요합니다.

이 코드는 jQuery보다 작고 빠르지 만 라이브러리에서 이미 사용할 수있는 기능을 복사하고 있습니다. 그렇게하는 것은 그다지 의미가 없습니다. 다행히도 현대식 브라우저는 이제 노드에 적용되는 모든 클래스의 유사한 배열 모음을 구현하는 새로운 를 제공합니다. 다음 속성을 사용할 수 있습니다.

—— 적용된 클래스 이름의 수 —— 특정 지수의 클래스 이름 - 노드 가이 클래스를 적용한 경우 true

를 다시 시작하십시오 —— 새 클래스를 노드 에 적용하십시오

—— 노드에서 클래스를 제거합니다

<code class="language-javascript">$("#myelement").addClass("myclass");</code>

- 클래스가 적용되거나 적용되지 않으면 클래스가 삭제되거나 별도로 추가됩니다.

우리는이 속성을 먼저 사용할 수 있습니다.

<code class="language-javascript">document.getElementById("myelement").className = "myclass";</code>

는 IE9를 제외한 대부분의 브라우저에서 지원됩니다. 다행히도이 브라우저에서 주문형으로 적재 할 수있는 심이 있습니다.

스타일 작동

jQuery는 다음과 같은 특정 스타일을 적용하는 여러 가지 방법을 제공합니다. 기본 등가 : 캐시 선택기를 사용한 10,000 개 이상의 반복의 경우 jQuery 코드는 6,670 밀리 초로 실행됩니다. 기본 JavaScript는 330 밀리 초, 20 배 더 빠릅니다. 물론 값을 어떤 식 으로든 계산 해야하는 한 두 가지 모두 사용해서는 안됩니다. CSS에서 스타일 클래스를 정의한 다음 이름을 요소에 적용하는 것이 더 효율적입니다.

애니메이션

jQuery는 스 와이프 및 페이드를 포함한 다양한 기성품 애니메이션을 제공합니다. 기본 JavaScript는 더 빠를 수 있지만 문제가되지 않습니다. 나는 처음에 CSS3 애니메이션에 대해 회의적이었습니다. N 프레임 후 애니메이션 중지와 같은 세밀한 제어를 제공 할 수 없으며 행동에 대한 JavaScript의 책임을 침해 할 수 있습니다. 그러나 혜택은 단점보다 중요하다 :

<code class="language-javascript">$("#myelement").addClass("myclass");</code>

CSS3 애니메이션은 브라우저에서 처리됩니다.

CSS3 애니메이션은 사용하기 쉽고 코드가 훨씬 적습니다.

<code class="language-javascript">document.getElementById("myelement").className = "myclass";</code>

CSS3은 3D 변환과 같은 효과를 제공하는 반면 JavaScript만으로는 불가능합니다.

ie9 이하는 효과가 표시되지 않지만 우아하게 다운 그레이드 될 수 있으며 IE10은 몇 달 안에 지배적 인 버전이어야합니다. CSS3의 마법은 사라지지 않을 것입니다. 현대식 브라우저에서 jQuery 또는 JavaScript를 사용하여 DOM 애니메이션을 계속하고 있다면 시간을 낭비 할 수 있습니다. 즉, 애니메이션이 시작, 중지 또는 다음 반복을 계속하면 javaScript를 사용하여 각각 ,

및 를 사용하여 CSS3 애니메이션에 응답 할 수 있습니다. 자세한 내용은 JavaScript에서 CSS3 애니메이션 이벤트를 캡처하는 방법을 참조하십시오. 다음 포스트에서는이 일련의 기사를 작성하여 이벤트, Ajax 및 유틸리티 기능을 논의합니다.

(FAQS 부분은이 부분의 내용이 기사의 주요 주제와 거의 관련이 없으며 이전 출력에서 ​​완전히 의사 조직화 되었기 때문에 여기서 생략됩니다.)

위 내용은 jQuery 메소드의 기본 JavaScript 등가 : CSS 및 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!