jQuery 마우스 on/off 실습

13 Dec 2020 in Programming on JavaScript

◇ jQuery 실습 포스팅 시리즈 ◇

1. 이미지 한칸씩 앞당기기 실습
2. 마우스 on/off 실습 - 현재 글
3. 야매 트위터 - 글자수 세기 실습
4. jQuery CodePlayer 실습

• 이런걸 뭘 글까지 써? 라고 생각하고 있지만 지나고 나면 다 추억이 되겠지… 사실 추억이 되면 큰일난다. 밥벌어먹고 살건데 더 능숙해져야지..

• 간단하다. 여기에 이벤트를 추가해 줄 것이다.

  <div class = "wrapper">
  <h1>Header - 0</h1>
  <h1>Header - 1</h1>
  <h1>Header - 2</h1>
  </div>
  

• 노파심에.. jquery 사용하려면 이거 꼭 넣어줘야함!

  <script src = "script/jquery-3.5.1.min.js"></script>
  

• 아래와 같이 한번에 두가지 이상의 이벤트를 줄 수 있다. .on({이벤트1:함수1, 이벤트2:함수2…}) 이런식으로 하면 가능!

• reverse는 화면 반전을 해주는 css 클래스다. addclass , removeclass 로 이 클래스를 요소에 붙였다 뗐다 한다.

  $(function(){
      $('h1').on({
          mouseenter: function(){$(this).addClass('reverse')},
          mouseleave : function(){$(this).removeClass('reverse')}
      })
  })
  

  끝 (❁´◡`❁)