jQuery에 대하여
jQuery는 JavaScript를 기반으로 한 빠르고 간편한 웹 프론트엔드 개발을 위한 오픈 소스 라이브러리입니다. 웹 개발자들이 HTML 문서 조작, 이벤트 처리, 애니메이션 효과, AJAX 기술 등을 보다 쉽게 구현할 수 있도록 도와줍니다.
jQuery 함수
-
html(): jQuery의 html() 함수는 선택한 요소의 내부 HTML 내용을 가져오거나 설정합니다. 선택한 요소의 HTML 내용을 읽어오려면 함수에 매개변수를 주지 않으면 됩니다. HTML 내용을 변경하려면 함수에 새로운 HTML 코드를 매개변수로 넘기면 됩니다. -
text(): text() 함수는 선택한 요소의 텍스트 내용을 가져오거나 설정합니다. HTML 태그를 무시하고 순수한 텍스트만을 다루며, 내부의 모든 태그들은 문자열로 반환됩니다. -
val(): val() 함수는 주로 입력 요소(input, select, textarea 등)에 사용되며, 해당 요소의 값을 가져오거나 설정합니다. 폼 요소의 값을 읽어오거나 값을 변경할 때 사용합니다.
jQuery를 통하여 태그 객체를 생성하는 방법:
새로운 HTML 요소를 동적으로 생성하고 싶을 때는 jQuery의 $() 함수를 사용하여 태그 객체를 생성할 수 있습니다. 생성하고자 하는 요소의 태그명을 문자열로 전달하고, 필요한 속성을 객체 형태로 추가할 수 있습니다. 예를 들면 다음과 같습니다.
// 새로운 <div> 요소를 생성하여 body 요소에 추가하는 예시
var newDiv = $('<div></div>');
newDiv.text('새로운 div 요소가 생성되었습니다.');
$('body').append(newDiv);remove()와 empty()의 차이:
-
remove(): remove() 함수는 선택한 요소 자체를 완전히 제거합니다. 선택한 요소와 해당 요소의 하위 요소들까지 모두 삭제됩니다. -
empty(): empty() 함수는 선택한 요소의 내부 HTML 내용을 모두 제거합니다. 선택한 요소의 자식 요소들은 모두 삭제되지만 요소 자체는 삭제되지 않습니다.
디지털 시계 만들기
HTML 구조와 CSS 스타일링을 먼저 만든 다음, jQuery를 사용하여 시간을 업데이트하는 스크립트를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>디지털 시계</title>
<style>
.clock {
font-size: 24px;
}
</style>
</head>
<body>
<div class="clock" id="digital-clock">00:00:00</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function updateClock() {
var now = new Date();
var hours = String(now.getHours()).padStart(2, '0');
var minutes = String(now.getMinutes()).padStart(2, '0');
var seconds = String(now.getSeconds()).padStart(2, '0');
var timeString = hours + ':' + minutes + ':' + seconds;
$('#digital-clock').text(timeString);
}
$(document).ready(function() {
updateClock();
setInterval(updateClock, 1000); // 1초마다 업데이트
});
</script>
</body>
</html>이 예제는 HTML에서 디지털 시계를 표시하며, jQuery를 사용하여 1초마다 시간을 업데이트합니다. setInterval 함수를 사용하여 1초마다 updateClock 함수가 호출되도록 설정하여 시계가 실시간으로 업데이트되도록 합니다.
유익한 글 잘 봤습니다, 감사합니다.