안녕하세요.
이번에는 JQuery의 선택자에 대하여 간단하게 알아보겠습니다.
- parent
- $( 선택자 ).parent().함수() • 바로 위에 존재하는 하나의 부모 요소 선택
- parents
- $( 선택자 ).parents().함수() • 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
- next
- $( 선택자 ).next().함수() • 선택된 요소 바로 다음에 위치한 형제 요소 선택
- prev
- $( 선택자 ).prev().함수() • 선택된 요소 바로 이전에 위치한 형제 요소 선택
- children
- $( 선택자 ).children().함수() • 선택된 요소의 자식 요소 모두 선택
li 태그의 부모에 append 함수로 li 태그를 추가하는 코드입니다.
그리고 콘솔 로그를 이용하여 각 요소 선택자에 맞는 내용을 출력합니다.
<!DOCTYPE html>
<html lang="en, ko">
<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">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<title>JQuery</title>
<script>
function parent() {
// li의 부모 태그 선택 = ul 태그
console.log('parent', $('#li1').parent());
// li의 부모 태그의 부모 태그 선택 = body
console.log('parent.parent', $('#li1').parent().parent());
// li의 부모 태그의 다음 태그 선택 = <button>append</button>
console.log('parent.next', $('#li1').parent().next());
// li의 부모 태그의 이전 태그 선택 = <div>test</div>
console.log('parent.prev', $('#li1').parent().prev());
// li의 부모 태그의 자식에 <li> 태그 추가
$('#li1').parent().append("<li>parentAppend</li>");
}
</script>
</head>
<body>
<div>test</div>
<ul id="ul">
<li id="li1">기준 li</li>
</ul>
<button type="button" onclick="append();">append</button>
<button type="button" onclick="remove();">remove</button>
<button type="button" onclick="empty();">empty</button>
<button type="button" onclick="parent();">parent</button>
</body>
</html>
.
이상으로 JQuery의 선택자에 대하여 간단하게 알아보았습니다.
감사합니다.
반응형
'JQuery' 카테고리의 다른 글
| [JQuery] JQuery의 이벤트 리스너에 대하여 알아보기 (0) | 2023.01.27 |
|---|---|
| [JQuery] JQuery UI 및 switchClass()에 대하여 알아보기 (0) | 2023.01.26 |
| [JQuery] JQuery의 클래스 함수에 대하여 알아보기 (0) | 2023.01.25 |
| [JQuery] JQuery의 요소 추가, 삭제에 대하여 알아보기 (0) | 2023.01.23 |
| [JQuery] JQuery에 대하여 알아보기 (0) | 2023.01.22 |