jQuery의 click() 이벤트 함수는 사용자가 HTML 요소를 클릭할 때 특정 작업을 수행하도록 JavaScript 코드를 실행하는 데 사용됩니다. 아래는 가장 일반적으로 사용되는 click() 이벤트 함수 예제 입니다.
1. 버튼 클릭 시 텍스트 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery click() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myButton").click(function() {
$("#myText").text("버튼이 클릭되었습니다!");
});
});
</script>
</head>
<body>
<button id="myButton">클릭하세요</button>
<p id="myText">이곳의 텍스트가 변경됩니다.</p>
</body>
</html>
2. 리스트 항목 추가하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Add Item</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#addItem").click(function() {
$("#itemList").append("<li>새 항목</li>");
});
});
</script>
</head>
<body>
<button id="addItem">리스트 항목 추가</button>
<ul id="itemList">
<li>기존 항목 1</li>
<li>기존 항목 2</li>
</ul>
</body>
</html>
3. 토글 버튼으로 요소 보이기/숨기기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Toggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#toggleText").toggle();
});
});
</script>
</head>
<body>
<button id="toggleButton">토글</button>
<p id="toggleText" style="display: none;">이 텍스트는 토글됩니다.</p>
</body>
</html>
4. 특정 클래스의 모든 버튼에 이벤트 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Multiple Buttons</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".clickButton").click(function() {
alert($(this).text() + " 버튼이 클릭되었습니다!");
});
});
</script>
</head>
<body>
<button class="clickButton">버튼 1</button>
<button class="clickButton">버튼 2</button>
<button class="clickButton">버튼 3</button>
</body>
</html>
이 예제들은 jQuery의 click() 이벤트를 실용적으로 활용하는 데 기본적인 시작점이 될 것입니다. 원하는 대로 확장하거나 변경할 수 있습니다.
#jquery #html #javascript #event #function #click() #click함수
반응형
'프로그램' 카테고리의 다른 글
| jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
|---|---|
| jQuery의 hover() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
| jQuery를 사용하여 이미지를 반응형으로 만드는 방법 (0) | 2024.11.13 |
| jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가 (0) | 2024.10.30 |
| jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤 (0) | 2024.10.22 |
댓글