Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery를 활용한 h태그 내용 변경 예제 본문
소개:
이번 예제에서는 jQuery를 사용하여 HTML 문서 내의 h태그의 내용을 변경하는 방법을 알아봅니다. 'h태그 다루기' 버튼을 클릭하면 해당 버튼의 텍스트가 '바꾸기!'로 변경되는 기능을 구현하여 jQuery의 기본 사용법을 익힐 수 있습니다.
h태그 내용 변경:
jQuery를 사용하여 h태그의 내용을 변경하기 위해서는 해당 h태그의 선택자를 사용하여 선택한 후, text() 메서드를 사용하여 내용을 변경합니다.
설정:
HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다.
예제: h태그 내용 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h태그 내용 변경 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>원래 텍스트</h1>
<button id="changeTextBtn">h태그 변경</button>
<script>
$(document).ready(function(){
$('#changeTextBtn').click(function(){
$(this).text('바꾸기!');
});
});
</script>
</body>
</html>
출력 결과:
<button id="changeTextBtn">바꾸기!</button>
설명:
위의 예제에서는 jQuery를 사용하여 'h태그 변경' 버튼을 클릭하면 버튼의 텍스트가 '원래 텍스트'에서 '바꾸기!'로 변경됩니다. $(document).ready() 함수를 사용하여 문서가 로드되면 버튼의 클릭 이벤트를 처리하도록 설정합니다. 클릭 이벤트 핸들러에서는 클릭된 버튼의 텍스트를 text() 메서드를 사용하여 변경합니다.
'프로그래밍' 카테고리의 다른 글
jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제 (0) | 2024.03.26 |
---|---|
jQuery를 사용한 input 태그 placeholder 변경 예제 (0) | 2024.03.26 |
Java에서 디렉토리 크기 계산하는 방법 (0) | 2024.03.26 |
Java에서 ArrayBlockingQueue를 활용한 스레드간 안전한 데이터 전달 방법 (0) | 2024.03.26 |
Java에서 AtomicLong을 활용한 원자적인 연산 처리 방법 (0) | 2024.03.26 |