jQuery 클릭 이벤트는 사용자가 HTML 항목을 클릭하면 발생합니다. 여기서 jQuery click() 메소드는 사용자가 클릭했을 때의 행동을 처리합니다. 예를 들어 $("p").click()은 웹 페이지에서 문단이 클릭되었을 때 클릭 이벤트를 발생시키도록 합니다. click() 메소드에 함수를 추가하여 클릭 이벤트가 발생했을 때 마다 특정 기능을 실행하도록 할 수도 있습니다. 이 포스트에서는 사용자의 클릭에 대응하는 jQuery click() 메소드에 대해 알아보겠습니다.
jQuery click() 메소드 문법
$(selector).click(function() {
// 코드
});먼저 클릭 메스드를 추가할 HTML 항목을 선택한 후 click() 메소드를 추가할 수 있습니다. click() 메소드의 매개변수로는 클릭 이벤트가 발생했을 때 실행할 함수를 받습니다.
jQuery click() 이벤트 예제
다음은 사용자가 문장을 클릭하면 그 문장을 숨기는 예제입니다. index.html 파일을 만들어 다음 코드를 입력합니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery click 이벤트 예제</h2>
<p>
이 문장을 클릭하면 숨겨집니다.
</p>
<script>
$("p").click(function() {
$(this).hide();
});
</script>
</body>
</html>index.html을 실행하면 다음과 같은 화면이 나옵니다.
여기서 아래쪽 문장을 클릭하면 문장이 사라집니다.
코드를 설명하자면 script 부분에서 p 태그를 선택한 후 그 항목에 click() 메소드를 붙여 hide() 메소드로 문장을 숨겼습니다. click() 메소드에 전달되었던 커스텀 함수가 문장을 클릭했을 때 실행되었습니다.
두 번째 jQuery click() 이벤트 예제
다음의 예제는 id 선택자로 가져온 버튼 항목에 클릭 이벤트를 추가하여 h2 항목을 숨기는 예 입니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery click 이벤트 예제</h2>
<p>
아래 제목 숨기기 버튼을 누르면 제목이 사라집니다.
</p>
<button id="myid">제목 숨기기</button>
<script>
$("#myid").click(function () {
$("h2").hide();
});
</script>
</body>
</html>이 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 버튼을 누르면 제목이 숨겨집니다.
이렇게 동작하는 이유는 버튼의 click() 메소드에 hide() 메소드를 사용해 h2 태그를 숨기는 함수를 추가했기 때문입니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [jquery] 자바스크립트 클래스 이름 추가하기 (0) | 2022.10.06 |
|---|---|
| [jquery] 자바스크립트 숨기기 보이기 (2) | 2022.10.05 |
| [javascript] 자바스크립트 팩토리얼 계산하기 (factorial) (2) | 2022.09.29 |
| [javascript] 자바스크립트 자판기 만들기 (0) | 2022.09.28 |
| [javascript] 자바스크립트 시계 만들기 (1) | 2022.09.28 |
댓글