<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = 'div1'>
<div id = 'div2'>안녕 나는 div2야</div>
<div id = "div3">나는 div3야</div>
<div id = "div4">나는 div4야</div>
</div>
<!-- jquery 로딩 한 후에 script 작성, 만약 위에 작성할 경우 undifined $ 오류 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// 1. 자식요소 가져오는 방법
console.log($('#div1').children('div'))
// 2. 부모요소 가져오는 방법
console.log($('#div2').parents('div'))
// 3. 이전 요소들을 가져오는 방법
console.log($('#div4').prevAll())
// 4. 다음 요소들을 가져오는 방법
console.log($('#div2').nextAll())
</script>
</body>
</html>
자식요소 가져오기 결과
부모요소 가져오기 결과
이전요소 가져오기 결과
다음요소 가져오기 결과
'JavaScript' 카테고리의 다른 글
| [JavaScript] jQuery (키보드 이벤트 처리) (0) | 2022.05.31 |
|---|---|
| [JavaScript] jQuery (버튼 클릭 시 크기, 색상 변경) (0) | 2022.05.31 |
| [JavaScript] jQuery 사용법 (0) | 2022.05.31 |
| [JavaScript] 스타일 변경 (0) | 2022.05.31 |
| [JavaScript] 이미지 변경하기 (0) | 2022.05.30 |