jQuery는 클릭 및 마우스 감지 이벤트를 구현합니다.

韦小宝
풀어 주다: 2017-11-30 09:10:03
원래의
1510명이 탐색했습니다.

jQuery는 클릭 및 마우스 감지 이벤트를 구현합니다. jQuery의 이벤트에 대해 잘 모르는 학생과 jQuery의 클릭 및 마우스 감지 이벤트에 대해 잘 모르는 학생은 저장하고 가져갈 수 있습니다. 바라보다!

1. 클릭 이벤트의 동적 교대 구현

앞에서 전환 클래스()에 대해 이야기했습니다. 클릭 이벤트의 경우 jQuery는 동적 교대 토글() 메서드도 제공합니다. 두 매개 변수는 모두 수신 기능입니다. 클릭 이벤트에서 같은 의미로 사용됩니다.

예: 클릭 이벤트의 동적 상호작용.

<script type="text/javascript">
            $(function() {
                $("#ddd").toggle(
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>
로그인 후 복사

2. 마우스 감지

를 구현하려면 CSS에서 hoverpseudo-class를 사용하여 스타일 개정을 구현하고 CSS 스타일을 분리할 수 있습니다. jQuery가 도입된 후 거의 모든 요소에서 hover(를 사용할 수 있습니다. ) 마우스를 감지합니다. 그리고 더 복잡한 효과를 만들 수도 있습니다. 그 핵심은 mouseover 및 mouseout 이벤트를 병합하는 것입니다. hover(over,out) 메소드는 두 개의 매개변수를 허용하며, 둘 다 함수입니다. 첫 번째는 마우스가 요소 위로 이동할 때 트리거되고, 두 번째는 마우스가 요소 밖으로 이동할 때 트리거됩니다.

<script type="text/javascript">
            $(function() {
                $("#ddd").hover(
                    function(oEvent) {
                        //第一个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        //第二个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>
로그인 후 복사

첫 번째 예와 비교하면 전환()은 hover()로 대체됩니다.

wenzi0_0의 지침에 따라 전환()에 대한 몇 가지 작은 예를 작성합니다

1. 기존 애플리케이션

<script type="text/javascript">
            $(function() {
                $("#ddd").click(function(){
                $("#eee").toggle();    
                });
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>
로그인 후 복사

2 .css 속성

<script type="text/javascript">
            $(function(){
                $("#eee").toggle(function() {
                        $("#ddd").css("background-color", "green");
                    },
                    function() {
                        $("#ddd").css("background-color", "red");
                    },
                    function() {
                        $("#ddd").css("background-color", "yellow");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>
로그인 후 복사
학생들이 jQuery 마우스 이벤트에 대해 새롭게 이해하게 되었나요?

관련 권장사항:

jQuery 이벤트에서 마우스아웃 및 마우스 오버

jquery 이벤트 hover, mouseenter 및 mouseleave는 애니메이션을 한 번만 트리거합니다.

jQuery 이벤트 mouseover, mouseout 및 hover의 차이점

위 내용은 jQuery는 클릭 및 마우스 감지 이벤트를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!