jQuery 대화형 도움말 방법

1. hover(over, out)

hover 기능은 주로 원래 자바스크립트의 mouseover 및 mouseout 기능 문제를 해결합니다. 다음 예를 보세요.

두 개의 div(빨간색 영역)가 있습니다. 내부에는 div(노란색 영역)가 중첩되어 있습니다. HTML 코드는 다음과 같습니다.

  <div class="outer" id="outer1">
     Outer 1      <div class="inner" id="inner1">Inner 1</div>
   </div>
   <div class="outer" id="outer2">
     Outer 2      <div class="inner" id="inner2">Inner 2</div>
   </div>
   <div id="console">
</div>

다음 이벤트를 바인딩합니다.

<script type="text/javascript">
     function report(event) {
       $('#console').append('<div>'+event.type+'</div>');
     }
     $(function(){
       $('#outer1')
        .bind('mouseover',report)
        .bind('mouseout',report);
       $('#outer2').hover(report,report);
     });    
</script>

Outer1 Outer1의 빨간색 영역에서 마우스가 이동할 때 마우스 오버 및 마우스아웃 이벤트를 사용했습니다. 노란색 영역으로 이동하면 모두 Outer1 내부로 이동하지만 mouseout 이벤트가 트리거되는 것을 볼 수 있습니다.

위 그림의 결과를 원하지 않는 경우가 많지만 이벤트가 발생하지 않기를 바랍니다. Outer1 내부에서 마우스가 움직일 때만 트리거됩니다. Outer2는 Hover() 함수를 사용하여 다음 효과를 얻습니다.

여기서 이벤트 이름은 들어갈 때 "mouseenter"이고 나갈 때 "mouseleave"입니다. "mouseover" 및 "mouseleave" 이벤트.

경험이 풍부한 개발자라면 팝업 메뉴를 만들 때 자주 접하는 문제를 바로 떠올릴 것입니다. mouseout 이벤트는 팝업 메뉴가 자동으로 닫히도록 설정되어 있지만 마우스를 눌렀을 때 팝업 메뉴 내에서 이동하면 메뉴를 닫기 위해 mouseout 이벤트가 발생하는 경우가 많습니다. hover() 함수는 이 문제에 대한 좋은 해결책입니다.

2. ,... )

토글 기능은 클릭 이벤트 바인딩 기능을 객체에 추가할 수 있지만 호출 기능을 클릭할 때마다 순차적으로 설정됩니다.

일치하는 요소를 클릭하면 지정된 첫 번째 기능이 트리거되고, 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 트리거되며, 더 많은 기능이 있으면 마지막 기능까지 다시 트리거됩니다. 이후 클릭할 때마다 이러한 함수에 대한 호출이 차례로 반복됩니다.

unbind("클릭")을 사용하여 삭제할 수 있습니다.

다음 예에서는 토글 기능을 사용하는 방법을 보여줍니다.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
   <title>toggle example</title>
   <link rel="stylesheet" type="text/css" href="css/hover.css">
   <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script type="text/javascript">
       $(function()
       {
           $("li").toggle(              function()
             {
                 $(this).css({ "list-style-type": "disc", "color": "blue" });
             },              function()
             {
                 $(this).css({ "list-style-type": "square", "color": "red" });
             },              function()
             {
                 $(this).css({ "list-style-type": "none", "color": "" });
             }
           );
       })    </script></head><body>
   <ul>
       <li style="cursor:pointer">click me</li>
   </ul>
</body>
</html>

결과적으로 "click me"를 클릭할 때마다 목록 기호와 텍스트 색상이 변경됩니다.

지속적인 학습

새로운 파일

<html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Toggle</button> </body> </html>

제출하다 코드 재설정

자동운전