SeouliteLab
클릭 이벤트 처리를 위한 jQuery .click() 메소드 본문
jQuery의 .click() 메소드는 선택한 요소에 클릭 이벤트 핸들러를 추가하는 데 사용됩니다. 이를 통해 사용자가 요소를 클릭할 때마다 원하는 동작을 실행할 수 있습니다.
예제 1: 버튼 클릭 시 경고창 표시
<!DOCTYPE html>
<html>
<head>
<title>jQuery .click() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myButton').click(function(){
alert('버튼이 클릭되었습니다!');
});
});
</script>
</head>
<body>
<button id="myButton">클릭하세요</button>
</body>
</html>결과:
- 버튼을 클릭하면 "버튼이 클릭되었습니다!" 라는 경고창이 표시됩니다.
설명:
이 예제에서는 .click() 메소드를 사용하여 myButton ID를 가진 버튼에 클릭 이벤트 핸들러를 추가합니다. 버튼이 클릭되면 경고창이 표시됩니다.
예제 2: 이미지 변경
<!DOCTYPE html>
<html>
<head>
<title>jQuery .click() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#changeImage').click(function(){
$('#myImage').attr('src', 'new_image.jpg');
});
});
</script>
</head>
<body>
<img id="myImage" src="old_image.jpg" alt="이미지">
<button id="changeImage">이미지 변경</button>
</body>
</html>결과:
- "이미지 변경" 버튼을 클릭하면 이미지가 새 이미지로 변경됩니다.
설명:
이 예제에서는 .click() 메소드를 사용하여 changeImage ID를 가진 버튼에 클릭 이벤트 핸들러를 추가합니다. 버튼이 클릭되면 이미지의 src 속성이 새 이미지의 경로로 변경됩니다.
예제 3: 텍스트 변경
<!DOCTYPE html>
<html>
<head>
<title>jQuery .click() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#changeText').click(function(){
$('#myText').text('새로운 텍스트입니다!');
});
});
</script>
</head>
<body>
<p id="myText">기존 텍스트</p>
<button id="changeText">텍스트 변경</button>
</body>
</html>결과:
- "텍스트 변경" 버튼을 클릭하면 문장이 "새로운 텍스트입니다!"로 변경됩니다.
설명:
이 예제에서는 .click() 메소드를 사용하여 changeText ID를 가진 버튼에 클릭 이벤트 핸들러를 추가합니다. 버튼이 클릭되면 텍스트 요소의 내용이 새로운 텍스트로 변경됩니다.
예제 4: 배경색 변경
<!DOCTYPE html>
<html>
<head>
<title>jQuery .click() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#changeColor').click(function(){
$('body').css('background-color', 'lightblue');
});
});
</script>
</head>
<body>
<button id="changeColor">배경색 변경</button>
</body>
</html>결과:
- "배경색 변경" 버튼을 클릭하면 전체 페이지의 배경색이 연보라색으로 변경됩니다.
설명:
이 예제에서는 .click() 메소드를 사용하여 changeColor ID를 가진 버튼에 클릭 이벤트 핸들러를 추가합니다. 버튼이 클릭되면 body 요소의 배경색이 변경됩니다.
예제 5: 다중 요소에 이벤트 적용
<!DOCTYPE html>
<html>
<head>
<title>jQuery .click() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('.clickable').click(function(){
$(this).toggleClass('highlight');
});
});
</script>
<style>
.clickable {
cursor: pointer;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="clickable">요소 1</p>
<p class="clickable">요소 2</p>
<p class="clickable">요소 3</p>
</body>
</html>결과:
- 각 요소를 클릭하면 해당 요소의 배경색이 노란색으로 변경됩니다. 다시 한 번 클릭하면 배경색이 원래대로 돌아갑니다.
설명:
이 예제에서는 .click() 메소드를 사용하여 clickable 클래스를 가진 모든 요소에 클릭 이벤트 핸들러를 추가합니다. 각 요소를 클릭하면 해당 요소의 배경색이 노란색으로 변경됩니다. 다시 한 번 클릭하면 배경색이 원래대로 돌아갑니다.
jQuery의 .click() 메소드를 사용하면 웹 페이지에서 사용자의 상호 작용을 처리할 수 있습니다. 클릭 이벤트를 활용하여 요소의 동작을 변경하거나 사용자에게 피드백을 제공할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| jQuery .dblclick() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
|---|---|
| jQuery .contextmenu() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
| jQuery .change() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
| jQuery .blur() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |
| jQuery .bind() 메소드를 활용한 이벤트 처리 (0) | 2024.04.02 |