JQuery의 이벤트 및 DOM 애니메이션 작업 요약

JQuery의 이벤트

1. DOM 로드

페이지가 로드된 후 브라우저는 JavaScript를 통해 DOM 요소에 이벤트를 추가합니다. 일반 JavaScript 코드에서는 window.onload 메서드를 주로 사용하고, JQuery에서는 $(document).ready() 메서드를 사용합니다. JQuery의 단순화된 쓰기 방법 "$()". window.onload에 이벤트를 등록하는 경우 하나의 window.onload 본문에만 등록할 수 있습니다. 하지만 JQuery를 사용하면 여러 $(document).ready() 또는 $()에 등록할 수 있습니다.

2. 이벤트 바인딩

 지정된 이벤트를 일치하는 요소에 바인딩합니다. 예를 들어, 어제 우리는 window.onload에 이벤트를 바인딩했습니다: "$("p").onclick(function(){

Alert( $(this).text() );

});" JQuery의 $(document).ready()는 다음과 같이 바인딩될 수 있습니다:
“$("p").click(function(){

Alert( $(this).text() );

} );”

              바인딩()을 사용하면 다음과 같이 바인딩할 수 있습니다:
$("p").bind("click", function(){

Alert( $(this).text() );

});

3. 합성 이벤트

hover(): 커서 가리키기 시간을 시뮬레이션합니다. 커서가 요소 위로 이동하면 지정된 첫 번째 기능이 트리거되고, 커서가 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 예를 들어 호버 효과는 다음과 같습니다.

$("td").hover(
function () {$(this).addClass("hover");},
function () {$(this).removeClass("hover" );}
);

toggle(): 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 요소를 처음 클릭하면 첫 번째 지정된 기능이 트리거됩니다. 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 더 많은 경우 마지막 기능까지 순차적으로 트리거됩니다. 예를 들어 요소의 선택 및 선택 취소된 효과를 설정합니다.

$("td").toggle(

function () {$(this).addClass("selected");},
function () {$( this) .removeClass("selected");}
);

매개변수를 전달하지 않고 토글()을 사용하면 요소의 표시 상태가 전환됩니다.

4. 이벤트 버블링

이벤트는 DOM 계층 구조에 따라 계속해서 물집처럼 늘어나서 최상위에만 도달합니다.

해결책:

이벤트 처리 함수에서 false를 반환하면 이벤트 버블링이 중지됩니다. 요소의 기본 동작을 중지할 수도 있습니다.交 현재 모든 UI 상호작용이나 이벤트는 이 기능을 지원합니다. 자체 이벤트 처리 함수에서 false를 반환하면 이벤트 전달이 중단됩니다. 실제 이벤트를 반환하고 계속해서 아래쪽으로 전달합니다.

5. 이벤트 객체의 속성

이벤트 객체: 이벤트가 발생하면 이벤트 객체가 생성됩니다. 프로그램에서 이벤트를 사용하려면 핸들러 함수에 매개변수만 추가하면 됩니다. 이벤트 핸들러 함수에서 일부 매개변수를 사용하십시오. 예를 들어, 이벤트가 발생할 때 페이지를 기준으로 한 위치를 얻으려면: event.pageX, event.pageY, event는 이벤트 처리 함수의 매개변수입니다.

6.이벤트 제거

                                                                                                  off may btn”).unbind();

one(): 이 메서드는 처리 기능을 요소에 바인딩할 수 있습니다. 핸들러 함수가 한 번 실행되면 해당 이벤트는 즉시 삭제됩니다. 즉, 각 객체에서 이벤트 핸들러 함수는 한 번만 실행됩니다.

JQuery의 DOM 애니메이션

DOM 객체의 표시 및 숨기기 방법을 설정하여 애니메이션 효과를 연출할 수 있습니다.

1. 애니메이션 효과 없이 숨기기 및 표시

hide(): HTML 문서에서 요소에 대해 hide() 메서드를 호출하면 요소의 표시 스타일이 없음으로 변경됩니다. 코드 기능은 css("display", "none");과 동일합니다.

show(): 요소의 표시 스타일을 이전 표시 상태로 변경합니다.

toggle(): 요소의 표시 상태를 전환합니다. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다.

2. 투명도 효과의 숨기기 및 표시를 설정하면 페이드 인 및 페이드 아웃 애니메이션 효과를 얻을 수 있습니다.

fadeIn(), fadeOut(): 요소의 투명도만 변경합니다. fadeOut()은 요소가 완전히 사라질 때까지 지정된 시간 동안 요소의 불투명도를 줄입니다. fadeIn()은 그 반대입니다. 예를 들어 $("p").fadeIn("slow");처럼 600밀리초 동안 단락을 천천히 페이드 인합니다.

fadeTo(): ​​​​점진적으로 불투명도를 지정된 값(0~1 사이)으로 조정합니다. 그리고 선택적으로 애니메이션이 완료되면 콜백 함수를 트리거합니다. 예를 들어 단락의 투명도를 0.25로 빠르게 조정하려면 200밀리초를 사용합니다. 애니메이션이 끝나면 "애니메이션 완료" 메시지 상자가 표시됩니다: "$("p").fadeTo("fast", 0.25, function( ){ 경고(" 애니메이션이 완료되었습니다.") });".

3. 높이 효과 숨기기 및 표시를 설정하면 아래로 미끄러지고 닫히는 애니메이션 효과를 얻을 수 있습니다.

slideDown(), SlideUp(): 요소의 높이만 변경됩니다. 요소의 표시 속성이 없음인 경우 SlideDown() 메서드가 호출되면 요소가 위에서 아래로 확장되어 표시됩니다. SlideUp() 메서드는 정반대입니다. 요소는 아래에서 위로 짧아지고 숨겨집니다. 예를 들어 $("p").slideDown("slow");처럼 600밀리초를 사용하여 단락을 천천히 아래로 밀어냅니다.

slideToggle(): 높이 변경을 통해 일치하는 요소의 가시성을 전환합니다. 예를 들어, 200밀리초 안에 단락을 빠르게 위아래로 슬라이드하면 "애니메이션 완료" 메시지 상자가 표시됩니다: "$("p").slideToggle("fast",function(){ 경고( "애니메이션 완료" ."); });".

위 내용은 JQuery의 이벤트 및 DOM 애니메이션 작업 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!