Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

jQuery click() 메서드를 사용하여 이벤트 트리거

웹사이트를 방문할 때 우리가 가장 많이 취하는 행동은 무엇입니까? 마우스 클릭! 클릭은 웹사이트나 앱에서 가장 중요한 동작 중 하나입니다. 웹사이트를 탐색하고 장바구니에 제품을 추가할 때 그렇게 합니다.

사용자가 페이지의 특정 요소를 클릭할 때 알 수 있다면 좋지 않을까요? 그런 다음 이 동작에 대한 경험을 구축할 수 있습니다.

jQuery click() 입력 방법. 몇 줄의 코드로 사용자가 마우스를 클릭할 때 이벤트를 트리거할 수 있습니다. 이 메소드는 jQuery 선택기에서 호출되며 콜백 함수를 인수로 사용합니다. 콜백 함수는 click() 메소드는 마우스 클릭 이벤트를 감지합니다.

jQuery click() 사용

아래 예제에서 버튼을 클릭하면 HTML 버튼을 렌더링하고 페이지에 텍스트를 추가할 것입니다. click() 메소드는 페이지의 모든 요소에 첨부할 수 있지만 버튼에 첨부하는 것이 가장 일반적입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <button id="btn-primary">
  Click Me!
</button>
 <p class="new-content">
  
  </p>
</div>

위의 코드는 id가 "main"인

내부에 id가 "btn-primary"인 기본 버튼을 렌더링합니다. 이 예제의 목표는 버튼을 클릭한 후 "new-content" 클래스를 사용하여

태그에 새 콘텐츠를 표시하는 것입니다.

jQuery를