1. 클릭 이벤트의 동적 교대 구현 이전에 전환 클래스()에 대해 이야기한 바 있습니다. jQuery는 동적으로 교체되는 토글() 메서드도 제공합니다. 두 매개 변수는 모두 클릭 이벤트에서 번갈아 사용되는 수신 함수입니다. 예: 클릭 이벤트의 동적 상호작용. 코드 복사 코드는 다음과 같습니다. <br> $(function() {<br> $("#ddd").toggle(<br> 함수(oEvent) {<br> $(oEvent.target).css("불투명도", "0.5");<br> },<br> 기능(oEvent) {<br> $(oEvent.target).css("opacity", "1.0");<br> }<br> );<br> });<br> > ~ ~ <br><br> </div>2. 마우스 감지 구현 <p>Css에서는 :hover 의사 클래스를 사용하여 스타일을 수정하고 별도의 CSS 스타일을 구현할 수 있습니다. jQuery가 도입된 이후에는 거의 모든 요소에서 hover()를 사용하여 마우스를 감지할 수 있습니다. 그리고 더 복잡한 효과를 만들 수도 있습니다. 그 본질은 mouseover와 mouseout 이벤트의 병합입니다</p> hover(over,out) 메소드는 두 개의 매개변수를 허용하며, 둘 다 함수입니다. 첫 번째는 마우스가 요소 위로 이동할 때 트리거되고, 두 번째는 마우스가 요소 밖으로 이동할 때 트리거됩니다. <p> <br></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="75919" class="copybut" id="copybut75919" onclick="doCopy('code75919')"><u></u> 코드는 다음과 같습니다.</a></span></div> <script type="text/javascript"><div class="codebody" id="code75919"> $(function() {<br> $("#ddd").hover(<br> 기능(oEvent) {<br> //첫 번째 기능은 마우스 오버 이벤트 모니터링과 동일합니다<br> $(oEvent.target).css("불투명도", "0.5");<br> },<br> 기능(oEvent) {<br> //두 번째 기능은 마우스 오버 이벤트 모니터링과 동일합니다<br> $(oEvent.target).css("opacity", "1.0");<br> }<br> );<br> });<br> > ~ ~ <br><br> <br>첫 번째 예와 비교했을 때, 전환()을 hover()로 바꾸면 됩니다.<br> </div>wenzi0_0의 지도에 따라 토글()에 대한 몇 가지 작은 예를 작성하세요 <p>1. 기존 애플리케이션</p> <p></p> <p></p> <p>코드 복사</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="53893" class="copybut" id="copybut53893" onclick="doCopy('code53893')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code53893"> <br> <script type="text/javascript"><br> $(함수() {<br> $("#ddd").click(function(){<br> $("#eee").toggle(); <br> });<br> });<br> <br> <div id="ddd">11</div><br> <div id="eee">122</div><br> </div> </u><p>2.css특성</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="93413" class="copybut" id="copybut93413" onclick="doCopy('code93413')"><u>复主代码</u></a></span> 代码如下:</div> <div class="codebody" id="code93413"> <br> <script type="text/javascript"><br> $(함수(){<br> $("#eee").toggle(function() {<br> $("#ddd").css("배경색", "녹색");<br> },<br> 함수() {<br> $("#ddd").css("배경색", "빨간색");<br> },<br> 함수() {<br> $("#ddd").css("배경색", "노란색");<br> }<br> );<br> });<br> <br> <div id="ddd">11</div><br> <div id="eee">122</div><br> </div> <p>本文就先到这里了, small伙伴们是否对jQuery鼠标事件에는 새로운 내용이 있습니다.</p></a></span></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
