집 > 기사 > 웹 프론트엔드 > jQuery는 클릭 및 마우스 감지 이벤트를 구현합니다.

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

韦小宝원래의: 2017-11-30 09:10:031515검색

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는 클릭 및 마우스 감지 이벤트를 구현합니다.

관련 기사