반응형
안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.
jQuery의 .parent() 사용법
parent() 함수는 jQuery에서 제공하는 함수 중 하나로,
선택한 요소의 부모 요소를 선택하는 데 사용됩니다.
이 함수를 사용하면 선택한 요소의 직계 부모 요소를 쉽게 선택할 수 있습니다.
간단한 예제로 버튼을 클릭 시 parent() 함수가 어떻게 작동하는지 알아봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>parent() 함수 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 부모 요소에 스타일 적용
$('#parentButton').click(function(){
$('#childElement').parent().css('border', '2px solid red');
});
});
</script>
</head>
<body>
<div id="parentElement">여기는 부모 요소
<p id="childElement">이것은 자식 요소입니다.</p>
</div>
<button id="parentButton">부모 요소 선택하기</button>
</body>
</html>
parent() 함수를 사용하여 'childElement'의 부모 요소를 선택하고,
선택한 부모 요소에 .css() 함수를 사용하여 스타일을 적용합니다.
따라서 'childElement'의 부모 요소인 'parentElement'에 빨간색 테두리가 적용됩니다.
반응형
'IT 소스 > jQuery' 카테고리의 다른 글
| [jQuery] .parseXML() - XML 데이터를 JavaScript 객체로 변환 (0) | 2024.03.01 |
|---|---|
| [jQuery] .parseJSON() - JSON 문자열을 JavaScript 객체로 변환 (1) | 2024.02.29 |
| [jQuery] .clone() - 요소를 복제 (0) | 2024.02.22 |
| [jQuery] .length - 선택한 요소의 개수를 반환 (0) | 2023.03.07 |
| [jQuery] .scrollTop() - 스크롤바 위치 조작 메서드 (0) | 2023.03.07 |