HOWTO · jQuery
jQuery에서 ID로 요소 가져오기
이 튜토리얼은 jQuery에서 ID로 요소를 가져오는 방법을 보여줍니다.
JavaScript에서는 document.getElementById() 메소드를 사용하여 ID로 요소를 가져올 수 있습니다. jQuery에서 $('#contents')를 사용하여 ID로 요소를 가져올 수 있습니다.
이 자습서에서는 두 가지 방법을 모두 사용하여 ID별로 요소를 가져오는 방법을 보여줍니다.
JavaScript에서 ID로 요소 가져오기
document.getElementById()는 ID로 요소를 가져오는 데 가장 많이 사용되는 방법입니다. 이 방법은 주로 웹 디자인에서 요소의 값을 변경하거나 해당 요소를 가져오는 데 사용됩니다.
이 메서드의 구문은 다음과 같습니다.
document.getElementById('id')
이 방법을 사용하여 ID로 요소를 가져오는 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in javascript
</title>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function() {
document.getElementById('delftstack').style.color = "green"
}, 3000);
</script>
</body>
</html>
위의 코드는 h1 요소 ID를 가져오고 시간 초과 시 색상을 변경합니다. 출력 참조:
jQuery에서 ID로 요소 가져오기
jQuery에는 ID로 요소를 선택하는 더 쉬운 방법이 있습니다. jQuery에는 고유한 ID를 가진 요소를 선택할 수 있는 ID 선택기가 있습니다.
이 메서드의 구문은 다음과 같습니다.
$("#idname");
ID를 통해 요소의 배경을 변경하는 jQuery의 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in JQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function () {
$('#delftstack').css("background-color", "yellow");;
}, 3000);
</script>
</body>
</html>
이 코드의 출력을 참조하십시오.
