JQuery_jquery의 DOM 이벤트 합성 사용 분석 예

이 기사의 예에서는 JQuery의 DOM 이벤트 합성 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

hover() 메서드

hover() 메서드의 구문 구조는 다음과 같습니다.

hover(입력,나가기);

hover() 메서드는 커서 호버 이벤트를 시뮬레이션하는 데 사용됩니다. 커서가 요소 위로 이동하면 지정된 첫 번째 기능(enter)이 트리거되고, 커서가 요소 밖으로 이동하면 지정된 두 번째 기능(leave)이 트리거됩니다.

코드는 다음과 같습니다.

$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide(); 
 })
})

코드 실행 후 효과는 다음 코드 실행 후 효과와 동일합니다. 커서가 "제목" 링크 위로 이동하면 해당 "콘텐츠"가 표시되고, 커서가 "제목" 링크 밖으로 이동하면 해당 "콘텐츠"가 숨겨집니다.

$(function(){ 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").show(); 
 }); 
 $("#panel h5.head").mouseover(function(){ 
  $(this).next("div.content").hide(); 
 }) 
});

참고:

1. CSS에는 ":hover"와 같은 의사 클래스 선택기가 있는데, 이는 사용자가 커서를 요소 위로 가져갈 때 요소의 모양을 변경합니다. 대부분의 브라우저에서는 의사 클래스 선택기를 모든 요소에 사용할 수 있습니다. 그러나 IE 6에서는 의사 클래스 선택자는 하이퍼링크 요소에만 사용할 수 있습니다. 다른 요소의 경우 jQuery의 hover() 메서드를 사용할 수 있습니다.

2. hover() 메서드는 바인딩("mouseover") 및 바인딩("mouseout")을 대체하는 대신 jQuery에서 바인딩("mouseenter") 및 바인딩("mouseleave")을 정확하게 대체합니다. 따라서 hover() 메소드의 두 번째 함수를 트리거해야 할 경우, Trigger("mouseout") 대신 Trigger("museleave")를 사용해야 합니다.

toggle() 메소드

toggle() 메소드의 문법 구조는 다음과 같습니다.

토글(fnl, fn2, ...fnN);

toggle() 메서드는 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 요소를 처음 클릭하면 지정된 첫 번째 기능(fn1)이 트리거되고, 동일한 요소를 다시 클릭하면 지정된 두 번째 기능(fh2)이 트리거되며, 더 많은 기능이 있으면 끝까지 순차적으로 트리거됩니다. 하나. 이후에 클릭할 때마다 이러한 함수에 대한 호출이 차례로 반복됩니다.

이전 효과 강화 예시에서는 다음 jQuery 코드를 사용했습니다.

$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next().show();
 },function(){
  $(this).next().hide();
 })
})

toggle() 메소드를 사용하면 동일한 효과를 얻을 수 있을 뿐만 아니라 코드도 단순화됩니다.

toggle() 메서드는 jQuery에서 또 다른 역할을 합니다: 요소의 표시 상태를 전환합니다. 요소가 표시되면 클릭하여 전환한 후 숨겨지고, 요소가 숨겨진 경우 클릭하여 전환한 후에 표시됩니다. 따라서 위의 코드는 다음의 jQuery 코드로도 작성할 수 있습니다.

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
  $(this).next().toggle(); 
 },function(){ 
  $(this).next().toggle(); 
 }) 
})

더 나은 사용자 경험을 위해서는 이제 "콘텐츠"를 표시하는 것뿐만 아니라 사용자가 "제목" 링크를 클릭한 후 "제목"을 강조 표시해야 합니다. 코드는 다음과 같습니다.

$(function(){ 
 $("#panel h5.head").toggle(function(){ 
   $(this).addClass("highlight"); 
  $(this).next().show(); 
 },function(){ 
  $(this).removeClass("highlight"); 
   $(this).next().hide(); 
 }); 
})

코드를 실행한 후 "콘텐츠"가 표시되면 "제목"이 강조 표시됩니다. "콘텐츠"가 숨겨져 있으면 "뉴스 제목"이 강조 표시되지 않습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.