jQuery 빠른 개발 (2)

문서 목록

스타일 조작

조작 css 스타일

운영 클래스

jQuery 일반 효과

표시 및 숨기기

풀다운 및 풀다운

페이드 인/아웃

사용자 정의 애니메이션

부분 매개 변수의 의미

요약

스타일 조작
css 스타일 조작

$("selector").css("attribute");//    
$("selector").css("attribute","value");//

여기서 스타일을 설정할 때 매개 변수는 하나의 대상이 될 수 있으며, 대량으로 스타일을 설정할 수 있다.
작업 클래스

$("selector").addClass("classname");//   
$("selector").removeClass("classname");//   
$("selector").toggleClass("classname");//

원본 JS에서 클래스 이름className에 대한 작업은 원래 클래스 이름을 덮어쓰지만, jQuery에서는 클래스 동작은 클래스 이름만 조작합니다.현실 사례는tab란 전환 등이 있다.
jQuery 일반 효과
표시 및 숨기기

$("selector").show([speed],[easing],[fn]);//    
$("selector").hide([speed],[easing],[fn]);//    
$("selector").toggle([speed],[easing],[fn]);//

그 중에서speed 매개 변수는 요소의 표시와 숨기는 속도를 제어하고 easing 매개 변수는 전환 효과를 제어하며 fn은 리셋 함수를 대표하여 요소가 표시되거나 숨겨진 후에 선택적으로 이벤트를 촉발한다.
위로 당기기와 아래로 당기기

$("selector").slideDown([speed],[easing],[fn]);//    
$("selector").slideUp([speed],[easing],[fn]);//    
$("selector").slideToggle([speed],[easing],[fn]);//

실제 사례로는 드롭다운 메뉴 등이 있다.
페이드 인

$("selector").fadeIn([speed],opacity,[easing],[fn]);//    
$("selector").fadeOut([speed],opacity,[easing],[fn]);//    
$("selector").fadeTo([speed],opacity,[easing],[fn]);//                
$("selector").fadeToggle([speed],opacity,[easing],[fn]);//

사용자 정의 애니메이션
일반 코드 형식은 다음과 같습니다.

$("selector").animate(params,[s],[e],[f]);//

그 중에서 params 매개 변수는 원소의 스타일 속성으로 일반적으로 대상의 형식이다.흔히 볼 수 있는 사례는 왕자영예의 아코디언 효과가 있다.
부분 매개변수 의미
매개 변수
속뜻
selector
선택기
attribute
등록 정보
value
값
classname
클래스 이름
opacity
불투명도
총결산
우선 이번 호에는 지식이 많지만 공통점이 많아 한두 가지만 능숙하게 사용하면 다른 것도 손에 넣기 쉽다.그 다음으로 지식은 죽은 것이고 사람은 산 것이다. 우리가 자신의 사상, 논리에 가입한 다음에 코드 형식에 따라 조작하면 많은 재미있는 효과를 얻을 수 있다.마지막으로 주의해야 할 것은 상기 조작, 예를 들어 숨기기, 위로 당기기, 아래로 내려가기, 담입 담출 등이다. 만약에 짧은 시간에 여러 번 터치하면 애니메이션이나 효과 대기열이 형성된다. 즉, 이것은 지난번 조작이 실행될 때까지 기다려야 다음 조작이 실행되고 실행을 기다리는 애니메이션이나 효과가 대기열이 형성된다. 우리가 이에 대한 해결 방법은 stop() 함수를 추가하는 것이다.애니메이션이나 효과를 추가하기 전에 다음 작업을 트리거할 때 마지막 작업을 중지할 수 있습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

static 간단한 설명

static 방법은 일반적으로 정적 방법이라고 부른다. 정적 방법은 어떠한 대상에 의존하지 않고 접근할 수 있기 때문에 정적 방법에 있어this는 없다. 왜냐하면 그 어떠한 대상에도 의존하지 않기 때문이다. 대상이 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery 빠른 개발 (2)

좋은 웹페이지 즐겨찾기